부트 스트랩을 사용한 반응 형 iframe

부트 스트랩을 사용한 반응 형 iframe

---

부트 스트랩을 사용하고 있습니다.

2 개 또는 3 개의 iframe 기반 삽입 동영상이 포함 된 텍스트가 있습니다.

이 데이터는 데이터베이스에서 가져옵니다.

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

이것은 동적 데이터입니다. 반응 형으로 만들려면 어떻게해야합니까?

---

옵션 1

Bootstrap 3.2를 사용하면 선택한 반응 형 임베드 래퍼에 각 iframe을 래핑 할 수 있습니다.

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>

---

제발, 이것 좀 봐, 도움이 되었으면 좋겠어

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

---

The best solution that worked great for me is the one I found in the link below: https://bootstrapmaster.com/implement-responsive-youtube-vimeo-embed-iframe-twitter-bootstrap-3/

You have to: Copy this code to your main CSS file,

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

and then put your embeded video to

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

That’s it! Now you can use responsive videos on your site.

---

So, youtube gives out the iframe tag as follows:

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

In my case, i just changed it to width="100%" and left the rest as is. It's not the most elegant solution (after all, in different devices you'll get weird ratios) But the video itself does not get deformed, just the frame.

---

Option 3

To update current iframe

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

참고URL : https://stackoverflow.com/questions/25228056/responsive-iframe-using-bootstrap