移动端video点开后层级过高问题

网络上有很多关于该问题的解答，而且大家遇到的状况也是层出不穷。
我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。
首先我得机型分别是nubia z11 android 6.0.1
和 huawei nova 3 android 9.0
测试时间 2019.8.13

两款手机的表现是，huawei 和 nubia未点击video时，video都是正常层级，如display:fixed的元素都会在video上面。
但是当点击video后，huawei呈现的是非全屏播放状态，而nubia是全屏播放状态。然后我们关闭视频，发现video会在之前的固定定位的元素之上。也就是大家所描述的video层级达到了最高。

出现这个问题后，我只加了如下标签，效果便正常了，而且在iphone x上也查看了一下效果。正常无误。所以贴一下代码分享给大家:

<video
          src="https://xxxxxxx自己写.mp4"
          preload="true"
          poster="/static/srRubikCube_slices/preloadWithPadding.jpg"
          webkit-playsinline="true"
          x5-video-player-type="h5"
          x5-video-orientation="portraint"
          className={styles.video}
          controls
        />