Сохраняйте соотношение сторон 16:9 по ширине и высоте.

Итак, у меня есть это видео, которое я хочу, не совсем полноэкранное, но близкое. Я хочу, чтобы он сохранял соотношение сторон 16:9, но я хочу, чтобы между видео и краем экрана всегда были отступы или пространство. Итак, что у меня есть сейчас, https://jsfiddle.net/99yen3v3/, это:

width: 80vw;
height: 45vw;

для див. Он отлично работает, когда я сжимаю веб-браузер по горизонтали, видео div сохраняет соотношение сторон 16: 9. Единственная проблема заключается в том, что всякий раз, когда я сжимаю веб-браузер по вертикали, видео медленно исчезает с экрана. Я хочу, чтобы такое же дополнение было там, когда я сжимаю веб-браузер по вертикали, если это имеет смысл.

Если у вас есть какие-либо вопросы или вы запутались, просто спросите. Буду признателен за любую помощь, спасибо.

EDIT1: И я уже проверил этот пост, разница только в том, что в этом примере используется соотношение 1:1, а у меня оно сложнее, 16:9.

EDIT2: Нет, мой вопрос не является дубликатом этого. Я четко заявил, что хочу, чтобы div содержался также по высоте окна браузера, а не только по ширине.