背景视频上的叠加窗格没有响应和视差效果不适用于视频html css

Question

我需要在网站设计中为背景视频添加叠加效果。尽管覆盖属性已添加到视频中，但它不会响应屏幕大小的变化。叠加的大小变化很快，但不是根据视频的方式。 这是css部分

#video-parallax-video{
z-index: -100;
opacity: 1;
height: 100%;
position: relative;
margin-top:-400px;
}
#video-overlay-features{
position: absolute;
width: 100%;
height: 100%;
background-color: #62625E;
color: #fff;
margin-top: -27px;
opacity: 0.7;
z-index:-20;
}

这是我添加视频和叠加层的HTML代码

<div>
<div id="video-overlay-features"></div>
    <video id="video-parallax-video" class="item" preload="metadata" loop autoplay muted width="100%" style="margin-top:-290px">
      <source src="video/web_.webm" type="video/webm" >
    </video>

  </div>

请指出正确的方向。先谢谢