Responsieve iframe met Bootstrap

Ik gebruik Bootstrap.

Ik heb een tekst die 2 of 3 op iframes gebaseerde ingesloten video’s bevat.

Deze gegevens worden opgehaald uit de database.

Hoe kan ik deze iframes responsief maken?

Voorbeeldcode:

<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="https://youtube.com/...."></iframe>
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     <iframe src="https://youtube.com/...."></iframe>
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     SOME TEXT SOME TEXT SOME TEXT SOME TEXT
     <iframe src="https://youtube.com/...."></iframe> 
   </div>
</div>

Dit zijn dynamische gegevens. Hoe kan ik het responsief maken?

Antwoord 1, autoriteit 100%

Optie 1

Met Bootstrap 3.2 kun je elk iframe in de responsive-embed wrapper van je keuze inpakken:

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>

Optie 2

Als u uw iframes niet wilt inpakken, kunt u FluidVids https://github.com/toddmotto/fluidvids. Bekijk hier de demo: 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>

Antwoord 2, autoriteit 12%

Alsjeblieft, kijk hier eens naar, ik hoop dat het je helpt

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="https://www.w3schools.com">
 </iframe>
</div>

Antwoord 3, autoriteit 7%

De beste oplossing die uitstekend werkte voor mij.

Je moet:
Kopieer deze code naar je CSS-hoofdbestand,

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

en zet je ingesloten video vervolgens op

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

Dat is het! Nu kunt u responsieve video’s op uw site gebruiken.

Antwoord 4, autoriteit 4%

Dus YouTube geeft de iframe-tag als volgt weer:

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

In mijn geval heb ik het gewoon gewijzigd in width=”100%” en de rest gelaten zoals het is. Het is niet de meest elegante oplossing (per slot van rekening krijg je op verschillende apparaten rare verhoudingen) Maar de video zelf wordt niet vervormd, alleen het frame.

Antwoord 5, autoriteit 2%

Optie 3

Huidige iframe bijwerken

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

Antwoord 6

Werk in augustus 2020

gebruik dit

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

gebruik één beeldverhouding

<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

gebruiksopties binnen iframe

<iframe class="embed-responsive-item" src="..."
  frameborder="0"
    style="
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    "
    height="100%"
    width="100%"
  ></iframe>