纯前端可实现视频弹窗：需控制display/visibility、禁用背景滚动、ESC关闭；video须加controls和muted属性，preload="metadata"，iOS需用户手势触发播放；遮罩层用fixed定位，body加.modal-open类防滚动；移动端加touch-action: manipulation；src建议用data-src延迟赋值。

点击按钮打开视频弹窗，用原生 HTML + CSS + JS 就够了

不需要框架、不依赖第三方库，纯前端就能实现一个可关闭、可拖拽（基础版）、适配移动端的视频弹窗。核心是控制 display 或 visibility 状态 + 阻止背景滚动 + 键盘 ESC 关闭。

video 标签不能直接塞进 modal，得加 controls 和 muted 属性

常见错误：把 直接丢进弹窗 div，结果在 iOS Safari 上点不开、没声音、甚至黑屏。原因在于移动端对自动播放限制严格。

• 必须显式添加 controls 属性，否则用户无法操作播放/暂停
• 首次播放需用户手势触发，所以 muted 是刚需；如果要带声音，得等用户点击后手动调用 play() 并取消静音
• preload="metadata" 比 auto 更稳妥，避免预加载卡顿或失败
• 推荐写法：

弹窗遮罩层要 fix 定位 + 防止 body 滚动

弹出时若背景还能滚，体验极差；尤其在 iOS 上，overflow: hidden 对 有时失效。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 遮罩层用 position: fixed; top: 0; left: 0; width: 100%; height: 100%;，z-index > 内容层
• 不要只靠 document.body.style.overflow = 'hidden'，iOS Safari 会忽略；更可靠的是加一个 class 到 ，配合 CSS：.modal-open { position: fixed; width: 100%; }
• 关闭弹窗时记得移除 class 并恢复 scrollTop（防止弹窗关闭后页面跳到顶部）
• ESC 键监听用 document.addEventListener('keydown', e => e.key === 'Escape' && closeModal())

移动端点击区域小、手势冲突，得加 touch-action 和 click 延迟处理

在 iPhone 上，弹窗里的播放按钮可能响应慢、点不中，或者滑动视频区域时误触发页面滚动。

• 给视频容器加 style="touch-action: manipulation;"，告诉浏览器这是可点击区域，禁用双击缩放和延迟 300ms 的 click 判断
• 避免在 外层再套一层
  ，优先用 video 自身的 play 事件绑定逻辑
• 如果用 click 触发播放，确保该事件来自真实用户操作（比如按钮），否则 iOS 会拒绝 play() 调用并抛错 NotAllowedError: play() can only be initiated by a user gesture

实际最易被忽略的点：视频资源路径是相对路径时，弹窗 JS 动态插入的 可能因执行时机早于 DOM 加载完成，导致 src 加载失败；建议统一用 data-src 存地址，showModal 时再赋值给 src 并调用 load()。