自定义video插件，全屏时控制条被遮挡

Question

业务中，自己做了一个 根据自己产品的UI的video标签，也跟自定义视频控制条设计了功能，但是发现，视频全屏功能点击后 在FF和IE、Opera都会把z-index提到最大，挡住了我自定义的控制条（我把自定义的控制条的z-index也设置成最大），chrome就没事。问下怎么解决

      <div class="box">
         <div class='Dvideo'>
            <video :src='source' autoplay width="900" height="550" preload="auto" poster="static/loading.gif" ref="video" @click='playVideo' @dblclick='maxVideo'></video>
         </div>
         <div class="controlBar">
           <div class="playOrPause" @click='playVideo'><i class="iconfont icon-pause" v-show='playOrPause'></i><i class="iconfont icon-bofang2" v-show='!playOrPause'></i>
           <span class="PauseTip">Pause</span>
           </div>
           <div class="next" @click='next'>
             <i class="iconfont icon-ai09"></i>
             <span class="NextTip">Next</span>
           </div>
           <div class="loadingBar">
              <div class="progressBar" ref='progressBar' @click='proBarPos'>
                <div class="timeBar" :style="'width:' + timeBarWidth"><span ref='timeBall'></span></div>
                <div class="bufferBar" :style="'width:' + bufferBarWidth"></div>
              </div>
           </div>
           <div class="playTime">{{currentTime}} / {{totalTime}}</div>
           <div class="voiceControl">
            <div class="voiceBtn" @click='mute'>
              <i class="iconfont icon-shengyinxianxing"></i>
              <div class="voiceTip">静音</div>
            </div>
             <div class="voiceBar" @click='changeVolume'>
               <div class="totalVoice" ref='volumeBar'>
                 <div class="currentVoice" :style="'width:' + volumeWidth  + '%'"><span ref='volumeBall'></span></div>
               </div>
             </div>
           </div>
           <div class="max" @click='maxVideo'>
             <i class="iconfont icon-quanping"></i>
             <span class="maxScreenTip">Full screen</span>
           </div>
         </div>
      </div>
   .video
     position fixed
     top 0
     left 0
     height 100%
     width 100%
     z-index 6
     .videoContainer
        width 900px
        height 550px
        position fixed
        z-index: 100
        left 50%
        top 50%
        transform translate(-50%, -50%)
        font-size 0
        .box
          position relative
          width 100%
          height 100%
          .Dvideo
            position absolute
            left 0
            top 0
            z-index 7
            video
              background-color #000
              &::-webkit-media-controls
                display none !important
  .controlBar
    width 100%
    position absolute
    font-size 0
    bottom 0
    background-color rgba(0,0,0,.6)
    height 24px
    z-index 2147483650
    text-align center

Answer 1

你不是说了把你自己的代码的z-index手动调到最大了么