在 Chrome 中使用 animate.css 时出现全屏视频问题

Question

我有一个页面包含使用视频标签的视频。此外，我的页面使用 animate.css 向我的元素添加一些动画。问题是，当我在 animate.css 中使用样式时，我的视频无法正确全屏显示。这是我的页面示例：

<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/

此外，这个问题似乎只发生在 chrome，我在 FireFox 和 Safari 中测试过，我没有遇到这个问题。

Answer 1

这似乎是一个 Chrome 错误。问题是由设置为 both 的 animation-fill-mode 引起的。这使动画在视频父容器上保持活动状态，这似乎与全屏视频混淆。

解决方法

通过将其改回默认值 none，我们解决了全屏问题。在此示例中，动画填充模式更改为 .custom class.

例子

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>

Answer 2

WordPress 问题：特定于浏览器

我们的问题是特定于浏览器的，Vimeo iFrame 在 Firefox 中有全屏按钮，但在 Chromium 浏览器中没有。经过数小时的挖掘，我们发现这与 Defender Pro 控制的 Security headers Permissions-Policy 有关。我们更改的设置是 Defender Pro > 工具 > 安全 Headers > Permissions-Policy [关闭]。

在此之后（并清除缓存）全屏按钮在所有浏览器和移动设备上返回。

在 Chrome 中使用 animate.css 时出现全屏视频问题

Full screen video issue when using animate.css in Chrome

video

google-chrome

fullscreen

animate.css

解决方法

例子