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

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);
 &output=embed to the url

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

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

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

问题出现在

• 火狐11
• Chrome 18.0
• IE 8

有人遇到过这个问题吗？

Answer 1

您设置为 iframe 来源的页面（Youtube /watch 页面）不想嵌入到您的页面中。你不能强迫它让你这样做。

要嵌入的正确 URL 的格式为：

https://www.youtube.com/embed/<video-id>

你的情况

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

Answer 2

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

• 将“watch”替换为“embed”

• 删除'?v='

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

Answer 3

将关键字 watch?v= 替换为 embed 并更改实时 URL，如下所示：-

$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，然后在Search cookies 框中输入youtube。

接下来，您将看到 youtube 的两组 cookie，您可以全部删除，或者如果您单击小箭头，您将能够看到各个 cookie 名称，并且可以删除特定的 cookie，例如所有 @987654327 @。

这个答案的来源和更多细节可以在this Reddit thread找到。

Answer 5

在 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 6

将此添加到您的 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 7

有人提到网址应该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 8

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

<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"
/>

...

methods: {
    getIdFromURL(url) {
      const youtubeRegexp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig
      let id = url.replace(youtubeRegexp, '$1')

      if (id.includes(';')) {
        const pieces = id.split(';')

        if (pieces[1].includes('%')) {
          const uriComponent = decodeURIComponent(pieces[1])
          id = `http://youtube.com${uriComponent}`.replace(youtubeRegexp, '$1')
        } else {
          id = pieces[0]
        }
      } else if (id.includes('#')) {
        id = id.split('#')[0]
      }

      return id
    }
  }

Answer 9

您需要复制从Share 部分生成的embed url，而不是普通的url。

1. 按下Share按钮：

1. 按下embed按钮：

1. 在iframe 中使用url（或使用整个iframe）：

来源：https://support.google.com/youtube/answer/171780

Answer 10

只需添加嵌入而不是观看

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