The objective is to scale the layout blocks proportionally to the screen depending on the number of participants on the video call.
The minimal setup
You can either walk through the minimal setup steps below or access the codepen with the premade setup at the end of this section.
You can add as many .video-tile elements as you wish.
The flex-wrap is the key for this layout to work, also instead of aspect-ratio, you can set a fixed size for the elements if you wish.
Using a combination of Math.ceil and Math.sqrt we can predict the desired number of elements in a row on the self-adjusting canvas. Thanks to this information, we can compute the value for each element with respect to how many elements we want to see in a single row (and subtract the gap between elements).
That's it for the minimal setup, you should have a ready self-adjusting layout with the number of tiles that you specified in the HTML section.
Codepen with premade setup
The dynamic setup
I've also prepared a more advanced sandbox where you can play with a different number of tiles through input dynamically and see how the self-adjusting layout behaves in action. 😎
You just created a self-adjusting video-app-like layout that allows you to add as many elements as you want without having to redo a specific CSS.
I hope you found it useful and easy to implement. 🤝
We use this exact layout in production with our live video backstage app!
To find out more about the video backstage solution at Swapcard visit https://release.swapcard.com/introducing-speaker-backstage-3yviJa