X
Юрий Немец

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

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

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

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

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

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

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

1 HTML структура

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

HTML КОД

    

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

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

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

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

2 CSS стили

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

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 мы не будем показывать видео, а покажем лишь изображение:

CSS КОД
@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../images/plane.jpg') center center / cover no-repeat;
    }

    .fullscreen-bg__video {
        display: none;
    }
}

На этом всё!

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

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

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

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

Вывод

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

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

Позиции сайта не растут в Яндекс и Google?

Закажите полный разбор сайта по SEO + консультацию

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

Сделайте аудит своего сайта самостоятельно с помощью сервиса

Перейти на сервис

Успехов!

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

Категории: HTML5