В текущей статье мы поговорим о том, как установить видео в качестве фона для сайта (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 растягиваем его на весь экран.