Adaptar videos a tu diseño Responsive

Afortunadamente la mayoría de los sitios web (al menos los que de un tiempo a esta parte se han rediseñado o creado) implementan un diseño web responsive.

De igual manera, en el contenido de estos sites tiene cada vez más importancia el contenido audiovisual, y muy especialmente el video.

Sin embargo, aún es normal ver blogs con diseños, en principio ‘responsive’, en los que en cuanto se incrusta un video de Youtube (o Vimeo) el diseño se ve comprometido. El video sobresale de su contenedor y/o los elementos de la página se descolocan en cuanto se genera un post con video.

Lo cierto es que la solución para adaptar nuestros videos es bastante sencilla y pasa por crear un par de div que contengan el iframe y generar algunos css.

Obtener la URL a compartir en YouTube

Cuando vemos un video en YouTube que queremos compartir tenemos, entre otras, las opciones «Compartir este video» e «Insertar».

Insertar

Aparentemente, lo lógico sería utilizar la opción insertar, que directamente nos facilita el código del iframe. Podemos además especificar las dimensiones del video que queremos incrustar (y alguna opción más). Lo copiamos, lo pegamos en nuestro post y… listo.

…¿listo? No, claro que no. Este video tiene unas dimensiones concretas que, cuando lo incluyamos en nuestra plantilla responsive puede que se vea bien siempre y cuando el ancho del explorador sea mayor que el del video incrustado. Pero en cuanto intentemos ver el blog desde un dispositivo con un ancho inferior al del video veremos que los demás elementos de la página se descolocan o, en el mejor de los casos, el video sobrepasa el ancho de la pantalla y nos aparecen las indeseables barras horizontales de desplazamiento.

Compartir este video

En esta opción encontraremos el código que necesitaremos para identificar nuestro video.

Con esta URL crearemos el iframe del video de la siguiente manera:

Un truco: esto mismo no solo funciona con YouTube, también lo puedes usar, por ejemplo con Vimeo

La estructura del código

Ahora que tenemos la dirección del video vamos a insertarlo. Para ello necesitaremos:

• Incluir la url en un iframe
• Incluir el iframe en un div que defina sus dimensiones

Así, la estructura básica sería:

Estilos CSS

Ahora que tenemos la estructura básica de nuestro HTML tendremos que definir los valores de estilo para que esta estructura adapte nuestro video al ancho del navegador.

Que el iframe ocupe todo el contenedor

Al iframe le aplicaremos un position absolute alineandolo arriba a la izquierda y con un ancho y alto del 100%. Así, lo que conseguimos es que ocupe todo el espacio que su contenedor le permita (esto es, el div con class=»video-container»)

Posicionamos el contenedor

En el caso del contenedor tendremos que definir un position: relative, para que el comportamiento del iframe (con absolute) sea el esperado. Además, definiremos un width: 100% (para que ocupe todo el ancho del contenedor en el que se encuentre) El pading-bottom se utiliza para ayudar a que la proporción del video se mantenga constante. En este caso utilizaremos 56.25% porque el video está en formato 16:9. Así 9/16=0,5625. Si el video estuviese en formato 4:3 el padding-top debería ser de 75%. (Os recomiendo sobre mantener las proporciones con CSS un artículo de @ksesocss)

.video-container {
padding-bottom:56.25%;
height:0; overflow: hidden;
position: relative;
}

.iframe {
position: absolute;
height:100%
width:100%
top:0;
left:0;
}

Para los curiosos, la url del video utilizado en el ejemplo corresponde a la presentación del campeonato de Surf de Pantín 2013. Aquí podeís verlo:

Otro truco:

Esto es válido para hacer adaptable los videos de YouTube o Vimeo (tal y como dijimos antes). Pero también valdrá para incrustar cualquier iframe en vuestro diseño responsive. Por ejemplo un mapa de Google Maps: