<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)`;
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.