How to make object-fit: 'cover' work for video backgrounds in Edge

Video backgrounds are everywhere, and the most common way to make one is to set object-fit: 'cover'; property on a video element:

.video-as-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: 'cover';
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

However...yes, I think you've guessed it already... there's a lovely family of web browsers made by Microsoft that doesn't quite understand object-fit: 'cover'; yet. And yes, Edge too.

But no worries! It turns out; we can emulate object-fit: 'cover'; via a set of pure CSS code. No polyfills, no JS, no jumps through the hoops, you just replace object-fit: 'cover'; with the following code:

.video-as-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

So what we've done here is we replaced object-fit: 'cover' with

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

which is known as background centering method.

Now even dumb Edge should treat you background video correctly.

You're welcome!