How do I make iframes responsive without using div?

Question

I learnt from this post (Making an iframe responsive) that make an iframe responsive by adding a container with a class around the iframe, for instance,

<div class="intrinsic-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>

Is there possible to embed <iframe>...</iframe> directly in my posts (without using <div>...</div>)? And I tried these solutions, but all of them don't work.

PS: I use two columns layout in WordPress. The ratio of video can be 16:9 (from YouTube), 4:3 (from Tencent), etc. Here is a temporary demo.

score 7 · Accepted Answer · answered Feb 27 '17 at 19:33

7

If you can use viewport units that is doable without an extra wrapper element.

Full page width:

iframe {
  width: 100vw;
  height: 56.25vw; /*16:9*/
}

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

Half page width:

iframe {
  width: 50vw;
  height: 28.125vw; /*16:9*/
}

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

answered Feb 27 '17 at 19:33

Stickers

75,527
23
147
186

I use two columns layout in WordPress. So, I need to set `width` to (100vw - the width of sidebar)? But sidebar appears differently on the desktop and mobile platform. Here is a [demo](http://sparkandshine.net/en/a-three-minutes-short-film-dejeuner-du-matin-breakfast/). – SparkAndShine Feb 27 '17 at 20:53
Another issue: the ratio of videos is not always 16:9. Some videos from other platform is `width="640" height="498"` by default (the ratio is 4:3). – SparkAndShine Feb 27 '17 at 20:57
@sparkandshine It's up to you whether to convert both #primary and #secondary to vw, and do the calc for the size of the iframe or just use a div to wrap the it if that's easier. For 16:9 vs 4:3 ratio, sounds like using a wrapper with class is the easiest approach. – Stickers Feb 27 '17 at 21:00
Many thanks. I tried to use a wrapper, but encountered new issues. I invite you to answer my new question, [Responsive iframe for different aspect ratio](http://stackoverflow.com/questions/42496354/responsive-iframe-for-different-aspect-ratio). – SparkAndShine Feb 27 '17 at 21:52

score 2 · Answer 2 · answered Feb 27 '17 at 20:29

The key here is the height and width ratio you want to keep. I took the liberty of using jQuery instead of javascript to do this. The code triggers upon clicking the button. It calculates the width and height ratio of the iframe and adapts both to your needs (in this case I assumed you wanted it to fill the containers width).

You'll probably want to loop through all videos if you have multiple on one page and run the code on window resizing and page-loading.

Here is the JSFiddle

Hope it helps :)

html

<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe>
<button id="button" style="float: left">Click me!</button>

jQuery

$(document).ready(function(){
  $("button").click(function(){
    var ratio = $("#iframe").height() / $("#iframe").width();
    $("#iframe").width("100%");
    var newWidth = $("#iframe").width();
    $("#iframe").width(newWidth);
    $("#iframe").height(newWidth*ratio);
    $("button").text("resize the window and click me again!");
  });
});

score -1 · Answer 3 · edited Feb 27 '17 at 19:55

-1

Use bootstrap class to make iframe responsive.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" allowfullscreen
            src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" >
    </iframe>
</div>

edited Feb 27 '17 at 19:55

SparkAndShine

17,001
22
90
134

answered Feb 27 '17 at 19:24

amar patwa

9
1

4

Using Bootstrap for this is like to take a sledgehammer to crack a nut – Mattonit Feb 27 '17 at 19:38
1

Not to mention the OP said specifically "without using div" - I came across this because clients have habits of dropping iframes all over the place. I cannot tell the clients to wrap it in a div. Likewise, maybe the OP is asking because we can do nothing but prepare CSS. No markup modification. No js. Just CSS. – Kai Qing Sep 03 '20 at 16:32

How do I make iframes responsive without using div?

3 Answers3