Question

一旦用户提供视频链接，我就会尝试将YouTube视频嵌入到我的页面中。

<iframe width=\'560\' height=\'315\' src='http://www.youtube.com/watch?v=<video id>&amp;output=embed' frameborder=\'0\' allowfullscreen></iframe>

但是当我尝试添加这个时，我得到了这个错误。在chrome中检查页面后，我在控制台选项卡中看到此错误

“由于X-Frame-Options禁止显示，拒绝显示文档”

我甚至无法在IE和Firefox中看到该视频

我甚至尝试添加

 header('X-Frame-Options:Allow-From http://www.youtube.com'); 
 header('X-Frame-Options:GOFORIT);
 &amp;output=embed to the url

在其他帖子中阅读某些解决方案之后。

但我仍然得到同样的错误。

我也看到youtube有对象嵌入的方法来显示视频，但是youtube已经将其作为嵌入视频的旧方法。所以我想使用新的iframe方法将视频嵌入到我的页面中。

问题见于

Firefox 11
Chrome 18.0
IE 8

有人遇到过这个问题吗？

Answer 1

您设置为iframe源代码的页面（Youtube /watch页面）不希望嵌入您的页面。你不能强迫它让你这样做。

要嵌入的正确网址格式为：

http://www.youtube.com/embed/oHg5SJYRHA0

Answer 2

当您从YouTube复制视频链接时："https://www.youtube.com/watch?v=Fva3fgKmu3o"

-将替换为 / embed /

-删除'？v ='

最终示例："https://www.youtube.com/embed/Fva3fgKmu3o"

Answer 3

将关键字watch？v =替换为嵌入，并更改实时网址，如下所示：-

$url_string="https://www.youtube.com/watch?v=H1pTkatn6sI";
$url= str_replace('watch?v=','embed/', $url_string);

然后将其嵌入到iframe中

<iframe id="player" type="text/html" width="640" height="390" src="{{ $url }}" frameborder="0"></iframe>

Answer 4

TL; DR：，您可能需要删除Cookie。

如果/v或/embed仍然不起作用，则可能是由于Cookie格式错误而导致的问题。您还会看到此错误，原因是大多数或每个YouTube页面上的 400 HTTP错误。

要解决此问题，您必须删除YouTube cookie：

在Chrome中，在地址栏中输入chrome://settings/siteData，然后在youtube框中输入Search cookies。

接下来，您将看到YouTube的两组Cookie，您可以将其全部删除，或者，如果单击小箭头，则可以看到各个Cookie的名称，也可以删除所有{{{ 1}}。

此答案的来源和更多详细信息，请访问this Reddit thread。

Answer 5

有人提到网址应该是 embed 而不是 watch。

如果有人在寻找 Javascript 答案，我们可以使用 string.replace()

动态修复此问题

例如

const updateYoutubeUrl = (youtube_url = 'www.youtube.com/watch?v=H1pTkatn6sI') => {
   youtube_url.replace('watch?v=', 'embed/')
   return youtube_url
}

请参考@dhahn 答案

Answer 6

要从 youtube 链接获取 id，这对 nuxtjs 有帮助

502013514208295320210301

...

<iframe          
 :src="`https://www.youtube.com/embed/${getIdFromURL(group.videoEmbedLink)}?rel=0`"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
/>

Answer 7

通过support.google.com/youtube

从Embed a video or playlist检查官方文档

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

选中more tips, tricks about youtube

Answer 8

将此添加到您的HTML代码中不要复制确切的视频链接，而是右键单击并复制嵌入代码，然后粘贴到src" "

<div class="example">
 src="<iframe width="853" height="480" src="https://www.youtube.com/embed/jH0Q8NOsIR8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>" </iframe>
</div>

Answer 9

只需添加嵌入而不是观看

示例：-https：//youtube.com/embed/OGGuw2dLBjk

嵌入youtube视频“拒绝显示文档，因为X-Frame-Options禁止显示”

9 个答案: