Делаем видео фоном сайта — как за 2 шага сделать видео фоном сайта

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

Если сейчас работаете над созданием одностраничного сайта, то рекомендуем посмотреть 10 примеров продающих лендингов с полным руководством по его созданию:

• ТОП-10 примеров продающих лендингов

Живая демонстрация того, как на фоне сайта располагается видео:

Посмотреть примерСкачать

Скриншот с примером:

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

1 HTML структура

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

    

        
Простой пример
фонового видео на сайте
    
    

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

• Строки: со 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;
    }
}

На этом всё!

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

Рекомендую следующие видеостоки (список обновлен в октябре 2019):

• Coverr.co
• Mazwai.com
• PEXELSvideos
• Videvo.net
• Videezy.com
• Pixabay
• Free-video-footage.com
• Ignitemotion.com
• Motionelements.com
• Xstockvideo.com
• Vidsplay
• Life of Vids

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

Также добавьте данную статью в закладки "CTRL+D", чтобы видеостоки были всегда под рукой.

Вывод

Установка в 2 шага. Вам лишь нужно скопировать HTML и CSS в нужное место. Но правильно подобранное видео смотрится очень красиво.

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

Успехов!

С Уважением, Юрий Немец