div 在 iframe 中覆盖全屏视频

Question

我的网站页面上有一个 iframe 视频：link to page（等待动画完成并显示视频，大约 30 秒的动画......服务器很可能宕机，选择了最差的免费主持人）。
我遇到的问题是，当我全屏播放时，我有一个 div 覆盖在视频 (.team_container < .team_row [code at bottom]); 上，当全屏播放视频时，容器保持在视频的顶部。我尝试将视频容器的 z-index 设置为 2147483647 但无济于事。 唯一可行的解​​决方案是将覆盖的div (.team_container) 的z-index 设置为-1，但它使该div 中的链接无法点击。

有没有办法只在视频全屏时更改z-index？

有趣的是，在搜索此内容时，似乎人们也在毫无意义地尝试做我已经完成的事情。我只看到了另一个类似的问题，但解决方案不起作用。

视频容器的 css 代码包含文本动画和视频，视频出现在动画的末尾：

.underlay_container {
  width: 100%;
  height: 500px;
  padding: 0;
  margin: 0;
}
.underlay_row {
  display: block;
  width: 960px;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0 auto 0 auto;
  text-align: center;
}
.scroll_container {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  width: 960px;
  height: 100%;
  opacity: 1;
  z-index: 1;
  border-bottom: 1px solid rgba(217, 217, 217, 0.9);
  -webkit-animation: toback 1s linear 20s 1;
  -moz-animation: toback 1s linear 20s 1;
  -o-animation: toback 1s linear 20s 1;
  animation: toback 1s linear 20s 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.video_underlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  width: 960px;
  height: 0;
  padding-bottom: 56.25%;
  opacity: 0;
  visibility: hidden;
  z-index: 2147483647;
  -webkit-animation: tofront 1s linear 20s 1 fowards;
  -moz-animation: tofront 1s linear 20s 1 forwards;
  -o-animation: tofront 1s linear 20s 1;
  animation: tofront 1s linear 20s 1 forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.video_underlay iframe {
  posiition: absolute;
  top: 0;
  left: 0;
  width: 960px;
  height: 500px;
  z-index: 2147483647;
}

显示在全屏视频上方的 div 的 css：

.team_container{
  display: block;
  width: 100%;
  height: 600px;
  padding: 0;
  margin: 0;
}
.team_row {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 960px;
  height: 100%;
  padding: 0;
  margin: 0 auto 0 auto;
}

Answer 1

您可以使用 :fullscreen 伪类：https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen 为全屏元素添加任何 css 属性