响应式视频部分均具有 100vh 和 100vw 且未使用 position:fixed

Question

我想创建一个包含多个部分的单页网站。每个部分包含一个高度和宽度等于视口大小（100vh 和 100vw）的视频，这些视频一个接一个地堆叠（每个占据浏览器视口的全宽和全高）。

我在网上看到很少有教程解释如何使用固定位置来实现响应目的。但是在其他部分我不希望视频作为背景。有没有办法让它发生？（绝对位置不是一个选项，因为当我调整大小时它不会占据页面的全宽和全高，即使在使用@media 时也是如此）。

我只是想要这些响应式视频部分，以便它们不会在浏览器调整大小时中断或溢出。

编辑：

这是我的代码html

<section class="section1">
     <video id="videoBG" autoplay muted loop>
      <source src="style/vid/1_first.mp4" type="video/mp4">
     </video>
</section>


<section class="section2">
 <video id="videoBG2" autoplay muted loop>
      <source src="style/vid/2_second.mp4" type="video/mp4">
     </video> 
</section>

和 css :

section {
 height: 100vh;
}

.section1 #videoBG, .section2 #videoBG2 {
 position: fixed;
 z-index: -1;
}


/* Make video responsive for every size resizing*/

@media (min-aspect-ratio: 16/9) AND (min-aspect-ratio: 8/5) AND (min-aspect-ratio: 4/3) AND (min-aspect-ratio: 3/2){
 .section1 #videoBG, .section2 #videoBG2{
  width: 100%;
  height: auto;
 }
}
@media (max-aspect-ratio: 16/9) AND (max-aspect-ratio: 8/5) AND (max-aspect-ratio: 4/3) AND (max-aspect-ratio: 3/2) {
    .section1 #videoBG, .section2 #videoBG2 { 
        width:auto;
        height: 100%;
    }
}

Answer 1

就问题而言。您需要将视频一个接一个地堆叠起来。所有视频部分都应该有 100vh。

我们的想法是将我们的视频部分包围在包装器容器中 (<main id="videosWrapper"><main>)。

如果我们使用object-fit:cover，问题就解决了。

#videosWrapper{
 max-width:100vw;
 max-height:100vh;
}

然后对于各个视频，使用以下 CSS：

.videoCSS{
 width: 100%;
 height:100%;
 object-fit: cover;
}

检查下面的完整代码：

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

#videosWrapper{
  max-width:100vw;
  max-height:100vh;
}

.videoCSS{
  min-width: 100%;
  min-height:100%;
  width:100%;
}

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Stack of full screen videos</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <main id="videosWrapper">
    <section class="section1">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
          type="video/mp4" />
      </video>
    </section>


    <section class="section2">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4"
          type="video/mp4" />
      </video>
    </section>

    <section class="section2">
      <video class="videoCSS" autoplay muted loop>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4"
          type="video/mp4" />
      </video>
    </section>
  </main>

</body>

</html>

注意： object-fit:cover 不适用于 IE/Edge。

响应式视频部分均具有 100vh 和 100vw 且未使用 position:fixed

Responsive Video sections all having 100vh and 100vw without using position:fixed

html

css

background