title: Scale iFrame css width 100% like an image
body: <p>I want to scale an iFrame through CSS to <code>width: 100%</code>, and the height should scale proportionally to the width.</p>
  
  <p>With an <code>&lt;img&gt;</code> tag this works fine.</p>
  
  <p>Both the image and the iFrame have defined width and height in the html.</p>
  
  <p>Here some examples:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;style&gt;
          #a{ width: 500px; }
          img{ width: 100%; height: auto }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="a"&gt;
              &lt;img src="http://lorempixel.com/200/150/" width="200" height="150" /&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>This works great on images, but I would like the same behaviour for iFrames:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;style&gt;
          #a{ width: 900px; background: grey;}
          iframe{ width: 100%; height: auto }
      &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="a"&gt;
              &lt;iframe width="560" height="315" src="http://www.youtube.com/embed/RksyMaJiD8Y" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>The iFrame renders 100% wide but does not scale it's height proportional like the image does.</p>