Animate.css & Fullscreen Videos

You may have run into an issue, specifically in Google Chrome where your screen videos aren't truly fullscreen. Things like other elements from your site are on top of the player while in full-screen mode. Essentially, any element with a position relative and set z-index.

Surprisingly, the culprit is the most surprising. The always amazing and rarely problematic Animate.css animation library.

The problem is CSS based and the fix is the same, just drop the snippet below in your stylesheet and you're good to go.

:-webkit-full-screen-ancestor:not(iframe) {
    .animated {
        -webkit-animation-fill-mode: none;
        animation-fill-mode: none;
I'm an experience designer. I spend my days and nights on creating designs, writing code, and digital marketing. I specialize in helping small businesses integrate their existing business systems with modern SaaS tools to gain an edge in the marketplace.

Leave a Reply

Your email address will not be published. Required fields are marked *