Dynamic Height for Bootstrap 3

Question

I have a <div> like this:

<div class="embed-responsive embed-responsive-16by9">
       <iframe class="embed-responsive-item" src="slider.html"></iframe>
</div>

But when I decrease the screen size to small or medium, I will get white-space beneath the <div>.

Like This:

How can I have a dynamic height for this <div> to avoid the white-space?

Answer 1

You need using javascript to discover the dynamic height.

We have some functions in this links: make iframe height dynamic based on content inside- JQUERY/Javascript

and call when the browser resize.

Answer 2

use media query like and add it to custom css

this is just a sample

@media (min-width: 992px) and (max-width: 1199px) {
 .visible-md-block {
 display: block !important;
}