此问题可能是由CSS Animations引起的。如果任何iframe的祖先元素由CSS3 Animations设置动画，并且（-webkit-）animation-fill-mode属性设置为“forwards”或“both”，则该视频在Chrome上不会设置为全屏。

设法除去

="allowfullscreen"

所以过了这一关

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

这不完全是我的嵌入发生的事情，全屏在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中工作得很好。

找到了解决办法。我也有同样的问题。

<div class="blog-post blog-large fadeInLeft">

我的youtube iframe在一张卡片里，那张卡片有一个css动画。删除那个动画（fadeInLeft）完全解决了这个问题。

用css试试：

embed,
iframe,
object {
max-width: 100%!important;
    max-height: 100%!important;
}

这可能会对某些人有所帮助。我刚刚在2021年在Safari上遇到了完全相同的问题。Youtube iframe上的全屏按钮会使整个网页显示全屏而不是实际的视频。这个问题也与CSS动画应用于iframe的父元素有关，所以删除动画解决了这个问题。

不仅CSS动画会导致这种情况，对我来说，在祖先之一上使用clip-path时也会发生这种情况。