Cómo Hacer un iFrame Fluido y Responsive

El otro día estaba maquetando la nueva landing page de mi curso de diseño web básico y

quería añadir el vídeo promocional que tengo colgado en Youtube. Como sabes, el modo de

insertar objetos de Youtube en otras páginas web es con un iframe. En el webinar gratis de

HTML5 vimos que la etiqueta frame desaparece con HTML5 y que aquí necesitamos iframes.

Sin ir más lejos, un iframe es un fragmento de una web que introducimos en nuestra web

modo que el usuario ve el contenido de otro sitio en nuestra página. Así, para Youtube el vídeo

que se muestra en nuestra página está alojado en Youtube, pero gracias al iframe lo podemos

visualizar en nuestro sitio.

Pues bien, lo que sucede es que los iframes por defecto no son ni �uidos ni responsive

estáticos como ellos mismos. Esto signi�ca que o te quedas con un vídeo en miniatura en

pantallas grandes, o se te rompe el diseño en smartphones o utilizas overflow:hidden en

pantallas más pequeñas que el iframe para evitar que se rompa la estructura.

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

14/10/2015 02:44 p.m.

Cómo Hacer un iFrame Fluido y Responsive

La manera en que podemos hacer que un iframe pase a ser responsive y �uido es añadiendo

un elemento padre que ocupa el 100% del espacio. Veamos un ejemplo.

HTML

<div class="video">

<iframe width="640" height="360" src="//www.youtube.com/embed/1YcIJU5sTL0" frameborder="

</div>

Aquí lo que hemos hecho es copiar el código que nos da Youtube para insertar un vídeo en

nuestra página web y añadirle un padre con la clase video.

CSS

El primer paso es dar formato al elemento padre con la clase video:

.video {

position: relative;

padding-bottom: 56.25%;

overflow: hidden;

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

14/10/2015 02:44 p.m.

}

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

<iframe width="640" height="360" .....></iframe>

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%;

}

Con esto ya tenemos un iframe responsive.

Para acabar..

Deseo te haya gustado el truco para hacer que un iframe sea responsive gracias al HTML y el

CSS. Si te interesa aprender a crearr un sitio web que se adapte a los dispositivos móviles, es

posible que te interese el curso de diseño web responsive. En cualquier caso, este truco es muy

práctico sobre todo cuando queremos hacer los vídeos de Youtube �uidos.

Si no conocías el truco y te ha servido de ayuda, te animo a compartirlo y dejar un comentario.

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

14/10/2015 02:44 p.m.

Un abrazo!

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

14/10/2015 02:44 p.m.