Cross-browser CSS object-fit

Ciprian on Friday, September 28, 2018 in Blog
Last modified on Tuesday, June 8, 2021

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.

Like0