如何嵌入YouTube直播聊天室

Question

我正在尝试将YouTube直播聊天嵌入到我的网站页面上，

<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v=hHW1oY26kxQ&embed_domain=localhost" width="480"></iframe>

我正在尝试这个，但聊天窗口根本没有出现，如果使用我拥有的真实域名进行嵌入式域名操作，但也不起作用。

- user10365430

---

嵌入YouTube直播聊天室可以工作，但在移动设备上无法使用：https://stackoverflow.com/a/59349138/470749 - Ryan

我可以确认 127.0.01（不带端口）是有效的，但我没有尝试 localhost。此外，在 iPad 的 Safari 上 iframe 可以工作，但在 iOS 或 Android 上的 Chrome 上无法工作。 - Blaine Garrett

如果您请求站点的桌面版本而不是移动版本，则此方法可在iPad Chrome上运行（目前）。然而，这可能并非对所有站点都完全理想。 - OdatNurd

Answer 1

似乎YouTube禁用了在外部网站上嵌入实时聊天的功能，但随后忘记更新文档。或者，可能存在未修复的错误导致此功能失效。

2021更新：聊天嵌入功能再次可用。使用与以前相同的语法。参见下面的a helpful comment below。

细节：

YouTube知识库仍然表示，可以使用像您发布的URL（see here，第“Embed Live chat”节）这样的URL将实时聊天iframe嵌入外部网站。

然而，当尝试这样做并查看浏览器的控制台时，您会看到如下消息：

Refused to display 'https://www.youtube.com/live_chat?v=12345&embed_domain=example.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

当查看对https://www.youtube.com/live_chat?…请求的响应时，在浏览器的开发人员工具的“Network”选项卡中也可以看到x-frame-options:SAMEORIGIN头。

这意味着YouTube不允许浏览器将其嵌入到除youtube.com之外的iframe中。(在YouTube本身上，此嵌入代码仍然有效：当您检查YouTube上任何当前正在流式传输的视频的源代码时，您会发现那里的实时聊天窗口是使用相同的/live_chat?…请求，在一个iframe中。)

已删除此功能的其他指示：

- YouTube文档提到： “实时聊天模块仅存在于YouTube观看页面上，而不是嵌入的播放器。（source）” 我相信这是文档的新部分，“嵌入实时聊天”下面的部分已过时。

- 这个2016年的教程使用了记录的URL格式来嵌入一个示例实时聊天，现在显示出相同的“拒绝显示[...]在一个frame中，因为它将'X-Frame-Options'设置为'sameorigin'。”假设这在2016年起作用，YouTube方面肯定有所改变。

- 这个Reddit帖子讲述了一个人的嵌入实时聊天在2018年9月初突然停止工作的情况 - 所以就在这个问题被问之前不久。

替代方案

您可以使用YouTube Livestream API，特别是LiveChatMessages终端点来获取和创建聊天消息。可能有一些开源库可以帮助处理这个问题。到目前为止，我发现了this one（可以显示但不能创建聊天消息）。

您可以嵌入自己的聊天，安装在您自己的服务器上或者a cloud-hosted livestream chat solution。此解决方案还可以提供YouTube直播聊天不提供的功能，例如允许匿名访客发布消息。

您可以反向代理https://www.youtube.com/live_chat?… URL，将YouTube的响应转发但删除X-Frame-Options标头。

如果您只需要一台或几台计算机的解决方案，可以使用浏览器扩展程序从YouTube的响应中删除X-Frame-Options标头。请参见this question。

- tanius

---

2021年更新：将YouTube聊天嵌入外部网站似乎又可以使用了。关键是在嵌入的iframe URL中包含“embed_domain”URL查询参数：“?embed_domain=www.your-external-domain.com”。请参考此答案的文档 https://support.google.com/youtube/answer/2524549?hl=en。 - asp47

还要注意 iframe 的 src 属性周围的印刷体引号。这些 ”。我从一个带有这些引号的网站复制/粘贴，结果它出了问题，导致我来到了这个 stackoverflow。错误的写法：<iframe width=”350px” height=”500px” src=”embed-url-in-here” ></iframe>。引号是问题所在，而不是 X-Frame-Options 标头。一旦我使用 ASCII 引号，它就可以正常工作了。这些 "。 - asp47

Answer 2

这似乎与将iframes更改有关，至少在我遇到此问题时是如此。

要解决此问题，我建议使用以下脚本：

<script>  
 let frame = document.createElement("iframe");  
 frame.referrerPolicy = "origin";  
 frame.src = "https://www.youtube.com/live_chat?v=VIDEO_ID&embed_domain=" + window.location.hostname;  
 frame.frameBorder = "0";  
 frame.id = "chat-embed";  
 let wrapper = document.getElementById("chat-embed-wrapper");  
 wrapper.appendChild(frame); 
</script>

其中chat-embed-wrapper是嵌套着带有id为chat-embed的iframe的父级元素，而VIDEO_ID（在frame.src赋值中）是您目标视频的ID。您需要根据自己的设置稍作修改，但这是一般情况下的解决方案。

- Addison Crump

Answer 3

对于 Angular 的简单解决方案：

HTML 部分：

  <iframe frameborder="0" height="470" [src]="url" width="780"></iframe>

TS部分：

constructor(private sanitizer: DomSanitizer) {}

ngOnInit() {
  this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/live_chat?v=[YOUR_LIVESTREAM_ID]&embed_domain=' + window.location.hostname);
}

- Nitneq

Answer 4

我不确定你最终是否解决了这个问题？我们使用这个iframe在我们的网站上成功实现了它，希望能对你有所帮助：

<iframe src="https://www.youtube.com/live_chat?v=YourVidCodeHere&embed_domain=www.YourDomainHere.com"width="100%" height="600"></iframe> 

我希望这能帮到您：) PS 它在移动设备上无法使用（YouTube 表示已从移动设备中删除此功能），但在桌面和平板电脑上可以使用。

最好的祝愿。

- user10538359

Answer 5

我可以确认这确实有效。但是，即使页面的URL以“https://www.example.com”开头，当embed_domain的值为“example.com”时，我收到了相同的X Frame错误。也就是说，确保该值与window.location.hostname匹配。如果您没有规范的主机重定向工作，Addison Crump 的解决方法可能适用于此。

- Blaine Garrett