En mi trabajo toco muchos temas, así que aquí contaré las cosas más relevantes o que puedan ser de interés, habrá cosas del día a día para cualquier usuario y temas algo más especializados para un perfil más técnico

Diseño web, Web

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

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

  1. Eric

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

  2. Alberto

    ¡Estupendo!.
    Muchas gracias.

  3. Moisés, lo acabo de probar y va perfecto!

    Muchas gracias,

    Saludos
    Daniel

  4. Henry

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

  5. AstiVPL

    Esto funciona de lujo!!! Muchas gracias!!!

  6. Carlos

    Muchas gracias estaba buscando como hacer esto, funciona perfectamente bien!

  7. Javier

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

  8. Comentario del autor

    Hola Javier, la primera parte tendrás que hacerlo siempre que pongas un vídeo, y la segunda en la hoja de estilos css de tu sitio web.

  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

  10. Perfecto codigo, para shortcode de wordpress, y tema responsive

  11. Juan

    Muchas gracias, eres un genio

  12. OOOh muchas gracias por el consejo me ha resultado muy útil ;

  13. Wowww

    Excelente aportación Moisés Varela, resolví el problema muy fácil.

    Muchas gracias por compartirlo.

    Saludos y más éxitos.

  14. CLAUDIA BARRERO

    MUCHAS GRACIAS!!!!!!!!

  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.

  16. genial funciona de lujo , gracias por la aportacion

  17. Darío

    Sencillo y perfecto. Gracias 🙂

  18. Víctor

    Muchas gracias, me ha venido de perlas! Saludos!

  19. David

    Gracias , amigo me sirvio eres genial

  20. Angello

    Espectacular… muy bueno

  21. problema resuelto. Muchas gracias

Deja un comentario

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