Видеоконференции, такие как видеосетка с использованием сетки css - PullRequest
Новая
       57

Видеоконференции, такие как видеосетка с использованием сетки css

0 голосов
/ 02 мая 2020

Я пытаюсь создать видеоконференцию как сетку. Я пытаюсь использовать css -grid, но почему-то я не могу выполнить sh, что я ищу. Идея проста: создать сетку видео на экране и разбить видео на следующую страницу, которая не помещается на первой.

Я пытался использовать следующее: 

<div className="videoContainer">
    <div className="videoWrapper">Cam 1</div>
    <div className="videoWrapper">Cam 2</div>
    <div className="videoWrapper">Cam 3</div>  
</div>

CSS 

.videoContainer {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    border: 2px solid blue;
}
.videoWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    border: 1px solid green;
}

Я ищу несколько указателей / подсказок / любые статьи (не нашли ничего полезного), которые указывают на направление, которое я хочу go.

У меня есть простая схема, как показано ниже (левый столбец для устройств с большим экраном, правый столбец для мобильных устройств) ):

enter image description here

...