【问题标题】:YouTube Full-Screen video behind HTML contentHTML 内容背后的 YouTube 全屏视频
【发布时间】:2017-11-03 09:41:09
【问题描述】:

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

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

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

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

【问题讨论】:

  • 这个问题只出现在 Chrome 上。 Firefox 和 IE 按预期工作。

标签: html css video youtube


【解决方案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;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-02-14
    • 2020-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多