是否有任何解决方案与纯CSS解决这两个相机布局的16/9纵横比，始终集中？

Question

因此，我想知道我可以用CSS网格或flex布局来解决这个问题。下面是我想用HTML/CSS构建的两个摄像头布局：

​

​

​

​

​

​

​

​

注意到，我上传了两个版本的每个布局，以证明我希望它们总是中心，所以“黑色部分”应该始终围绕着视频。希望你能理解我的意思。

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

那么，只有/CSS才有可能吗？而不计算视频的确切大小？

作为基础，我为3x3布局创建了一个jsfiddle。我不知道我应该如何创建6视频版本。也许网格可以做行和跨？

https://jsfiddle.net/5s9wkoea/→编辑w/ extras：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

1. 我们需要一个视频容器并将aspect-ratio: 16/9;应用到这个容器中。然后，我们将display: grid; grid-template-columns: repeat(3, 1fr)添加到容器中，将视频放置在网格中--布局为3列。为了确保视频不会弄糟网格，我们对视频应用了一个width: 100% aspect-ratio: 16/9;。

H 110要使左上方视频的大小翻倍，我们使用video:first-of-type选择器来选择第一个视频。然后，我们将grid-column: span 2; grid-row: span 2;应用于它。

1. 在屏幕中对视频进行居中，我们使用flexbox，我们可以沿着主轴(默认情况下为水平)：justify-content: center;。我们可以使用：align-items: center;沿侧轴进行居中.请注意，它需要一个min-height: 100vh;到主体以确保它跨越整个屏幕。为了确保容器始终适合屏幕，我们使用media queries，并根据屏幕min-height: 100vh;应用固定的高度或固定的宽度。

​

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/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
  <video controls>
    <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  </video>
</div>

​