Javascript 当使用chrome时，在我的网站上的Youtube嵌入视频不能全屏显示

在我的网站上，我嵌入了一段Youtube视频，其中包含以下简单代码：

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

结果是位于此处页面底部的视频：

当我在Chrome中按下该视频的全屏按钮时，该视频不会全屏显示。相反，我的整个浏览器会全屏显示（就像我按了F11键一样），但不会显示视频

然而，当我使用Explorer或Firefox时，全屏显示效果很好。很明显我做错了什么。任何帮助都将不胜感激

尝试删除

="allowfullscreen"

所以这一次过去了

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

---

此问题可能由CSS动画引起。如果iframe的任何祖先元素由CSS3动画设置动画，且（-webkit-）动画填充模式属性设置为“向前”或“两者”，则视频不会在Chrome上设置为全屏。

请尝试使用css：

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

---

这与我的embed不完全一样，全屏在IE和Firefox中运行良好，但在Chrome中视频被拉起并向左移动，因为我已经将transform-translate样式应用于iframe，这会影响全屏模式下的视频，但同时，我也有一个绝对位置应用于iframe，顶部为50%，这不会影响全屏模式下的iframe

我将监听iframe上的全屏更改，删除iframe上的translate css，并在恢复正常时将其添加回去

---

---

世界并不完美，全屏api对我来说不是很好。放弃这个想法，完全删除translate css并返回到iframe维度的负上半页边距和左半页边距。在chrome浏览器中，全屏可以很好地工作。

找到了解决方案。我也有同样的问题

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

---

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

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

我查看了你的网站，它不是唯一一个不提供chrome全屏视频的视频，我认为问题在于wordpress插件，尝试禁用livefyre并检查禁用livefyre并重试。问题依然存在。我还尝试禁用“BJ惰性加载”和“特色视频”插件。仍然没有帮助。还可能是什么？嗨，你找到解决办法了吗？我也有同样的问题。谢谢你，我也是。但我的屏幕会全屏显示一秒钟，然后再回到它是如何显示的was@user3591728你找到解决办法了吗？从家长那里删除动画对我来说很有效。现在我需要在iframe加载后删除动画！