title: Bootstrap responsive embed video takes up the whole width and height of the screen
body: <p>I have been trying to embed a video into bootstrap website.</p>
  
  <p>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.</p>
  
  <p>I have used:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="embed-responsive embed-responsive-16by9 div_style"&gt;
          &lt;iframe class="embed-responsive-item" src="http://www.youtube.com/embed/XGSy3_Czz8k" width="560" height="315" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I try to customize <code>div</code> tag by adding <code>div_style</code> class <code>max-width: 560px;</code> and <code>max-height:315px;</code>, It changes video width to 560px but the height takes up the whole page height.</p>