CODEWITHSUNDEEP
htmlcsstwitter-bootstrapiframe
Josecanalla
Josecanalla

Reputation: 515

Bootstrap responsive iframe not resize

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?

Upvotes: 7

Views: 32091

Answers (4)

stromyc
stromyc

Reputation: 659

Bootstrap 5.3

Ratios can help you build responsive iframe content.

Use the ratio helper to manage the aspect ratios of external content like <iframe>, <embed>, <video>, and <object>.

This will make your content resposive while keeping the aspect ratio you set.

Example from Bootstrap:

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

See Bootstrap documentation for more information: Bootstrap 5.3 Ratio documentation.

Upvotes: 1

Taylor Daughtry
Taylor Daughtry

Reputation: 249

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.

Upvotes: 1

Dylan Valade
Dylan Valade

Reputation: 5605

I wanted clients to add embedded video anywhere in the site without needing to add special markup or containers. This jQuery function makes all iframes on the page responsive and handles videos too without changing any CSS. Default aspect ratio is 16:9 but you can change the aspect ratio if you want to use 4:3 video or add your own aspect ratio (know of vertical video content being created with phones).

https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8

Upvotes: 0

spasticninja
spasticninja

Reputation: 711

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.

Upvotes: 9

Related Questions