Как я могу установить ширину и высоту элемента, но использовать только то, что больше в зависимости от размера экрана?

Question

Я создаю сайт с гибкой версткой. У меня есть фоновое видео, и я хочу установить его так, чтобы оно имело либо ширину 100%, либо высоту 100%. Я только хочу, чтобы ширина ИЛИ высота использовалась в любой конкретной ситуации, и я хочу, чтобы браузер выбирал, какое из двух измерений сделает видео самым большим. Я не могу использовать минимальную высоту и минимальную ширину, потому что видео значительно больше, чем размер экрана, поэтому я должен установить фактическую ширину и фактическую высоту, но я хочу, чтобы браузер переключался между использованием ширины или высоты в зависимости от соотношения сторон экрана.

Кто-нибудь знает, как это можно сделать? В идеале решение будет использовать только CSS и HTML, но если это можно сделать только с помощью JavaScript, я открыт для любых предложений! Заранее спасибо!

Answer 1

Объединение минимальной ширины / высоты с шириной / высотой области просмотра:

CSS:

#backgroundVideo{
    min-height : 100vw; /* the height will always be at least as great as the viewport width */
    min-width : 100vh; /* the width will always be at least as great as the viewport height */
}

Answer 2

Добавление метатега с окном просмотра в качестве его имени, а затем установка атрибута позиции в css может сделать то, что вам нужно.