Responsive iframe using bootstrap

Question

I am using Bootstrap.

I have text containing 2 or 3 iframes based embedded videos.

This data is retrieved from the database.

How can I make these iframes responsive?

Code example:

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

This is dynamic data. How can I make it responsive?

Answer 1

Option 1

With Bootstrap 3.2, you can wrap each iframe in the responsive-embed wrapper of your choice:

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> 

Option 2

If you don't want to wrap your frames, you can use FluidVids https://github.com/toddmotto/fluidvids . See the demo here: 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> 

Answer 2

Please check this out, I hope this helps

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

Answer 3

The best solution that works 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 should: Copy this code into the 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 add the embedded video to

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

Here it is! Now you can use responsive videos on your website.

Answer 4

Option 3

To update the current iframe

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

Answer 5

So youtube produces an 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. This is not the most elegant solution (in the end, on different devices you will get strange odds). But the video itself does not deform, just a frame.