title: bootstrap 3 responsive embed
body: <p>I am using bootstrap 3's responsive embed code but for some reason, I always have a huge gap under the object I am embedding. </p>
  
  <p>This is the code I am using:</p>
  
  <pre><code>&lt;div class="embed-responsive embed-responsive-16by9"&gt;
  &lt;iframe&gt;code goes here&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is bootstrap's stock:</p>
  
  <pre><code>.embed-responsive-16by9 {
    padding-bottom: 56.25%;
  }
  </code></pre>
  
  <p>I can reduce the bottom padding by manipulating the above css but that doesn't seem to be the way this should work.</p>
  
  <p>Do I perhaps have to wrap the embed code in another div?</p>