http://www.esandra.

com/como-hacer-un-iframe-fluido-y-responsive/

Cmo Hacer un iFrame Fluido y Responsive

El otro da estaba maquetando la nueva landing page de mi curso de diseo web bsico y
quera aadir el vdeo promocional que tengo colgado en Youtube. Como sabes, el modo de
insertar objetos de Youtube en otras pginas 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 ms 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 pgina. As, para Youtube el vdeo

que se muestra en nuestra pgina 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
estticos como ellos mismos. Esto signica que o te quedas con un vdeo en miniatura en
pantallas grandes, o se te rompe el diseo en smartphones o utilizas overflow:hidden en
pantallas ms pequeas que el iframe para evitar que se rompa la estructura.

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

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

Cmo Hacer un iFrame Fluido y Responsive

La manera en que podemos hacer que un iframe pase a ser responsive y uido es aadiendo
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" fra

</div>

Aqu lo que hemos hecho es copiar el cdigo que nos da Youtube para insertar un vdeo en
nuestra pgina web y aadirle 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;

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

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

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 diramos este padding, lo que sucedera es que el vdeo no se vera. Y si cambiamos los
valores, veremos que si lo hacemos ms grande empieza a aparecer espacio en blanco y si le
damos menos que se corta parte de la pantalla del vdeo.
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 mviles, es

posible que te interese el curso de diseo web responsive. En cualquier caso, este truco es mu
prctico sobre todo cuando queremos hacer los vdeos de Youtube uidos.

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

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

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

Un abrazo!

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