Full screen video issue when using animate.css in Chrome

问题

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.

回答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>

来源：https://stackoverflow.com/questions/32323499/full-screen-video-issue-when-using-animate-css-in-chrome

标签

google-chrome

video

fullscreen

animate.css