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

3 Answers 3

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>