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

Posted 2021-04-26

在我的网站上，我使用以下简单代码嵌入了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时，全屏工作正常。显然我做错了什么。任何帮助，将不胜感激。

答案

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

另一答案

试着删除

="allowfullscreen"

过去这个

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

另一答案

这与我的嵌入不完全相同，全屏在IE和Firefox中工作得很好，但视频在Chrome中被拉到左边，因为我已经将应用于iframe的转换样式转换为影响全屏模式下的视频，但与此同时，我还有一个绝对应用于iframe的位置，其顶部为50％，这不会影响全屏模式下的iframe。

我将在iframe上监听全屏更改并删除iframe上的翻译css并在恢复正常时将其添加回来。 How can I detect when an iFrame goes fullscreen?

---

世界并不完美，全屏api对我来说效果不佳。刮掉这个想法，完全删除翻译css并返回到iframe维度的一半的负顶部和左边距。全屏在这方面工作得很好。

另一答案

找到了解决方案。我遇到过同样的问题。

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

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

另一答案

用css试试这个：

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