Bootstrap responsive embed video takes up the whole width and height of the screen

Question

I have been trying to embed a video into bootstrap website.

But when I do, it takes up the whole width and height of the screen. I want it to be 560px x 315px on desktops and it should be responsive when the desktop size goes below 560px.

I have used:

<div class="container-fluid">
    <div class="embed-responsive embed-responsive-16by9 div_style">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

When I try to customize div tag by adding div_style class max-width: 560px; and max-height:315px;, It changes video width to 560px but the height takes up the whole page height.

Answer 1

You missed to add col-xs-12 col-sm-6 col-md-4 col-lg-2. Something like this.

<div class="container-fluid">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 padding-zero embed-responsive embed-responsive-16by9">
        <div id="foxnews">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KFGbHBbXG_g?modestbranding=1&amp;autohide=1&amp;showinfo=0&amp;rel=0" allowfullscreen="true"></iframe>
        </div>
    </div>
</div>

Answer 2

The bootstrap embed-responsive classes use padding-bottom to set the "height" of the element.

You can change this property along with width within a media query for your desired effect.

@media all and ( min-width: 560px ) {
    .div_style { 
        width:560px;
        padding-bottom:315px !important;
    }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="embed-responsive embed-responsive-16by9 div_style">
    <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  </div>
</div>