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

16

Від автора: моя стаття про те, як за допомогою CSS поставити в якості фону на сторінку повноекранне HTML5 відео виявилася однією з найбільш популярних на сайті The New Code. Проте у цьому методі є значний недолік – користувачам доводиться розміщувати ролики на своїх ресурсах або шукати сервіси для цього.

В якості альтернативи можна використовувати YouTube відео як фон для сайту, але протягом довгого часу я думав, що ролики даного сервісу не можна толком контролювати: справа не тільки в тому, що iframe погано контролюється і стилізується, але й інші рішення типу tubular працюють на JavaScript. Дуже часто підключений який-небудь фреймворк типу JQuery, допомагає браузеру правильно позиціонувати і програвати відео, повторно обчислювати розмір відео після зміни розміру вікна браузера. Я не вважав і не вважаю такі підходи елегантними і ефективними.

Зовсім нещодавно після досліджень і пари експериментів було з’ясовано, що за допомогою звичайних HTML5 та CSS можна встановити відео з YouTube в якості фонового малюнка сторінки без використання JS або спеціальної розмітки. Для демонстрації я створив два демо.

Розмітка

Наш спосіб є похідним від методу Florent Verschelde для повноекранного відео на сторінці в якості фону:

В розмітці для відео є два div, всередині яких iframe. Цей код йде першим на сторінці. Якщо ви хочете пройти валідацію HTML сторінки, замініть знаки & в адресі на &. Далі йде ще один DIV зі всім контентом сторінок:

Необхідно злегка пояснити URL в iframe. Починається він так само, як і стандартний код для вставки, але має ряд доповнень: https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0

У порядку використання йдуть параметри:

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

Стилі для розмітки:

.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
}
#vidtop-content {
top: 0;
}

Даний код розтягує відео на всю сторінку, еквівалент background-size: cover для iframe. А pointer-events: none робить так, щоб при правому кліку миші не показувалося контекстне меню YouTube. Залишилося трохи доповнити CSS медіа запитами для співвідношення сторін:

@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}

Запити розтягують відео на всю область перегляду, коли звужується вікно браузера (співвідношення стандартне 16/9). У наступній статті я окремо розповім про співвідношення сторін.

Умови YouTube

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

Не можна поставити відео на паузу, принаймні з допомогою цього методу. В YouTube API є спосіб поставити відео на паузу, але про нього я розповім в наступній статті.

На початку відео буде з’являтися логотип YouTube; також можна підключити рекламу.

Більшість відео YouTube зі звуком, що буде відволікати користувачів. І знову у нашому методі відключення звуку не передбачено, але він є в API.

Необхідно перевірити, щоб використовуване вами відео було доступно у всіх країнах: деякі YouTube відео заборонені до показу в окремих країнах. Тобто ви можете його бачити, а ваші географічні сусіди немає. (Простіше всього це перевірити через VPN сервіс, відкривши сторінку через сервер іншої країни)

Даний метод може порушувати правила Google: «Якщо ви використовуєте вбудований програвач на своєму сайті, його не можна змінювати, доробляти або блокувати частину функціоналу. Посилання на YouTube можна не вказувати.»

Але ми не порушуємо права і можемо протиставити цьому кілька аргументів:

YouTube особисто надає можливість ховати частину функціоналу; ми нічого не зламуємо.

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

Але як завжди рішення використовувати цей код відповідальність залежить від вас.