Hacer que un iframe responda

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 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 (por ejemplo, ¿las imágenes del producto también deben ser receptivas o algo así?)

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

De todos modos, ¿alguien sabe por qué no está funcionando? gracias.

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

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%; } 

Te presento la solución The Incredible Cat 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 mueva la barra de la ventana, verá iframe para ajustar el tamaño de forma responsiva

Intenta usar este código para hacerlo receptivo

 iframe, object, embed { max-width: 100%; } 

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

// HTML

 

// 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%; } 

Puede utilizar 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

 
.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á tu violín js editado para la demostración.

 iframe{ max-width: 100% !important; } 

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

             

DA tiene razón. En tu propio violín, el iframe es realmente receptivo. Puedes verificar eso en firebug marcando iframe box-sizing. 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, el ancho de div#products-post-wrapper es 8800px.

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

El desplazamiento que obtuve al agregar un scrolling="yes" al código incrustado iframe.

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

Eliminar la altura y el ancho del iframe especificado en píxeles y usar porcentaje

 iframe{ max-width: 100%;} 

iFrames PUEDE SER COMPLETAMENTE receptivo mientras mantiene su relación de aspecto con una pequeña técnica de CSS llamada Técnica de relación intrínseca . Escribí una publicación de blog que aborda 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%; } 

BOOM, ¡totalmente receptivo!

Simple, con CSS:

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

Por favor, tenga en cuenta : ¡Pero no hará que el contenido dentro de él responda!

 
.wrap { overflow: auto; } iframe, object, embed { min-height: 100%; min-width: 100%; overflow: auto; }

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

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

Con el siguiente marcado:

 

El siguiente CSS hace el video 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; } } 

Estoy buscando más sobre este tema y finalmente obtengo una buena respuesta. Puedes intentarlo así:

 .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; } 
 

La mejor solución para hacer que un “iframe” responda y se ajuste a todas las pantallas de dispositivos, simplemente aplica 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 receptáculo de juegos receptivo que se adapte a todos los dispositivos, aplique este código que utiliza consultas avanzadas de CSS @media.

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 está siendo incorporada a través de un iframe (“hijo”).

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, nos gustaría eliminar la dependencia de jQuery para el padre también.

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

Ejemplo de código var ri = responsiveIframe(); ri.allowResponsiveEmbedding(); ;(function($){ $(function(){ $('#myIframeID').responsiveIframe({ xdomain: '*'}); }); })(jQuery);

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

Ninguna de las soluciones anteriores funcionó para mi necesidad, que era crear un iFrame totalmente receptivo que tuviera contenido dynamic 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 completara 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.

 For Example : 
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%; }

Vea este código completo. puedes usar los contenedores en porcentajes como el siguiente código:

   How to make Iframe Responsive    

Please scale the "result" window to notice the effect.

Mira esta demo.

iframes no puede ser receptivo. Puede hacer que el contenedor iframe responda pero no el contenido que se muestra, ya que es una página web que tiene su propio ancho y alto de conjunto.

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