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

编程问答 2022-05-01

问题描述

我的 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，删除 {{ 1}} 在嵌入代码中，等等。

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

在上面视频中的 0:48 - 奇怪的是，当我打开 Developer Inspector 并添加诸如 encrypted-media 之类的任何内容时，iFrame 就会出现。奇怪的。在 Safari 中浏览时，它会将 Youtube 嵌入网站的每个页面（/shop 页面除外）。

我读过 this stackoverflow 建议使用 www 但这没有用。

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

解决方法

代替：

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 加载后才执行此代码。为此使用负载处理程序。

iframeiframesafarivideovideowordpresswordpressyoutubeyoutube