title: Scaling iframes for responsive design CSS-only
body: <p>A lot of sites have embedded Youtube videos. Youtube works on phones now. If responsive design is going to be a thing, why shouldn't it be a thing for iframes that contain Youtube videos?</p>
  
  <p>After searching for days (on and off) I couldn't find a clear, simple solution to the problem (I'm new to HTML/CSS). It's easy to scale iframe width, but to keep height relative I found chunks of javascript, jQuery, and php, all pretty esoteric to a beginner at web design. I wanted a simple method of scaling an iframe's height to always keep a certain aspect ratio, no matter how the width changes.</p>
  
  <p>To keep this from being an unanswered question, the method's below. Here are the initial settings for your iframe:</p>
  
  <pre><code>&lt;iframe src="//www.youtube.com/embed/example_url" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>That's it.</p>
  
  <p>I was wondering if anyone had any other solutions as well.</p>