如何在 HTML 中修复 youtube 实时聊天答案

【问题标题】：How to fix youtube live chat in HTML如何在 HTML 中修复 youtube 实时聊天
【发布时间】：2019-09-07 05:14:01
【问题描述】：

我是代码新手，我想实现一个将 youtube 实时聊天放到页面上的代码。现在它拒绝连接。

这是我的代码：

<html>
    <head> 
        <link href="style.css" rel="stylesheet" type="text/css"> 
    </head>
    <body>
        <iframe id="pewdiepie" height="80px" width="300px" frameborder="0" src= "https://akshatmittal.com/youtube-realtime/embed/#!/UCq-Fj5jknLsUf-MWSy4_brA" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
        <p>
        <iframe id="tseries" height="80px" width="300px" frameborder="0" src="https://akshatmittal.com/youtube-realtime/embed/#!/UC-lHJZR3Gqxm24_Vd_AJ5Yw" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
        <p>
        <iframe height="500" width="300" src="https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=<MY_IP>" style="border: 0; width:300px; height:100px; background-color: transparent;"></iframe>
    </body>
</html>

代码有什么问题吗？我该如何解决？顺便说一句，我隐藏了我的 IP 地址。

【问题讨论】：

这个问题可能重复：stackoverflow.com/q/52468303（那里有更多答案）。

标签： html youtube

【解决方案1】：

要嵌入 youtube 实时聊天，链接必须是这样的：

"https://www.youtube.com/live_chat?v=<id_video>&embed_domain=<your_domain>"

因此，要将您的聊天嵌入到 stackoverflow 中，它将是：

"https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=www.stackoverflow.com"

编辑：

这是来自谷歌的official documentation。

在直播期间，您可以使用 iframe 在自己的一侧嵌入实时聊天。

获取直播的视频 ID。您可以从观看页面 URL (youtube.com/watch?v=12345) 获取视频 ID。在本例中，视频 ID 为“12345”。

如果您选择“立即流式传输”，请右键单击播放器并选择复制视频 URL 以获取视频 URL。

获取您要嵌入聊天的网站的域 URL。如果您在 www.example.com/youtube_chat 上嵌入聊天，则您的嵌入域是“www.example.com”。

按以下方式组合嵌入的 URL：https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com。

这是您的 iframe 的网址。请注意，embed_domain 必须与您嵌入聊天的页面的 URL 相匹配。如果它们不同，嵌入式聊天将不会加载。

【讨论】：

Youtube 现在发送 HTTP 标头 x-frame-options: SAMEORIGIN，这会阻止此功能工作。尚不清楚这是 youtube 中的错误还是由于安全问题而故意更改。