En este post express, en el que voy a ir bastante al grano, te explico cómo insertar vídeos responsives en un sitio web, y de paso aprovecharé para contestar a uno de mis clientes, que me pregunta: «cómo quitar las barras negras que salen arriba y abajo de los vídeos del blog en algunos dispositivos».
¡Y atención! que es posible que a ti también te esté pasando 😳
Pero como es el propio WordPress quien inserta los vídeos de esta manera con el famoso copy/paste de la URL, igual has pensado que este comportamiento era normal.
Claro está que, si utilizas editores visuales como Elementor, Bakery Page Builder, Divi… no tendrás este problema con la adaptabilidad de los vídeos. Pues todos llevan algún elemento de bloque o shortcode para embeber vídeos de YouTube y Vimeo, que los mantendrá con las proporciones adecuadas en todas las resoluciones.
Realmente el fallo viene cuando trabajas sin editor visual (tal vez en el blog) o en una web HTML, en la que solo copiar y pegar la URL o el iframe de inserción del vídeo, no le conferirán la propiedad de adaptarse a los dispositivos.
Es más, el vídeo solo se verá proporcionado a un tamaño fijo; al que tenga el iframe del código de inserción copiado 😳
Te puede interesar
Cómo hacer que un iframe sea responsive
Si has leído este post sobre el uso de HTML5, sabrás que los <iframe> se utilizan para mostrar parte de una web dentro de otra. Es lo que ocurre cuando insertamos vídeos de YouTube, Vimeo… o mapas de Google en un sitio web.
Si observas cómo es el código HTML de un vídeo de YouTube embebido en una web…
<iframe src="https://www.youtube.com/embed/op5FxEs1aR0" width="1280" height="690" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
…encontraremos una pega; que los iframes necesitan que sus atributos width y height (ancho y alto) estén definidos. Lo que hace que no sean responsives y presenten desajustes sobre todo en altura.
Y da igual que pegues la URL o el código de inserción del vídeo; WordPress lo interpretará igual.
Para hacer que un iframe sea responsive no nos queda más remedio que meterlo dentro de un elemento contenedor.
Solución para insertar vídeos responsives
Para que nuestro vídeo responsive se adapte a todos los tamaños de pantalla y mantenga el «aspect ratio» de 16:9 (proporción), copia y pega este código (sustituyendo mi iframe por el tuyo):
<div class="contiene-video">
<iframe src="https://www.youtube.com/embed/op5FxEs1aR0" width="1280" height="690" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
Y ahora el CSS, que ya sabes dónde tienes que colocarlo.
.contiene-video {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.contiene-video iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Si tienes curiosidad por saber qué hemos hecho, básicamente le hemos dicho al iframe que ocupe todo el ancho y el alto de su contenedor, y al contenedor que ocupe el 100% de ancho y un 56,25% de este en altura, que es el aspect ratio para 16:9.
Con esto, tus vídeos mantendrán las mismas proporciones, y por tanto serán responsives.
Si te ha gustado comparte
About the Author
