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

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

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

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

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%;
}

Sobre el autor

Ingeniero informático especializado en programación web, dedicado al diseño de páginas web, tiendas online, aplicaciones a medida. Trabajo con PHP, MySQL, Javascript, Jquery, Bootstrap, HTML, CSS, Prestashop y Wordpress.

21 comentarios

  1. Eric  - 16 julio 2014 - 21:00
    /

    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  - 25 septiembre 2014 - 19:28
    /

    ¡Estupendo!.
    Muchas gracias.

  3. Daniel  - 8 diciembre 2014 - 3:50
    /

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

    Muchas gracias,

    Saludos
    Daniel

  4. Henry  - 18 enero 2015 - 4:44
    /

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

  5. AstiVPL  - 26 febrero 2015 - 14:02
    /

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

  6. Carlos  - 6 marzo 2015 - 9:21
    /

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

  7. Javier  - 28 abril 2015 - 7:34
    /

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

  8. Moisés Varela  - 28 abril 2015 - 17:56
    /

    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. Melkin  - 18 junio 2015 - 16:32
    /

    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. Dimas  - 30 julio 2015 - 6:02
    /

    Perfecto codigo, para shortcode de wordpress, y tema responsive

  11. Juan  - 21 noviembre 2015 - 0:34
    /

    Muchas gracias, eres un genio

  12. Carlos Gallego Guzmán  - 19 marzo 2016 - 11:31
    /

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

  13. Victor Omar García  - 20 agosto 2016 - 23:39
    /

    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  - 7 octubre 2016 - 18:51
    /

    MUCHAS GRACIAS!!!!!!!!

  15. Genaro Chinchay  - 15 octubre 2016 - 3:55
    /

    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. juan zeta  - 11 enero 2017 - 21:08
    /

    genial funciona de lujo , gracias por la aportacion

  17. Darío  - 23 febrero 2017 - 13:12
    /

    Sencillo y perfecto. Gracias 🙂

  18. Víctor  - 1 junio 2017 - 20:58
    /

    Muchas gracias, me ha venido de perlas! Saludos!

  19. David  - 15 diciembre 2017 - 22:07
    /

    Gracias , amigo me sirvio eres genial

  20. Angello  - 18 diciembre 2017 - 6:00
    /

    Espectacular… muy bueno

  21. Pau Company  - 20 diciembre 2017 - 21:14
    /

    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.

Sígueme en

Volver arriba