Как сделать так, чтобы видео HTML5 не обрезалось по высоте при пропорциональной ширине родителя?

Question

[Полина Емельянова]

Добрый день, коллеги.

Прошу помочь решить задачу

Есть страница с видео, которое должно быть растянуто на весь экран

<div class="video-container">

                <div class="video-wrap">
                    <video class="video-inner" preload="auto" id="video">
                        <source src="video/video.mp4" type='video/mp4'> </video>
                </div>

            </div>

.video-container {
    max-width: 100%;
    margin: auto;
}

.video-wrap {
    position: relative;
    background-color: rgb(15, 15, 15);
}

.video-wrap:after {
    content: '';
    display: block;
    height: 0;
    padding-top: 59%;    /*relation*/
}

.video-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    object-fit: cover; /*может давать нежелательное поведение*/
}

ПРОБЛЕМА: Я не могу заставить видео нормально вставать именно по высоте. Игры с раддингом ничего не дают.


Есть ли какой вменяемый способ поправить ситуацию?

Я вижу 2 варианта
1. Режим обложки, где видос ведет себя как картинка растянутый по родителю и позиционированный по центру.
2. Режим "по высоте", когда наша высота идет по вьюпорту, а ширина - как получиться.

Есть ли их синтез?

Заранее спасибо за любую помощь.

Answer 1

[Полина Емельянова]

И все же этот код

.is_overlay{ display: block; width: 100%; height: 100%; }

#trailer {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}

#trailer > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Видео растянуто по высоте и аккуратно сидит в родителе.
Сорс

Answer 2

[Denis Semenov]

height: 100vh;?