html - CSS视频背景是全屏，只需要它作为部分

Question

我有视频背景，它占据了我网站的整个空间，而我希望它只覆盖网站的一部分，即标题部分。我希望这是有道理的。

<div class="container-fluid">

            <div id="header" class="header-section">

                <video autoplay loop id="backgroundvideo">
                    <source src="videos/BackgroundVideo.webm" type="video/webm">
                    <source src="videos/BackgroundVideo.mp4" type="video/mp4">
                </video>
            </div>
</div>

这是视频的 CSS:

video#backgroundvideo {
    position: fixed; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
}

Answer 1

看看这个 Example .

CSS

video#backgroundvideo {
position: absolute; 
right: 0; 
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto; 
height: auto; 
z-index: -100;
background-size: cover;
}
.header-section {
width:100%;
height:200px;
background:#d7d7d7;
}