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 style sheet and you're good to go.

:-webkit-full-screen-ancestor:not(iframe) {
    .animated {
        -webkit-animation-fill-mode: none;
        animation-fill-mode: none;
    }
}