应使用YouTube官方提供的<iframe>嵌入代码并启用隐私增强模式，通过CSS响应式容器（padding-bottom: 56.25%）维持16:9比例，同时确保CSP策略允许youtube-nocookie.com、避免file://协议及检查视频嵌入权限。
直接用 <iframe> 嵌入，别碰 <object> 或 Flash 方案 —— 那些早失效了，且现代浏览器根本不支持。
YouTube 官方嵌入代码怎么拿
打开目标 YouTube 视频页 → 点右下角 分享 → 点 嵌入 → 复制弹出框里的 <iframe> 代码。注意勾选 启用隐私增强模式：它会让 YouTube 延迟加载视频（不发 cookie），避免触发 GDPR 或广告拦截器拦截。
- 没勾这选项，
src是https://www.youtube.com/embed/xxx - 勾了之后，
src变成https://www.youtube-nocookie.com/embed/xxx，更安全也更稳 - 别手动改
width/height—— 响应式布局下建议用 CSS 控制，否则在手机上会溢出或留白
响应式嵌入：让视频自动适配容器宽度
原生 <iframe> 默认是固定宽高，强行拉伸会模糊或变形。真正靠谱的做法是用一个包裹容器 + CSS 维持 16:9 比例：
<div class="video-wrapper"> <iframe src="https://www.youtube-nocookie.com/embed/xxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}- 不用 JS 计算比例，CSS
padding-bottom是最轻量、兼容性最好的方案 - 删掉
frameborder="0"不影响显示，但保留更稳妥（部分老环境仍识别） -
allow属性里别删autoplay—— 即使你不用自动播放，某些浏览器（如 Safari）会因缺失该权限拒绝静音播放
常见错误：Refused to display 和黑屏
页面加载后 iframe 显示为空白或控制台报 Refused to display 'https://www.youtube.com/embed/xxx' in a frame because an ancestor violates the following Content Security Policy directive，基本就两类原因：
- 你的站点启用了严格 CSP 策略，但没放行
https://www.youtube-nocookie.com（或https://www.youtube.com）的frame-src或child-src - 本地开发时用
file://直接打开 HTML —— YouTube 明确禁止非 HTTP(S) 协议嵌入，必须走本地服务器（如python3 -m http.server） - 视频被设为“不适用于嵌入”（YouTube 后台设置），此时 iframe 会静默失败，无提示，只能换视频或联系上传者
真正麻烦的不是嵌入动作本身，而是嵌入后是否被用户实际看到：CSP、协议限制、隐私模式开关、移动端缩放逻辑 —— 这些地方一漏，视频就卡在黑屏或拒绝加载，而且很难一眼定位。
