如何在HTML/CSS中以16:9的比例获取平铺列表中的所有子项

我正在尝试获得一组平铺视频，以显示其中4:3视频具有黑色16:9背景，左右两侧有黑色条，因此它们都在一条直线上，并且视频高度没有差异，就好像所有视频都是16:9格式

目前的问题是，由于人们具有不同的纵横比，屏幕看起来很凌乱，我希望使其统一。大多数人似乎都是16:9，所以我想以此为标准

我有一个这样的例子，这是下面例子中的js小提琴，我使用了图像，这些图像通常会被替换为视频，但我认为同样的原则适用

我希望它看起来像这样

我见过添加

填充顶部的示例：56.25%但我无法使其正常工作

有人能给我建议吗？
我已经想到了

我需要为每个不同数量的用户添加CSS，但在这样做时，我可以根据100vw和100vh除以有多少行/列来计算最大高度和宽度，以获得我需要的16:9比率



你知道你想要的列数吗？如果你添加到.tile项目a
max height
，在这种情况下是145px，那就应该可以了。不确定我是否理解正确-你能再详细说明一下上下文吗？瓷砖/列的数量将根据视频的数量而变化，这只是5个视频的示例。因此，高度也会根据您的屏幕大小而变化，因此理想情况下，如果可以的话，我并不真的想要一个固定的最大高度。这适用于缩放型视频通话，其中每个视频都是用户的网络摄像头。
 .video-example{
   width: 100%;
   height; 100%;
   background: #111;
 }
 
.tiles-list-5 > .tile-0 .video-example,
.tiles-list-5 > .tile-1 .video-example,
.tiles-list-5 > .tile-2 .video-example{
  max-height: calc(100vw / 3 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}
.tiles-list-5 > .tile-3 .video-example,
.tiles-list-5 > .tile-4 .video-example {
  max-height: calc(100vw / 2 * 9 / 16);
  max-width: calc(100vh / 2 * 16 / 9);
}