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

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