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

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

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

Как сделать видеофон — разметка.

Перед тем как приступить к коду, необходимо подготовить 3 файла видео. Сам видео ролик может быть одинаковым, но для поддержки всех браузеров необходимо по разному его сконвертировать.

  • Название видео.mp4 — это первый ролик, его будет использовать IE (интернет эксплорер и подобные браузеры). Для IE формат сжатия должен быть H.264, иначе он не поймет, что с таким видео делать. Да, этот браузер всегда усложняет жизнь разработчикам и верстальщикам.
  • Название видео2.webm — второе видео для браузеров от google
  • Название видео3.ogv — для оперы и подобных.



Как вы можете видеть такое сочетание разрешений позволяет охватить максимум популярных браузеров и как следствие пользователей.

Несколько слов про разные размеры мониторов и качестве видео. Если вы делаете видео фон для широкоформатных мониторов, то стоит делать видео в hd качестве, начиная от 1080. Качество видео напрямую связано с качеством видеофона на сайте.

Разметка для видеофона.

<video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video">
<source src="video/plane.mp4" type="video/mp4">
<source src="video/plane.webm" type="video/webm">
<source src="video/plane. ogv " type="video/ ogv ">
</video>

Пояснения по коду:

  • muted — воспроизведение без звука, только картинка
  • autoplay — автозапуск видео
  • poster="video/plane.jpg" — картинка, которая будет отображаться пока идет загрузка видео. Также эта картинка будет отображаться в мобильной версии.
  • class="fullscreen-bg__video"> — благодаря стилям мы сможет задать размер видео и адаптировать его под различные устройства.

Как сделать видеофон на сайте — оформление стилей блока с видеофоном.

.fullscreen-bg {
overflow: hidden;
z-index: -100;
position: relative;
height: 100%;
width: 100%;
padding-top:45%;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 4;
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../images/plane.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}

}

Пояснения по стилям:

  • overlay — отвечает за слой идущий сверху видео. Специальное затемнение, чтобы текст хорошо читался
  • Весь блок @media (max-width: 767px) отвечает за скрытие видеофона на экранах до 767 пикселей. Вместо видео мы подставляем картинку.

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

Как видно из стилей, видеофон реализуется с абсолютным позиционированием (position: absolute), у многих начинающих верстальщиков могут возникнуть проблемы с позиционированием остальных элементов сайта, но они легко решаются использованием родительского блока с position: relative.

Поделиться в социальных сетях:

Еще по теме

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *