必须用youtube-nocookie.com域名、响应式css容器、csp frame-src配置、autoplay+mute参数及allow属性，缺一即导致黑屏或无声不播；sandbox嵌套时还需显式添加allow-scripts。
直接用 <iframe></iframe> 嵌入，但不勾选「隐私增强模式」或没配响应式容器，90% 的黑屏、Refused to display、无声不播问题都会出现。
必须用 youtube-nocookie.com 域名
复制 YouTube 分享页的嵌入代码时，默认 src 是 https://www.youtube.com/embed/xxx。这个地址会写入第三方 Cookie，被广告拦截器、GDPR 合规策略或企业防火墙直接拦截——页面加载后 iframe 空白，控制台可能无报错，只显示白框。
- 手动改成
https://www.youtube-nocookie.com/embed/xxx，或在分享弹窗里明确勾选「隐私增强模式」 - 别用通配符或
youtube.com代替——CSP 不认子域通配，youtube-nocookie.com是独立源 - 本地开发时若用
file://协议打开 HTML，视频一定不加载；必须走http://或https://（如python3 -m http.server）
响应式容器不能靠 width/height 硬设
写死 width="560" height="315" 在桌面端看着正常，但在手机上要么溢出、要么留大片空白、要么拉伸模糊——<iframe></iframe> 不会按比例缩放内部视频画面，只会粗暴拉伸像素。
- 外层用
<div class="video-wrapper"> 包裹 <li>CSS 中设 <code>.video-wrapper { position: relative; height: 0; padding-bottom: 56.25%; }（16:9） -
<iframe></iframe>设为position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别用 JS 动态算高，
padding-bottom兼容性最好，IE11 都支持 -
src必须含&autoplay=1&mute=1 -
<iframe></iframe>的allow属性必须包含autoplay，例如allow="autoplay; encrypted-media; picture-in-picture"（Safari 对缺失autoplay权限特别敏感） - 即使你没打算自动播放，也建议保留
allow="autoplay"，否则用户点击播放按钮时可能因权限缺失而失败 - 如果页面启用了 CSP，还需确保
frame-src或child-src明确包含https://www.youtube-nocookie.com - YouTube 播放器依赖 JS 初始化，
sandbox默认禁用脚本执行 - 必须显式加
allow-scripts，例如sandbox="allow-same-origin allow-scripts" - 漏掉
allow-scripts的典型表现是：控制台报 “JavaScript is disabled” 或视频卡在首帧不动
自动播放必须同时满足 mute + user gesture + allow 权限
只加 ?autoplay=1 几乎无效。现代浏览器强制要求静音才允许自动播放，且权限、协议、交互三者缺一不可。
嵌套 iframe 场景下容易漏掉 sandbox 权限
当你的 index.html 里嵌了另一个 HTML（比如通过 <iframe src="player.html"></iframe>），而 player.html 再嵌 YouTube 视频时，常见错误是：YouTube iframe 加了 sandbox="allow-same-origin"，但没加 allow-scripts。
真正难调的不是怎么把视频放进去，而是让 iframe 在 CSP、sandbox、移动端、静音策略、GDPR 这几层限制下还能稳定加载并响应用户操作——多数黑屏问题，根源就藏在这几处配置的缝隙里。
