wake-up-neo.net

Einen iframe ansprechbar machen

Ich habe diesen Stackoverflow-Beitrag mit dem Titel "Kannst du einen iFrame ansprechen?" Gelesen, und einer der Kommentare/Antworten führte mich zu zu diesem Jiddle.

Aber als ich versuchte, HTML und CSS für meine Bedürfnisse zu implementieren, hatte ich nicht die gleichen Ergebnisse/Erfolge. Ich habe meine eigene JS-Geige erstellt, damit ich Ihnen zeigen kann, wie es für mich nicht gleich funktioniert. Ich bin sicher, es hat etwas mit dem Typ von iFrame zu tun, den ich verwende (z. B. müssen die Produktbilder möglicherweise auch reagieren oder etwas?)

Meine Hauptsorge ist, dass wenn meine Blog-Leser mein Blog auf ihrem iPhone besuchen, ich nicht will, dass alles auf x width ist (100% für meinen gesamten Inhalt) und dann der iFrame sich schlecht benimmt und das einzige Element breiter ist (und daher haftet raus an allen anderen Inhalten vorbei - wenn das Sinn macht?)

Weiß jemand sowieso, warum es nicht funktioniert? Danke dir.

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%;
}
cssiframeresponsive-design
122
Brighton

Ich präsentiere Ihnen The Incredible Singing Cat solution =)

.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 angezeigt, dass die Größe des Frames geändert wird 

Alternativ können Sie auch die intrinsic ratio technique - verwenden. Dies ist nur eine alternative Option derselben 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%;
}
80
Omar

Verwenden Sie diesen Code, um ihn ansprechbar zu machen

iframe, object, embed {
    max-width: 100%;
}
67
Connor Cushion Mulhall

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

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

Sie können diese auf dieser Site erwähnten Tricks verwenden: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php .

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

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

16
Pragnesh Chaudhari
iframe{
  max-width: 100% !important;
}
9
Christian Michael

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>
8
Leo Leoncio

DA ist richtig. In Ihrer eigenen Geige ist der Iframe tatsächlich ansprechbar. Sie können dies in Firebug überprüfen, indem Sie die Größenanpassung von iFrame überprüfen. Aber einige Elemente in diesem iframe sind nicht ansprechbar, also "ragen" sie hervor, wenn das Fenster klein ist. Die Breite von div#products-post-wrapper beträgt beispielsweise 8800px.

6
Philip007

iFrames können mit einer kleinen CSS-Technik, die als Intrinsic Ratio Technique bezeichnet wird, VOLLSTÄNDIG reagieren. Ich habe einen Blogbeitrag geschrieben, in dem diese Frage speziell angesprochen wurde: https://benmarshall.me/responsive-iframes/

Diese Gist 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 ansprechend!

2
Ben Marshall

Ich habe bemerkt, dass der Beitrag von leowebdev an meinem Ende zu funktionieren schien, aber er hat zwei Elemente der Website, die ich zu schaffen versuche, herausgeschlagen: das Scrollen und die Fußzeile.

Das Scrollen erhielt ich durch Hinzufügen eines scrolling="yes"Zu den iframe-Einbettungscode.

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

2
Chris Knabenshue

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

iframe{  max-width: 100%;}
2
Jestin

Einfach mit CSS:

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

Bitte beachten Sie : Aber der Inhalt wird nicht reaktionsfähig!

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

.wrap { 
    overflow: auto;
}

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

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

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

1
Savangchai Saroj

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/

0
Vishwas Gagrani

iframes können nicht reagieren. Sie können den iframe-Container ansprechbar machen, nicht jedoch den angezeigten Inhalt, da es sich um eine Webseite handelt, die über eine eigene Höhe und Breite verfügt.

Der Beispiel-Fiddle-Link funktioniert, weil er einen eingebetteten Youtube-Video-Link anzeigt, für den keine Größe angegeben wurde.

0
MGDTech

Die beste Lösung, um einen "iframe" ansprechbar zu machen und auf alle Gerätebildschirme zu passen, wenden Sie einfach diesen Code an (ideal für Spiele-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 responsiven Spielecontainer suchen, der für alle Geräte geeignet ist, wenden Sie diesen Code an, der erweiterte CSS @media-Abfragen verwendet.

0
Al3abMizo Games
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%;
}
0
KTrivedi

Ich suche mehr zu diesem Thema und bekomme endlich eine schöne Antwort ... Sie können es wie this versuchen:

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

0
user3951808

Vollständig ansprechbarer iFrame für Situationen, in denen das Seitenverhältnis unbekannt ist und der Inhalt des iFrame vollständig anspricht.  

Keine der oben genannten Lösungen funktionierte für mein Bedürfnis, nämlich einen vollständig ansprechbaren iFrame mit vollständig ansprechbarem dynamischen Inhalt zu erstellen. Die Beibehaltung jeglicher Seitenverhältnisse war keine Option. 

  1. Holen Sie sich die Höhe Ihrer Navigationsleiste und alle Inhalte über oder unter dem iFrame. In meinem Fall musste ich nur die obere Navigationsleiste abziehen und den iFrame bis zum unteren Rand des Bildschirms füllen. 

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 ein Timeout erstellt, damit die Funktion bei der Größenänderung nicht eine Million Mal aufgerufen wird. 

0
JPeG

Mit dem folgenden 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;
  }
}
0
Dorian

Überprüfen Sie diesen vollständigen Code. Sie können die Container in Prozenten 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 Demo-Seite an.

0
M. Lak