我有一个页面,其中包含使用视频标记的视频。此外,我的页面使用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中测试过,我没有遇到这个问题。
答案 0 :(得分:10)
这似乎是 Chrome错误。问题是由设置为animation-fill-mode
的{{1}}引起的。这会使动画在视频父容器上保持活动状态,这似乎会影响全屏视频。
通过将此更改回默认值both
,我们可以修复全屏问题。在此示例中,动画填充模式随none
类更改。
this jsfiddle中有一个工作示例。
.custom
/*Uncomment the class to fix*/
/*
.custom {
animation-fill-mode: none;
}
*/