HTML内容背后的YouTube全屏视频

Question

我正在http://demo.clc.agency/limbik/marcels/

上嵌入YouTube视频

如果您点击播放视频并选择全屏导航栏，则3个图像块会保留在视频上方。我不确定如何将视频显示在所有其他内容之上。

我做的另一个观察是，如果视频嵌入第二行，我就不会遇到这个问题。

我已尝试设置z-index，但我无法将视频放在网站内容之上。

Answer 1

这种情况正在发生，因为您正在使用animate.css。如果您在课程.animated中找到属性animation-fill-mode: both;。这是某些浏览器 Read 中fullScreen的真正问题。简单的淡入淡出动画不需要此属性。

Answer ，他已正确提及。

  

这似乎是Chrome错误。问题是由设置为两者的动画填充模式引起的。这使得动画在视频父容器上保持活动状态，这似乎是在弄乱全屏视频。

<强>解决方案：

您可以覆盖animation-fill-mode。

.wpb_start_animation.animated {
    animation-fill-mode: backwards;
}

或

.wpb_start_animation.animated {
   animation-fill-mode: none;
}