title: Making an iframe responsive
body: <p>I was reading <a href="https://stackoverflow.com/questions/13854198/can-you-make-an-iframe-responsive">Can You Make an iFrame Responsive?</a>, and one of the comments/answers led me to <a href="http://jsfiddle.net/Masau/7WRHM/" rel="noreferrer">this JSFiddle.</a></p>
  <p>But when I tried to implement the HTML and CSS to fit my needs, I didn't have the same results/success. I created <a href="http://jsfiddle.net/brightonkeller/PDYEe/2/" rel="noreferrer">my own JSFiddle</a> so I could show you how it doesn't work the same for me. I'm sure it has something to do with the type of iFrame I'm using (e.g., the product images might need to be responsive too or something?)</p>
  <p>My main concern is that when my blog readers visit my blog on their iPhone, I don't want everything to be at x width (100% for all my content) and then the iFrame misbehaves and is the only element wider (and hence sticks out past all the other content - if that makes sense?)</p>
  <p>Does anyone know why it's not working?</p>
  <p>Here is the HTML &amp; CSS of my JSFiddle (if you don't want to click on the link):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #ffffff;
  }
  
  .h_iframe {
    position: relative;
  }
  
  .h_iframe .ratio {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .h_iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="h_iframe"&gt;
      &lt;!-- a transparent image is preferable --&gt;
      &lt;img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /&gt;
      &lt;iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&amp;blog=Brighton+The+Day&amp;widgetid=38585' frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>