调整屏幕大小时无法使我的视频背景保持不变

Question

我是 CSS 新手。我目前正在测试视频背景，当我缩小屏幕大小或打开开发工具时，无法使视频背景保持相同大小。每当我缩小屏幕时，背景就会变小。

这是屏幕较小时背景的样子

谁能帮我弄清楚如何使我的视频背景具有响应性并使其无论屏幕大小如何都保持相同的大小，好吗？

这是我目前的视频背景样式：

    video {
      z-index: -1000;
      left: 50%;
      max-width: 100%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .showcase {
      display: block;
      height: auto;
      overflow: hidden;
      position: relative;
      padding-bottom: 100%;
    }

我的身体没有任何样式。我的视频标签位于展示标签内。

这就是我的视频背景的渲染方式：

function Main() {
  return (
    <>
      <section id="showcase">
        <video src="clouds.mp4" muted loop autoPlay></video>
        <QuoteBox />
      </section>
    </>
  );
}

Answer 1

不同的视口将具有不同的宽高比，因此如果顶部/底部或侧面没有一些空间，视频并不总是完全适合内部。

由于在这种情况下让视频填满整个屏幕更为重要，因此此代码段说明了在视频元素上使用 CSS object-fit: cover ，并将尺寸设置为整个视口。

video {
  z-index: -1000;
  left: 50%;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.showcase {
  display: block;
  height: auto;
  overflow: hidden;
  position: relative;
  padding-bottom: 100%;
}

<section id="showcase">
  <video src="https://www.w3schools.com/html/mov_bbb.mp4" muted loop autoPlay></video>
</section>