Sin ir ms lejos, un iframe es un fragmento de una web que introducimos en nuestra

web, de modo que el usuario ve el contenido de otro sitio en nuestra pgina. As, p
ara Youtube el vdeo que se muestra en nuestra pgina est alojado en Youtube, pero gr
acias al iframe lo podemos visualizar en nuestro sitio.
Pues bien, lo que sucede es que los iframes por defecto no son ni fluidos ni res
ponsive, sino estticos como ellos mismos. Esto significa que o te quedas con un vd
eo en miniatura en pantallas grandes, o se te rompe el diseo en smartphones o uti
lizas overflow:hidden en pantallas ms pequeas que el iframe para evitar que se rom
pa la estructura.
responsive gracias al HTML y el CSS. Si te interesa aprender a crearr un sitio w
eb que se adapte a los dispositivos mviles, es posible que te interese el curso d
e diseo web responsive. En cualquier caso, este truco es muy prctico sobre todo cu
ando queremos hacer los vdeos de Youtube fluidos.
Si no conocas el truco y <iframe width="640" height="360" src="//www.youtube.com
/embed/1YcIJU5sTL0" frameborder="0" allowfullscreen></iframe>
3
</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 clas
La manera en que podemos hacer que un iframe pase a ser es aadiendo un elemento p
adre que ocupa el 100% del espacio. Veamos un ejemplo.
HTML
dar formato al iframe para que ocupe el 100% del espacio del elemento padre con
la clase video:
1 que tengo colgado en Youtube. Como sabes, el modo de insertar objetos de Youtu
be 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.
responsive y fluido
2
position: relative;
3
padding-bottom: 56.25%;
4
overflow: hidden;
5
}
Aqu seguramente te chocar el valor del padding de 56,25%. Esto se ha calculado div
idiendo los valores que aparecen en el HTML de width=640 y height=360
3
.video iframe iframe responsive.
Para acabar..
Deseo te haya gustado el truco para hacer que un iframe sea e video:
1
.video {
El otro da estaba maquetando
1
<iframe width="640" height="360" .....></iframe>

Si no diramos este padding, lo que sucedera es que el vdeo no se vera. Y si cambiamo

s 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
2
{
la nueva landing te ha servido de ayuda, te animo a compartirlo y dejar un comen
tario.
Un abrazo!
mi firma
1
<div class="video">
2
page de mi curso de diseo web bsico y quera aadir el vdeo promocional
position: absolute;
4
top: 0;
5
left: 0;
6
width: 100%;
7
height: 100%;
8
}
Con esto ya tenemos un