使用 HTML/CSS 创建视频背景

如何解决使用 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,vitae tristique diam. Nam mattis magna ut sollicitudin euismod. Lorem ipsum dolor sit amet,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>
                </div>              
            </div>

当前：

目标：

解决方法

你能看看下面的代码吗？希望它对你有用。我们已使用 import "mocha"; import { ActionsOnGoogleTestManager } from "@assistant/conversation-testing"; const { expect } = require("chai"); const DEFAULT_LOCALE = "en-GB"; const DEFAULT_SURFACE = "SMART_DISPLAY"; const projectId = "test"; const TRIGGER_PHRASE = "Talk to test"; describe("Test Suite",function () { // Set the timeout for each test run to 60s. this.timeout(60000); let testManager: ActionsOnGoogleTestManager; afterEach(function () { testManager.cleanUpAfterTest(); }); before(async function () { testManager = new ActionsOnGoogleTestManager({ projectId }); await testManager.writePreviewFromDraft(); testManager.setSuiteLocale(DEFAULT_LOCALE); testManager.setSuiteSurface(DEFAULT_SURFACE); }); it("welcome intent",async function () { testManager.setTestLocale("en-GB"); await testManager.sendQuery(TRIGGER_PHRASE); testManager.assertSpeech( "Welcome Alpha" ); // await testManager.sendQuery("donation"); }); }); 属性和 transform 与 z-index 相关，以根据您的要求创建视频背景。

请参考此链接： https://jsfiddle.net/yudizsolutions/mktLfg5r/

#header

#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;
}