title: Scale and reposition iframe like background-size: cover
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .sized {
    height: 100%;
    position: relative;
    background: #eee;
    overflow:hidden;
    padding:0;
  }
  .sized iframe {
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  @media (min-width: 320px) {
    height: 200%;
    top: -50%;
  }
  @media (min-width: 640px) {
    height: 180%;
    top: -40%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sized"&gt;
    &lt;iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;Original video&lt;/h3&gt;
  &lt;iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As I get a cookies same origin error in the snippets result, here is a mirror:</p>
  
  <p><a href="https://jsfiddle.net/07Lffw5x/2/embedded/result/">https://jsfiddle.net/07Lffw5x/2/embedded/result/</a></p>
  
  <p>[edit] Maybe <a href="https://jsfiddle.net/07Lffw5x/4/">this</a> is a better demo, if you compare to <a href="https://jsfiddle.net/07Lffw5x/5/">this one</a>, there is not much difference... why? [/edit]</p>
  
  <p>I'm trying to reproduce a background-size cover for an iframe.</p>
  
  <p>The thing is that it seems to rescale the video, for bigger sizes only, </p>
  
  <p>Question,</p>
  
  <p>Can the rescales take effect on every breakpoint? or the vimeo player might rescale by it's own anyway?</p>