Iframe đáp ứng bằng Bootstrap

Tôi đang sử dụng Bootstrap.

Tôi có một văn bản chứa 2 hoặc 3 video nhúng dựa trên iframe.

Dữ liệu này được lấy từ cơ sở dữ liệu.

Làm cách nào để làm cho các iframe này phản hồi?

Mã ví dụ:

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

Đây là một dữ liệu động. Làm thế nào tôi có thể làm cho nó phản hồi?

lựa chọn 1

Với Bootstrap 3.2, bạn có thể bọc từng iframe trong trình bao bọc nhúng đáp ứng mà bạn chọn:

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>

Lựa chọn 2

Nếu không muốn bọc iframe của mình, bạn có thể sử dụng FluidVids https://github.com/toddmotto/fluidvids . Xem demo tại đây: 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àm ơn, hãy kiểm tra cái này, tôi hy vọng nó sẽ giúp

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

Giải pháp tốt nhất phù hợp với tôi là giải pháp tôi tìm thấy trong liên kết bên dưới: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

Bạn phải: Sao chép mã này vào tệp CSS chính của bạ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%;
}

và sau đó đưa video đã nhúng của bạn vào

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

Đó là nó! Bây giờ bạn có thể sử dụng video đáp ứng trên trang web của mình.

Vì vậy, youtube đưa ra thẻ iframe như sau:

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

Trong trường hợp của tôi, tôi chỉ thay đổi nó thành width = "100%" và giữ nguyên phần còn lại. Đó không phải là giải pháp thanh lịch nhất (sau tất cả, ở các thiết bị khác nhau, bạn sẽ nhận được tỷ lệ kỳ lạ) Nhưng bản thân video không bị biến dạng, chỉ là khung hình.

Lựa chọn 3

Để cập nhật iframe hiện tại

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