Question

我正在尝试将youtube实时聊天嵌入到我的网站enum(N,L,N) -> L; enum(N,L,I) -> io:format("current number: ~w~n", [I]), L0 = L ++ [I], enum(N,L0,I+1). enumFunc(N) -> enum(N,[],1).上的网页上我正在尝试执行此操作，但是如果尝试使用我拥有的真实域进行嵌入域，则聊天根本不会显示，但这也不起作用。

Answer 1

至少在我遇到此问题时，这似乎与引入this change to 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。您需要为设置进行一些修改，但这是一般的解决方案。

Answer 2

在我看来， YouTube禁用了该功能，无法在外部网站上嵌入实时聊天，但后来却忘记了更新文档。或者，有一个漏洞破坏了此功能，而YouTube尚未修复。

详细信息

YouTube知识库仍然说，仍然可以使用您发布的网址（see here，在“嵌入式实时聊天”部分中）将实时聊天iframe嵌入到外部网站中。

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

拒绝在帧中显示“ 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上当前正在流式传输的实时视频的源代码时，您会发现iframe中的实时聊天窗口是通过相同的/live_chat?…请求创建的）

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

YouTube文档中提到：

“实时聊天”模块仅存在于YouTube观看页面上-不跟随嵌入式播放器。（source）

我相信这是文档的新部分，并且下方的“嵌入实时聊天”部分已经过时。
This tutorial使用记录的URL格式在底部附近嵌入示例实时聊天，现在它显示相同的“拒绝在框架中显示[…]，因为它设置了'X-框架选项”改为“同源”。”假设这在2016年行之有效，那么YouTube方面一定有所改变。
这个Reddit thread讲述了某个人的嵌入式实时聊天是如何在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。

Answer 3

我可以确认这确实可行。但是，即使页面的网址以“ https://www.example.com”开头，当embed_domain的值为“ example.com”时，我仍然收到相同的X框架错误。即确保值匹配window.location.hostname。如果您没有规范的主机重定向工作，那么Addison Crump的变通办法可能对此有效。

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表示已从移动设备上删除了此功能），但在台式机和标签页上却可以工作。

最美好的祝福。

Answer 5

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);
}

如何嵌入YouTube直播聊天

5 个答案:

详细信息

替代品