Tecnología y Coaching para Emprendedores

Cómo Hacer un iFrame Fluido y Responsive

diseno-web-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, de 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 fluidos ni responsive, sino estáticos como ellos mismos. Esto significa 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.


Cómo Hacer un iFrame Fluido y Responsive

diseno-web-responsive

La manera en que podemos hacer que un iframe pase a ser responsive y fluido 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="0" allowfullscreen></iframe>
</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;
}

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 fluidos.

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

Un abrazo!


Comentarios

  • Adriana

    Excelente truco, muy útil. gracias.

    • eSandra

      Gracias a ti por comentar :-)

  • Vixtorman

    Gracias Sandra, tomo buena nota de ello ya que me vendrá muy bien cuando tenga que insertar algún vídeo de youtube.
    Un saludo.

    • eSandra

      me alegro te haya sido útil :-)

  • Alejandro

    Hola Sandra, he probado este truco para mi web personal pero me ha funcionado a medias, me explico. Si abro la web desde el iphone, el cuadro del video está perfecto pero en el ordenador si abro el navegador también se ve perfecto, el problema es cuando pincho en el borde del navegador desde el pc y estrecho la ventana del mismo. Entonces no se va haciendo responsive. ¿Me he explicado bien? De todas formas, el truco es muy bueno y la explicación clarísima, Gracias!

    • eSandra

      Hola Alejandro,

      es raro, porque en sí lo que le estamos diciendo es que ocupe el 100% del contenedor.. te pasa en todos los navegadores?

      un abrazo,
      Sandra

  • Alejandro

    Hola de nuevo Sandra,

    Pués no se si no copié bien los archivos en el ftp, o algo así jeje porque acabo de ver tu comentario he ido a probarlo y funciona a la perfección.

    Muchas gracias, me guardo tu web en favoritos y en cuanto pueda me realizo el curso de responsive, aunque cuando puedas mándame un email para preguntarte una cosa sobre el curso,

    Gracias!

  • deison

    Excelente funciona, claro que para que sea totalmente responsive, hay que usar media query.

    • eSandra

      Depende, al ser fluido ya es adaptable, otra cosa es que no quieras que ocupe el 100% del contenedor en todos los casos, entonces sí que necesitas media queries :-)

      un abrazo!
      SANDRA

  • Christian

    Mil gracias Sandra, me fue muy útil tu post y tu ayuda!, mil gracias nuevamente!.

    • eSandra

      Gracias a ti por comentar, Christian, me alegro te sea útil :-)

  • Raulblanc

    Buenísimo. Me estaba volviendo loco montando un moodle responsive que incluye muchísimos videos :o)
    Gracias!

  • Paulosqui

    Sandra, esta solucion no funciona para iframe de archivos .swf. En general los archivos .swf son un dolor de cabeza. Conoces algun modo de hacer responsive los archivos .swf mediante un iframe?

    • eSandra

      No uso archivos .swf y cada vez se usan menos por el tema de Apple, así que no te sé decir..

  • Eliseo Tapia

    Me salvaste la vida tenia problemas con el iframe del Facebook… :)

    • Sandra

      Estupendo, Eliseo, me alegro mucho

  • Mauricio Cobo

    Excelentes todos tus articulos, cortos, al grano y bien explicados, gracias.

    • Sandra

      Gracias Mauricio!

  • Fabio

    También puedes hacer responsive el iframe, con tan solo aplicar a la etiqueta width the dicho iframe un valor porcentual:

    Ej:

  • Josep

    Hola, excelente solución. Tengo una duda el valor que apuntas de 56.25% no acabo de ver de donde viene. Puedes detallarme la operación. Muchas gracias.

    • Sandra

      De dividir 360 por 640 y multiplicarlo por 100. Un saludo!

  • Pancho

    Genialisimo, me sirvió a la perfección, gracias!

  • Walt

    Me sabía el truco para youtube, Pero aún no logro hacerlo con los inserciones de publicaciones de facebook :(

    • eSandra

      No lo he probado, suerte!

  • M134Minigun

    que onda!

    no manches tenia una semana comiendome la cabeza en como hacerlo responsive, hasta que me rendí y decidí utilizar google para buscar ayuda, este pequeño tuto me ha resultado 100% perfecto para lo que estoy desarrollando, desde ya muchas gracias!

    y si, ya me suscribí! ;D saludos de un mexicano desde Japón!

    • eSandra

      Estupendo te haya servido! Un abrazo :-)

  • fbs

    Buenos días, voy a probarlo…. gracias por anticipado.
    ;-)

    • eSandra

      de nada, suerte

  • Abel

    Un post tremendamente práctico. Gracias por publicarlo, Sandra.

    Llegué a este post porque necesitaba lo mismo que ”
    Paulosqui” (un anunciante me ofrece sus banners en formato .swf pero me niego a usarlos). Así que convertí el banner a un archivo HTML5 con el servicio Swiffy de Google, lo subí a mi hosting y al contenedor del swiffy le añadí un “max-width:100%”. Con eso ya se adapta a todas las pantallas pero no sé si es suficiente.

    • eSandra

      me alegro te haya servido

  • Carito Méndez

    Hola Sandra

    Y esto funciona para cualquier tipo de contenido por ejemplo insertar una página de wordpress en mi web¿

    • eSandra

      Hola Carito, el uso de frames para insertar una web dentro de otra está obsoleto.. un abrazo!

  • Ernesto

    Muchas gracias por compartir esta info, me ha servido de mucho. Ya tenía otro codigo pero este es más elegante y sencillo. Además me gusta mucho tu manera de redactar, soy docente y ¡tu pareces serlo!. :-)

    • eSandra

      Hola Ernesto, muchas gracias! Sí, me gusta enseñar :-)

  • Jose Peralta

    Gracias por el excelente aporte. Al fin voy a subir mi pagina con una plantilla responsive, y este post me ha sirvido muchisimo..

    • eSandra

      Me alegro, Jose, mucho éxito y un abrazo!

  • RFA

    Muchas gracias!!!

  • Matias

    Hola sandra, genial tu post. Tengo una duda muy grande. Resulta que tengo un header.html, el cual quiero insertarlo en otra pagina web (ya que es el encabezado), este header.html ya es responsivo, por lo que al seguir tus pasos, no logro hacer tambien responsivo el height, dado que solo puedo asignarle un valor en px, pero al hacer pequeño el navegador, me aparece el scrolling. Me puedes ayudar?. Espero tus comentarios! Saludos!.

    PD: la página en cuestion es:
    https://dl.dropboxusercontent.com/u/41443178/PaginaWeb/header.html

    • eSandra

      Hola Matias,

      gracias por comentar.No entiendo por que quieres usar un iframe para esto, es mucho mejor que uses la función include de PHP. Esto que quieres hacer son muy malas prácticas, no te lo recomiendo para nada. Ahora mismo por falta de tiempo no ofrezco consultoría a medida, pero yo en lugar de esto haría archivos con extensión php en lugar de html e incluiría el header con la función include de PHP. Mucho más limpio y además buenas prácticas.

      Suerte!

  • Sebastián

    Excelente! Quedó 100% responsivo el Iframe.

    Muchas gracias Sandra!

    • eSandra

      De nada, un abrazo!

  • carles

    Hola Sandra,

    No me funciona, supongo que hago algo mal he puesto primero el en html y luego el css en custom css opciones theme, ero al actualizar me queda la web como bloqueada no puedo hacer scrooll hacia abajo.

    Saludos,

  • Iñigo

    Interesante el truco, pero funciona a medias. me explico:

    El iframe se hace responsive y se adapta bien ajustándose al tamaño de pantalla (pc, tablet,móvil)
    Pero el contenido del iframe no se hace responsive.
    No lo he probado con youtube sino con un iframe para integrar el tiempo de snow-forecast ….
    Su navegador no da soporte a iframes

    y su correspondiente estilo

    .forecast {
    position: relative;
    padding-bottom: 57.996%;
    overflow: hidden;
    }
    .forecast iframe
    {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    es normal o hago algo mal??
    Muchas gracias.

  • Antonio

    Buen tutorial, quiero que me agas un hijo *.*
    Hahaha no te creas, saludos <3

  • Lee

    Hola Sandra,
    una pregunta… tengo el iframe de facebook para hacer un me gusta en mi pagina, pero quiero utilizarlo en una aplicación para teléfonos.
    el problema es que al abrir el enlace, es una pagina para navegador de escritorio… no versión móvil. y sale todo muy pequeño.
    no sé si sabes como crear un enlace directo al me gusta de facebook para telèfonos.
    el iframe que utilizo es este…
    Saludos

    • lee

      se ha comido el iframe parece…
      …me src=”http:/ /www .facebook. com/widgets/like.php?href=http://www.facebook.com/ajcassa” scrolling=”no” frameborder=”0″ style=”border:none; width:75px; height:20px

    • eSandra

      Hola Lee, no estoy metida aun en el mundo de las aplicaciones móviles. Suerte!

  • carlos zelaya

    hola sandra gracias por tu buenos aportes de hecho estoy creando una web siguiendo un curso tuyo espero me salga muy bien es un proyecto de la universidad espero puedas aclarar algunas dudas cuando la encuentre muchas gracias.

  • Christian Leal

    Hola Sandra, excelente tutorial, pero también estoy tratando de utilizar el iframe para incrustar una página web y funciona. El problema es que a diferencia del video, no tengo medidas predeterminadas en width y height y me sale el fondo blanco, que puedo hacer?

    Saludos y agradezco de antemano tu labor

    • eSandra

      Hola Christian, incrustar páginas web es muy mala práctica, si además la página no es responsive no se va a adaptar porque la pongas en un iframe ni en nada.. pero lo dicho, esto ya no se hace en diseño web..

  • Jorge

    buenisimo, de perlas! gracias!!

  • Tony

    Hola Sandra, gracias por tu aportación, no obstante no me ha funcionado ya que por alguna razón que desconozco el video aparece super largo y estirado verticalmente hablando. Aunque le he dicho width=”600″ height=”400″ con tu código pasa de mi. He decidido usar este otro y funciona a la perfección:

    iframe.ytb-embed {
    max-width: 100% !important;
    display: block;
    margin: 0px auto;
    }

    • eSandra

      Gracias por compartir tu solución, Tony :-)

  • Giovanni

    Perfecto el truco. Funciona muy bien. Gracias Sandra

    • eSandra

      De nada, Giovanni, un abrazo.

  • david

    Hola, yo he puesto este código pero no se hace responsive.

    ¿alguien sabe qué está mal?

    Gracias

    david

  • Ricardo Siabato

    Gracias por el truco está campeón! :)

    Para que tipos de exploradores está diseñado eso!

    • eSandra

      Para todos los navegadores modernos..

  • Aaron

    Muchas gracias!

  • Sergi

    Sandra, muchas gracias por compartir esta excelente solución. Llevo rompiéndome la cabeza varios dias y no se me había pasado por la cabeza fijar la altura de esta manera. El iframe responde a la perfección y sin usar todos los apañoscript sueltos por la red. Incrustada quedas en mis favoritos.

    SerGi

    • eSandra

      De nada, Sergi, me alegro te haya servido :-)

  • P@ul

    Hola, no probe la solución pero definitivamente esta muy bien explicado, sencillo de entender, posteo aqui para q me resuelvas una duda, estoy usando iframes para jalar a mi pagina otra pagina de logueo, se ve bien el problema es que cuando el mouse entra al recuadro de la pagina de logueo no puedo desplazar hacia abajo con la ruedita del mouse la pagina principal, nose si me explico bien con la rueda del mouse puedo desplazarme de arriba hacia abajo pero cuando entra a la zona del recuadro de la pagina de logueo este deja de funcionar, probe jalando la pagina con object y sucede el mismo problema. Saludos de antemano

    • eSandra

      Ni idea sin verlo, Paul, habrás de mirar un poco más dónde está el error.. suerte!