Bootstrap responsive iframe not resize

Question

I am developing a responsive web page using bootstrap framework, and I want to put a responsive iframe.

The bootstrap docs says that I can put a responsive 16x9 aspect ratio iframe using

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

and the css (included in the bootstrap.css) is

.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}

.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

The result is that the container of the iframe (the div with class "embed-responsive...") is responsive. This takes the correct width and height according to the resolution. But the iframe is overflowed, because it is not resized.

How can I do to resize the iframe to exactly fill the div?

Answer 1

I was having this problem too. I found a somewhat hack solution. In the iframe section: width:100% so it should look like:

<iframe class="embed-responsive-item" src="…" width="100%"></iframe>

I had to set a fixed value for my height because the iframe source isn't responsive.

Hope that helps.

Answer 2

You can use boostrap for this, but it's such a simple task that you really don't need any framework to help you with this. Check out Responsive Iframes; it's not using any frameworks, and is written in native javascript.