纯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>

but it didn't seem to work. Anything to get this working?

<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>

- Cameron Cole

---

所以你想要在视频元素上覆盖一个叠加层，对吗？ - Alanaj

尝试去除背景颜色，并且去除 z-index。 - Alanaj

@Alanaj 之前尝试过，似乎不起作用。 - Cameron Cole

视频根本没有显示出来吗？ - Alanaj

@Alanaj，我也不知道为什么。 - Cameron Cole

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>

THIS IS THE OLD ONE LOOK ABOVE

    (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>

Let me know if this is not what you are looking for.

- GreenCobalt

---

有没有办法让宽度和高度都占据整个屏幕大小？现在要么是宽度全屏而不是高度，要么是相反的。需要两者都满足吗？ - Cameron Cole

我相信这取决于视频的宽高比，但是尝试将视频高度设置为100%即可。 - GreenCobalt

Answer 2

这个应该就可以了，你不需要担心进一步样式或包装视频。你也可以使用 flex 进行操作，但这种方式只需要在父元素中定位子元素 DIV，因此整体 CSS 更少。视频来自 W3 学校，所以有一个示例播放。

.blue {
  width: 100%;
  height: 250px;
  background-color: blue;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: center;
}

.video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="blue">

  <div class="video">
    <video controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </div>

</div>

- learningtoanimate

---

目前的设置无法使用。我需要将红色div放在蓝色div后面，以显示视频而不是纯色背景。 - Cameron Cole

只需交换索引即可。如果您当前的设置不起作用，即使这意味着重写此部分，您也应该进行更改。 - learningtoanimate

我更新了我的代码和问题，希望更加清晰易懂。 - Cameron Cole

Answer 3

    <div class="container">
  <div class="front"></div>
  
  <div class="video">
    <video autoplay controls>
  <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.ogv" type="video/ogg">
  <source src="http://learn.shayhowe.com/assets/misc/courses/html-css/adding-media/earth.mp4" type="video/mp4">
</video>
  </div>
</div>

   .front {
  background-color:blue;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
  width:100%;
  opacity: 0.2;
  
}

.video {

  height: 100%;
  position: absolute;
  width:100%;
  top: 0;
  z-index: 1
}
// *********
.video video {
background:url(https://picsum.photos/id/107/800/800) 
  height: 100%;
  width: 100%
}

.container {
  height:100vh;
  width: 100vw;
  position: relative;
}

body {
  margin: 0;
}

- Alanaj

---

@Cameron Cole 如果它不起作用，我们会尝试其他方法！ - Alanaj

Answer 4

请问您能否检查下面的代码？我们已经将.content设置为position:relative，并将video的width:100%进行了管理，并管理了video和overlay的z-index。

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

.content {
  position: relative;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  height:100vh;
  padding: 20px;
  overflow:hidden;
}
#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}
.overlay {
  background-color:rgba(0,0,255,0.5);
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  width: 100%; 
  height: 100%;
  z-index: 2;
}

<div class="content">
    <div class="overlay"></div>
    <video autoplay muted loop id="myVideo">
    <source src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" type="video/mp4">
    </video>
</div>

- Yudiz Solutions

---

似乎没有用处。我只需要蓝色div后面的红色div变成视频，而不是纯红色。 - Cameron Cole

我更新了我的代码和问题，希望更加清晰易懂。 - Cameron Cole