От автора: моя статья о том, как с помощью CSS поставить в качестве фона на страницу полноэкранное HTML5 видео оказалась одной из самых популярных на сайте The New Code. Однако в этом методе есть значительный недостаток – пользователям приходится размещать ролики на своих ресурсах или искать сервисы для этого.
В качестве альтернативы можно использовать YouTube видео как фон для сайта, но на протяжении долгого времени я думал, что ролики данного сервиса нельзя толком контролировать: дело не только в том, что iframe плохо контролируется и стилизуется, но и другие решения типа tubular работают на JavaScript. Очень часто подключен какой-либо фреймворк типа JQuery, помогающий браузеру правильно позиционировать и проигрывать видео, повторно вычислять размер видео после изменения размера окна браузера. Я не считал и не считаю такие подходы элегантными и эффективными.
Совсем недавно после исследований и пары экспериментов было выяснено, что с помощью обычных HTML5 и CSS можно установить видео с YouTube в качестве фонового рисунка страницы без использования JS или специальной разметки. Для демонстрации я создал два демо.
Разметка
Наш способ является производным от метода Florent Verschelde для полноэкранного видео на странице в качестве фона:
|
1 2 3 4 5 6 7 |
<div class="video-background"> <div class="video-foreground"> <iframe src="//www.youtube.com/embed/W0LHTWG-UmQ? controls=0&showinfo=0&rel=0&autoplay=1&loop=1 &playlist=W0LHTWG-UmQ" allowfullscreen></iframe> </div> </div> |
В разметке для видео есть два div, внутри которых iframe. Этот код идет первым на странице. Если вы хотите пройти валидацию HTML страницы, замените знаки & в адресе на &. Далее идет еще один DIV со всем контентом страницы:
|
1 2 3 |
<div id="vidtop-content"> ... </div> |
Необходимо слегка объяснить URL в iframe. Начинается он так же, как и стандартный код для вставки, но имеет ряд дополнений: //www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&start=0
В порядке использования идут параметры:
Стили для разметки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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 медиа запросами для соотношения сторон:
|
1 2 3 4 5 6 |
@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 самолично предоставляет возможность прятать часть функционала; мы ничего не взламываем.
Если понимать ограничения буквально – то, что мы просто сделали видео адаптивным будет рассматриваться как нарушение.
Но как всегда решение использовать данный код и ответственность зависит от вас.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Комментарии (9)