javascript - How do I make iframes responsive without using div? - Stack Overflow

admin管理员组

文章数量:1356808

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="" 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.

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

• javascript
• html
• css
• wordpress
• iframe

Share Improve this question Follow edited May 23, 2017 at 12:09 CommunityBot 111 silver badge asked Feb 27, 2017 at 19:12 SparkAndShineSparkAndShine 18.1k2727 gold badges9999 silver badges139139 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./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./embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

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./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!");
  });
});

Use bootstrap class to make iframe responsive.

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

本文标签： javascriptHow do I make iframes responsive without using divStack Overflow