responsive design

Cómo hacer responsive los vídeos de Youtube o Vimeo

por
responsive design
Designed by Freepik

Hoy en día, cualquier diseño web debe ser adaptable al dispositivo con el que se visualiza, ya sea el PC, tablet, móvil, … es lo que se llama Responsive Design, esto se consigue mediante las «media queries» de CSS, pero, ¿cómo hacer responsive los vídeos de Youtube o Vimeo que se insertan mediante un «iframe»?

Pues bien, para que el iframe se adapte necesitamos crear un div contenedor y, por supuesto, unos estilos css:

<div class="video-container">
   <iframe width="420" height="315" src="//www.youtube.com/embed/FMNMDI9lBVs" frameborder="0" allowfullscreen></iframe>
</div>

.video-container {
position: relative;
padding-bottom: 56.25%; /* Para que el contenedor tenga relación de aspecto 16/9 */
padding-top: 30px;
height: 0;
overflow: hidden;
}

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

21 comentarios en «Cómo hacer responsive los vídeos de Youtube o Vimeo»

  1. Te has sembrado, lo he utilizado para agregar un vídeo en la descripción corta de prestashop y queda perfecto. Todos mis respectos!

  4. Exelente amigo muchas gracias por ese pequeño gran aporte me salvaste la vida exitos ers un master…

  7. Buenas pero en que archivos hay que insertarlo exactamente, perdonad, pero estoy un poco verde. Muchas gracias de antemano 😉
    Saludos

  9. Hola, soy estudiante de diseño web, estaba como loco para poder cambiar de el tamaño de los videos de youtube en mi proyecto, me salvaste de varias horas de trabajo perdido XD saludos y gracias desde C.R

  15. Hola buen día.
    Muy buen aporte, trabajar con responsive en estos tiempos es muy necesario.
    También manejo CSS y HTML para cualquier apoyo estaré para aportar.

    Saludos.
    Genaro Chinchay.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.