Vimeo 全屏：视频出现在网站元素下答案

【问题标题】：Vimeo fullscreen : video appears under the website's elementsVimeo 全屏：视频出现在网站元素下
【发布时间】：2014-04-23 13:22:35
【问题描述】：

我在使用 vimeo 和 html5 全屏播放器时遇到了一个非常奇怪的问题。

我的模板中有这段代码：

<iframe src="http://player.vimeo.com/video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>

iframe 加载正常，但是当我单击“全屏”时，浏览器进入全屏模式，视频显示在网站下方（观看视频时我可以看到相对和绝对 div）。

你可以在这里试验这个错误：http://webrelais.net/pingpong/projet/proxipolis

有人遇到过这个问题吗？

非常感谢您的帮助！

【问题讨论】：

我知道这是一个旧线程，但在这样的帖子上指定这是一个问题的浏览器会很有用。我有一个网站，在 Safari 12.0.1 中这是一个问题，但是这在 Chrome 70.0.3538.77 中不是问题

标签： javascript html video vimeo vimeo-player

【解决方案1】：

我通过在包含我的 iframe 的元素上禁用 animate.css 样式解决了这个问题。

尽管如此，我尝试使用 z-index 修改，jQuery 来更改样式但没有任何效果，唯一的解决方案是删除 Animate CSS 类。

【讨论】：

在 Safari V 14.0.2 中遇到了同样的问题，删除 css 动画类后，它在全屏模式下可以正常工作

【解决方案2】：

在 Safari (13.0.4) 中存在相同的错误。在我的情况下，iframe 的父 div 具有 will-change 属性。删除后全屏可以正常工作。

【讨论】：

【解决方案3】：

快速浏览显示它与元素的 CSS 或 Javascript 相关 - 因为删除该元素的 id 使得全屏视频至少可以在 Chrome 中工作。

通过隔离用于该元素的 CSS 和 Javascript 来解决问题，您应该能够找到导致它的原因。

【讨论】：

感谢 Dull 的帮助。在花了几个小时跟踪这个错误之后，我了解到它是由“animate.css”发生的。所以我的解决方案是在用户播放视频时删除所有动画类。

【解决方案4】：

父元素中的animation-fill-mode: both; 似乎会导致全屏视频出现此问题。

【讨论】：

是的，这肯定是原因，但有什么解决办法来解决？