Ahora sabrás como hacer que los vídeos de YouTube o Vimeo sean responsive en una web o blog, para que así no se perjudique su visualización desde un movil.
Es obvio que cada vez son mas las personas que aprecian las páginas web de internet a través de sus pequeños aparatos. Entonces los que administramos un sitio, debemos ofrecer en estos también la mejor usabilidad.
Lo primero que se viene a la mente cuando se habla de optimizar una página web para móviles, posiblemente es una plantilla responsive, sin mas. Pero en realidad, esta gran labor se basa en que toda la materia de la web con la que trabajamos se optimice.
El detalle muchas veces, los plugins o gadgets.
En su mayoría son independientes de la plataforma donde administras tu página web. Estos pueden llegar a ser el inconveniente del tema responsive.
Los que flotan (los que no están en linea o dentro del contenido) son los que mas preocupaban. Pero creo que ya no por 2 cosas:
- Muchas empresas que los ofrecen ya lo hacen preparándolos para cualquier resolución de pantalla.
- Ridículamente es peor la situación con algunos plugins dentro del contenido. Ejemplo: con los vídeos de YouTube.
Videos de YouTube o Vimeo responsive:
Los vídeos de Youtube o Vimeo se insertan en una página web mediante un iFrame, este en su estado natural conserva un tamaño sin importar si el diseño del sitio si es adaptable o responsive.
Seguro también te disgusta que estos contenidos se vean en un móvil de la misma forma como se verían desde un ordenador de escritorio.
Tu diseño esta optimizado pero la visualización de vídeos no
¿Esto como se resuelve? 
Para que el iFrame del vídeo a insertar se adapte a cualquier resolución de pantalla (o se vuelva mágicamente elástico) lo debemos colocar dentro un div (un contenedor) y después añadirle un poco de CSS.
Si no sabes los significados de estos términos puedes aprender aquí y aquí. 🙂
Entonces el código html solucionador es este:
Configurando las cosas ahora 🙂
Lo que en el código esta de verde azulado (KK9bwTlAvgo) es la identificación del vídeo en YouTube. Sustitúyela por la del que vas a insertar.
En su URL es muy fácil saber cual es:
https://www.youtube.com/watch?v= <—- lo que sigue
Si se tratara de un vídeo en Vimeo tan solo es necesario cambiar en el código html la fuente del contenido o src.
Esto: «http://www.youtube.com/embed/KK9bwTlAvgo»
Por esto: «http://player.vimeo.com/video/69977069«
Lo que se encuentra de verde azulado igualmente seria la ID del vídeo, así de fácil.
Atención: Con un solo código estamos embebiendo CSS directamente en el HTML, lo recomendado es que si el gestor que utilizas te proporciona acceso al archivo .css de tu sitio web añadas los estilos allí.
¿Cual es el CSS del vídeo?
Todo lo que esta entre <style> y </style>
Al poner lo anterior dentro del archivo .css, obviamente esas etiquetas tendrían que borrarse (<style> y </style>)
Si la memoria no me falla, se puede entrar al archivo .css en los siguientes programas de creación web full-online:
Weebly, emiweb, Webnode (1.0), Duda.
En los estilos se utiliza el valor 56.25% para padding-bottom ya que el formato del vídeo es wide (apaisado o alargado), pero si no fuera wide este valor debería ser 75%.
Un vídeo de YouTube responsive
Finalmente eso seria todo de mi parte 🙂
Si te ha resultado útil el articulo… Compártelo, saludos 
.
