20.09.15, 22:07
0 комментарий
  Уроки

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

Фон для сайта бывает различных видов: текстуры, сплошной цвет, изображение и т.д. Но фоном также еще может быть и видео! Не просто статическое изображение, а "25 изображений в секунду". Понятно то, что не любое видео подойдет для этого, но об этом мы поговорим дальше в статье. Также рассмотрим сам процесс установки, то есть как сделать видео фоном сайта с технической стороны.

1 HTML структура

Определимся со структурой. Мы будем использовать теги HTML5 для вставки видео:

<div class="fullscreen-bg">
    <div class="overlay">
        <h1>Простой пример<br>фонового видео на сайте</h1>
    </div>
    <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">
    </video>
</div>


Пару слов по коду:

Строки: со 2 по 4 — блок затемнения, который содержит заголовок.
Строки: с 5 по 8 — часть с видео.


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

2 CSS стили

Осталось правильно задать стили, чтобы видео оказалось именно на фоне первого блока:

.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;
}
 
.overlay h1 {
    text-align:center;
    color:#fff;
    font-size: 70px;
    margin-top:17%;
}


Здесь я привел стили только для первого блока на странице. В исходниках Вы можете найти стили полностью для всего демо.

Но так как интернет на мобильных устройствах по скорости уступает настольных компьютерам, то для ширины экрана менее 786px мы не будем показывать видео, а покажем лишь изображение:

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../images/plane.jpg') center center / cover no-repeat;
    }
 
    .fullscreen-bg__video {
        display: none;
    }
}


На этом всё!

Где взять красивые видео для фона сайта?

Рекомендую следующие видеостоки:

Coverr.co
Mazwai.com
PEXELSvideos
Videvo.net

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

Автор урока: Юрий Немец

ДЕМО

Посмотреть
пример

СКАЧАТЬ

Вес файла
7.32 Mb

Напишите своё мнение