使用 HTML/CSS 创建视频背景
Create video background with HTML/CSS
我正在 Bootstrap 5 创建一个网站，并为主页创建了一个全屏视频背景。
有没有一种方法可以让视频用主标题和导航栏覆盖视口，但所有其他页面内容都位于视频下方，因此您必须向下滚动才能查看它？
如有任何帮助，我们将不胜感激。谢谢。
#myVideo {
z-index: -1;
right: 0;
bottom: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
position:absolute;
}
<section id="header">
<div class="container-fluid edge">
<div class="row justify-content-center">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Events</a>
</div>
</div>
</div>
</nav>
<h1 class="overlay-title">This is the Overlay Title!</h1>
<video playsinline autoplay muted loop id="myVideo">
<source src="assets/video/crowd_sample.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<section id="main_body">
<div class="container-fluid edge">
<div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
<div class="col-9 animated fadeIn">
<div class="test" title="404">
<h1>So, who are we?</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.</p>
</div>
</div>
<div class="row justify-content-center row-padding" id="events">
<div class="col-9">
<div class="row justify-content-between">
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
</div>
</div>
</div>
当前：
目标：
你能检查一下下面的代码吗？希望它对你有用。我们已经使用 transform 属性 和 z-index 关于 #header 来根据您的要求创建视频背景。
请参考这个link：
https://jsfiddle.net/yudizsolutions/mktLfg5r/
#header {
min-height: 100vh;
position: relative;
overflow: hidden;
}
#header > * {
position: relative;
z-index: 2;
color: #fff;
}
#header video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<section id="header">
<div class="container-fluid edge">
<div class="row justify-content-center">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Events</a>
</div>
</div>
</div>
</nav>
<h1 class="overlay-title">This is the Overlay Title!</h1>
</div>
</div>
</div>
<video playsinline autoplay muted loop id="myVideo">
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
</section>
<section id="main_body">
<div class="container-fluid edge">
<div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
<div class="col-9 animated fadeIn">
<div class="test" title="404">
<h1>So, who are we?</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.</p>
</div>
</div>
<div class="row justify-content-center row-padding" id="events">
<div class="col-9">
<div class="row justify-content-between">
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
</div>
</div>
</div>
我正在 Bootstrap 5 创建一个网站，并为主页创建了一个全屏视频背景。 有没有一种方法可以让视频用主标题和导航栏覆盖视口，但所有其他页面内容都位于视频下方，因此您必须向下滚动才能查看它？
如有任何帮助，我们将不胜感激。谢谢。
#myVideo {
z-index: -1;
right: 0;
bottom: 0;
object-fit: cover;
width: 100vw;
height: 100vh;
position:absolute;
}
<section id="header">
<div class="container-fluid edge">
<div class="row justify-content-center">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Events</a>
</div>
</div>
</div>
</nav>
<h1 class="overlay-title">This is the Overlay Title!</h1>
<video playsinline autoplay muted loop id="myVideo">
<source src="assets/video/crowd_sample.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<section id="main_body">
<div class="container-fluid edge">
<div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
<div class="col-9 animated fadeIn">
<div class="test" title="404">
<h1>So, who are we?</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.</p>
</div>
</div>
<div class="row justify-content-center row-padding" id="events">
<div class="col-9">
<div class="row justify-content-between">
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#"><h2 class="mb-0">Event Name</h2></a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
</div>
</div>
</div>
当前：
目标：
你能检查一下下面的代码吗？希望它对你有用。我们已经使用 transform 属性 和 z-index 关于 #header 来根据您的要求创建视频背景。
请参考这个link： https://jsfiddle.net/yudizsolutions/mktLfg5r/
#header {
min-height: 100vh;
position: relative;
overflow: hidden;
}
#header > * {
position: relative;
z-index: 2;
color: #fff;
}
#header video {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<section id="header">
<div class="container-fluid edge">
<div class="row justify-content-center">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Events</a>
</div>
</div>
</div>
</nav>
<h1 class="overlay-title">This is the Overlay Title!</h1>
</div>
</div>
</div>
<video playsinline autoplay muted loop id="myVideo">
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
</video>
</section>
<section id="main_body">
<div class="container-fluid edge">
<div class="row justify-content-center animatedParent animateOnce top-row-padding" id="intro">
<div class="col-9 animated fadeIn">
<div class="test" title="404">
<h1>So, who are we?</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet varius augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim dictum quam at imperdiet. Ut mattis sed augue vitae imperdiet. Aenean cursus diam sed nulla pharetra, et mattis felis vehicula. Suspendisse vitae purus dolor. Aenean ut pretium nisl, vitae tristique diam. Nam mattis magna ut sollicitudin euismod.</p>
</div>
</div>
<div class="row justify-content-center row-padding" id="events">
<div class="col-9">
<div class="row justify-content-between">
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
<div class="col-4">
<img src="https://www.agcs.allianz.com/news-and-insights/expert-risk-articles/live-event-risks/_jcr_content/root/parsys_1220582246/stage_837620117/stageimage.img.jpeg/1550512300558/agcs-grd-2-2015-live-events-stage.jpeg" class="img-fluid mb-2">
<a href="#">
<h2 class="mb-0">Event Name</h2>
</a>
<p class="date">Saturday 7th April</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspen amet variusye dolor sit lorem...</p>
</div>
</div>
</div>
</div>