CSS
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: