Как создать полноэкранное видео, которое сжимается до размера экрана, если оно выше области просмотра? ⇐ CSS

[Anonymous]

Моя цель — создать видео, которое занимало бы всю ширину экрана, но если видео будет слишком высоким и будет занимать больше, чем вся область просмотра (чтобы просмотреть все видео, потребуется прокрутка), оно будет сжиматься по размеру контейнера (с добавлением границ слева и справа по размеру экрана).
Я предполагал, что это будет довольно просто, используя только HTML и CSS. Это была моя первоначальная идея, но видео выходит за пределы содержащего div, а не сжимается, чтобы поместиться внутри div:
HTML (видео — это просто заполнитель):

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

CSS (я добавил границы, чтобы можно было видеть выходящее за пределы видео):

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

* {
padding: 0;
margin: 0;
}

.video-row {
border: 3px red dotted;
width: 100%;
max-height: 100vh;
}

.video {
border: 3px blue solid;
width: 100%;
height: 100%;
object-fit: contain;
}

Вот JFiddle с этим кодом: https://jsfiddle.net/2L8qayfn/
На мой взгляд, видео соответствует объекту: содержит; должно сжимать видео, чтобы оно поместилось в контейнер, но оно переполняется ниже элемента div, как вы можете видеть по границам. Кажется, что размер div правильный, но видео продолжает переполняться, и я не знаю почему. Я думаю, что проблема может заключаться в обрезке максимальной высоты вместо изменения размера, но я не знаю, как установить максимальную высоту элемента div с помощью свойства max-height.
Я' Я пробовал множество других методов, но этот, кажется, ближе всего к тому, чтобы заставить его вести себя так, как я хочу. При необходимости я могу жестко запрограммировать разрешение видео (1920x1080), но предпочел бы оставить его обобщенным. Я также могу использовать Javascript, но предпочел бы, если возможно, оставить его чистым HTML/CSS.

Подробнее здесь: https://stackoverflow.com/questions/786 ... -is-taller