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

【问题标题】：iFrame embed (for Youtube video) not appearing in SafariiFrame 嵌入（用于 Youtube 视频）未出现在 Safari 中
【发布时间】：2021-08-05 09:42:21
【问题描述】：

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

我尝试了z-index、position，更改了 iFrame 的width 和height，将https 更改为http，删除了嵌入代码中的encrypted-media，等等。

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

在上面视频中的 0:48 - 奇怪的是，当我打开 Developer Inspector 并添加类似 www 的任何内容时，iFrame 就会出现。诡异的。在 Safari 中浏览时，它会在网站的每个页面上呈现 Youtube 嵌入，除了 /shop 页面。

我读到了this stackoverflow，它建议使用object，但这没有用。

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

【问题讨论】：

【解决方案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 后执行此代码。为此使用负载处理程序。

【讨论】：

我在视频中的 0:48 尝试过，但它不起作用。我在第 4 段中也提到了这一点。我还尝试了“Safari > 首选项 > 隐私并取消选中阻止跨站点跟踪”，它什么都不做。好吧，当我在检查器中输入“www”时它可以工作，但是在加载页面时它不起作用。我知道我们很接近。这是一个奇怪的错误。
我注意到的一件事是，如果我在嵌入中添加“www”，然后打开开发人员检查器删除“www”，它就会出现。因此，只要使用 Developer Inspector 对网页进行编辑，就会出现嵌入。我不明白。