时间戳

首页 > 解决方案 > iFrame 嵌入（用于 Youtube 视频）未出现在 Safari 中

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

问题描述

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

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

我尝试了z-index, position, 更改iFrame的widthand , 更改为, 删除嵌入代码等等。heighthttpshttpencrypted-media

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

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

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

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

标签： wordpressvideoiframesafariyoutube

解决方案

代替 ：

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

推荐阅读