Фоновое видео для сайта с помощью HTML5

HTML5 13.06.2014

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.

ДЕМО

ИСХОДНИКИ

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

По этому существует проще способ воспроизведения такого видео, и в данном уроке мы его рассмотрим.

Шаг 1. HTML

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

<video autoplay="" loop="" poster="home-vid-img.jpg" id="bgvid">
<source src="homepage.webm" type="video/webm">
<source src="shutterstock_v3702740_4.m4v" type="video/mp4">
</video>

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

Шаг 2. CSS

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

video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}
.overlay {
width: 400px;
height: 400px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: rgba(0,0,0,0.3);
display: block;
position: absolute;
top: 10%;
left: 50%;
}
.overlay h1 {
text-align: center;
padding-top: 100px;
color: #fff;
font-family: inherit;
}
.overlay p{
text-align: center;
width: 80%;
margin: 0 auto;
color: #fff;
font-family: inherit;
margin-bottom: 20px;
}
.overlay a {
color: #fff;
}
.orange {
text-decoration: none;
}
p a.orange {
color: #f27950;
}