如何嵌入 YouTube 直播聊天

Question

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

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

我正在尝试这个，但聊天根本不显示，如果尝试使用我拥有的真实域来做嵌入域，但这也不起作用。

Answer 1

在我看来，YouTube 禁用了在外部网站上嵌入实时聊天的功能，但后来忘记更新文档。或者，可能存在破坏此功能的未修复错误。

细节

YouTube 知识库仍然表示，仍然可以将实时聊天 iframe 嵌入到外部网站中，使用的 URL 与您发布的 URL 类似（请参阅此处的“嵌入实时聊天”部分）。

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

拒绝在框架中显示“https://www.youtube.com/live_chat?v=12345&embed_domain=example.com”，因为它将“X-Frame-Options”设置为“sameorigin”。

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

这意味着 YouTube 不希望浏览器将其嵌入到 iframe 中，除非嵌入到 youtube.com 本身。（在 YouTube 本身上，此嵌入代码仍然有效：当您检查 YouTube 上任何当前流式实时视频的源代码时，您会发现那里的实时聊天窗口是/live_chat?…在 iframe 中使用相同的请求创建的。）

此功能已被删除的其他迹象：

• YouTube 文档提到：

  实时聊天模块仅存在于 YouTube 观看页面上——它不关注嵌入式播放器。（来源）

  我相信这是文档的新部分，进一步向下的“嵌入实时聊天”部分已经过时。

• 这个2016 年的教程使用记录的 URL 格式在底部附近嵌入一个示例实时聊天，现在它显示相同的“拒绝在框架中显示 […]，因为它将‘X-​​Frame-Options’设置为‘sameorigin’。 ” 假设这在 2016 年奏效，YouTube 方面肯定发生了一些变化。

• 这个Reddit 帖子讲述了某人的嵌入式实时聊天如何在 2018 年 9 月上旬突然停止工作——就在这个问题被问到之前不久。

备择方案

• 您可以使用 YouTube Livestream API，尤其是LiveChatMessages端点来获取和创建聊天消息。可能有开源库可以帮助解决这个问题。到目前为止，我找到了这个（能够显示但不能创建聊天消息）。

• 您可以嵌入您自己的聊天，安装在您自己的服务器或云托管的实时流聊天解决方案上。该解决方案还可以提供 YouTube 实时聊天不提供的功能，例如允许匿名访问者发帖。

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

• 如果您只需要一台或几台计算机的解决方案，您可以使用浏览器扩展程序从 YouTube 的响应中删除 X-Frame-Options 标头。看到这个问题。

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 的 iframe 的父级在哪里chat-embed，VIDEO_ID（在frame.src分配中）是目标视频的 id。您必须为您的设置稍作修改，但这是一般情况下的解决方案。