h5手机浏览器中使用video层级太高

Question

如图，点击右上角按钮后会有个列表，但是由于video层级过高挡住了，z-index没有用，网上也没有好的方法，测试发现，有问题的都是腾讯开发的浏览器，有什么好的解决方案么

Answer 1

给video添加webkit-playsinline,x5-playsinline,x5-video-player-type='h5'，后面这两个就是针对微信浏览器x5内核的设置。这样可以让视频非全屏播放，也就可以设置z-index了
详情参考X5技术文档：http://x5.tencent.com/tbs/gui...

Answer 2

这个只有去研究腾讯的相关文档。

Answer 3

这个问题很常见, 我们现在的解决方案就是在有弹出内容的时候, 在 body 上增加一个特殊的类, 暂时隐藏 video, 在弹出内容关闭时再移除这个类.

.fuck-tencent video {
    height: 1px !important;
    visibility: hidden !important;
    display: none !important;
}