HTML5

Cómo hacer responsive vídeos de Youtube, Vimeo y similares en iframes

Sencillo post en el que vamos a ver cómo hacer responsive vídeos de Youtube, Vimeo y similares cuyo código esté en iframes iframes. Estas plataformas a la hora de ofrecernos el código nos dan el iframe con un tamaño fijo que luego nos puede provocar problemas con las dimensiones de pantalla. Otros post interesantes:

Cómo hacer responsive vídeos de Youtube y Vimeo con CSS

Os muestro el código CSS necesario:

.div_contenedor {
 position: relative;
 padding-bottom: 56.25%; /*panorámico*/ padding-top: 25px;
 height: 0;
}
.div_contenedor iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Os explico la CSS:

El primer bloque corresponde al div contenedor del iframe de Youtube, Vimeo u otro similar con código iframe.
Dicho vídeo debe ser de formato 16:9 (Horizontal, panorámico).
El segundo bloque cambia los tamaños por defecto del iframe mediante CSS.

Ejemplo HTML para hacer responsive vídeos de Youtube

Os muestro el código de ejemplo para el caso de un vídeo de Youtube:

<div class="div_contenedor">
    <iframe width="838" height="470" src="https://www.youtube.com/embed/OjQ5FeDxNrA?enablejsapi=1" frameborder="0"></iframe>
</div>

Con este código y la CSS anterior ya tendríamos listo nuestro vídeo responsive, el nombre de la clase del div y la CSS ‘div_contenedor’ podemos cambiarlo por el que queramos, pero los nombres siempre deben coincidir.

Ejemplo HTML para hacer responsive vídeos de Vimeo

Aquí un nuevo código para el caso de los vídeos de Vimeo:

<div class="div_contenedor">
    <iframe src="https://player.vimeo.com/video/246458471" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="https://vimeo.com/246458471">Mexico</a> from <a href="https://vimeo.com/facedumonde">Face du Monde</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>