<div id="app">
  <div class="video-tile"></div>
  <div class="video-tile"></div>
  <div class="video-tile"></div>
  <div class="video-tile"></div>
  <div class="video-tile"></div>
</div>

#app {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.video-tile {
  box-sizing: border-box;
  border: 5px solid black;
  background-color: orange;
  aspect-ratio: 16/9;
}

// constants
const gapBetweenTiles = 5;
const wrapper = document.getElementById("app");
const tiles = document.getElementsByClassName("video-tile");
const tilesArray = [...tiles];
const elementsInARowCount = Math.ceil(Math.sqrt(tiles.length));

// set gap
wrapper.style.gap = `${gapBetweenTiles}px`;

// compute and set tile size
tilesArray.forEach((element) => {
  element.style.width = `calc(calc(100% / ${elementsInARowCount}) - ${gapBetweenTiles}px)`;
});