Як зробити відео фоном сайту + відеостокі

Фон для сайту буває різних видів: текстури, суцільний колір, зображення і т.д. Але фоном також ще може бути і відео! Не просто статичне зображення, а "25 зображень в секунду". Зрозуміло те, що не будь-яке відео підійде для цього, але про це ми поговоримо далі в статті. Також розглянемо сам процес установки, тобто як зробити відео фоном сайту з технічного боку.

Рекомендую до прочитання наступну статтю на тему Лендінзі, де я детально розповів про найпопулярніші способи створення Лендінзі:

• Дослідження: чому ці популярні способи створення Лендінзі більше не працюють?

Жива демонстрація того, як на тлі сайту розташовується відео:

Подивитися прімерСкачать

Скріншот з прикладом:

Як зробити відео фоном сайту або Лендінзі?

1 HTML структура

Визначимося зі структурою. Ми будемо використовувати теги HTML5 для вставки відео:

123456789

lt;div class="Fullscreen-bg"gt;lt;div class="Overlay"gt;lt;h1gt; Простий прикладlt;brgt; фонового відео на сайтіlt;/h1gt;lt;/divgt;"Video / plane.jpg" class="Fullscreen-bg__video"gt;src="Video / plane.mp4" type="Video / mp4"gt;src="Video / plane.webm" type="Video / webm"gt;lt;/videogt;lt;/divgt;

Пару слів за кодом:

• Рядки: з 2 по 4 - блок затемнення, який містить заголовок.
• Рядки: з 5 по 8 - частина з відео.

Обидва дочірніх блоку будуть знаходиться в абсолютному позиціонуванні і в блоці з класом "Overlay" ми можемо мати у своєму розпорядженні всю інформацію, яка зазвичай знаходиться в першому екрані будь-якого Лендінзі.

2 CSS стилі

Залишилося правильно поставити стилі, щоб відео виявилося саме на тлі першого блоку:

1234567891011121314151617181920212223242526272829303132

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

Відео: Як просто зробити відео фон для сайту

123456789

@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 в потрібне місце. Але правильно підібране відео виглядає дуже красиво.

Успіхів!

З повагою, Юрій Німець