<body>
    <label for="tiles-count">
      Tiles count
      <input type="number" name="tiles-count" id="tiles-count" />
    </label>

    <div id="app" />

  </body>
#app {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

.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 input = document.getElementById("tiles-count");

// helpers
const removeOldTiles = () => {
  wrapper.innerHTML = "";
};
const renderNewTiles = (tilesCount) => {
  Array.from({ length: tilesCount }, (_, i) => i + 1).forEach(() => {
    const newTile = document.createElement("div");
    newTile.className = "video-tile";
    wrapper.appendChild(newTile);
  });
};

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

// update canvas on input value change
input.addEventListener("input", (event) => {
  // reset tiles
  removeOldTiles();
  renderNewTiles(event.target.value);

  // compute and set tile size
  const tiles = document.getElementsByClassName("video-tile");
  const elementsInARowCount = Math.ceil(Math.sqrt(tiles.length));
  const tilesArray = [...tiles];
  tilesArray.forEach((element) => {
    element.style.width = `calc(calc(100% / ${elementsInARowCount}) - ${gapBetweenTiles}px)`;
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.