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

16

Від автора: після появи моєї статті про повноекранному HTML5 відео тлі в коментарях посипалися питання, як зробити фонове відео для сайту, а саме «повноекранного відео при прокручуванні сторінки: відео, яке знаходиться на задньому плані, але поверх якого з’являється який-небудь контент.

Мене це трохи здивувало, так як рішення знаходиться на поверхні, а саме застосування CSS позиціонування в поєднанні зі стилями, які зазвичай використовують для зображень з плаваючими розмірами… я все ж вирішив присвятити цьому питанню окрему статтю, а значить, ми скористаємося незвичайним способом і задіє режими накладення.

Основи в HTML5 відео під час прокручування сторінки

Розмітка майже така ж, як у моєму прикладі фонового відео, тільки HTML5 відео розміщується не в корені сторінки (тобто відразу після тега body), а саме там, де воно необхідне. Для нашого прикладу зробимо відео всередині тега :

Використовуване відео має задовольняти основним вимогам для фонових відео роликів, які я описав в попередній статті. Стилі для відео, такі ж, як і для повноекранних адаптивних зображень:

main {
width: 80%;
max-width: 750px;
margin: 0 auto;
}
main > header video {
width: 100%;
height: auto;
}

Якщо хочете збільшити максимальну ширину відео, просто змініть властивість max-width. У нашому випадку зверху відео відображається заголовок, який закликає користувачів прочитати статтю. Заголовок і посилання йдуть відразу за тегом video всередині header:

A world Aflame

По якорю користувач перестрибує на елемент з основним змістом статті, який знаходиться прямо за тегом header. Далі потрібно додати стиль до хедеру, щоб всі внутрішні елементи були на різних шарах і зі своїм позиціонуванням:

main > header {
position: relative;
}

CSS для H1 і посилань:

font-size: 4rem;
text-transform: uppercase;
mix-blend-mode: overlay;
}
main > header a {
display: block;
text-decoration: none;
font-size: 2rem;
color: #fff;
opacity: .5;
position: absolute;
bottom: 1.5 rem;
width: 100%;
text-align: center;
transition: .3s;
animation: downwardprompt 1s 2s;
}
main > header a:hover {
opacity: 1;
}

Стрілка під відео злегка анімована, підказуючи користувачеві прокрутити сторінку:

@keyframes downwardprompt {
to {
transform: translateY(2rem);
opacity: 0;
}
}

От і все! Існує безліч варіацій даного методу, але основний код CSS майже завжди один і той же. З допомогою нього і досягається цей ефект.