Контакты

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

Как сделать видео на фоне. Установка видео на фон секции или блока

Сейчас вы быстро научитесь как устанавливать видео на задний фон секции или блока вашего сайта.

ШАГ 1. HTML разметка

Добавьте себе html код ниже:

<section id = "videoSection">
	<video autoplay loop muted id = "bgvideo">
   		<source src="video.mp4" type="video/mp4"></source>
  	</video>
</section>

Объяснять здесь практически нечего кроме нескольких атрибутов тега video. Атрибут autoplay отвечает за автоматический запуск видео вместе с запуском сайта.
Loop делает постоянное зацикливание видео, то есть его постоянное воспроизведение заново после своего окончания. А атрибут muted просто выключает звук нашего видео.

Примечание. Будьте внимательны при подключении видео в теге source. Ставьте правильный формат!

ШАГ 2. Стилизация

Добавьте css код ниже:


#videoSection
{
	height: 100vh;/*здесь можете ставить любую высоту*/
}

#bgvideo
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}

Здесь, также, все понятно. Единственное, что нужно добавить, это другой вариант позиционирования видео на фоне. Вы можете использовать fixed позиционирования для того, чтобы добиться некоего паралакс эффекта фона. То есть, при прокрутке страницы, видео будет стоять на месте.

Примечание. С fixed позиционированием будьте аккуратны! Так как видео будет зафиксировано на одном месте страницы, оно может появляться при прокрутке между секциями там где не указан background или, что еще хуже, может налазить на другие елементы. Поэтому, также не забывайте про необходимость в отрицательном значении z-index вашего видео и наличия какого либо бекграунда у остальных секций.



Оставьте свой комментарий внизу