< Video responsivo vertical y horizontal />

← CSS ⌂ Home

Lograr un video responsivo es sencillo aplicando el concepto "Aspect Ratio" pero lo que se olvida comúnmente es hacerlo responsivo verticalmente, en el siguiente post veremos los pasos para lograrlo.

Lo primero es pegar el iframe de YouTube o cualquier plataforma de video en nuestro template de html y hacer que se encuentre dentro de un div contenedor.

<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/NR351WlGC4I?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

Y el CSS necesario para aplicar el concepto de aspect ratio será el siguiente.

Nota: el reproductor de video de YouTube tiene una proporción 16:9.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
}

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

Logrando el siguiente resultado: Demo 1.

Un video responsivo a su 100% de ancho manteniendo la proporción 16:9 del video. Si haces resize a la pantalla de forma horizontal verás que la proporción se mantiene.

La clave está en la propiedad padding-bottom del contenedor que mantendrá la altura adecuada, la relación es una simple regla de 3.

16 (ancho) -> 100%    queremos mantener el ancho al 100
9 (alto) -> 56.25%       

(9 * 100)/16 = 56.25% hace que la altura del contenedor sea el 56.25% del ancho logrando mantener la relación 16:9 del video.

Ahora el detalle que falta solucionar es el responsivo vertical, intenta hacer resize de manera vertical y verás lo que ocurre. El video no adapta su tamaño. Para solucionarlo haremos uso de las unidades viewport de CSS.

El código HTML necesita otro contenedor el cual mantendrá la relación vertical del video al 100% con respecto a el viewport (la pantalla).

<div class="video-hero">
    <div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/NR351WlGC4I?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Y agregamos al código CSS lo siguiente.

.video-hero {
    max-width: 177.77vh; /* 16/9 = 1.7777 */
}

Logrando el siguiente resultado: Demo 2.

Ahora la relación que debemos mantener es 16/9 = 1.7777 y hacer uso de las unidades verticales de viewport vh. Un video que ahora será responsivo de forma vertical manteniendo la relación 16:9.