Hacer que un iframe responda

144

Estaba leyendo esta publicación de stackoverflow titulada "¿Puedes hacer que un iFrame responda?", Y uno de los comentarios / respuestas me llevó a este jfiddle.

Pero cuando traté de implementar el HTML y CSS para satisfacer mis necesidades, no tuve los mismos resultados / éxito. Creé mi propio violín JS para poder mostrarte cómo no funciona igual para mí. Estoy seguro de que tiene algo que ver con el tipo de iFrame que estoy usando (p. Ej., ¿Las imágenes de los productos también pueden ser sensibles o algo?

Mi principal preocupación es que cuando los lectores de mi blog visitan mi blog en su iPhone, no quiero que todo esté en ancho x (100% para todo mi contenido) y luego el iFrame se comporta mal y es el único elemento más ancho (y por lo tanto se pega) más allá del resto del contenido, si eso tiene sentido ??)

De todos modos, ¿alguien sabe por qué no funciona? gracias.

aquí está el HTML y CSS de MY JSFIDDLE (si no desea hacer clic en el enlace):

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585'
      frameborder="0" allowfullscreen></iframe>
  </div>
</div>

y aquí está el CSS que lo acompaña:

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
css  iframe  responsive-design 
— Brighton
fuente
66
El iframe en sí ('la caja') puede responder. Pero todo dentro del iframe es una página separada, y por lo tanto no está en el dominio de su CSS ni JS.
— DA.
puede usar easyXDM para la comunicación entre la página donde está incrustado i-frame y el documento en el servidor al que apunta el iframe.
— John Smith
1
— cregox

Respuestas:

107

Te presento la increíble solución de Singing Cat =)

.wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/
A medida que mueve la barra de la ventana, verá iframe para cambiar el tamaño de forma receptiva

Alternativamente, también puede usar la técnica de relación intrínseca : esta es solo una opción alternativa de la misma solución anterior (tomate, tomate)

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
— Omar
fuente
44
Consulte también este artículo que explica esta técnica con más detalle: smashingmagazine.com/2014/02/…
— Thomas Tempelmann
solo funciona para iframes de youtube. Vea esto: jsfiddle.net/1icsoftqw76
— csandreas1
2
Esta técnica funcionará para todos los iframes, el truco es que el contenido del iframe también deberá ser receptivo, más sobre esto aquí: benmarshall.me/responsive-iframes
— Ben Marshall
68

Intenta usar este código para hacerlo sensible

iframe, object, embed {
    max-width: 100%;
}
— Cojín Connor Mulhall
fuente
37
No está ajustando la altura del contenedor con este código.
— Reggie
46

Encontré una solución de Dave Rupert / Chris Coyier. Sin embargo, quería que el desplazamiento estuviera disponible, así que se me ocurrió esto:

// HTML

<div class="myIframe"> 
   <iframe> </iframe> 
</div>

// CSS

.myIframe {
     position: relative;
     padding-bottom: 65.25%;
     padding-top: 30px;
     height: 0;
     overflow: auto; 
     -webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
     border: solid black 1px;
} 
.myIframe iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
— Avi
fuente
2
nota futura para mí si el relleno del contenido inferior es la proporción del ancho del contenido, 800x600 es% 75, 800x536 es% 67
— nerkn
1
Este es un buen punto de partida para hacer que los iframes se desplacen para sarafi y todos los dispositivos. muy triste ...
— klewis
Esto es exactamente lo que necesitaba para permitir que el iframe se desplazara, ya que tenía más de 5000 px de largo. Los otros códigos obligaron al iFrame largo a superponer el contenido a continuación.
— penmas
para 16: 9, el fondo de relleno debe ser 56.25%
— Sergey Sklyar
17

Puede usar estos trucos mencionados en este sitio http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Es muy útil y fácil de entender. Todo lo que necesitas para crear

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Aquí está su violín js editado para demostración.

— Pragnesh Chaudhari
fuente
10

mira esta solución ... funciona para mí >> https://jsfiddle.net/y49jpdns/

<html lang="en" class="no-js">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <style>
      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script>
         var calcHeight = function() {
           $('#preview-frame').height($(window).height());
         }

         $(document).ready(function() {
           calcHeight();
         }); 

         $(window).resize(function() {
           calcHeight();
         }).load(function() {
           calcHeight();
         });
      </script>
   </head>
   <body>
      <iframe id="preview-frame" src="http://leowebguy.com/" name="preview-frame" frameborder="0" noresize="noresize">
      </iframe>
   </body>
