How to change zoom mode of a background html5 video?

Question

<div class="mission-statement">
    <video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
        <source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
    </video>
</div>

#mission-statement {
  margin-top: 0px;
  margin-bottom: auto;
  height: 100vh;
  width: 100vw;
}

video#bgvid

  {width: 100%; height: 100%; position: relative;}

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.

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.

How can I accomplish this?

Answer 1

If you are only concerned with real modern browsers that conform to W3C standards (ie Not IE ), use object-fit:cover . If IE is a must, there's a polyfill , but other than that, it would take too much effort and time to force a "browser" like IE to conform when it's obvious design is to conflict with everything that's sane and logical.

View in Full page mode

Demo

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } html, body { height: 100%; width: 100%; } #mission-statement { overflow: hidden; position: fixed; height: 100%; width: 100%; top: 0; left: 0; } video#bgvid { height: 100vh; width: 100vw; object-fit: cover; overflow: hidden; position: absolute; bottom: 0; right: 0; } 

 <div class="mission-statement"> <video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid"> <source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4"> </video> </div> 

Answer 2

Try this:

video#bgvid {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}