使视频背景高度响应

Question

请参阅此处-https://harrigreeves.me

我有我的视频，它的容器在HTML页面顶部的一个部分-

<section id="intro">   
<div class="intro-overlay">
<video autoplay muted loop id="myVideo">
<source src="background.mp4" type="video/mp4">
</video>
</div>  
<div class="intro-content">
<div class="row">
<div class="col-twelve">
<h1>Harri Greeves</h1>
<h2 class="intro-position">Front-end Web Developer</h2>
<a href="#" title="Download CV" class="button button-primary">Download CV</a>
</div>  

</div>                  
</div> <!-- /intro-content --> 
<ul class="intro-social">
<li><a target="_blank" href="https://www.linkedin.com/in/harrigreeves/"><i class="fa fa-linkedin slideup"></i></a></li>
<li><a target="_blank" href="https://github.com/greevesh"><i class="fa fa-github"></i></a></li>       
</ul> <!-- /intro-social -->          
</section> <!-- /intro --> 

基本上，当屏幕缩小时，我希望视频背景的高度仍然占据整个视口。

现在你可以在视频背景下看到一个深灰色的空间。

#intro {
background-image: url(../background.mp4);
background-attachment: fixed;
width: 100%;
height: 100vh;
min-height: 720px;
display: table;
position: relative;
text-align: center;
background-size: 750px;
}
.intro-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
opacity: .85;
}

我想如果我的视频背景是100vh，它会完全响应。为什么不是这样？我还需要添加/删除什么才能做到这一点？

Answer 1

在视频标签上添加此类：

.hero-video{
position: absolute;
width: 100%;
height: 100vh;
object-fit: cover;
inset: 0;
}