Responsive iframe using Bootstrap

Question

I am using Bootstrap.

I have a text which contains 2 or 3 iframes based embed videos.

This data is fetched from database.

How can I make these iframes responsive?

Example Code:

<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 a dynamic data. How can I make it responsive?

possible duplicate of [Making an iframe responsive](http://stackoverflow.com/questions/17838607/making-an-iframe-responsive) — mpgn, Aug 10 '14 at 11:25
It's good to note which version of Bootstrap. I've answered this with two options. — Christina, Aug 10 '14 at 20:54

score 224 · Answer 1 · answered Aug 10 '14 at 20:52

224

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 iframes, you can use FluidVids https://github.com/toddmotto/fluidvids. See 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>

answered Aug 10 '14 at 20:52

Christina

34,296
17
83
119

2

unable decrease height of `iframe`. I changed from `100%` to `80%` class `.embed-responsive iframe`. But is giving empty space. after the video. How to avoid this space. – SatyaTNV Aug 26 '15 at 18:38
FINALLY this works perfectly! It might be nice to include the obligatory `
Your browser does not appear to support iframes
` between the `iframe` tags, but I'm wondering if that's even relevant these days...thanks again, many (hacky) solutions were close, but this is perfect! – svenevs Nov 27 '16 at 18:33
1

to Option 1: the url to the docs changed to https://getbootstrap.com/docs/3.3/components/#responsive-embed – Alex Aug 24 '17 at 09:36
use one aspect ratio and include this to get it work-->> and within iframe tag --> 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%" – krishna Aug 18 '20 at 12:54
The URL changes depending on the version of Bootstrap. Currently referred to as Embeds. https://getbootstrap.com/docs/4.5/utilities/embed/ – Michael Glenn Nov 14 '20 at 14:52

score 32 · Answer 2 · answered Jun 23 '15 at 09:59

32

Please, Check this out, I hope it's help

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

answered Jun 23 '15 at 09:59

Mohamed

337
3
2

Thank you! Ugh finally something simple that actually works. – Fatimaezzahra Rarhibou Sep 23 '18 at 00:07

score 20 · Answer 3 · edited Sep 03 '20 at 14:58

20

The best solution that worked great for me.

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.

edited Sep 03 '20 at 14:58

PJunior

2,649
1
33
29

answered Apr 22 '16 at 10:27

sunblast

219
2
7

1

`padding-bottom: 56.25%;` make some weird stuff – Emidomenge Jul 07 '16 at 08:31

score 9 · Answer 4 · answered Sep 06 '15 at 16:48

9

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.

answered Sep 06 '15 at 16:48

Julián

91
1
1

Is it responsive that way? If it is, will it keep the aspect ratio? – Csaba Toth Dec 01 '15 at 20:22
Nice and simple. Worked for me! Thanks! – Joe Jun 17 '16 at 12:11
Works for me too. Keeping the suggested height (in your case 315), but change the width to "100%". Scales responsivly and works well with the bootstrap column classes. – BAERUS Jan 21 '18 at 13:01

score 3 · Answer 5 · answered Apr 28 '15 at 07:47

3

Option 3

To update current iframe

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

answered Apr 28 '15 at 07:47

Ratha Hin

670
7
13

score 2 · Answer 6 · answered Aug 18 '20 at 12:59

Working during August 2020

use this

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

use one aspect ratio

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

within iframe use options

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

score 1 · Answer 7 · answered Jul 28 '22 at 06:58

You can use the below syntax to make iframes responsive in Bootstrap 5:

<div class="ratio ratio-16x9">
  <iframe src="LinkHere" title="YouTube video" allowfullscreen></iframe>
</div>

Aspect ratios other than 16x9:

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

Responsive iframe using Bootstrap

7 Answers7

Option 1

Option 2

Linked