在我的网站上,我用这个简单的代码嵌入了一个Youtube视频:
<iframe src="//www.youtube.com/embed/bpqTiwfzqdo" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
结果是在页面底部的视频在这里:http://www.rpginsider.com/child-of-light-releases/
当我在Chrome中按下视频的全屏按钮时,视频不会全屏显示。相反,我的整个浏览器会全屏显示(就像我按了F11一样),但视频不会。
然而,当我使用资源管理器或火狐浏览器,全屏工作正常。所以很明显,我做错了什么。任何帮助将不胜感激。
7条答案
按热度按时间rlcwz9us1#
此问题可能是由CSS Animations引起的。如果任何iframe的祖先元素由CSS3 Animations设置动画,并且(-webkit-)animation-fill-mode属性设置为“forwards”或“both”,则该视频在Chrome上不会设置为全屏。
yjghlzjz2#
设法除去
所以过了这一关
rqcrx0a63#
这不完全是我的嵌入发生的事情,全屏在IE和Firefox中工作正常,但视频在Chrome中被拉到左边,因为我对iframe应用了transform translate样式,这会影响全屏模式下的视频,但同时我也对iframe应用了一个绝对位置,顶部为50%,这不会影响全屏模式下的iframe。
我将监听iframe上的全屏更改,并删除iframe上的翻译css,并在恢复正常时将其添加回来。How can I detect when an iFrame goes fullscreen?
世界并不完美,全屏API对我来说并不好,放弃这个想法,完全删除翻译css,回到iframe一半大小的负上边距和左页边距,这样全屏在chrome中工作得很好。
cbeh67ev4#
找到了解决办法。我也有同样的问题。
我的youtube iframe在一张卡片里,那张卡片有一个css动画。删除那个动画(fadeInLeft)完全解决了这个问题。
pkmbmrz75#
用css试试:
s8vozzvw6#
这可能会对某些人有所帮助。我刚刚在2021年在Safari上遇到了完全相同的问题。Youtube iframe上的全屏按钮会使整个网页显示全屏而不是实际的视频。这个问题也与CSS动画应用于iframe的父元素有关,所以删除动画解决了这个问题。
jum4pzuy7#
不仅CSS动画会导致这种情况,对我来说,在祖先之一上使用
clip-path
时也会发生这种情况。