title: Responsive video iframes (keeping aspect ratio) with only CSS?
body: <p>I usually use a similar solution to <a href="https://stackoverflow.com/questions/21054426/scaling-iframes-for-responsive-design-css-only">this one</a>. Something like:</p>
  <pre><code>.wrapper {
     position: relative;
     width: 100%;
     height: 0;
     padding-bottom: 56.25%;
  }
  .wrapper iframe {
     position:absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
  }
  </code></pre>
  <p>But this time I have no access to the HTML or JavaScript code so I can't use a wrapper to prevent the <code>height:0</code>.</p>
  <p>Is there a way to make an iframe responsive (and to keep the ratio) with only CSS?</p>
  <p>Tried this (works with the iframe but not with its content):</p>
  <pre><code>iframe {
      width: 100%;
      background: red;
      height: 0;
      padding-bottom: 33%;    
  }
  </code></pre>
  <p><a href="http://jsfiddle.net/tuosf0Ly/4/" rel="noreferrer">fiddle</a></p>
  <p>Any thoughts? No need to support old browsers so even a CSS3 solution would be great.</p>