YouTube嵌入式iframe出现preloadResponse错误的原因及解决方法问询

你遇到的是浏览器同源安全策略的拦截报错，YouTube 对非嵌入专用的资源响应头设置了X-Frame-Options: sameorigin，意味着仅允许同域名下的页面嵌套加载对应资源，第三方站点直接嵌入不符合要求的YouTube链接时，就会触发该报错导致iframe加载失败。

• 优先使用YouTube官方生成的嵌入代码，不要手动拼接链接。你可以打开对应YouTube视频的分享页，点击「嵌入」选项直接复制生成的iframe代码，替换到你的页面中即可。标准合法的嵌入代码参考格式如下：

<iframe width="560" height="315" src="https://www.youtube.com/embed/你的视频ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• 不要使用普通的视频观看页链接（格式为https://www.youtube.com/watch?v=xxx）作为iframe的src，必须使用/embed/路径前缀的专用嵌入链接。
• 本地调试时不要直接用file://协议打开页面，建议启动本地静态服务（比如使用python -m http.server命令或者编辑器的本地服务插件），通过http://localhost域名访问调试，避免本地协议触发额外的安全限制。
• 如果对应视频的创作者关闭了嵌入权限、或者视频存在版权限制无法嵌入，也会触发该报错，这种情况需要联系创作者开启权限，或者更换其他支持嵌入的视频素材。

内容的提问来源于stack exchange，提问作者snowykz