title: Bootstrap responsive video but with max-width AND centered
body: <p>To make a responsive 4x3 video embed for YouTube videos, the Bootstrap site says do this:</p>
  
  <pre><code>&lt;div class="embed-responsive embed-responsive-4by3"&gt;
    &lt;iframe class="embed-responsive-item youtube" src="…"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I want the video to have a max-width of 400px.  So I defined a class:</p>
  
  <pre><code>.youtube {
      max-width: 400px;
      max-height: 300px;
  }
  </code></pre>
  
  <p>I tried this and it works:</p>
  
  <pre><code>&lt;div class="embed-responsive embed-responsive-4by3"&gt;
    &lt;iframe class="embed-responsive-item youtube" src="…"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But for the life of me I cannot make this max-width (yet responsive below that max) iframe centered.  I've already tried adding <code>.center-block</code> to <code>.embed-responsive</code> and to <code>.embed-responsive-item</code>, but it does nothing.  Any ideas?</p>