[contact-form-7 404 "Not Found"]

Nombre (requerido)

Correo electrónico (requerido)

Asunto

Mensaje

16 abril, 2016
By Proyd S.L css iframe

Cómo Hacer un iFrame Fluido y Responsive

<div class="video">
     <iframe width="640" height="360" src="//www.youtube.com/embed/1YcIJU5sTL0" frameborder="0" allowfullscreen></iframe>
</div>

Aquí seguramente te chocará el valor del padding de 56,25%. Esto se ha calculado dividiendo los valores que aparecen en el HTML de width=640 y height=360

.video {
   position: relative;
   padding-bottom: 56.25%;
   overflow: hidden;
}

Si no diéramos este padding, lo que sucedería es que el vídeo no se vería. Y si cambiamos los valores, veremos que si lo hacemos más grande empieza a aparecer espacio en blanco y si le damos menos que se corta parte de la pantalla del vídeo.

El siguiente paso es dar formato al iframe para que ocupe el 100% del espacio del elemento padre con la clase video:

.video iframe
 {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

fuente: http://www.esandra.com/como-hacer-un-iframe-fluido-y-responsive/
fuente2: http://cybmeta.com/como-hacer-un-iframe-responsive

Share:

Deja un comentario