css - bootstrap - Hacer que un iframe responda

iframe width 100%

Question

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):

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

Answer 1

Con el siguiente marcado:

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

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

Answer 2

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.

Answer 3

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

iframe{  max-width: 100%;}

Answer 4

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

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

Answer 5

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

<div class="wrapper">
  <div class="container">
    <iframe src="there is path of your iframe"></iframe>
   </div>
</div>

Answer 6

Intenta usar este código para hacerlo receptivo

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

Answer 7

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.

Answer 8

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.

Answer 9

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

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

Answer 10

Simple, con css:

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

Answer 11

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

Answer 12

Vea este código completo. puedes 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>

Mira esta demo.

Answer 13

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

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

BOOM, ¡totalmente receptivo!

Answer 14

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.

Answer 15

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

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

Answer 16

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>

Answer 17

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

Answer 18

<div class="wrap>
    <iframe src="../path"></iframe>
</div>

.wrap { 
    overflow: auto;
}

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

Answer 19

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

Answer 20

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

Answer 21

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 <!-- 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>