title: Responsive hero with Vimeo background
body: <p>I'm trying to replicate <code>background-size: cover;</code> with a Vimeo video in my website's hero section. I can get the video to sit nicely but it's not scaling down properly on small screens.</p>
  
  <p>Here's what I've got at the moment:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="vimeohero"&gt;
    &lt;iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#vimeohero {
    height: 300px;
  }
  
  iframe {
    width: 100vw;
    height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
    min-height: 100vh;
    min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
    position: relative;
    top: 50%;
    left: 50%;
    transform: perspective(1px) translate(-50%, -50%);
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/a7j0rbmq/1/" rel="nofollow noreferrer">https://jsfiddle.net/a7j0rbmq/1/</a></p>
  
  <p>When you look at this on a small screen (375px by 812px) the video is zoomed in and not displaying the same as <code>background-size: cover;</code> would. </p>
  
  <p>(Obviously the video will have to zoom in a bit to fill the space but this zooms in more than necessary. If you change the height of your screen to match the height of the div (300px) it displays fine).</p>
  
  <p>If you remove the <code>min-width</code> declaration it almost fixes the problem, however on some screen sizes you get whitespace either side of the video :(</p>