HTML - 响应式地将视频置于背景

Question

我尝试在我的网站上实现视频背景。我希望它位于页面顶部(这意味着无论窗口的高度如何，当滚动条位于最顶部位置时，它应该是背景中的整个视频)，我将放置视频前景中的一些内容也在视频下方。现在我使用以下 CSS:

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

我的 HTML 结构如下:

<header>
  <video autoplay muted loop id="myVideo">
    <source src="video.mp4" type="video/mp4">
  </video>

  <div class="container">
    --- Content on the foreground
  </div>
</header>
<section>
  -- Content below the video
</section>

现在我在整页上得到了我想要的结果，但它没有响应。当我缩小屏幕尺寸时，视频会按我的意愿保持全屏显示，但视频下方的内容会向上移动并与视频重叠。我该如何解决这个问题？

Answer 1

从您提供的代码中，您的 #myVideo 元素已从文档的正常流中取出，因此其他元素将忽略它，这很好，但它是相对于视口(viewport)而不是相对于视口(viewport)定位的header 元素。创建一个以 header 元素为目标的规则，如下所示:

header {
    height: 100vh;
    position: relative;
}

position: relative 意味着视频相对于它定位，header 的高度将是视口(viewport)高度的 100%。下面的代码将 #myVideo 元素定位到 header 元素的左上角，并使其成为 header 元素的宽度/高度的 100% .

#myVideo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}