title: creating a 16:9 aspect ratio iframe based on browser size (percentage)
body: <p>how can I set a iframe size (in my case - featherlight iframe playing youtube) to be a percentage of the browser windows ?</p>
  
  <p>I have a browser that may be any size, and I want to set the iframe width to be 80% of browser window..</p>
  
  <p><a href="https://stackoverflow.com/questions/8014478/169-aspect-ratio-with-fixed-width">16:9 aspect ratio with fixed width</a> mentions how to set the 16:9 height once I select a width. I don't understand how to use it.</p>
  
  <p>any jsfiddle example (or codepen) will help a lot. I have tried a bunch of different ways - but the iframe does not maintain aspect ratio.</p>
  
  <p><a href="http://codepen.io/anon/pen/zvqQgq" rel="noreferrer">http://codepen.io/anon/pen/zvqQgq</a></p>
  
  <pre><code>&lt;iframe src="https://www.youtube.com/embed/YAcLViTHDOo" width="50%" class="player" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>How can I set the width to be 80% of browser window and allow height to be 16:9 ratio of the 80% of the width ?</p>