Як зробити відео в якості фону сайту на html5. (1/2).

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

Відео: YouTube відео в якості фону на сайті

Всім привіт! У цій статті ми поговоримо про те, як зробити відео в якості заднього фону для вашого сайту на HTML5.

Отже, як завжди, почнемо зі структури.

Відео: Анімований фон на HTML5 Canvas! ► Particles JS

 
lang="En"gt; 
 
charset="UTF-8"gt; 
HTML5 відео в якості заднього фону 
rel="Stylesheet"href="Style.css"gt; 
 
 
autoplayloopmutedclass="Bgvideo"id="Bgvideo"gt; 
src="Video.mp4"type="Video / mp4"gt;

Думаю, тут все ясно. Запускаємо відео відразу при завантаженні сторінки, зациклюватися його, щоб воно ніколи не зупинялося, і відключаємо звук.

Перейдемо до стилям

body { 
 background: url(`Video.jpg`) - 
 background-size: cover- 
} 
 
.bgvideo { 
 position:fixed- 
 right:0- 
 bottom:0- 
 min-width:100% - 
 min-height:100% - 
 width:auto- 
 height:auto- 
 z-index:-9999- 
}

Тут теж немає нічого надприродного. Для відео ми задаємо ширину і висоту по 100%, робимо вирівнювання відео по правому нижньому краю і ставимо властивість z-index негативним, щоб текст і інші елементи могли відображатися поверх відео.

Якщо, раптом, відео не буде доступний широкому, то ми відобразимо картинку, яку ми поставили для тега body.

На цьому я закінчую першу частину. Дякую за увагу!

Поділися в соціальних мережах:

Схожі