Tenemos una página web (por ejemplo, un blog) en la cual necesitamos insertar vídeos de YouTube, Vimeo, etc... La cosa parece muy fácil: vamos a la página en cuestión y usamos el código de “Embeber” que nos dan:
Ahora vamos a la página y metemos ese simple iframe y listo: tenemos el vídeo en la página y YouTube, Vimeo o quien sea se encarga de mostrarlo en el formato más adecuado para el dispositivo con el que se visualice la página.
Los problemas comienzan cuando necesitamos que ese vídeo se redimensiones automáticamente según la resolución o el tamaño de la pantalla del dispositivo que se conecte para verlo. Es decir, cómo conseguir que el vídeo se redimensione de manera fluida, adaptándose automáticamente a los cambios de tamaño de la página, al más puro estilo Responsive Web Design.
El código que nos dan para el marco embebido lleva un ancho y un alto fijos. El primer intento es simplemente quitarle esos atributos. Esto no sirve porque entonces el tamaño será el mínimo para un iframe y no se verá nada (saldrá cortado y con barras de scroll).
El segundo pensamiento es: le pongo un ancho del 100% y así éste se adaptará al ancho del contenedor y por lo tanto se verá siempre apropiadamente, según el espacio disponible. ¡Uyyy, casí!
El problema de hacer esto es que, en efecto, el ancho se va a adaptar a su contenedor, redimensionándose automáticamente. Pero ¿qué pasa con la altura?: pues que permanece fija y entonces el vídeo se va a ver deformado según el ancho que tengamos en cada momento. Algo inaceptable.
La tercera intentona sería utilizar JavaScript. Como sabemos la relación de aspecto que debe tener el vídeo (por ejemplo, 16:9 o 4:3, según el caso), lo que podemos hacer es escribir código JavaScript que detecte el redimensionamiento del marco interno contenedor del vídeo, y que automáticamente le fije mediante código el alto apropiado. Esto funcionaría, pero es complicado y propenso a errores.
¿No habrá una forma más sencilla de hacerlo y que no nos obligue a programar?
La respuesta es, claro está, que sí: la hay.
Hacer vídeos fluidos con CSS puro
La manera de conseguirlo es utilizando sabiamente las propiedades de las reglas CSS, y en especial todo lo referente al modelo de cajas y al posicionamiento de elementos, dos de las cuestiones de HTML/CSS más importantes y a la vez más incomprendidas por los programadores.
Para conseguirlo lo que haremos es envolver al iframe del vídeo en un elemento contenedor cualquiera, por ejemplo un <div> o un <span>. El vídeo quedaría algo parecido a esto:
<div class="video">
<iframe src="http://www.youtube.com/embed/lWGnB0CrKLU?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
Como vemos hemos retirado los atributos width y height del iframe.
Ahora vamos a definir dos reglas CSS para ambos elementos, como sigue (ahora las explico):
.video {
position:relative;
width:100%;
height:0;
padding-bottom:56%;
}
.video iframe {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
Fíjate en lo que hemos hecho:
Primeramente, el elemento contenedor tiene un ancho del 100%, por lo que adecúa éste a su contenedor, que es justo lo que queremos. Sin embargo tiene una altura de 0, es decir ¡no tiene altura!. Además tiene una posición relativa (aunque no especifica coordenadas algunas) y, aquí viene lo interesante, tiene un relleno por abajo del 56%. ¿por qué?
El 56% es la relación de aspecto que queremos en el vídeo (en este caso un 16:9, es decir, que la altura sea aproximadamente el 56% del ancho). Con ese porcentaje conseguimos que el contenedor tenga siempre el tamaño apropiado, con las proporciones adecuadas. Pero ¿por qué se lo ponemos en el relleno inferior y no directamente en la altura?.
El motivo es el efecto conocido como “desplome” de elementos HTML (más conocido como “colapso”, del inglés “collapse”, pero es una mala traducción). En mi curso de HTML(5) y CSS(3) se trata a fondo este asunto y sus posibles soluciones (es largo de explicar), pero baste decir aquí que si le ponemos al contenedor una altura en porcentaje, lo que conseguiremos en la práctica es un elemento de altura nula: no se verá nada o, si acaso, una línea delgada.
Sin embargo, si le ponemos el 56% al relleno inferior, lo que tendremos es un elemento del tamaño justo que necesitábamos, gracias a la magia del modelo de cajas. En concreto, la especificación CSS indica que el relleno de abajo, si se especifica en porcentaje, se referirá siempre al ancho de la caja, por lo que al especificarlo como arriba, conseguimos exactamente lo que estábamos buscando: un % respecto al ancho, o sea, una relación de aspecto.
De acuerdo. Ahora veamos por qué tiene una posición relativa. El posicionamiento de elementos es muy engañoso y parece fácil, pero tiene mucho más fondo del que parece, por lo que es una de las cuestiones peor entendidas por los programadores y diseñadores web. Una vez más, en mi curso se trata esto a fondo (tiene mucho que contar), pero en este caso el único propósito de poner position:relative; en las propiedades del elemento contenedor es que se cree un sistema de coordenadas para poder posicionar el iframe dentro. No se trata realmente de posicionar el contenedor, como pudiera parecer.
Con estas bases, finalmente, es sencillo conseguir que el iframe se adapte. Lo único que necesitamos es colocarlo en la esquina superior izquierda del contenedor, y hacer que ocupe el 100% del espacio disponible en la caja de éste. Al posicionarlo de manera absoluta podemos hacer que trascienda los límites de la caja de contenido del elemento que tiene la clase “video” (y que es 0 de altura en realidad), ocupando también el relleno de la misma.
Con esto ya tenemos el problema resuelto y nuestro vídeo se adaptará siempre a cualquier dimensión que tenga la página en la que está embebido.
Puedes comprobarlo con el vídeo que he puesto a continuación:
Intenta cambiar el tamaño de esta página redimensionado tu navegador. Verás que el vídeo mantiene todo en todo momento la misma proporción entre el ancho y el alto, que es lo que queríamos :-)
¡Espero que te resulte útil!