Как растянуть фоновое видео на весь видимый экран?

Question

[ralduga]

Видео в формате 16:9 и при изменении ширина окна браузера снизу появляется пустое место. Нужно чтобы видео так же заполняло всю видимую область при изменении ширины окна.

<div class="container-fluid">
		<div class="row video-container">
			<video preload="auto" autoplay="autoplay" loop="loop" muted poster="img/background.jpg">
				<source type="video/mp4" src="video/background_540p.mp4">
				<source type="video/webm" src="video/background_540p.webm">
				<source type="video/ogg" src="video/background_540p.ogv">
			</video>
		</div>
	</div>

.video-container {
	height: 100vh;
	overflow: hidden;
	position: relative;

	@media (max-width: 750px) {
		height: 100vh;
		overflow: inherit;
		display: none;
	}

	@media (min-width: 750px) and (max-width: 991px) {
		height: 100%;
	}

	video {
		width: 100%;
		height: auto;
		position: absolute;
		z-index: -1;

		@media (max-width: 750px) {
			position: inherit;
		}
	}
}

Answer 1

[Maksym Davydchuk]

Это для видео

position: absolute;
min-width: 100%;
min-height: 100%;
left: 50%;
top: 50%;
z-index: -1;
transform: translate(-50%, -50%);

Для контейнера 100vh и possition relative

Comments

[ralduga]

Большое спасибо!