Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
29.05.2015

Как сделать видео в качестве фона сайта

В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (video background). Видео в качестве фона страницы можно сделать только с помощью HTML5. Для этого мы:

  • Используем тег video на HTML-странице;
  • С помощью CSS-стилей растянем видео на весь экран и используем в качестве основного фона.

Создаем видеоплеер с помощью HTML

О том, как сделать видеоплеер у себя на сайте с помощью HTML5 мы уже говорили в статье Проигрыватель видео HTML5. В той же статье мы обсуждали вопрос кроссбраузерности, вспомним основную идею:

Не все браузеры воспроизводят какой-то конкретный видео-формат, поэтому нужно использовать несколько видео-кодеков. Браузер клиента автоматически определит поддерживаемый формат из предложенных и воспроизведет нужное видео.

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:

<div id="nubexDiv" class="overlay">
 <video id="nubexVideo" width="100%" height="auto" loop="loop" autoplay="autoplay" preload="auto">
   <source src="nubex.mp4"></source>
   <source src="nubex.webm" type="video/webm"></source>
 </video>
</div>

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).

Настраиваем стили с помощью CSS

Рассмотрим теперь CSS-код для видео.

Полный код страницы с установленным видео в качестве фона сайта:

<html>
 <head>
   <title>Видео в качестве фона сайта - Нубекс</title>
  <style>
	.overlay {width: 100%; height:100%; display:block;}
	#nubexDiv {
		top: 0; bottom: 0; left: 0; right: 0;
		position: fixed;
		overflow: hidden;
	}
	#nubexVideo {
		top: 0; left: 0;
		position: absolute;
		width: auto; height: auto;
		min-width: 100%; 
		min-height: 100%; 
	}
  </style>
 </head>
 <body>
	<div id="nubexDiv" class="overlay">
 	 <video id="nubexVideo" width="100%" height="auto" loop="loop" autoplay="autoplay" preload="auto">
   		<source src="nubex.mp4"></source>
   		<source src="nubex.webm" type="video/webm"></source>
 	 </video>
	</div>
 </body>
</html>

Здесь мы, по-сути, добавляем блок с видео с помощью HTML, и с помощью CSS растягиваем его на весь экран.