iFrame 嵌入（用于 Youtube 视频）未出现在 Safari 中

Question

我的 Youtube 嵌入内容出现在 Chrome 和 Firefox 中，但不会出现在 Safari（包括 iPhone 上的移动 Safari）中。我使用 Vimeo 或本机 HTML5 视频得到相同的结果 - 该 div 中没有任何内容。这是一个 1 分钟的视频，准确展示了正在发生的事情：

https://www.youtube.com/watch?v=YnqDlmYOKW8

我尝试了

z-index

、

position

、更改 iFrame 的

width

和

height

、将

https

更改为

http

、删除嵌入代码中的

encrypted-media

等等。

网站是https://waltrib.com/shop/，测试产品是“Heavy Dirt”。我正在使用一个名为 Booster Wordpress 的插件，它允许我将产品图像更改为自定义 HTML（因此我将其用于 Youtube 嵌入）。

在上面视频的 0:48 处 - 奇怪的是，当我打开开发人员检查器并添加类似

www

之类的内容时，iFrame 就会出现。诡异的。在 Safari 中浏览时，它会在网站的每个页面上呈现 Youtube 嵌入内容，除了 /shop 页面。

我读过this stackoverflow，建议使用

object

，但这不起作用。

有人见过这样的错误吗？这是我最近看到的最奇怪的事情之一。

Answer 1

而不是：

src="https://youtube.com/embed/5i9SzaumaRg"

用途：

src="https://www.youtube.com/embed/5i9SzaumaRg" // Note the "www"

听起来很傻，但确实有效。

更新： 似乎任何类型的 URL 更改都会刷新 iframe，因此看起来以下内容将起作用：

let i = document.getElementsByTagName("iframe")[0];
i.setAttribute("src",i.getAttribute("src")+"?r=4535");

仅在 iframe 加载后执行此代码。为此使用负载处理程序。

Answer 2

尝试向 iFrame src 链接添加参数：

<iframe src="https://youtube.com/embed/5i9SzaumaRg?enablejsapi=1&origin=https://example.com/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

更多关于我的答案这里。

Answer 3

现在正在 lite-youtube-embed v0.3.2 上运行。