Responsywny element iframe przy użyciu Bootstrap

102

Używam Bootstrap.

Mam tekst, który zawiera 2 lub 3 filmy osadzone w ramkach iframe.

Te dane są pobierane z bazy danych.

Jak sprawić, by te elementy iframe były responsywne?

Przykładowy kod:

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

To są dane dynamiczne. Jak mogę sprawić, by był responsywny?

twitter-bootstrap iframe New Co
źródło
możliwy duplikat tworzenia responsywnego elementu iframe
mpgn
1
Warto zwrócić uwagę, która wersja Bootstrap. Odpowiedziałem na to dwiema opcjami.
Christina

Odpowiedzi:

215

opcja 1

Dzięki Bootstrap 3.2 możesz umieścić każdy element iframe w wybranym przez siebie opakowaniu responsywnym:

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>

Opcja 2

Jeśli nie chcesz zawijać ramek iframe, możesz użyć FluidVids https://github.com/toddmotto/fluidvids . Zobacz demo tutaj: 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
źródło
2
nie można zmniejszyć wysokości iframe. Zmieniłem od 100%do 80%klasy .embed-responsive iframe. Ale daje pustą przestrzeń. po filmie. Jak uniknąć tej przestrzeni.
SatyaTNV
WRESZCIE to działa doskonale! Fajnie byłoby umieścić obowiązkowe <p>Your browser does not appear to support iframes</p>między iframetagami, ale zastanawiam się, czy to w ogóle ma znaczenie w dzisiejszych czasach ... jeszcze raz dzięki, wiele (hack) rozwiązań było bliskich, ale to jest idealne!
svenevs
1
na opcję 1: adres URL do dokumentów zmieniony na getbootstrap.com/docs/3.3/components/#responsive-embed
Alexander Schmidt,
użyj jednego współczynnika proporcji i dołącz go, aby działał - >> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css "> <script src = " maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/… > a wewnątrz tagu iframe -> frameborder = "0" style = "overflow: hidden; overflow-x: ukryty; overflow-y: ukryty; wysokość: 100%; szerokość: 100%; pozycja: bezwzględna; top: 0px; po lewej: 0px; po prawej: 0px; dół: 0px; "height =" 100% "width =" 100% "
krishna
24

Proszę, sprawdź to, mam nadzieję, że to pomoże

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Mohamed
źródło
Dziękuję Ci! Ugh wreszcie coś prostego, co faktycznie działa.
Fatimaezzahra Rarhibou
14

Najlepsze rozwiązanie, które świetnie się sprawdziło.

Musisz: Skopiować ten kod do głównego pliku CSS,

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

a następnie umieść osadzone wideo w

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

Otóż ​​to! Teraz możesz używać responsywnych filmów w swojej witrynie.

promienie słoneczne
źródło
1
padding-bottom: 56.25%;robić dziwne rzeczy
Emidomenge
9

Więc youtube przekazuje tag iframe w następujący sposób: 

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

W moim przypadku po prostu zmieniłem to na width = "100%" i resztę zostawiłem bez zmian. Nie jest to najbardziej eleganckie rozwiązanie (w końcu na różnych urządzeniach dostaniesz dziwne proporcje), ale sam film się nie deformuje, tylko klatka.

Juliański
źródło
Czy reaguje w ten sposób? Jeśli tak, czy zachowa proporcje?
Csaba Toth
Ładnie i prosto. Pracował dla mnie! Dzięki!
Joe
U mnie też działa. Zachowaj sugerowaną wysokość (w twoim przypadku 315), ale zmień szerokość na „100%”. Skaluje się responsywnie i dobrze współpracuje z klasami kolumn ładowania początkowego.
BAERUS,
4

Opcja 3

Aby zaktualizować bieżący element iframe

$("iframe").wrap('<div class="embed-responsive embed-responsive-16by9"/>');
$("iframe").addClass('embed-responsive-item');
Ratha Hin
źródło
0

Pracuje w sierpniu 2020 r

Użyj tego

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

użyj jednego współczynnika proporcji

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

w ramach elementu iframe użyj opcji

 <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>
krishna
źródło