视频全屏显示时，位置无法正常工作

Question

我正在做一个项目，在视频播放完后，我需要显示标签。当前输出显示如下

请在10秒钟内查看下一个ep的标签。 在正常情况下，这可以正常工作，但是当我全屏显示时，标签消失了。 这是我对此部分的反应代码

body {
  margin: 0; /* ADDED */
}

.window-container {
  position: fixed;
  height: 100vh; /* ADDED */
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
}

.navbar {
  position: relative;
  padding: 0;
  background: grey;
  width: 100%;
}

.bar-text {
  margin: auto;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#contentContainer {
  position: relative;
  overflow: auto;
  flex: 1; /* ADDED */
  /*height: calc(100% - 3em);*/
  /* For non-scrolling content */
  /* overflow: hidden; */
}

#childContent {
  padding: 0.5em;
}

我该怎么办，以免标签在全屏模式下消失

Answer 1

当视频全屏显示时，需要在视频顶部的组件将需要指定z-index: 2147483647 CSS属性，如此处MDN所述。

  

默认浏览器控件必须使用以下方式隐藏：

video::-webkit-media-controls { display:none !important; }

     

自定义控件容器需要具有特殊的z-index值：

.controls { z-index:2147483647; }

话虽如此，当视频全屏显示时，您应该在标签上指定以下属性：

<div style={{ backgroundColor: 'black', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 2147483647 }}>
  <label style={{ fontSize: '0.8rem', fontWeight: 600, color: 'white', padding: '5px 10px', margin: 5, backgroundColor: '#0487d6', position: 'absolute', right: 0, bottom: 0 }}>
    Next ep in {this.state.countdown} seconds
  </label>
</div>