CODEWITHSUNDEEP
javascripthtmlcsswordpressiframe
SparkAndShine
SparkAndShine

Reputation: 18047

How do I make iframes responsive without using div?

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.

enter image description here

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.

Upvotes: 4

Views: 4566

Answers (3)

Rob Monhemius
Rob Monhemius

Reputation: 5144

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

Upvotes: 2

amar patwa
amar patwa

Reputation: 9

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>

Upvotes: -1

Stickers
Stickers

Reputation: 78756

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>

Upvotes: 7

Related Questions