Bootstrap kullanan duyarlı iframe

Bootstrap kullanıyorum.

2 veya 3 iframe tabanlı gömülü video içeren bir metnim var.

Bu veriler, veri tabanından alınır.

Bu iframe'leri nasıl duyarlı hale getirebilirim?

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

Bu dinamik bir veridir. Nasıl duyarlı hale getirebilirim?

seçenek 1

Bootstrap 3.2 ile her bir iframe'i seçtiğiniz duyarlı yerleştirme sarmalayıcısına sarabilirsiniz:

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>

seçenek 2

Iframe'lerinizi sarmalamak istemiyorsanız FluidVids'i https://github.com/toddmotto/fluidvids kullanabilirsiniz . Demoyu buradan izleyin : 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>

Lütfen, şuna bir bakın, umarım yardımcı olur

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

Benim için harika çalışan en iyi çözüm.

Yapmanız gerekenler: Bu kodu ana CSS dosyanıza kopyalayın,

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

ve sonra gömülü videonuzu şuraya yerleştirin:

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

Bu kadar! Artık sitenizde duyarlı videoları kullanabilirsiniz.

Dolayısıyla, youtube, iframe etiketini aşağıdaki gibi verir:

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

Benim durumumda, sadece width = "100%" olarak değiştirdim ve gerisini olduğu gibi bıraktım. Bu en zarif çözüm değil (sonuçta, farklı cihazlarda tuhaf oranlar elde edeceksiniz) Ancak videonun kendisi deforme olmuyor, sadece çerçeve.

3. Seçenek

Mevcut iframe'i güncellemek için

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

Ağustos 2020 boyunca çalışmak

bunu kullan

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

bir en boy oranı kullan

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

iframe içinde seçenekleri kullanın

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