Как сделать YouTube видео фоном для сайта

Как сделать YouTube видео фоном для сайта

От автора: моя статья о том, как с помощью CSS поставить в качестве фона на страницу полноэкранное HTML5 видео оказалась одной из самых популярных на сайте The New Code. Однако в этом методе есть значительный недостаток – пользователям приходится размещать ролики на своих ресурсах или искать сервисы для этого.

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

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

Разметка

Наш способ является производным от метода Florent Verschelde для полноэкранного видео на странице в качестве фона:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В разметке для видео есть два 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

В порядке использования идут параметры:

Стили для разметки:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Данный код растягивает видео на всю страницу, эквивалент background-size: cover для iframe. А pointer-events: none делает так, чтобы при правом клике мыши не показывалось контекстное меню YouTube. Осталось немного дополнить CSS медиа запросами для соотношения сторон:

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

Условия YouTube

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

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

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

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

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

Данный метод может нарушать правила Google: «Если вы используете встраиваемый проигрыватель на своем сайте, его нельзя изменять, доделывать или блокировать часть функционала. Ссылку на YouTube можно не указывать.»

Но мы не нарушаем права и можем противопоставить этому несколько аргументов:

YouTube самолично предоставляет возможность прятать часть функционала; мы ничего не взламываем.

Если понимать ограничения буквально – то, что мы просто сделали видео адаптивным будет рассматриваться как нарушение.

Но как всегда решение использовать данный код и ответственность зависит от вас.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Остап

    Почему у меня не получается вставить с ютуба?
    проделал то же самое только с своей ссылкой!

    https://www.youtube.com/watch?v=nY4uOZrzv0s

  2. jkeks

    ПОтрясно ! Я думал гугл не разрешит так делать, или разрешит но за деньги,а оказывается легко все работает. Но сверху лучше Adsense например уже не класть я так понимаю.. да ?

  3. Николай

    Спасибо за статью. Когда на сайт заходят в режиме инкогнито, видео почему-то не запускается автоматически. Как с этим можно бороться?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree