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%;
}
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!
Alberto
¡Estupendo!.
Muchas gracias.
Daniel
Moisés, lo acabo de probar y va perfecto!
Muchas gracias,
Saludos
Daniel
Henry
Exelente amigo muchas gracias por ese pequeño gran aporte me salvaste la vida exitos ers un master…
AstiVPL
Esto funciona de lujo!!! Muchas gracias!!!
Carlos
Muchas gracias estaba buscando como hacer esto, funciona perfectamente bien!
Javier
Buenas pero en que archivos hay que insertarlo exactamente, perdonad, pero estoy un poco verde. Muchas gracias de antemano 😉
Saludos
Moisés Varela
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.
Melkin
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
Dimas
Perfecto codigo, para shortcode de wordpress, y tema responsive
Juan
Muchas gracias, eres un genio
Carlos Gallego Guzmán
OOOh muchas gracias por el consejo me ha resultado muy útil ;
Victor Omar García
Wowww
Excelente aportación Moisés Varela, resolví el problema muy fácil.
Muchas gracias por compartirlo.
Saludos y más éxitos.
CLAUDIA BARRERO
MUCHAS GRACIAS!!!!!!!!
Genaro Chinchay
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.
juan zeta
genial funciona de lujo , gracias por la aportacion
Darío
Sencillo y perfecto. Gracias 🙂
Víctor
Muchas gracias, me ha venido de perlas! Saludos!
David
Gracias , amigo me sirvio eres genial
Angello
Espectacular… muy bueno
Pau Company
problema resuelto. Muchas gracias