Настройте размер тега HTML-видео в зависимости от ширины экрана и масштаба. ⇐ CSS

[Anonymous]

На сайте (написанном на React с использованием Typescript и Tailwind) есть компонент, с помощью которого пользователь может просматривать видео (этот компонент написан с использованием тега HTML Video). А еще под видео есть различные выпадающие списки и кнопки. Но речь пойдет о HTML-видео.
Структуру этой страницы схематически можно представить следующим образом
FirstPageContent.tsx

Код: Выделить всё

VideoComponent.tsx

Код: Выделить всё

На данный момент я настраиваю размер HTML-видео, используя отступы слева и справа. Но я так понимаю, это абсолютно не универсальный метод. Пример кода ниже
main.css

Код: Выделить всё

@media screen and (max-width:812px) {
.container{ padding-right:90px; padding-left:90px;}
}
@media screen and (max-width:750px) {
.container{ padding-right:75px; padding-left:75px;}
}
@media screen and (max-width:700px) {
.container{ padding-right:60px; padding-left:60px;}
}
@media screen and (max-width:650px) {
.container{ padding-right:45px; padding-left:45px;}
}
@media screen and (max-width:600px) {
.container{ padding-right:30px; padding-left:30px;}
}

Я привел лишь фрагмент кода, как вы понимаете, условий гораздо больше. Итак, мой вопрос таков: могу ли я настроить размер HTML-видео в зависимости от ширины/высоты экрана и масштабирования. В этом случае хорошим примером является YouTube.

Подробнее здесь: https://stackoverflow.com/questions/782 ... h-and-zoom