</html>
— Leo Leoncio
fuente
He actualizado tu violín ya que había algunas piezas equivocadas aquí y allá. Es lo mismo, y funciona igual pero sin partes confusas. jsfiddle.net/6NSX3/263
— Techno.Shaman
IOS no calcula la altura correctamente, tiene en cuenta la barra de navegación. Además, Iframe en IOS no es desplazable.
— Tine Koloini
6

DA tiene razón. En su propio violín, el iframe es realmente receptivo. Puede verificar eso en firebug marcando el tamaño del cuadro de iframe. Pero algunos elementos dentro de ese iframe no responden, por lo que "sobresalen" cuando el tamaño de la ventana es pequeño. Por ejemplo, div#products-post-wrapperel ancho es de 8800 px.

— Philip007
fuente
5

iFrames PUEDE ser TOTALMENTE receptivo manteniendo su relación de aspecto con una pequeña técnica CSS llamada Técnica de relación intrínseca . Escribí una publicación de blog abordando esta pregunta específicamente: https://benmarshall.me/responsive-iframes/

Esta esencia es:

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}


/* 16x9 Aspect Ratio */

.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}


/* 4x3 Aspect Ratio */

.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
Expandir fragmento

BOOM, totalmente receptivo!

— Ben Marshall
fuente
3

Los iframes no pueden responder. Puede hacer que el contenedor de iframe responda, pero no el contenido que muestra, ya que es una página web que tiene su propio alto y ancho establecidos.

El enlace de violín de ejemplo funciona porque muestra un enlace de video de YouTube incrustado que no tiene un tamaño declarado.

— MGDTech
fuente
Esto es engañoso. El enlace de violín de ejemplo también funciona cuando se especifican el ancho y la altura del iframe de youtube.
— Philip007
14
Estoy decepcionado de que esto sea tan severamente rechazado. El mensaje que transmite es importante; que los iFrames son peligrosos para que respondan porque estás a gusto de la capacidad de respuesta de la fuente. Sí, Youtube es la excepción. Pero su punto sigue siendo válido.
— MattWithoos
3

Simple, con CSS:

iframe{
width: 100%;
max-width: 800px /*this can be anything you wish, to show, as default size*/
}

Tenga en cuenta : ¡pero no hará que el contenido dentro de él responda!

2nd EDIT: hay dos tipos de iframes receptivos, según su contenido interno:

uno que es cuando el interior del iframe solo contiene un video o una imagen o muchos posicionados verticalmente, para lo cual las dos filas anteriores de código CSS son casi completamente suficientes, y la relación de aspecto tiene significado ...

y el otro es el:

tipo de contenido de formulario de contacto / registro , donde no tenemos que mantener la relación de aspecto, sino evitar que aparezca la barra de desplazamiento y que el contenido fluya por debajo del contenedor. En el dispositivo móvil, no ve la barra de desplazamiento, simplemente desplácese hasta que vea el contenido (del iframe). Por supuesto, le da al menos algún tipo de height, para que la altura del contenido se adapte al espacio vertical que ocurre en una pantalla más estrecha, con consultas de medios, como, por ejemplo:

@media (max-width: 640px){
iframe{
height: 1200px /*whatever you need, to make the scrollbar hide on testing, and the content of the iframe reveal (on mobile/phone or other target devices) */
}
}
@media (max-width: 420px){
iframe{
height: 1600px /*and so on until and as needed */
}
}
— Sándor Zuboly
fuente
1
esto es simple e impresionante
— kapadia vaishali
esto no mantiene la relación de aspecto a medida que el iframe cambia de tamaño, es decir, la altura permanece igual sin importar el ancho.
— Ryan
@ryan He actualizado mi respuesta. Estoy parcialmente de acuerdo contigo, por cierto.
— Sándor Zuboly
2

Noté que la publicación de leowebdev parecía funcionar de mi parte, sin embargo, eliminó dos elementos del sitio que estoy tratando de hacer: el desplazamiento y el pie de página.

El desplazamiento lo recuperé agregando un scrolling="yes" código de inserción Al iframe.

No estoy seguro de si el pie de página se elimina automáticamente debido a la capacidad de respuesta o no, pero espero que alguien más sepa esa respuesta.

— Chris Knabenshue
fuente
2

Elimine la altura y el ancho del iframe especificados en píxeles y use el porcentaje

iframe{  max-width: 100%;}
— Jestin
fuente
1
Pero, no hizo que el contenido interno respondiera.
— Vir
1 
<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

iframe, object, embed {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}
— Saran
fuente
1

me resolvió ajustando el código de @Connor Cushion Mulhall por

iframe, object, embed {
  width: 100%;
  display: block !important;
}
Expandir fragmento

— Savangchai Saroj
fuente
1
Empezando

