有没有 PURE CSS 的解决方案来解决这两个纵横比为 16/9 且始终居中的相机布局？

Question

所以我想知道我可以在多大程度上使用 CSS 网格或弹性布局来解决这个问题。这是我想用 HTML/CSS:

构建的两个相机布局

请注意，我上传了每个布局的两个版本，以证明我希望它们始终居中，因此“黑色部分”应该始终围绕视频。 希望你明白我的意思。

另一个重要的事情是我想在视频上方放置内容和覆盖div，所以我必须控制相对于视频0,0坐标的绝对内容。（如图片中的“视频标题”标签。）此外，当浏览器在任何方向上调整大小时，布局应遵循 16/9 的纵横比。最后一件事，在我要集成这个的产品中，有 header、面板、页脚，所以这个布局不是页面上唯一的东西。（所以视频容器的高度不是100vh。）也许这很重要。

那么只有HTML/CSS可以吗？没有计算视频的确切大小？

对于基础知识，我已经为 3x3 布局创建了一个 jsfiddle。我不确定应该如何创建 6 视频版本。也许 grid 可以做 row 和 colspan？

https://jsfiddle.net/5s9wkoea/ → 编辑附加功能： https://jsfiddle.net/jnxvd52y/1/

html, body {
  background: #1f2227;
  width: 100%;
  height: 100%;
  font-family: Arial;
  color: white;
}

h3 {
  margin: 0;
  padding: 0;
}

.videoContainer {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  background: black;
  width: 100%;
  height: 100%;
}

.video {
  position: relative;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 16/9;
  display: flex;
  max-height: 100%;
  max-width: 100%;
}

.wrapper {
  display: flex;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 0;
  position: relative;

}

.video .overlayContent {
  position: absolute;
  top: 10px;
  left: 10px;
}

.video video {
  max-width: 100%;
  max-height: 100%;
}

<div class="videoContainer">
  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>

  <div class="video">
    <div class="wrapper">
      <div class="overlayContent">
        <h3>Video Title</h3>
      </div>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
  </div>
</div>

非常感谢您的帮助。

Answer 1

我们需要一个视频容器并对其应用aspect-ratio: 16/9;。
然后我们将 display: grid; grid-template-columns: repeat(3, 1fr) 添加到容器中，以将视频放置在具有 3 列的网格布局中。
为确保视频不会弄乱网格，我们对视频应用 width: 100% aspect-ratio: 16/9;。
要使左上角的视频大小增加一倍，我们使用 video:first-of-type select 或 select 第一个视频。然后我们对其应用grid-column: span 2; grid-row: span 2;。
为了让视频在屏幕中居中，我们使用 flexbox 我们可以沿主轴居中（默认：水平）：justify-content: center;。要沿侧轴居中，我们可以使用：align-items: center;。请注意，正文需要 min-height: 100vh; 以确保它跨越整个屏幕。
为确保容器始终适合屏幕，我们使用 media queries 并根据屏幕宽高比应用固定高度或固定宽度。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.video-container {
  aspect-ratio: 16/9;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

@media only screen and (min-aspect-ratio: 16/9) {
  .video-container {
    height: 95vh;
  }
}

@media only screen and (max-aspect-ratio: 16/9) {
  .video-container {
    width: 95vw;
  }
}
  

video {
  width: 100%;
  aspect-ratio: 16/9;
}

video:first-of-type {
  grid-row: span 2;
  grid-column: span 2;
}

<div class="video-container">
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/Whosebug/testvideo.mp4" type="video/mp4">
  </video>
</div>

有没有 PURE CSS 的解决方案来解决这两个纵横比为 16/9 且始终居中的相机布局？

Is there any solution with PURE CSS to solve these two camera layouts with 16/9 aspect ratio and always centered?

html

css

video

grid

flexbox