HTML 内容背后的 YouTube 全屏视频

Question

我在 http://demo.clc.agency/limbik/marcels/ 上嵌入了一个 YouTube 视频

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

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

我已尝试设置 z-index，但无法让视频位于网站内容上方。

Answer 1

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

Answer，他说的很对。

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

解决方案：

您可以覆盖animation-fill-mode。

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

或

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