My latest project required a cross-browser cover video. As expected, Chrome and Firefox behaved flawlessly, but IE11 and Edge had some issues. Like with most IE features, they needed a bit of coaxing. Here’s how I solved the problem using only CSS:
/**
* Support object-fit for video for IE11 and Edge
*
* 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%);
-moz-transform: translate(0px, -20%);
-ms-transform: translate(0px, -20%);
-o-transform: translate(0px, -20%);
transform: translate(0px, -20%);
}
@supports (object-fit: cover) {
.homepage-hero.fullvh .slide video,
.homepage-hero .slide video {
height: 600px;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-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%);
-moz-transform: translate(0px, -20%);
-ms-transform: translate(0px, -20%);
-o-transform: translate(0px, -20%);
transform: translate(0px, -20%);
}
}
Now, the only problem was that IE and Edge don’t suppor 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.
