纯CSS能否实现16:9比例始终居中的多摄像头视频网格布局？

结论 #

你提的所有需求完全可以仅通过HTML/CSS实现，不需要手动计算视频尺寸，用CSS Grid就能完美适配两种布局，改动量极小。

实现方案说明 #

1. 整体16:9比例+黑边环绕实现
   给视频容器外层再加一层包装容器，设置aspect-ratio: 16/9，配合max-width: 100%; max-height: 100%; margin: 0 auto; background: #000;即可实现：不管父容器尺寸怎么变，整个视频区块始终保持16:9比例居中，多余区域自动显示黑色背景，符合你要的黑边环绕效果。

/* 外层比例容器样式 */
.gridWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.gridInner {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 100%;
}

2. 6路布局实现
   不需要修改你现有子元素的任何样式，仅需要给.videoContainer修改Grid模板即可：
   如果是2行3列的均等6格布局，直接修改容器配置：

/* 6路均等布局容器 */
.videoContainer--6ch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
}

如果是带大窗口的不对称6路布局，直接给需要放大的.video元素加跨行列属性即可，不需要修改其他配置：

/* 给需要占2行2列的大窗口加这个类 */
.video--large {
  grid-column: span 2;
  grid-row: span 2;
}

3. 覆盖层定位兼容
   你现有写法已经满足需求：.video设置了相对定位，内部的.overlayContent绝对定位的坐标原点就是当前视频块的左上角，完全可以正常放标题、操作按钮等覆盖层内容。

代码调整说明 #

你现有代码只需要做两处修改即可兼容两种布局：

1. 给.videoContainer外层套上上面的.gridWrapper和.gridInner两层容器，保证整体16:9比例
2. 切换布局时仅需要给.videoContainer换对应布局的类，HTML里增减对应数量的.video元素即可，不需要其他逻辑计算。

内容的提问来源于stack exchange，提问作者ans777