title: How to add max-width to responsive iframe?
body: <p>I've cobbled together <a href="https://jsfiddle.net/2nu817d9/" rel="nofollow noreferrer">this little fiddle here</a> and I'm happy with the visual result. The goal was to make a centered responsive video iframe.</p>
  
  <p>But I've been unable to figure out a good way to add a max-width of 1920px.
  If you have a full HD video it would be nice to not let it go any bigger.</p>
  
  <p>And if my CSS can be improved, don't hesitate.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="embed-responsive"&gt;
           &lt;iframe width="640" height="360" src="https://player.vimeo.com/video/176131682?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  html, body {
      height: 100%;
      margin: 0;
  }
  .container {
      height: 100%;
  
  }
  .embed-responsive {
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      margin-top: -28.1%;
      /* video height / video width */
      padding-bottom: 56.2%;
      height: 0;
      overflow: hidden;
  }
  .embed-responsive iframe {
      position: absolute;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
      margin: auto;
  }
  </code></pre>