title: How to change zoom mode of a background html5 video?
body: <pre><code>&lt;div class="mission-statement"&gt;
      &lt;video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid"&gt;
          &lt;source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm"&gt;
      &lt;/video&gt;
  &lt;/div&gt;
  
  #mission-statement {
    margin-top: 0px;
    margin-bottom: auto;
    height: 100vh;
    width: 100vw;
  }
  
  video#bgvid
  
    {width: 100%; height: 100%; position: relative;}
  </code></pre>
  
  <p>Currently I have a video in the background of this div. However currently, when the screen is really wide, there is space on the left and right and when it is really narrow, there is space on the top and bottom. </p>
  
  <p>Instead, I would like the video to zoom such that it is always touching all 4 sides. If the browser is narrow, it will be zoomed such that the left and right parts of the video are cut off. If the browser is really wide, it will be zoomed such that the top and bottom are cut off. </p>
  
  <p>How can I accomplish this? </p>