目标网页上有一个全屏背景视频,涵盖了整个视口。我想实际包含视频,并在所有屏幕尺寸的左侧和右侧显示一些白色。我尝试将容器的宽度和高度更改为没有运气...我还添加了一些边距,但是随着屏幕变小,它们会消失。有什么想法吗?
.vid {
position: relative;
height: 100vh;
}
.video-container:before {
content:"";
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index:1;
background: rgba(0,0,0,.75);
opacity: .5;
}
.video-container {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}
.bg-video {
height: 100%;
width: 100%;
object-fit: cover;
}
<section class="vid p-5">
<div class="video-container h-100">
<video class="bg-video" autoplay muted loop>
<source src="video/caleb-original.mp4" type="video/mp4">
Your browser is not supported
</video>
</div>
<div class="row h-100 text-white">
<div class="container banner">
<div class="row">
<div class="col-lg-12 motto text-left">
<h1 class="banner-heading text-left">
We Believe<br> <span class="people">People Make<br> The Difference</span>
</h1>
<a href="#" class="launch-modal" data-modal-id="modal-video">
<span class="hvr-grow u-media-player__icon u-media-player__icon--success">
<span class="fa fa-play u-media-player__icon-inner"></span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="top-footer">
<h5>Founded 2004</h5>
<ul>
<li><a href="https://twitter.com/theMassPayWay" target="_blank" ><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.facebook.com/theMassPayWay" target="_blank" ><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCfOk5GTwjjbOybKFQotRzmQ?view_as=subscriber" target="_blank"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://www.instagram.com/themasspayway" target="_blank" ><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.linkedin.com/company/masspay" target="_blank" ><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</section>
答案 0 :(得分:0)
您需要将width
设置为父母div
,并将margin:0 auto
赋予该div
。
尝试一下:
.vid {
position: relative;
height: 100vh;
width: 80%;
margin: 0 auto;
}