Cómo insertar vídeos responsives «de verdad» en cualquier tipo de web

Insertar vídeos responsives en una página web

Ernesto BarrachinaDesarrollo webDeja tu comentario

5/5 - (2 votos)

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».

Ejemplo de vídeo que no es responsive

¡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 😳

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

Ernesto Barrachina

Facebook Twitter Google+

Me dedico al diseño web Valencia y tengo pasión por las herramientas de diseño gráfico, así como por compartir tips de diseño web en forma de consejos y tutoriales "para todos los públicos".

Deja una respuesta

INFORMACIÓN BÁSICA SOBRE LA PROTECCIÓN DE TUS DATOS

Todos las datos marcados con asterisco (*) son obligatrorios. Si no los indicas no podrás comentar en el blog.

Responsable de la web: Ernesto Barrachina Rubio (EBWEB) Finalidad de los datos: Gestionar los comentarios que realizas en este blog. Legitimación: Consentimiento del interesado. Destinatarios: No se comunican los datos a nadie más. Plazo de conservación de los datos: Hasta que no se solicite su supresión por el interesado. Los datos que me facilitas estarán ubicados en los servidores de Dinahosting (mi proveedor de hosting) fuera de la UE en Otros. Dinahosting está ubicado en la UE, con los niveles de protección adecuados según Comisión de la UE. Ver política de privacidad de Dinahosting. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en ebweb@ebweb.es así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi página web: https://ebweb.es, así como consultar mi política de privacidad.

Tu comentario quedará pendiente de moderación. Vuelve en dos o tres días para ver la respuesta y tu comentario publicados.

Muchas gracias por comentar ☺