Seleccionar página

youtube_responsive

Seguro que alguna vez habréis necesitado incrustar un video de YouTube en una web. Con esto de los dispositivos móviles, ahora se añade una nueva necesidad a la hora de insertar cosas en nuestras plantillas: que sean “responsive“, es decir, que se adapte al tamaño de la pantalla en cada momento.

Esto es “fácil” de hacer con CSS en cualquier elemento HTML, pero, ¿Qué ocurre con los videos incrustados? ¿Se puede hacer que un video sea “responsive“?

Por lo general, al incrustar un video, establecemos los valores width y height de forma estática, lo cual es catastrófico en resoluciones inferiores al tamaño del video en cuestión, porque lo que ocurre es que se descuadra toda la página.

¿Y ahora qué? ¿No podemos arreglar esto? , si que podemos. Con un poco de CSS:

Vamos a incluir el <iframe> dentro de un div al que llamaremos video-container, y al que aplicaremos las normas de arriba: position relative, padding-bottom entre 50 y 60%, padding-top al gusto, height 0 y overflow hidden. A los elementos internos, ya sean iframe, object o embed (distintas formas de insertar un video), le aplicamos las normas de abajo, especificando position absolute, top y left a 0 para que esté en la esquina superior izquierda del div video-container, y width y height 100%, lo que hará que siempre estén al 100% del tamaño del div video-container.

Modificamos nuestro HTML:

Y listo, nuestros videos no descuadrarán la vista cuando naveguemos por webs con resoluciones menores.

“No documentes el problema; arréglalo”
     .- Atli Björgvin Oddsson