Full screen video issue when using animate.css in Chrome

Question

I have a page that has a video using the video tag. Also, my page uses the animate.css to add some animations to my elements. The issue is that when I use a style in the animate.css, My video does not go to full screen correctly. This is a sample of my page:

<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <h2 id="sv_title">Here is some text for illustration</h2>

        <div class="animated fadeInRight">
            <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls=""></video>
        </div>
    </div>
</div>

https://jsfiddle.net/p4nmt637/

Also, this issue seems to happen only in chrome, I tested it in FireFox and Safari and I did not have this issue.

Fluorspar

Answer 1

This appears to be a Chrome bug. The problem is caused by the animation-fill-mode which is set to both. This keeps the animation active on the videos parent container, which seems to be messing with the full screen video.

Workaround

By changing this back to the default, none, we fix the full screen problem. In this example the animation fill mode is changed with the .custom class.

Example

There is a working example in this jsfiddle.

/*Uncomment the class to fix*/  

/*
.custom {
   animation-fill-mode: none;
}
*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" rel="stylesheet" />
<h2 id="sv_title">This is the problem, the bottom video is being layered over the top when this is made fullscreen. Uncomment the custom class to see it fix itself.</h2>
<div class="animated fadeInRight custom">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</div>
   
<div class="animated fadeInRight">
  <video src="http://www.w3schools.com/html/mov_bbb.mp4" autoplay muted></video>
</div>

Iraq

This was driving me nuts i had video js element with animation ancestor, headers and footers would show on fullscreen mode. Thnx – Cyclops

I was about to remove the animations when figured they make the bug, until i saw this answer <3 – Tarantula

Answer 2

WordPress issue: Browser specific

Our issue was browser specific, where Vimeo iFrames would have the Fullscreen button in Firefox, but not in Chromium browsers. After hours of digging, we found that this was to do with a Security headers Permissions-Policy, which was controlled by Defender Pro. The setting we chnaged was Defender Pro > Tools > Security Headers > Permissions-Policy [off].

After this (and clearing the cache) the full screen button returned on all browsers and mobile.

Pintle