Vídeos responsive en cualquier pantalla

Hoy en día es muy común que en nuestros blogs y paginas web, insertemos vídeos embebidos para enriquecer nuestro contenido. Lo más normal es que para ello utilicemos material de servicios como Youtube, Vimeo y otros tantos. Cuando acudimos a estos servicios y solicitamos el código de inserción obtendremos algo similar a esto <iframe width="854" height="510" src="https://www.youtube.com/embed/Bo8815AeU7E" ...>Y si nos fijamos, no es más que un iframe con unas medidas predeterminadas. Estas medidas van a provocar que dicho iframe siempre tenga ese tamaño, lo que implica que no va a adaptarse a todas las resoluciones, tamaños de pantalla y terminales.

¿Cómo lo solucionamos?

Existe multitud de plugins que te pueden hacer la vida mucho más fácil. Por ejemplo nosotros hasta hace muy poco utilizábamos VideoJS. Pero no estábamos muy contentos con su funcionamiento, por ello hemos optado por hacerlo Geeky Theory Style, osea desde 0 y a nuestra manera. Realmente es bastante sencillo. Para empezar deberemos crear un archivo CSS o añadir el siguiente CSS a alguno existente. .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }Y de ahora en adelante basta con rodear el código de inserción con esta etiqueta. <div class="video-container"> <iframe width="854" height="510" src="https://www.youtube.com/embed/Bo8815AeU7E" ...> </div>

Resultado

De esta manera tendremos ya todo listo. Os pongo un ejemplo de como quedaría. https://www.youtube.com/watch?v=Bo8815AeU7E&w=854&h=510 Como vemos, muchas veces es incluso más fácil y mucho mas limpio hacer las cosas nosotros mismos antes que utilizar plugins de terceros.

Bonus

Este método tiene la ventaja de no discriminar solamente por YouTube, sino que cualquier contenido que insertemos en un iframe será responsive dentro de nuestra web ya sea Vimeo, Youtube, Slides... ¿Qué os parece?¿Bastante fácil verdad?