如何获取 z-index: -1; 上的背景视频滚动页面？

Question

我对编码相当陌生，因此只使用和熟悉 HTML 和 CSS。

我的目标 对于我正在处理的这个页面，我想要一个视频作为背景，视频应该随着页面的内容滚动。

我的情况 据我了解，您不能将背景属性用于视频。因此，我使用了一些代码将视频放在 z-index: -1;，这样它就可以作为背景，其他内容可以放在最前面。这运作良好。我在上面有一堆内容，一切都很好。

我的问题 我唯一无法开始工作的是与页面内容一起滚动的视频。相反，当顶部的内容滚动时，它是固定的并保持在原位。

我尝试了以下方法但未成功：

背景附件：滚动，应用于包含视频的容器
背景附件：滚动，应用于视频本身
无尽的谷歌搜索寻找答案

我的问题 如何将视频作为背景并使其随页面滚动？

非常感谢您的任何见解。

(我认为是) 相关HTML:

  <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/7471668/truck-video.png">

(我认为是) 相关CSS:

#background-video {
width: 100vw;
height: 625px;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}

@media (max-width: 480px) {
#background-video { display: none; }
body {
  background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
  background-size: cover;
}
}

Answer 1

行 position: fixed 使视频在滚动时停留在同一位置，因此如果将其更改为 position: absolute 视频将保留为背景，其他元素位于顶部，但它滚动时不会固定。

Mozilla 位置文档：https://developer.mozilla.org/en-US/docs/Web/CSS/position

如何获取 z-index: -1; 上的背景视频滚动页面？

How do I get my background video which is on z-index: -1; to scroll with the page?

html

css

video

frontend

background