Einen Iframe ansprechen lassen

Ich habe diesen Stackoverflow-Beitrag mit dem Titel "Können Sie einen iFrame reaktionsfähig machen?" Gelesen, und einer der Kommentare / Antworten führte mich zu dieser Geige.

Aber als ich versuchte, HTML und CSS so zu implementieren, dass es meinen Anforderungen entsprach, hatte ich nicht die gleichen Ergebnisse / Erfolge. Ich habe meine eigene JS-Geige erstellt, damit ich Ihnen zeigen kann, dass es bei mir nicht genauso funktioniert. Ich bin mir sicher, dass dies etwas mit dem von mir verwendeten iFrame-Typ zu tun hat (z. B. müssen die Produktbilder möglicherweise auch reagieren oder so?)

Mein Hauptanliegen ist, dass wenn meine Blog-Leser mein Blog auf ihrem iPhone besuchen, ich nicht möchte, dass alles auf x-Breite ist (100% für alle meine Inhalte) und sich der iFrame dann schlecht verhält und das einzige Element ist, das breiter ist (und daher haftet) über alle anderen Inhalte hinaus - wenn das Sinn macht ??)

Weiß jemand, warum es nicht funktioniert? Danke.

Hier ist das HTML & CSS von MY JSFIDDLE (wenn Sie nicht auf den Link klicken möchten):

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

und hier ist das begleitende CSS:

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

Ich präsentiere Ihnen die Incredible Singing Cat Lösung =)

.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/
Wenn Sie die Fensterleiste verschieben, wird der Iframe angezeigt , um die Größe zu ändern

Alternativ können Sie auch die intrinsische Verhältnis-Technik verwenden. Dies ist nur eine alternative Option der oben genannten Lösung (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%;
}

Versuchen Sie, diesen Code zu verwenden, damit er reagiert

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

Ich habe eine Lösung von Dave Rupert / Chris Coyier gefunden. Ich wollte die Schriftrolle jedoch verfügbar machen, also kam ich auf Folgendes:

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

Sie können diese auf dieser Website genannten Tricks verwenden: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

Es ist sehr nützlich und leicht zu verstehen. Alles was Sie brauchen, um zu erstellen

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

Hier ist Ihre bearbeitete js Geige zur Demonstration.

Schauen Sie sich diese Lösung an ... funktioniert für mich >> 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>

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

DA ist richtig. In Ihrer eigenen Geige reagiert der Iframe tatsächlich. Sie können dies in Firebug überprüfen, indem Sie die Größe der Iframe-Box überprüfen. Einige Elemente in diesem Iframe reagieren jedoch nicht, sodass sie bei kleinen Fenstern "herausragen". Die div#products-post-wrapperBreite beträgt beispielsweise 8800px.

iFrames können mit einer kleinen CSS-Technik, der so genannten Intrinsic Ratio-Technik , VOLLSTÄNDIG reagieren, während das Seitenverhältnis beibehalten wird . Ich habe einen Blog-Beitrag geschrieben, der sich speziell mit dieser Frage befasst: https://benmarshall.me/responsive-iframes/

Dieser Kern ist:

.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, voll ansprechbar!

iframes kann nicht reagieren. Sie können den iframe-Container reaktionsfähig machen, jedoch nicht den angezeigten Inhalt, da es sich um eine Webseite handelt, für die eine eigene Höhe und Breite festgelegt wurde.

Der Beispiel-Geigenlink funktioniert, weil er einen eingebetteten YouTube-Videolink anzeigt, für den keine Größe deklariert ist.

Einfach mit CSS:

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

Bitte beachten Sie : Der Inhalt wird dadurch jedoch nicht reagiert!

2. BEARBEITUNG :: Es gibt zwei Arten von responsiven Iframes, abhängig von ihrem inneren Inhalt:

Eine, bei der das Innere des Iframes nur ein Video oder ein Bild oder viele vertikal positionierte enthält, für die die obigen zwei Zeilen CSS-Code fast vollständig ausreichen und das Seitenverhältnis eine Bedeutung hat ...

