纯前端可实现视频弹窗：需控制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 属性
常见错误：把 <video></video> 直接丢进弹窗 div，结果在 iOS Safari 上点不开、没声音、甚至黑屏。原因在于移动端对自动播放限制严格。
- 必须显式添加
controls属性，否则用户无法操作播放/暂停 - 首次播放需用户手势触发，所以
muted是刚需；如果要带声音，得等用户点击后手动调用play()并取消静音 -
preload="metadata"比auto更稳妥，避免预加载卡顿或失败 - 推荐写法：
<video controls muted preload="metadata" poster="thumb.jpg"><source src="video.mp4" type="video/mp4"></source></video>
弹窗遮罩层要 fix 定位 + 防止 body 滚动
弹出时若背景还能滚，体验极差；尤其在 iOS 上，overflow: hidden 对 有时失效。
- 遮罩层用
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></video>外层再套一层<div onclick="...">，优先用 <code>video自身的play事件绑定逻辑 - 如果用
click触发播放，确保该事件来自真实用户操作（比如按钮），否则 iOS 会拒绝play()调用并抛错NotAllowedError: play() can only be initiated by a user gesture
实际最易被忽略的点：视频资源路径是相对路径时，弹窗 JS 动态插入的
<video></video> 可能因执行时机早于 DOM 加载完成，导致 src 加载失败；建议统一用 data-src 存地址，showModal 时再赋值给 src 并调用 load()。
