Cross-browser CSS object-fit

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

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. Last modified on Friday, September 28, 2018.

Contribute!

Contribute to this article by sharing your opinion on Twitter:

Unlimited Automated Page Speed Monitoring & Tracking.
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
Privacy Policy