Cross-browser CSS object-fit

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.

Added by Ciprian on Friday, September 28, 2018 in Blog