在我的网站上，我使用以下简单代码嵌入了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时，全屏工作正常。显然我做错了什么。任何帮助，将不胜感激。
答案 0 :(得分：9)
此问题可能是由CSS动画引起的。如果任何iframe的祖先元素由CSS3动画设置为动画，并且（-webkit-）动画填充模式属性设置为“转发”或“两者”，则视频在Chrome上不会设置为全屏。
答案 1 :(得分：1)
尝试删除
="allowfullscreen"
过去这个
<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>
答案 2 :(得分：1)
这与我的嵌入不完全相同，全屏在IE和Firefox中工作得很好，但是视频在Chrome中被拉到左边，因为我已经将应用于iframe的转换样式转换为影响视频的全屏模式，但同时我也有一个绝对应用于iframe的位置，其顶部为50％，这不会影响全屏模式下的iframe。
我将在iframe上收听全屏更改并删除iframe上的翻译css，并在恢复正常时将其添加回来。 How can I detect when an iFrame goes fullscreen?
世界并不完美，全屏api对我来说效果不佳。刮掉这个想法，完全删除翻译css并返回到iframe维度的一半的负顶部和左边距。全屏在这方面工作得很好。
答案 3 :(得分：1)
找到解决方案。我有同样的问题。
<div class="blog-post blog-large fadeInLeft">
我的youtube iframe在卡片中并且该卡片有css动画。删除该动画（fadeInLeft）完全解决了这个问题。
答案 4 :(得分：0)
尝试使用css：
embed,
iframe,
object {
max-width: 100%!important;
max-height: 100%!important;
}
答案 5 :(得分：0)
这可能对某人有所帮助。我刚刚在 2021 年在 Safari 上遇到了完全相同的问题。 Youtube iframe 上的全屏按钮将使整个网页全屏显示而不是实际视频。该问题还与将 CSS 动画应用于 iframe 的父元素有关，因此移除动画解决了问题。