title: How Do I Make Sure An iFrame's Aspect Ratio Is Responsive?
body: <p>I have a very simple question.
  How do I make sure an iframe's aspect ratio is responsive?</p>
  
  <p>The iframe is a YouTube Video, and I want the aspect ratio of the iframe to remain 16:9 no matter the browser window size.</p>
  
  <p>Here is my current code for mobile devices:</p>
  
  <pre><code>@media screen and (max-width: 600px) {
    iframe, body {
      max-width: 90vw;
      height: auto;
    }
  }
  
  iframe {
    border: 0;
    width: 600px;
    height: 338px;
  }
  </code></pre>
  
  <p>Because YouTube iframes do not keep aspect ratio automatically, I need a way to keep the aspect ratio of the video, and the width to be 90vw. The problem with this current code is that, it only adapts the width, leaving unwanted letterboxing.</p>