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%);
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: