Как кроссбраузерно установить видеоролик в качестве фона на вашем сайте с помощью HTML5+CSS?

Как мы уже говорили ранее, в одной из наших статей – с каждый годом вебмастера пытаются всячески удивить свою аудиторию, добавляя на сайт различные эффекты.

Тему этой статьи для себя я приметил давно, да вот никак не хватало времени, чтобы сесть и все толком расписать. Сегодня я покажу вам, как с помощью HTML5 и CSS установить нужное вам видео в качестве фона на вашем сайте.

Итак, для начала в секцию BODY, сразу после открытия тега вставьте код для вставки видео:

<video poster="/poster.jpg" id="bg_video" playsinline autoplay muted loop>
	<source src="/video.webm" type="video/webm">
	<source src="/video.mp4" type="video/mp4">
	<source src="/video.ogv" type="video/ogv">
</video>

Обратите внимание на блок:

<source src="/video.webm" type="video/webm">
<source src="/video.mp4" type="video/mp4">
<source src="/video.ogv" type="video/ogv">

который содержит в себе ссылки на соответствующие типы файлов. Если вы имеете только один файл – например, формата MP4, то оставляете соответствующий код, это:

<source src="/video.mp4" type="video/mp4">

А остальное удаляете. Также здесь вы обращаете внимание на «poster» – в нем вы прописываете ссылку на кадр из видео, чтобы пользователю до начала запуска показывалось не пустое место, а некое превью.

Теперь в стили вашего сайта (в самый низ) вставляете:

#bg_video { 
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	transform: translateX(-50%) translateY(-50%);
	transition: 1s opacity;
}

Тут вы все оставляете без изменений. Теперь, посетив свой сайт, вы увидите, что в качестве фона на нем выступает указанный видеоролик. Если этого не произошло или вам необходима помощь в изменении принципа работы этого кода – пишите об этом в комментариях.

Стоить отметить, что этот эффект очень часто встречается на сайтах типа Landing Page.