CSSCSS

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

May 23, 2019 · by Tim Kamanin

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!

Hey, if you've found this useful, please share the post to help other folks find it:

There's even more:

Subscribe for updates

  • via Twitter: @timonweb
  • old school RSS:
  • or evergreen email ↓ ↓ ↓