Debido a las restricciones de seguridad del navegador, deberá incluir el archivo Javascript tanto en la página "principal" como en la página que se incrusta a través de un iframe ("secundario").

En la versión actual, la página principal debe incluir la última versión de jQuery. No hay dependencia en jQuery para la funcionalidad de la página secundaria. En futuras versiones, también nos gustaría eliminar la dependencia de jQuery para el padre.

Nota: el parámetro "xdomain" en la llamada a la función makeResponsive () es opcional.

Muestra de código <!-- Activate responsiveness in the "child" page --><script src="/js/jquery.responsiveiframe.js"></script><script> var ri = responsiveIframe(); ri.allowResponsiveEmbedding();</script> <!-- Corresponding code in the "parent" page --><script src="/js/jquery.js"></script><script src="/js/jquery.responsiveiframe.js"></script><script> ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);</script>
— Ahmed Elcheikh
fuente
0

Con el siguiente marcado:

<div class="video"><iframe src="https://www.youtube.com/embed/StTqXEQ2l-Y"></iframe></div>

El siguiente CSS hace que el video sea de ancho completo y 16: 9:

.video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
}

.video > .video__iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: none;
  }
}
— dorio
fuente
0

Estoy buscando más sobre este tema y finalmente obtengo una buena respuesta. Usted puede tratar como esta :

.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>
Expandir fragmento

— Laurel
fuente
0

La mejor solución para hacer que un "iframe" responda y se ajuste a todas las pantallas del dispositivo, simplemente aplique este código (funciona muy bien con los sitios de juegos): 

iframe::-webkit-scrollbar{display:none}
.iframe{background:#fff;overflow:hidden}
.iframe iframe{width:100%;height:540px;border:0;display:block}
.iframe-content{position:absolute;width:100%;height:540px;overflow:auto;top:0;bottom:0;-webkit-overflow-scrolling:touch}

@media screen and (max-width:992px){.iframe iframe{height:720px}}
@media screen and (max-width:768px){.iframe iframe{height:720px}}
@media screen and (max-width:720px){.iframe iframe{height:720px}}
@media screen and (max-width:479px){.iframe iframe{height:480px}}
@media screen and (max-height:400px){.iframe iframe{height:360px}}

Si está buscando un contenedor de juegos receptivo que se ajuste a todos los dispositivos, aplique este código que utiliza consultas avanzadas de CSS @media.

— Juegos Mizo
fuente
Hola, el código html de Iframe es simple y se ve así:
— Mizo Games
<div class = "iframe"> <iframe src = ""> </iframe> </div>
— Mizo Games
En realidad lo uso con mi sitio web: Al3abMizo Games, y puedes probarlo jugando cualquier juego en cualquier dispositivo, independientemente del tamaño de la pantalla.
— Mizo Games
0

IFrame totalmente receptivo para situaciones donde la relación de aspecto es desconocida y el contenido en el iFrame es totalmente receptivo.

Ninguna de las soluciones anteriores funcionó para mi necesidad, que era crear un iFrame totalmente receptivo que tuviera contenido dinámico totalmente receptivo dentro de él. Mantener cualquier tipo de relación de aspecto no era una opción.

  1. Obtenga la altura de su barra de navegación y cualquier contenido ARRIBA o ABAJO del iFrame. En mi caso, solo necesitaba restar la barra de navegación superior y quería que el iFrame se llenara hasta la parte inferior de la pantalla.

Código: 

function getWindowHeight() {
        console.log('Get Window Height Called')
        var currentWindowHeight = $(window).height()

        var iFrame = document.getElementById("myframe")
        var frameHeight = currentWindowHeight - 95

        iFrame.height = frameHeight; 

    }
//Timeout to prevent function from repeatedly firing
    var doit;
    window.onresize = function(){
      clearTimeout(doit);
      doit = setTimeout(resizedw, 100);
    };

También creé un tiempo de espera para que al cambiar el tamaño de la función no se llamara un millón de veces.

— JPeG
fuente
0 
For Example :

<div class="intrinsic-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

CSS 

.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}

.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
— KTrivedi
fuente
0

Mira este código completo. Puede usar los contenedores en porcentajes como el siguiente código:

<html>
<head>
<title>How to make Iframe Responsive</title>
<style>
html,body        {height:100%;}
.wrapper         {width:80%;height:100%;margin:0 auto;background:#CCC}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
</head>
<body>
<div class="wrapper">
<div class="h_iframe">
<img class="ratio" src=""/>
<iframe src="http://www.sanwebcorner.com" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>
</div>
</body>
</html>

Echa un vistazo a esta página de demostración.

— M. Lak
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.