javascript - 视频作为纯 css 和 html 中的 div 背景

Question

我在这里更新了我的问题和代码，因此希望它更有意义。本质上，我需要将 .video div(带有图像)替换为视频而不是图像。我需要保持蓝色覆盖和其他所有内容，但将其从图像更改为视频。我已经尝试添加

<video id="video" poster="C:\Users\name\Desktop\poster.JPG" autoplay muted loop>
<source src="C:\Users\name\Desktop\footage.mp4" type="video/mp4">
</video>

但它似乎没有用。有什么可以让这个工作吗？

<style>
.front {
  background-color:blue;
  height: 91vh;
  position: relative;
  z-index: 2;
  width:100%;
}

.video {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  width:100%;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}
</style>

<div class="container">
  <div class="front"></div>

  <div class="video"></div>
</div>

<div style="height:150vh"> more content later </div>

Answer 1

也许像这样？

<style>
  .front {
    background-color: blue;
    height: 91vh;
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .video {
    height: 100vh;
    width: 100%;
    margin-top: -100vh;
    position: sticky;
    top: 0;
  }

  .container {
    height: 200vh;
  }

  body {
    margin: 0;
  }

</style>

<div class="container">
  <div class="front"></div>

  <div class="video">
    <video style='width:100%;' id="background_video" autoplay loop muted>
     <source type='video/mp4' src='https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_1MB.mp4' />
    </video>
    <div id="overlay"></div>
  </div>

</div>
<div style="height:150vh"> more content later </div>

这是上面的旧图

    (function() {

      var bv = new Bideo();
      bv.init({
        videoEl: document.querySelector('#background_video'),
        container: document.querySelector('.video'),
        autoplay: true,
        src: [{
          src: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4',
          type: 'video/mp4'
        }],
      });
    }());

<style>
  .front {
    background-color: blue;
    height: 91vh;
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .video {
    height: 100vh;
    margin-top: -100vh;
    position: sticky;
    width: 100%;
    top: 0;
  }

  .container {
    height: 200vh;
  }

  body {
    margin: 0;
  }

</style>

<div class="container">
  <div class="front"></div>

  <div class="video">
    <video style='width:100%;' id="background_video" loop muted></video>
    <div id="overlay"></div>
  </div>

</div>
<div style="height:150vh"> more content later </div>

<script src="https://rishabhp.github.io/bideo.js/bideo.js"></script>

如果这不是您要找的，请告诉我。