如何在GitHub Pages中嵌入YouTube直播聊天？嵌入遇404错误求助

问题核心原因 #

GitHub Pages的默认二级域名（比如lucho19jose.github.io）不符合YouTube直播聊天嵌入的域名规则，哪怕你填对格式也会触发404——YouTube只允许将自定义顶级域名（比如你自己的xxx.com）用于embed_domain参数，托管平台的二级域名不在允许范围内。

具体解决步骤 #

1. 绑定自定义域名到GitHub Pages
   这是解决问题的前提：

   • 进入你的GitHub仓库设置，找到Pages选项
   • 添加你拥有的自定义域名（比如yourdomain.com）
   • 完成DNS解析验证，确保自定义域名能正常访问你的GitHub Pages页面，且HTTPS已启用（GitHub会自动配置证书）

2. 修正iframe代码的格式错误
   你提供的代码里用了中文引号（”“），浏览器无法正确解析，同时embed_domain的格式也需要调整：
   正确代码示例：

   <iframe width="350px" height="500px" src="https://www.youtube.com/live_chat?v=你的视频ID&embed_domain=你的自定义域名"></iframe>
   

   • 所有引号替换为英文双引号（""）
   • embed_domain只填纯域名，不要加https://、www.或者末尾的斜杠，比如直接填yourdomain.com

3. 验证嵌入状态
   绑定域名并修正代码后，刷新页面即可看到正常加载的直播聊天。如果还是有问题，检查：

   • YouTube直播是否为公开状态（私有/未列出的直播无法嵌入聊天）
   • 自定义域名的DNS解析是否完全生效（可能需要等待10-30分钟）

临时替代方案（无自定义域名时） #

如果暂时没有自定义域名，可以尝试通过YouTube Data API拉取直播聊天数据，再自己渲染到页面上，但这需要编写额外的前端代码，不如自定义域名方案直接高效。

内容的提问来源于stack exchange，提问作者Jose Barboza Gonzales