Video 标签全屏后出现页面的其他元素？

Question

调用代码

<video src="http://example.com/new.mp4" controls="controls" preload="none">
          Your browser does not support the video tag.
</video>

怀疑是 z-index 的问题，但是把 video 的 z-index 设置 9999 也没用

Answer 1

如果是 webkit 内核的话，他在全屏时会把视频的 z-index 设置为最大值

:-webkit-full-screen {
    z-index: 2147483647;
}

所以你可以看一下显示出来的元素是不是 z-index也是这个值

Answer 2

如果你觉得是z-indx的问题化，
z-index是和position配合使用的，
给video设置完position属性之后，
再给video设置z-index；
如果不是z-index的问题的话，
你把video放在一个div里面，
给div设置你需要的高和宽，
再添加你需要的背景颜色。