June 2021: I have updated the CSS rules to remove IE11 support.
My latest project required a cross-browser cover video. As expected, Chrome and Firefox behaved flawlessly, but legacy Edge has some issues. Here’s how I solved the problem using only CSS:
/**
* Support object-fit for video for IE11 and Edge
*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*
* Alternatives:
*
* @supports (-ms-ime-align: auto) {} // Edge 12+
* @supports (-ms-accelerator:true) {} // Edge 12 & 13
* @supports (-ms-ime-align: auto) and (color: unset) {} // Edge 13+
* @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {} // IE10 & IE11
*/
.homepage-hero.fullvh .slide video,
.homepage-hero .slide video {
height: auto;
-webkit-transform: translate(0px, -20%);
-ms-transform: translate(0px, -20%);
transform: translate(0px, -20%);
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
.homepage-hero.fullvh .slide video,
.homepage-hero .slide video {
height: 600px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
-o-object-fit: cover;
object-fit: cover;
}
}
@supports (-ms-ime-align: auto) {
.homepage-hero.fullvh .slide video,
.homepage-hero .slide video {
height: auto;
-webkit-transform: translate(0px, -20%);
-ms-transform: translate(0px, -20%);
transform: translate(0px, -20%);
}
}Now, the only problem was that Edge doesn’t support object-fit for videos properly, so they needed a different approach, by combining height and translating the content to crop the top and bottom.
Feel free to adjust the -20% according to your design and to hide any overflown content.
Note: I have used Autoprefixer to generate browser specific rules.
