title: How to remove a large indentation (padding) under the embed video?
body: <p>A large indent under the video is formed:
  <a href="https://screenshotscdn.firefoxusercontent.com/images/e8c751a1-34b3-4ca8-9130-ed78e6558b71.png" rel="nofollow noreferrer">https://screenshotscdn.firefoxusercontent.com/images/e8c751a1-34b3-4ca8-9130-ed78e6558b71.png</a></p>
  
  <pre><code>&lt;div class="embed-responsive"&gt;&lt;iframe src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;&lt;/div&gt;
  </code></pre>
  
  <p>@media (min-width:1200px) {</p>
  
  <pre><code>  .embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;  
    padding-bottom: 56.25%;
  }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height:auto;
    width:auto;
    max-width: 80%;
    max-height: 80%;
    border: 0;
    padding-bottom: 10px;
  }
  </code></pre>
  
  <p>}</p>
  
  <p>At lower resolution, standard code (without 80%) works correctly:</p>
  
  <pre><code>    .embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;  
    padding-bottom: 56.25%;
  }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding-bottom: 10px;
  }
  </code></pre>