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%;
}
problema resuelto. Muchas gracias
Espectacular… muy bueno
Gracias , amigo me sirvio eres genial
Muchas gracias, me ha venido de perlas! Saludos!
Sencillo y perfecto. Gracias 🙂
genial funciona de lujo , gracias por la aportacion
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.
MUCHAS GRACIAS!!!!!!!!
Wowww
Excelente aportación Moisés Varela, resolví el problema muy fácil.
Muchas gracias por compartirlo.
Saludos y más éxitos.
OOOh muchas gracias por el consejo me ha resultado muy útil ;
Muchas gracias, eres un genio
Perfecto codigo, para shortcode de wordpress, y tema responsive
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
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.
Buenas pero en que archivos hay que insertarlo exactamente, perdonad, pero estoy un poco verde. Muchas gracias de antemano 😉
Saludos
Muchas gracias estaba buscando como hacer esto, funciona perfectamente bien!
Esto funciona de lujo!!! Muchas gracias!!!
Exelente amigo muchas gracias por ese pequeño gran aporte me salvaste la vida exitos ers un master…
Moisés, lo acabo de probar y va perfecto!
Muchas gracias,
Saludos
Daniel
¡Estupendo!.
Muchas gracias.
Te has sembrado, lo he utilizado para agregar un vídeo en la descripción corta de prestashop y queda perfecto. Todos mis respectos!