und der andere ist der:

Art des Inhalts des Kontakt- / Registrierungsformulars , bei dem nicht das Seitenverhältnis beibehalten werden muss, sondern um zu verhindern, dass die Bildlaufleiste angezeigt wird und der Inhalt unter den Container fließt. Auf Mobilgeräten wird die Bildlaufleiste nicht angezeigt. Sie scrollen nur, bis Sie den Inhalt (des Iframes) sehen. Natürlich geben Sie es zumindest eine Art height, um die Höhe des Inhalts an den vertikalen Raum anzupassen, der auf einem schmaleren Bildschirm auftritt - mit Medienabfragen, wie zum Beispiel:

@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 */
}
}

Ich bemerkte, dass der Beitrag von leowebdev an meinem Ende zu funktionieren schien, jedoch zwei Elemente der Site, die ich erstellen möchte, ausschaltete: das Scrollen und die Fußzeile.

Das Scrollen habe ich durch Hinzufügen eines scrolling="yes" To the iframe-Einbettungscodes erhalten.

Ich bin nicht sicher, ob die Fußzeile aufgrund der Reaktionsfähigkeit automatisch ausgeschaltet wird oder nicht, aber hoffentlich kennt jemand anderes diese Antwort.

Entfernen Sie die in Pixel angegebene Höhe und Breite des Iframes und verwenden Sie den Prozentsatz

iframe{  max-width: 100%;}

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

.wrap { 
    overflow: auto;
}

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

Es löste mich, indem es den Code von @Connor Cushion Mulhall von anpasste

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

Aus Sicherheitsgründen des Browsers müssen Sie die Javascript-Datei sowohl auf der übergeordneten Seite als auch auf der Seite, die über einen Iframe (untergeordnetes Element) eingebettet wird, einfügen.

In der aktuellen Version muss die übergeordnete Seite die neueste Version von jQuery enthalten. Es gibt keine Abhängigkeit von jQuery für die Funktionalität der untergeordneten Seite. In zukünftigen Versionen möchten wir die Abhängigkeit von jQuery auch für das übergeordnete Element entfernen.

Hinweis: Der Parameter "xdomain" im Funktionsaufruf makeResponsive () ist optional.

Mit folgendem Markup:

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

Das folgende CSS macht das Video in voller Breite und 16: 9:

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

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

Ich suche mehr zu diesem Thema und bekomme endlich eine nette Antwort. Sie können wie versuchen , diese :

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

Wenden Sie einfach den folgenden Code an, um einen "Iframe" ansprechbar zu machen und auf alle Gerätebildschirme zu passen (funktioniert hervorragend mit Games-Websites):

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

Wenn Sie nach einem reaktionsschnellen Spielecontainer suchen, der für alle Geräte geeignet ist, wenden Sie diesen Code an, der erweiterte CSS @ media-Abfragen verwendet.

Vollständig reagierender iFrame für Situationen, in denen das Seitenverhältnis unbekannt ist und der Inhalt im iFrame vollständig reagiert.

Keine der oben genannten Lösungen funktionierte für meine Anforderungen, nämlich die Erstellung eines vollständig reaktionsfähigen iFrame mit vollständig reaktionsschnellen dynamischen Inhalten. Das Beibehalten eines Seitenverhältnisses war keine Option.

1. Holen Sie sich die Höhe Ihrer Navigationsleiste und aller Inhalte über oder unter dem iFrame. In meinem Fall musste ich nur die obere Navigationsleiste subtrahieren und wollte, dass der iFrame bis zum unteren Bildschirmrand ausgefüllt wird.

Code:

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

Ich habe auch eine Zeitüberschreitung erstellt, damit die Funktion beim Ändern der Größe nicht millionenfach aufgerufen wird.

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

Schauen Sie sich diesen vollständigen Code an. Sie können die Container in Prozent wie im folgenden Code verwenden:

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

Schauen Sie sich diese Demoseite an.

Diese Lösung hat bei mir funktioniert. Und ich fand es einfacher. https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/