Интернет все время развивается и уже с давних пор мы могли воспроизводить видео прямо в браузере. С растущей поддержкой последних редакций HTML и CSS в современных браузерах это стало намного проще. Раньше, все на что мог рассчитывать разработчик, это поместить на фон изображение. Но уже сегодня мы можем не прибегая к javascript и flash, воспроизвести видео не только в плеере, но и показать его в фоне, прямо под элементами верстки.

Видео на фон с помощью HTML5 и CSS3

Самый простой способ, не прибегая к скриптам, это воспользоваться связкой HTML5 и CSS3. Это упрощенный метод основанный на статье в блоге Криса Коера.
Вот полный листинг кода из примера:

<!DOCTYPE html>
<html>
<head>
<title>Video Background</title>
<style>
* {
color: #fff;
}

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%);
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Некоторый текст.</p>
<video autoplay loop>
<source src="cmTestVideoBackground.mp4" type="video/mp4">
</video>
</body>
</html>

В примере мы используем тэг <video> с параметрами autoplay и loop. Таким образом видео воспроизводится сразу и проигрывается по кругу. Но без использования стилей это был просто блок с видео, а  нам нужно воспроизвести его на фоне. Поэтому фиксируем его положение и растягиваем по ширине и высоте, при этом оптический центр видеоролика совпадает всегда с центром страницы. Это позволяет показывать его в центре даже при масштабировании (попробуйте в демо изменять ширину и высоту браузера потянув за уголок).

С помощью z-index мы позиционируем видео под все остальные слои. Значения -100 вполне хватит.

Как вы могли заметить у нас есть свойства top и left со значениями 50%, а также свойство transform с функциями translateX и translateY и значениями -50%. Это нужно для центрирования нашего видео.

Позиционирование transform:translate

В первом случае мы двигаем верхний левый угол нашего видео в центр экрана. Свойства top и left работают относительно глобальных размеров, в данном случае 50% будет от 100% ширины экрана.

Позиционирование transform:translate

А вот transform/translate уже имеет свою особенность. Ширина в процентах берется от ширины блока, к которому применяется трансформация. Таким образом блок у нас сдвигается не обратно, а ровно на половину своей ширины и высоты. А это то что нам нужно!

Позиционирование transform:translate

Демо

Видео на фон с помощью jQuery

В следующем примере мы воспользуемся плагином jQuery bgvideo.js. Этот способ очень простой, все что вам нужно это подключить плагин и вызывать метод с указанием пути к видеоролику.

<!DOCTYPE html>
<html>
<head>
<title>Video Background jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="video.js"></script>
<script src="bigvideo.js"></script>
<link rel="stylesheet" href="bigvideo.css">
<style>
* {
color: #fff;
}

#main {
position: relative;
}
</style>

<script>
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('cmTestVideoBackground.mp4',{ambient:true});
})
</script>
</head>
<body>
<div id="main">
<h1>Заголовок</h1>
<p>Некоторый текст.</p>
<p><a href=" http://codemake.ru/kak-postavit-video-na-fon-sajta/">Как поставить видео на фон сайта</a></p>
</div>
</body>
</html>

Здесь нам приходится подключать два скрипта, поскольку bigvideo.js использует api плагина video.js от Zencoder. Сам плагин создает враппер в который помещает тэг <video>. Есть и небольшие неудобства, например контент приходится помещать в обертку с position:relative для отображения поверх видео. Но все же у плагина множество плюсов, такие как легкость подключения, воспроизведение плейлиста, управление воспроизведением и другое.

Демо

Видео на фон с сайта YouTube

Еще более простой способ и наверное самый распространенный, - это установить видеоролик с Youtube на фон сайта с помощью плагина jQuery Tubular.

<!DOCTYPE html>
<html>
<head>
<title>Video Background Tubular</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="jquery.tubular.1.0.js"></script>
<style>
* {
color: #fff;
}

body {
margin: 0;
}

#main {
padding: 50px;
}
</style>

<script>
$().ready(function() {
$('#wrapper').tubular({videoId: 'dQw4w9WgXcQ'});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="main">
<h1>Заголовок</h1>
<p>Некоторый текст.</p>
<p><a href=" http://codemake.ru/kak-postavit-video-na-fon-sajta/">Как поставить видео на фон сайта</a></p>
</div>
</div>
</body>
</html>

Кроме самого фреймворка jQuery мы вызываем библиотеку Tubular. Далее необходимо узнать ID ролика YouTube. Сделать это просто, нужно открыть ролик на YouTube и скопировать часть URL.

YouTube ID

И указать ее при вызове метода

$('#wrapper').tubular({videoId: 'dQw4w9WgXcQ'});

Блок #wrapper это обертка для нашего содержимого. И мы именно на фон #wrapper ставим видео.

Демо

Вот мы и рассмотрели три способа воспроизведения видео на фоне сайта. Если у вас есть вопросы задавайте их в комментариях.

(Visited 3 103 times, 1 visits today)