z-index对原生video无效，因其被提升至独立渲染层；x5内核及部分安卓webview中dom层叠失效，需用autoplay、muted、playsinline与x5-video-player-type="h5-page"组合控制，动态遮挡时用display:none兜底。
不能靠CSS单独解决——z-index对原生video无效，这不是样式写错，而是渲染层根本不在同一个平面。
为什么加了z-index还是被盖住？
X5内核（微信、QQ、UC）和部分安卓WebView中，video被提升到原生渲染层，DOM层叠上下文完全失效；小米、华为等厂商浏览器甚至直接调用系统播放器，video标签退化为占位符，CSS已无控制权。
-
x5-playsinline实际效果是“强制置顶”，不是“同层播放”，加了反而更遮挡 -
position: relative+z-index对原生视频容器完全无效 -
transform、will-change、overflow: hidden会创建隔离上下文，干扰后续显隐逻辑
真正起效的HTML属性组合（H5平台）
必须严格按这组配置写，混用即失效：
- 移除
x5-playsinline（哪怕写了x5-video-player-type，它也会优先劫持） - 保留
x5-video-player-type="h5-page"（比"h5"兼容性更稳） - 必须带
autoplay、muted、playsinline三件套 -
webkit-playsinline="true"可加可不加，仅影响iOS Safari，对安卓微信无作用
示例：
<video autoplay muted playsinline x5-video-player-type="h5-page"><source src="./video.mp4" type="video/mp4"></source></video>
弹窗/输入框被遮挡时的动态兜底方案
当上述属性仍失败（如旧版QQ浏览器），放弃“压层级”，改用“躲着走”：
- 弹窗打开前执行
video.style.display = 'none'，关闭后再恢复 - 不要用
visibility: hidden——它仍占位且可能触发播放器残留 - 若需保留暂停帧画面，隐藏前用
canvas截图或换用poster，否则大概率黑屏 - uni-app中，
<cover-view></cover-view>在H5下不生效，必须用JS显隐控制做平台判断
容易被忽略的兼容细节
这些点不处理，前面所有设置都可能白搭：
- 视频资源必须同域（如
./video.mp4），跨域地址会被X5内核强制全屏劫持 - 避免在
video父容器上使用transform、will-change或overflow: hidden -
pointer-events: none对遮挡无效——它只禁事件，不改视觉层级 - uni-app中
<video></video>在非H5端是原生组件，<cover-view></cover-view>必须是其**直接子元素**，嵌套一层div就失效
最常被跳过的动作是：没检查资源路径是否跨域，也没在弹层触发前做display: none，结果所有CSS调试都成了无用功。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
