Я разрабатываю макет для видеочата на основе браузера. Я заключаю все элементы <video> в один тег <div>, размеры которого основаны на размерах порта просмотра. Сами видео могут быть разных прямоугольников ios, так как мы разрешаем совместное использование экрана.
Я бы хотел, чтобы видео красиво распространялось на экране. Самое главное, чтобы пользователю не нужно было прокручивать страницу вниз, чтобы просмотреть все видео: их нужно уменьшить, чтобы они соответствовали родительским размерам.
Я экспериментировал с Flexbox, но могу » Похоже, что видео оборачивается и одновременно уменьшается. Я также экспериментировал с Grid Layout, но у меня нет четкого представления о том, как выбирать размеры сетки относительно размеров видео и размеров порта просмотра.
Чтобы получить лучшую идею: подумайте о макет, похожий на каменную кладку, который масштабируется и помещается в его контейнер.
Я заинтересован в чистом CSS решении или использовании стандартного JS.
Это текущее состояние из моих экспериментов. https://jsfiddle.net/k4jL29rz/
Вы можете добавлять и удалять «участников» с помощью кнопок «+» и «-». Поиграть с кодом и соотношением окон. Если видео хорошо масштабируется и полоса прокрутки никогда не появляется, вы выиграли.
Спасибо за любые советы!