嵌入 YouTube 视频在 iframe 中不可用 HTML

Question

我有一个嵌入式 YouTube 视频列表。我的问题是，在四个视频中，我显示了一个 returns 错误：Video not available.

我试过换浏览器，也没用。我还检查了视频是否允许嵌入外部。如果我查看浏览器的控制台，则不会抛出异常。

    <li class="col-sm-3 col-xs-6 single_item vid">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/KdbDDVcw7qc?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <figcaption class="overlay">
    </figcaption>
    </li>

有没有人知道，为什么这个视频不起作用，但所有其他视频都可以？

Answer 1

效果很好。我尝试嵌入四个不同的视频，它们都运行良好。这里是linkhttps://jsfiddle.net/Arpit09/kt1dwqjp/7/

<iframe width="100%" height="315" src="https://www.youtube.com/embed/KdbDDVcw7qc?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Answer 2

YouTube 禁止在没有 public 域的 localhost environment 中嵌入一些视频，但是您的视频可以通过 public domain/ sub-domain 毫无问题地嵌入，尝试使用网络托管应用程序或在线html 工具。

Answer 3

如果您无法在 MrBean 提供的 JSFiddle link 上看到视频，那么您的设备有问题，而不是嵌入本身。

如果是这样，下一步就是隔离问题。

你试过了吗：

不同的浏览器。（也许您的某个扩展或缓存有问题。）
网络上的另一台计算机。（可能是您的安全设置或防火墙过滤器有问题。）
不同网络上的不同计算机。（这将模拟大多数用户，据报告他们能够正确看到视频。）

Answer 4

该视频应该可以播放，但您可能无权查看或显示它。

Answer 5

我们有一个非常相似的问题，但 none 此处列出的标准方法和其他 SO 问题回答/解决了我们的问题。

在我们的案例中，问题仅限于具有许可内容的视频，通常是知名艺术家的音乐风格视频。

视频未获得许可时未发生此问题。我知道有些艺术家可以标记他们的视频不可共享，并且可以允许/阻止域等。但是，我们知道 none 其中与我们有关。

相反，问题出在引荐政策上。我怀疑 Google/Youtube 为许可内容构建了一个信任模型，并且该信任模型的一部分需要强大的 Referer 策略。

我们通过将引荐政策 MDN Refer Policy 设置为更强的引荐政策解决了我们的问题。

如果我们使用默认值：

'no-referrer-when-downgrade'

视频播放时会提示视频不可用。

我们改为：

origin-when-cross-origin

视频播放成功

Answer 6

我在文档头部有这一行，我将其删除并开始工作

<meta name='referrer' content='no-referrer'/>

嵌入 YouTube 视频在 iframe 中不可用 HTML

Embeded YouTube video not available in iframe HTML

html

youtube

video

iframe