Устанавливаем видео для фона сайта на HTML5

Все чаще я замечаю использования видео для фона сайта, дизайнеров уже не смущает такой нюанс как весомость сайта, с современным интернетом такой вопрос уже не стоит остро, по этому дизайнеры разрешают себе фантазировать в любых направлениях, не является и исключением «живые» фоны сайта, а именно использование видео в качестве фона. В данном уроке мы рассмотрим один из замечательных примеров реализации фонового видео в виде морской глубины с помощью небольших манипуляций Html5.

За идею у нас взята картинка глубины, для тех случаев, когда устройством попросту не поддерживается такая функция проигрывания, если все же браузер сможет такое отобразить, то тут подхватит действия заранее подготовленное видео с соответствующим форматом. И так, давайте приступим.

Шаг 1. HTML

У нас будет класс, в котором будет содержаться параметры видео, мы установим значения автопроигрыванния, также добавляем несколько вариантов видео-формата, для отображения на разных устройствах:
[php] </pre>
<div class=»is_overlay»><video width=»300″ height=»150″ autoplay=»autoplay» loop=»loop» poster=»/videos/bck.jpg»><source src=»/videos/WD0221.mp4.mp4″ type=»video/mp4″><source src=»/videos/WD0221.webmsd.webm» type=»video/webm»></video></div>
<pre>
[/php] Также мы добавили подготовленное ранее нами изображение, о котором мы писали немного выше.

Шаг 2. CSS

Теперь приступим к стилям,их у нас не так уже и много, нам необходимо отобразить общие параметры наложения и небольшого свечения для нашего видео-фона:
[css] .box,.page {
position:fixed;
top:0;
left:0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
z-index:999;
background:rgba(15, 102, 99, 0.5);
color:white;
}
.is_overlay{
display: block;
width: 100%;
height: 110%;
}
.is_overlay video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(/videos/bck.jpg) no-repeat;
background-size: cover;
}
[/css]