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

Question

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

<video id="video" poster="C:UsersnameDesktopposter.JPG" autoplay muted loop>
<source src="C:UsersnameDesktopfootage.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>

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

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>

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

Answer 4

你能检查下面的代码吗？我们设置了一个位置：相对于.content。宽度：100%到video，并管理video和overlay的z指数。

请参考此链接： 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>