@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;
		}
	}
}
  • Вопрос задан
  • 699 просмотров
Решения вопроса 1
maksym1991
@maksym1991
WordPress adept
Это для видео
position: absolute;
min-width: 100%;
min-height: 100%;
left: 50%;
top: 50%;
z-index: -1;
transform: translate(-50%, -50%);

Для контейнера 100vh и possition relative
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы