Menu
Is it possible to set a size to an inframe in bootstrap?
I set up the iframe like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
And I tried to set a maximum height to 450 px with this:
.embed-responsive {
max-height:450px;
}
This had no effect at all. Can you give me a hint, how could achieve a smaller but still responsive iframe?
769
Using the window. postMessage() method, we can safely communicate between the iframe and the parent window. That way, we can send a height value from the iframe to the parent window. Then, in the parent window, we can set a simple script to dynamically update the height of the iframe.
What you can do is set specific width and height to your iframe (for example these could be equal to your window dimensions) and then applying a scale transformation to it. The scale value will be the ratio between your window width and the dimension you wanted to set to your iframe.
The iframe itself ('the box') can be responsive. But everything inside the iframe is a separate page, and therefore not in the domain of your CSS nor JS.
I've had the same problem and solved it by adding a row and col-sm-8 (according to what size you'd like) around the .embed-responsive div.
<div class="row">
<div class="col-sm-8">
<div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
