如何修复 iframe 内嵌入的 YouTube 视频的无限加载？答案

【问题标题】：How to fix infinite loading of embedded YouTube video inside an iframe?如何修复 iframe 内嵌入的 YouTube 视频的无限加载？
【发布时间】：2019-09-23 08:55:42
【问题描述】：

我正在使用 videojs-youtube 插件在我的网络应用程序中播放嵌入的 youtube 视频。最近我注意到，当网络应用程序被包装在 iframe 中时，视频会卡在无限加载中。由于此过程，控制台不会显示任何相关错误。

在尝试调试此问题时，我意识到 PlayerStatus（如 IFrame Player API 中所述）正在以错误的方式更改：当视频未包含在 iframe 中时，PlayerStatus 会从“未启动”变为“正在缓冲”和“正在播放”。另一方面，当视频被包装在 iframe 中时，PlayerStatus 再次从“未启动”变为“缓冲”再到“未启动”。

不过有一个奇怪的例外 - 当安装并激活 AdBlock 或 LastPass 等 chrome 扩展程序时，视频可以正常播放，即使它在 iframe 中也是如此。

知道为什么会这样吗？谢谢:)

【问题讨论】：

您好，我也遇到了同样的问题，请问您找到解决办法了吗？
嗨@Arch1tect。经过大量研究后，我注意到该错误与 chrome 浏览器版本有关。因此，我在 chromium 中为它打开了一个错误，您可能也想关注它：bugs.chromium.org/p/chromium/issues/detail?id=960376
@IdanGoor 请考虑post and accept your own answer - cmets 是临时性的 - 谢谢。
@IdanGoor 我已经解决了我的问题，检查我的答案，也可以解决你的问题

标签： javascript iframe youtube-api video.js youtube-iframe-api

【解决方案1】：

我遇到了同样的问题，但经过数小时的尝试，我想我已经找到了解决问题的方法...将allow="autoplay" 添加到 iframe 可以为我解决此问题，但它并不完全有意义，因为有时确实如此无需添加即可工作。

为了澄清，我在 iframe 中使用 video.js 和 videojs-youtube.js，在该 iframe 内，如果您播放 Youtube 视频，则会在 iframe 内创建另一个 iframe。而且我猜测单击视频播放器播放 Youtube 视频不被认为是用户与内部 iframe 交互，因为 videojs-youtube 以编程方式告诉 youtube 视频在该内部 iframe 中播放，而 Chrome 不允许视频在除非用户与之交互，否则 iframe 将被播放。

这并不能解释为什么 5% 的时间它确实可以正常播放。无论如何，将 allow=autoplay 添加到包含 videojs 播放器的外部 iframe 标记使其对我来说 100% 的时间都有效。

【讨论】：