In zoom conference or messenger meeting, every participant's video container take height and width dynamically. Considering bellow picture, suppose blue box is the main container - if there is only one participant i need to give him/her(video player 1) the full width and height.
If there are two participants, they take the height and width like pic-2 and if there are three participants, they take the height and width like pic-3 and so on..
Is there any way to do this using css only ? Or is there any library to do this ?
My scenario: Suppose i'm a teacher. There are 10 students enroll my class. When i start video conference, in student view - i create 3x3 grid. But when someone join that conference i want to give him/her the full width and height according to main container, cause he/she is the only participant. And other participant's grid will remain on the container who didn't join still. If i scroll bottom i can see that. If another student join i want to give the height and width like pic-2. And if another student join like pic-3....
I can do it using javascript, but i wanna do it with css.
Thank's.
