我在这里更新了我的问题和代码,希望现在更加清晰明了。本质上,我需要用视频替换.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>