如何使用 HTML/CSS 和 Bootstrap 4 使视频适合 web 页面的背景？

Question

I'm trying to get the video to fit the screen. Currently it is massive and I can't figure out how to make the scroll bars disappear. Object-fit doesn't look like it's working as it is supposed to. Also, when I make the screen smaller obviously I want the video to scale with it.

HTML

<div class="video-background">
    <video autoplay muted loop>
        <source src="img/cocktail_pour.mp4" type="video/mp4">
    </video>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.video-background {
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.video-background video{
    position:absolute;
    top:0;
    left:0;
    object-fit:cover;
}

Answer 1

This works across most browsers:

HTML:

<div class="video-background">
  <video autoplay muted loop class="video">
    <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<div class="content">
  <!-- CONTENT GOES HERE -->
</div>

CSS:

.video { /* This is to make the video appear behind everything else */
  position: fixed;
  z-index: -1000; /* Z-Index is -1000 just to be safe */
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content { /* This is for the content */
  position: fixed;
  z-index: 1; /* This can be set to any number greater than -1000. */
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

Answer 2

Bootstrap 5 (update 2019)

Use helper classes to eliminate the need for a lot of extra CSS...

<header>
    <div class="position-absolute top-50 w-100">
        <h1 class="text-white text-center">Overlay Text</h1>
    </div>
    <video autoplay loop id="video-background" class="position-absolute end-0 bottom-0 h-auto w-auto">
        <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4"> Your brower is old
    </video>
</header>

Bootstrap 5 full screen video

---

Bootstrap 4 (original answer)

You can use absolute position and then overlay whatever you want on the video so it remains as a background...

<header>
    <div class="overlay">
        Text
    </div>
    <video id="video-background">
        ...
    </video>
</header>

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

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:rgba(0,0,0,0.5);
}

Demo: https://codeply.com/p/aUjjU2uIXH