Html div正在iframe中覆盖全屏视频

Html div正在iframe中覆盖全屏视频,html,css,iframe,video,fullscreen,Html,Css,Iframe,Video,Fullscreen,我的网站页面上有一个iframe视频:(等待动画完成,视频显示,~30秒动画…很有可能服务器关闭,选择了有史以来最差的免费主机)。 我遇到的问题是,当我全屏显示时,我有一个div覆盖在视频(.team_container

我的网站页面上有一个iframe视频:(等待动画完成,视频显示,~30秒动画…很有可能服务器关闭,选择了有史以来最差的免费主机)。
我遇到的问题是,当我全屏显示时,我有一个div覆盖在视频
(.team_container<.team_row[底部代码])上在视频上全屏显示时,容器保持在视频顶部。我尝试将视频容器的z索引设置为2147483647,但没有效果。
唯一有效的解决方案是将覆盖的
div(.team_container)
z-index设置为-1,但它使该div中的链接不可链接

是否只有在视频全屏显示时才有办法更改z索引

有趣的是,当搜索这个时,人们似乎也在试图做我已经完成的事情,而没有任何意义。我只看到了另一个类似的问题,但解决方案不起作用

视频容器的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;
}

您可以使用:fullscreen pseudo class:

向全屏显示的元素添加任何css属性。您可以使用:fullscreen pseudo class: