ตอบสนองต่อ iframe โดยใช้ Bootstrap

Question 1

ฉันใช้ Bootstrap

ฉันมีข้อความที่มีวิดีโอฝังตาม iframe 2 หรือ 3 รายการ

ข้อมูลนี้ดึงมาจากฐานข้อมูล

ฉันจะทำให้ iframe เหล่านี้ตอบสนองได้อย่างไร

ตัวอย่างรหัส:

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

นี่คือข้อมูลแบบไดนามิก ฉันจะตอบสนองได้อย่างไร

Question 2

ตัวเลือกที่ 1

ด้วย Bootstrap 3.2 คุณสามารถรวม iframe แต่ละตัวไว้ใน Wrapper แบบฝังตอบสนองที่คุณเลือกได้:

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>

ทางเลือกที่ 2

หากคุณไม่ต้องการที่จะห่อใน iframe ของคุณคุณสามารถใช้ FluidVids https://github.com/toddmotto/fluidvids ดูการสาธิตที่นี่: 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>

Question 3

โปรดลองดูฉันหวังว่ามันจะช่วยได้

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

Question 4

ทางออกที่ดีที่สุดที่ได้ผลดีสำหรับฉัน

คุณต้อง: คัดลอกโค้ดนี้ไปยังไฟล์ 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%;
}

จากนั้นใส่วิดีโอที่ฝังไว้

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

แค่นั้นแหละ! ตอนนี้คุณสามารถใช้วิดีโอที่ตอบสนองบนไซต์ของคุณได้แล้ว

Question 5

ดังนั้น youtube จึงให้แท็ก iframe ดังนี้:

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

ในกรณีของฉันฉันเพิ่งเปลี่ยนเป็น width = "100%" และปล่อยที่เหลือไว้ตามที่เป็นอยู่ ไม่ใช่วิธีแก้ปัญหาที่หรูหราที่สุด (ในอุปกรณ์ต่าง ๆ คุณจะได้อัตราส่วนแปลก ๆ ) แต่ตัววิดีโอเองก็ไม่ได้รับความผิดปกติเพียงแค่เฟรมเท่านั้น

Question 6

ตัวเลือก 3

เพื่ออัปเดต iframe ปัจจุบัน

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

Question 7

ทำงานในช่วงเดือนสิงหาคม 2020

ใช้สิ่งนี้

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

ใช้อัตราส่วนภาพเดียว

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

ภายในตัวเลือกการใช้ 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>