HTML中如何嵌入YouTube视频_HTML嵌入YouTube视频代码分享【视频嵌入】

林译川

2026-10-23 • 👁 0人浏览过

应使用YouTube官方提供的

对应 CSS：使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载立即学习 “ 前端免费学习笔记（深入） ”；

.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、协议限制、隐私模式开关、移动端缩放逻辑 —— 这些地方一漏，视频就卡在黑屏或拒绝加载，而且很难一眼定位。

相关文章