如何添加任何视频作为 html bootstrap 中不透明度降低的部分的背景？

Question

`你好！我是第一次编写自己的网站，我已经成功创建了一个网站，使其更具吸引力，我想制作一些部分背景作为视频背景，根据设备自动调整其大小。

这是我的代码，我想在其中添加内容：``

<section id="about" class="test-gradient-background about-section whiteline">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-md-6">
          <h2>Who are we?</h2>
          <p>Paragraph </p>
          <a href="#contact" class="btn btn-outline-light btn-primary btn-lg">Contact Us</a>
        </div>
        <video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
          <source src="./images/chess.mp4" type="video/mp4">
         </video>
        <div class="col-md-6 text-center">
          <img src="./images/C8N.png" class="img-fluid cropped-ofp" alt="C8N Image">
        </div>
      </div>
    </div>
  </section>

css : 

.gradient-background {
  background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}


.whiteline {
  border-bottom: 2px solid #ccc;
  padding-bottom: 2rem;
}

`有人可以告诉我如何集成一个完美的视频标签并自我调整吗？我尝试了很多，但在这方面浪费了很多时间。

我观看了一些 YouTube 视频来添加视频背景，但它并不像对他们那样有效。我想集成一些可以添加视频背景的代码行或通过更改具有相同功能的代码行。`

Answer 1

这对我来说是完美的 CSS...

  video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
    }

秘密在于参数 vidth 和高度，单位是视口宽度，如 100% 视口高度 100%，带有 vw 和 vh。