必须使用youtube-nocookie.com域名并配置响应式CSS容器和CSP策略：src需为https://www.youtube-nocookie.com/embed/xxx，外层div设padding-bottom:56.25%维持16:9比例，iframe设绝对定位，且CSP中frame-src须明确允许该域名。

iframe src 必须用 youtube-nocookie.com 域名

直接复制 YouTube 分享页的嵌入代码但没勾选「隐私增强模式」，src 会是 https://www.youtube.com/embed/xxx，这会导致 Cookie 写入，被广告拦截器或 GDPR 合规策略拦截——视频加载失败或空白。必须手动改成 https://www.youtube-nocookie.com/embed/xxx，或者在分享弹窗里明确勾选该选项。

这个域名切换不是可选优化，而是现代部署的硬性前提。不改，本地测试可能正常，上线后大量用户看不到视频。

响应式容器不能靠 width/height 属性硬设

写死 width="560" height="315" 在 PC 看没问题，但在手机上必然溢出、留白或模糊。浏览器不会按比例缩放 iframe 内容，只会拉伸像素。

正确做法是用 CSS 容器维持宽高比：

• 外层 <div class="video-wrapper"> 设 <code>position: relative; padding-bottom: 56.25%; height: 0;（16:9）
• 内层 <iframe></iframe> 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%;

别用 JS 计算高度，padding-bottom 是最轻量、兼容性最好的方案，连 IE11 都支持。

自动播放必须同时满足三个条件

只加 ?autoplay=1 几乎无效。浏览器策略强制要求：

• src 后带 &autoplay=1&mute=1
• <iframe></iframe> 的 allow 属性包含 autoplay，例如 allow="autoplay; encrypted-media; picture-in-picture"
• 页面必须通过 HTTP(S) 协议访问——file:// 协议下无论如何都静音自动播放失败

漏掉任意一项，控制台可能不报错，但视频就卡在首帧不动。尤其注意：Safari 对 allow 缺失非常敏感，哪怕你没想自动播放，也建议保留 autoplay 权限项。

CSP 策略容易忽略的 frame-src 配置

如果网站启用了 CSP（Content Security Policy），而控制台报 Refused to display 'https://www.youtube-nocookie.com/embed/xxx' in a frame because an ancestor violates...，问题几乎肯定出在 CSP 配置上。

你需要确保响应头或 <meta http-equiv="Content-Security-Policy"> 中包含：

• frame-src https://www.youtube-nocookie.com;（推荐）
• 或更宽松但风险略高的 child-src https://www.youtube-nocookie.com;

注意：不能只写 https://youtube.com 或漏掉 -nocookie 子域——它们是不同源，CSP 不认通配符子域匹配。