CSS / Javascript:缩放或信使式视频播放器，具有动态高度和宽度

Question

在变焦会议或信使会议中，每个参与者的视频容器动态获取高度和宽度。考虑到下面的图片，假设蓝色框是主要的容器-如果只有一个参与者，我需要给他/她(视频播放器1)的全部宽度和高度。

如果有两个参与者，他们采取高度和宽度类似于pic-2，如果有三个参与者，他们采取高度和宽度类似于pic-3等等。

是否有任何方法来做到这只使用css？或者说有图书馆可以这样做？

我的场景：假设我是一名老师。有10名学生报名参加我的课。当我开始视频会议，在学生的看法-我创建3x3网格。但是当有人参加那个会议时，我想根据主容器给他/她全部的宽度和高度，因为他/她是唯一的参与者。其他参与者的网格将保留在没有加入的容器上。如果我滚动底部，我可以看到。如果另一个学生加入，我想给出的高度和宽度，如图2。如果另一个学生加入，像图3.

我可以使用javascript来完成它，但是我想用css来完成它。

谢谢。

​

​

Answer 1

是的，我可以使用CSS网格完成。其中蓝色框可以是div标记，您可以在其中指定网格。网格的最好之处是自动调整。css Flexbox也可以实现同样的功能。我想对于您的用例，Flexbox会更合适。Flexbox指南链接 网格指南链接