使用chrome时,全屏对我网站上的Youtube嵌入式视频无效

Question

在我的网站上,我使用以下简单代码嵌入了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)而不是视频.

但是,当我使用资源管理器或Firefox时,全屏工作正常.显然我做错了什么.任何帮助,将不胜感激.

Answer 1

这个问题可能是由CSS动画引起的.如果任何iframe的祖先元素由CSS3动画设置为动画,并且(-webkit-)动画填充模式属性设置为"转发"或"两者",则Chrome上的视频不会设置为全屏.

Answer 2

尝试删除

="allowfullscreen"

所以过去了这个

<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>