为何嵌入YouTube视频的iframe无法显示？

1. 检查内容安全策略（CSP） #

如果页面配置了Content-Security-Policy响应头，可能限制了iframe的加载来源。需要确保CSP规则中包含frame-src https://www.youtube.com或child-src https://www.youtube.com，允许加载YouTube的嵌入资源。可在浏览器开发者工具「网络」标签中查看页面响应头，确认是否存在CSP限制。

2. 修复容器与iframe的尺寸适配 #

你的父容器#vid_embed为正方形尺寸，但iframe是16:9的固定像素尺寸，可能导致iframe被隐藏或超出容器范围。建议修改CSS，让iframe自适应容器并维持正确视频比例：

#vid_embed {
    margin: min(3vw, 3vh) auto;
    width: min(44vw, 77.78vh); /* 按16:9比例计算，避免视频过度拉伸 */
    background: #eee;
    position: relative;
    padding-top: 56.25%; /* 16:9比例核心：高度=宽度×9/16 */
}
#vid_embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

设置后容器会自动维持16:9比例，iframe填满容器，避免尺寸不匹配导致的隐藏问题。

3. 排查浏览器插件干扰 #

广告屏蔽类插件（如AdBlock、uBlock Origin）常屏蔽YouTube嵌入视频。尝试临时禁用所有浏览器插件后刷新页面，若iframe正常显示，可将当前页面加入插件白名单。

4. 检查页面JavaScript逻辑 #

查看页面是否有JS代码动态移除或隐藏iframe：打开开发者工具「控制台」标签检查错误信息，在「元素」标签实时监控iframe是否被移除。

5. 验证iframe链接有效性 #

直接在浏览器打开iframe的src链接（https://www.youtube.com/embed/riFyKUyGb4k），确认视频可正常加载。当前链接有效，此步骤可快速排除资源本身问题。

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