Responsive Iframe mit Bootstrap

100

Ich benutze Bootstrap.

Ich habe einen Text, der 2 oder 3 iframes-basierte Einbettungsvideos enthält.

Diese Daten werden aus der Datenbank abgerufen.

Wie kann ich diese Iframes reaktionsfähig machen?

Beispielcode:

<div class="row">

   <div class="col-lg-12 col-md-12 col-sm-12">

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>

     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe>


     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT

     <iframe src="http://youtube.com/...."></iframe> 

   </div>

</div>

Dies sind dynamische Daten. Wie kann ich darauf reagieren?

twitter-bootstrap iframe New Co.
quelle
mögliches Duplikat von Making a iframe responsive
mpgn
1
Es ist gut zu wissen, welche Version von Bootstrap. Ich habe dies mit zwei Optionen beantwortet.
Christina

Antworten:

215

Option 1

Mit Bootstrap 3.2 können Sie jeden Iframe in den Responsive-Embed-Wrapper Ihrer Wahl einbinden:

http://getbootstrap.com/components/#responsive-embed

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

Option 2

Wenn Sie Ihre Iframes nicht verpacken möchten, können Sie FluidVids https://github.com/toddmotto/fluidvids verwenden . Siehe Demo hier: http://toddmotto.com/labs/fluidvids/

   <!-- fluidvids.js -->
    <script src="js/fluidvids.js"></script>
    <script>
    fluidvids.init({
      selector: ['iframe'],
      players: ['www.youtube.com', 'player.vimeo.com']
    });
    </script>
Christina
quelle
2
nicht in der Lage, die Höhe von zu verringern iframe. Ich wechselte von 100%zu 80%Klasse .embed-responsive iframe. Gibt aber leeren Raum. nach dem Video. Wie vermeide ich diesen Raum?
SatyaTNV
ENDLICH funktioniert das perfekt! Es mag schön sein, das Obligatorische <p>Your browser does not appear to support iframes</p>zwischen die iframeTags zu setzen, aber ich frage mich, ob das heutzutage überhaupt relevant ist ... Nochmals vielen Dank, viele (hackige) Lösungen waren nah, aber das ist perfekt!
Svenevs
1
zu Option 1: Die URL zu den Dokumenten wurde in getbootstrap.com/docs/3.3/components/#responsive-embed
Alexander Schmidt
24

Bitte, check this out, ich hoffe es ist Hilfe

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Mohamed
quelle
Danke dir! Ugh endlich etwas Einfaches, das tatsächlich funktioniert.
Fatimaezzahra Rarhibou
13

Die beste Lösung, die für mich großartig funktioniert hat, ist die, die ich unter dem folgenden Link gefunden habe: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Sie müssen: diesen Code in Ihre CSS-Hauptdatei kopieren,

.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 60px; overflow: hidden;
}

.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

und legen Sie dann Ihr eingebettetes Video auf

<div class="responsive-video">
    <iframe ></iframe>
</div>

Das ist es! Jetzt können Sie reaktionsschnelle Videos auf Ihrer Website verwenden.

Sonnenstrahl
quelle
1
padding-bottom: 56.25%;machen Sie einige seltsame Sachen
Emidomenge
9

Youtube gibt das iframe-Tag also wie folgt aus: 

<iframe width="560" height="315" src="https://www.youtube.com/embed/2EIeUlvHAiM" frameborder="0" allowfullscreen></iframe>

In meinem Fall habe ich es einfach in width = "100%" geändert und den Rest unverändert gelassen. Es ist nicht die eleganteste Lösung (schließlich erhalten Sie bei verschiedenen Geräten seltsame Verhältnisse). Das Video selbst wird jedoch nicht deformiert, sondern nur der Rahmen.

Julianisch
quelle
Reagiert es so? Wenn ja, wird das Seitenverhältnis beibehalten?
Csaba Toth
Schön und einfach. Hat für mich gearbeitet! Vielen Dank!
Joe
Funktioniert auch bei mir. Behalten Sie die vorgeschlagene Höhe bei (in Ihrem Fall 315), ändern Sie jedoch die Breite auf "100%". Skaliert reaktionsschnell und funktioniert gut mit den Bootstrap-Spaltenklassen.
BAERUS
4

Option 3

So aktualisieren Sie den aktuellen Iframe

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
Ratha Hin
quelle