Лого www.SiteHere.ru

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

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

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

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

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

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

Пример видео фона для сайта

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

1 HTML структура

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

HTML КОД
1
2
3
4
5
6
7
8
9
<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 стили

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.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 КОД
1
2
3
4
5
6
7
8
9
@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

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

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

Вывод

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

Успехов!

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

Как сделать видео фоном сайта + видеостоки 4.44/5 (88.89%) 9 голос(ов)

Понравилась статья - расскажи друзьям! :)

28 комментариев к записи
  • НеЯлена

    За ссылки на фоны спасибочки 😎

     
  • Сергей

    Большое спасибо за урок.

    Хотелось бы еще знать как можно избежать появления черного экрана вместо видео при обновлении страницы. Пытался поставить фоновое изображение, как в постере, но это не помогло.

     
    • Юрий

      Здравствуйте, Сергей!

      Черного экрана можно избежать вставив изображение либо с помощью атрибута "poster", либо с помощью фонового изображения для блока, в котором находится видео через CSS.

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

       
      • Сергей (другой)

        Не помогает поставить poster и через css также не вышло)

         
  • MAJOR

    Здравствуйте, вопрос такой ,на вордпрессе делаю сайт с загруженной темой c themeforest но никак не могу разобраться,вообщем то хочу видео в качестве фона ну или по крайней мере в качестве шапки на сайте но ничего не получается

     
    • Юрий Немец

      Плохо, что не получается.

       
  • Радик
    .fullscreen-bg {
        overflow: hidden;
        z-index: -100;
        position: relative;
        height: 100%;
        width: 100%;
        padding-top:45%;

     

     

     

    а паддинг для чего не пойму  в основном блоке !

     
    • Юрий Немец

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

       
  • Роман

    как сделать по стилю видео само в окне меньше а то оно у меня показывает как то верхний край, окно 840х377

    пол видео не видно…

     
    • Юрий Немец

      Добрый день, Роман!

      Видео находится в блоке с классом fullscreen-bg, изменяя его размер, вы будете изменять размер видео.

       
  • Роман

    Доброе время суток!

    Такой вопрос… Как сделать что бы в начале не видно было плаера… а постоянно видео повторяющие!

    А то видно когда заходишь на сайт в шапке видео плаер грузит видео.

     
    • Юрий Немец

      Добрый день, Роман!

      Необходимо сделать фоновое изображение, которое будет показываться до того момента, когда видео еще не прогрузилось. Путь до изображения задается в атрибуте "poster" в html.

       
  • Mitai

    Ау меня видео почему то не включается, кто может подсказать где ошибся?

    http://test-eset32u.1gb.ru/#Page7

     
    • Юрий Немец

      Добрый день!

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

      Вы используете плагин FullPage.js. Активному слайду он добавляет класс "active", поэтому вам необходимо сделать проверку, когда данный класс будет добавлен слайду, где должно находится видео, то с помощью jQuery (можете воспользоваться функцией .html() , или просто написать на JS ), добавить в нужное место код видео.

      В этом случае оно заработает.

       
      • Mitai

        ни слова не понял)), можете дать код и сказать куда его скопировать?)))

         
        • Юрий Немец

          Если бы она была.. Эта волшебная кнопка, которая сразу делает как надо)

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

          Здесь все достаточно просто. Вам лишь необходимо по этапам сделать то, о чем я написал. Но так как вы ничего не сделали, то помочь вам тяжело. 😉

           
  • Mitai

    Вы единственный из учителей интернета кто смог более менее доходчиво рассказать что и как, пожалуй задержусь на вашем сайте)) остальные просто молчали а кто и вовсе сказал не знаю в чем дело, ну значит надо учить jQuery или JS да, что бы оно заработало

     
    • Юрий Немец

      Лучше всего обратите внимание на jQuery. Документацию с основами вы быстро освоите. А как освоите, поймете о чем я написал. Здесь ничего сложного нет. Если будут вопросы — пишите 🙂 !

       
  • Михаил

    Юрий, здравствуйте! Хотел поставить пару кнопок на видео, но ссылки почему-то не кликабельны. Подскажите, пожалуйста, в чем причина и как исправить. Ссылки все верные.

     
    • Юрий Немец

      Добрый день, Михаил!

      Не могу понять, что это "пару кнопок на видео"? Объясните подробнее как вы все разместили на странице.

       
  • я

    Юрий, у меня на сайте после встраивания конфликт с оверлеем, как сделать чтобы не конфликтовало?

     
    • Юрий Немец

      Добрый день!

      Чтобы не конфликтовало, необходимо вам изучить данную статью — z-index.

       
  • Андрей

    Видео запускается без звука почему-то… Как сделать со звуком?

     
    • Юрий Немец

      Здравствуйте, Андрей!

      Звука нет, потому что используется атрибут muted у тега <video>:

      <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>

       

       
  • hitman

    Большое спасибо за статью, очень классный лендинг сделал! angry

     
  • Руслан

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

     
    • Юрий Немец

      Здравствуйте, Руслан!

      1) Чтобы включить звук, необходимо убрать атрибут muted у тега video. Но кнопку нельзя будет нажать, потому что она находится на фоне (ее перекрывает еще один слой).

      2) Для того, чтобы вместо видео на мобильных устройствах отображалось изображение, рекомендую использовать следующий PHP класс — Mobile Detect. С помощью этого класса можно определить с помощью чего посетитель зашел на сайт и относительно этих данных показать ему изображение, а не video.

       
  • Антон

    Может кому надо: бесплатные видеофоны — здесь)

     

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

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