getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
getButterfly

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

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.


Privacy Policy