Iframe responsif menggunakan Bootstrap

100

Saya menggunakan Bootstrap.

Saya memiliki teks yang berisi 2 atau 3 video sematan berbasis iframe.

Data ini diambil dari database.

Bagaimana cara membuat iframe ini responsif?

Kode Contoh:

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

Ini adalah data dinamis. Bagaimana cara membuatnya responsif?

twitter-bootstrap iframe Co Baru
sumber
kemungkinan duplikat Membuat iframe responsif
mpgn
1
Sebaiknya perhatikan versi Bootstrap yang mana. Saya telah menjawab ini dengan dua opsi.
Christina

Jawaban:

215

Pilihan 1

Dengan Bootstrap 3.2 Anda dapat membungkus setiap iframe dalam bungkus responsif-embed pilihan Anda:

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>

pilihan 2

Jika Anda tidak ingin membungkus iframe Anda, Anda dapat menggunakan FluidVids https://github.com/toddmotto/fluidvids . Lihat demo di sini: 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
sumber
2
tidak dapat menurunkan ketinggian iframe. Aku berubah dari 100%ke 80%kelas .embed-responsive iframe. Tapi memberi ruang kosong. setelah video. Bagaimana menghindari ruang ini.
SatyaTNV
AKHIRNYA ini bekerja dengan sempurna! Mungkin menyenangkan untuk menyertakan wajib di <p>Your browser does not appear to support iframes</p>antara iframetag, tetapi saya bertanya-tanya apakah itu relevan hari ini ... terima kasih sekali lagi, banyak solusi (hacky) yang dekat, tetapi ini sempurna!
svenevs
1
ke Opsi 1: url ke dokumen diubah menjadi getbootstrap.com/docs/3.3/components/#responsive-embed
Alexander Schmidt
gunakan satu rasio aspek dan sertakan ini untuk membuatnya bekerja - >> <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/… > dan di dalam tag iframe -> frameborder = "0" style = "overflow: hidden; overflow-x: tersembunyi; overflow-y: tersembunyi; tinggi: 100%; lebar: 100%; posisi: mutlak; atas: 0px; kiri: 0px; kanan: 0px; bawah: 0px; "height =" 100% "width =" 100% "
krishna
24

Tolong, Lihat ini, saya harap ini membantu

<div class="row">
 <iframe class="col-lg-12 col-md-12 col-sm-12" src="http://www.w3schools.com">
 </iframe>
</div>
Mohamed
sumber
Terima kasih! Ugh akhirnya sesuatu yang sederhana yang benar-benar berfungsi.
Fatimaezzahra Rarhibou
13

Solusi terbaik yang bekerja sangat baik bagi saya adalah yang saya temukan di tautan di bawah ini: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Anda harus: Salin kode ini ke file CSS utama Anda,

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

lalu tempatkan video tersemat Anda ke

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

Itu dia! Sekarang Anda dapat menggunakan video responsif di situs Anda.

sinar matahari
sumber
1
padding-bottom: 56.25%;membuat beberapa hal aneh
Emidomenge
9

Jadi, youtube memberikan tag iframe sebagai berikut: 

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

Dalam kasus saya, saya hanya mengubahnya menjadi width = "100%" dan membiarkan sisanya apa adanya. Ini bukan solusi paling elegan (lagipula, di perangkat yang berbeda Anda akan mendapatkan rasio yang aneh) Tetapi videonya sendiri tidak berubah bentuk, hanya bingkainya.

Julián
sumber
Apakah itu responsif seperti itu? Jika ya, apakah rasio aspeknya akan dipertahankan?
Csaba Toth
Bagus dan sederhana. Bekerja untuk saya! Terima kasih!
Joe
Bekerja untuk saya juga. Pertahankan tinggi yang disarankan (dalam kasus Anda 315), tetapi ubah lebarnya menjadi "100%". Penskalaan secara responsif dan berfungsi dengan baik dengan kelas kolom bootstrap.
BAERUS
4

Pilihan 3

Untuk memperbarui iframe saat ini

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

Bekerja selama Agustus 2020

Gunakan ini

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

gunakan satu rasio aspek

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

dalam opsi penggunaan 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>
krishna
sumber