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