View
242
Download
0
Category
Preview:
DESCRIPTION
Crear un IFreame responsive y Fluido autoajustable
Citation preview
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.
Recommended