HTML-将视频以响应方式放置到背景中

我试图实现视频背景到我的网站。我希望它位于页面顶部（也就是说，无论窗口的高度如何，当滚动条位于最顶端位置时，它应该是背景上的整个视频），并且我会将一些内容放在视频的前景上，也放在视频的下方。目前，我使用以下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>

---前景内容
--视频下面的内容

---

现在，我在整页上得到了我想要的结果，但它没有响应。当我调暗屏幕大小时，视频会按我的要求保持全屏，但视频下方的内容会向上移动并与视频重叠。如何修复此问题？

从您提供的代码中，您的

#myVideo

元素已从文档的正常流程中删除，因此其他元素会忽略它，这很好，但它是相对于视口而不是

标题
元素定位的。创建一个针对
标题
元素的规则，如下所示：

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

将其设置为
位置：相对
将意味着视频相对于它进行定位，
标题的高度将为视口高度的100%。下面的代码将
#myVideo
元素定位在
标题
元素的左上角，使其100%为
标题
元素的宽度/高度

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

看看CSS媒体查询，或者看看现有的带有响应容器的CSS框架，比如Bootstrap。您好，谢谢您的回答。我应用了你的解决方案，现在我的底部内容与视频没有重叠。但当屏幕变小时，我的视频并没有达到全高。你对此有什么建议吗？@Alp你能提供一个正在发生的事情的图像吗？