I am developing a responsive webpage using the bootstrap framework and I want to put a responsive iframe.
The bootstrap docs say that I can set a flexible 16x9 iframe aspect ratio using
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
and css (included in bootstrap.css) -
.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%;
}
As a result, the iframe container (div with class "embed-responsive ...") reacts. This corresponds to the correct width and height according to the resolution. But the iframe is crowded because it does not change.
How to do to resize an iframe to fit the div exactly?
source
share