2

我对 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

有没有人遇到过这个问题？

非常感谢你的帮助 ！

4

4 回答 4

4

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

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

于 2016-09-02T13:44:23.023 回答
1

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

于 2020-05-21T15:21:12.537 回答
0

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

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

于 2014-04-23T18:26:10.280 回答
0

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

于 2017-06-28T12:15:58.107 回答