Как растянуть фоновое видео на всю высоту браузера?

Question

[Alexandr1996]

Подскажите, пожалуйста, как растянуть фоновое видео на всю высоту окна браузера, что-бы при уменьшении ширины экрана видео не уменьшалось с сохранением пропорций?

HTML:

<div class="video-bg">
            <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop" autobuffer muted
                playsinline>
                <source src="images/DPSiteBG720_VP8_1.5.webm" type="video/webm">
                </source>
                <source src="images/DPSiteBG720_1.5.mp4" type="video/mp4">
                </source>
            </video>
        </div>

Comments

[Максим]

Сделать видео абсолютным, растянуть по высоте на 100vw по ширине на 100%

Answer 1

[Danil Klimov]

.video-bg {
  height: 100vh;
}

video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}