Psychotik

solucionando marrones desde 2003

Adaptar videos de youtube/vimeo en diseños responsive

Pertenece a  Destacados, Tips rápidos  el 5 noviembre

Gracias a Javier Cristobal de limni.net por recomendarme tratar este temilla. Si queréis conseguir que vuestros videos embebidos de Youtube o Vimeo se adapten perfectamente a vuestros diseños adaptables, la solución es bastante fácil, jugamos con position, padding y height y asunto solucionado.

Código HTML:
/* Creamos un div donde contener el código iframe de nuestro video */
‹div class="bloque"›
   ‹iframe src="aquí el código iframe de vuestro video"›‹/iframe›
‹/div›

Código CSS:
/* Al div le decimos que tenga posición relativa, altura automática (0px también funciona) y un padding-top del 56.25%, equivale aproximandamente al formato 16:9 */
.bloque{
   position:relative;
   width:100%;
   heigth:auto;
   padding-top:56.25%
}
/* Al iframe le decimos que se posicione en absolute con un 100% de altura, así el video queda adaptado a ancho y alto, simple */
.bloque iframe{
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
}

Resultado:

/* Entrad desde móvil o redimensionad la ventana del navegador */


Volver atrás

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Lo está petando!

Volver arriba
Utilizamos cookies para garantizar que tu experiencia en Psychotik sea la mejor posible
Saber más sobre nuestras galletitas »