移动web端视频层级最高，视频弹窗层被遮挡的解决方案探究

一.背景

相信有不少同学在开发移动web端带视频的页面时，在部分浏览器上视频的显示层级最高，遮罩层，弹窗之类都被视频遮盖。

我觉得出现这种情况是因为使用了浏览器的播放器，和标准的h5video标签有比较大的区别。会出现这种情况的有：

安卓端: 微信内置浏览器，UC浏览器，QQ浏览器....等等

苹果端： 手头没有苹果设备.

[补充说明]: 文中用的是layer.js的弹窗组件

 

二.针对弹窗被遮挡的问题，探索的一些解决方法(非全屏的情况)

1.无法反抗被生活QJ，那就享受党的处理方式----在非视频显示的区域显示弹层：

在视频下方区域显示弹窗，完美解决（手动狗头）。

优点: 不会被遮挡，播放器无影响。

缺点: 受播放器的位置影响，播放器宽高占据全屏时无法显示。

效果截图：

2.我命由我不由天党的处理方式----显示弹窗时播放器或父容器样式设置display: none.：

原理说明：这个方