- IT Blog. Code Inside - https://code-inside.com -

Настройки встраивания YouTube видео. Расширенные настройки для эффективного встраивания

Во времена, когда широкополосным интернетом могли похвастаться только обеспеченные пользователи и жители крупных городов, информация в интернете была в основном в текстовом виде. Даже картинки сжимались всевозможными протоколами для экономии драгоценных байт. Но теперь, когда скоростной интернет доступен даже на мобильных телефонах, многие авторы считают, что гораздо проще показать на видео, например, как разобрать гаджет или приготовить торт, чем объяснять то же самое на словах.

Общепринятой платформой для публикации видео давно стал YouTube от Google, как обладающий практически неограниченными техническими возможностями, шириной канала и удобным интерфейсом управления настройками видео и плей-листами.

Но что, если видео нужно вставить непрерывным звуковым сопровождением (скрыть от пользователя кнопки управления воспроизведением) или, к примеру, хочется избавиться от логотипа YouTube поверх видео?

Для этого у YouTube предусмотрено несколько дополнительных опций, не предлагаемых в базовом интерфейсе встраивания видео, но при этом несомненно полезных.

Стандартный код для встраивания

Если ваше видео уже опубликовано, просто щелкните по нему правой клавишей и выберите "Copy embed code", и нужный код окажется в буфере обмена:

youtube_1


 

Базовые настройки встраивания видео

Список настроек приводится на странице с описанием API Youtube на developers.google.com [1]. Рассмотрим основные и наиболее полезные кратко с примерами.

Autoplay - автоматический запуск при загрузке страницы

Этой опцией, пожалуй, не стоит злоупотреблять. Пользователи не любят, когда сразу после загрузки страница начинает издавать звуки. Однако, в некоторых случаях это может быть полезно. По умолчанию параметр  "autoplay" равен 0 (выключен).   Чтоб его включить, добавим в конце URL вопросительный знак и запись "autoplay=1":


Получаем видео, которое включается сразу при загрузке страницы.

Управление воспроизведением: Play, Pause и звук

Опция "controls" позволяет спрятать от пользователя кнопки управления воспроизведением (в том числе временную шкалу).  Чтобы добавить эту опцию к предыдущей, допишите в конце URL символ "&" и за ним "controls=0".


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

youtube2

 

Название видео

Опция "showinfo" управляет панелью заголовка, на которой находятся название видео, кнопка "посмотреть позже" и кнопка "поделиться". Чтобы выключить эту панель, добавьте к URL символ "&" и "showinfo=0".


Как только вы выключите верхнюю панель, YouTube автоматом добавит свой логотип в нижний правый угол.

youtube3

Логотип YouTube поверх видео

Опция "modestbranding" позволяет частично избавиться от показа того, что видео загружено на YouTube. При значении 1 логотип YouTube не  будет отображаться на панели управления. Небольшая текстовая метка YouTube будет отображаться в углу при наведении курсора на проигрыватель во время паузы.


Похожие видео

Для популярных видео YouTube в конце просмотра может добавить "Похожие". Совсем непрактично, если вы встраиваете видео-обзор вашего товара, а YouTube предложит пользователю обзоры конкурентов.  Чтобы после окончания просмотра плеер просто останавливался и не показывал похожие видео, добавим символ "&" и "rel=0":


Расширенные настройки встраивания видео

Autohide - скрываем шкалу времени во время воспроизведения

Опция "autohide" в отличие от предыдущих имеет 3 значения: 0, 1 и 2. По умолчанию установлено значение 2, которое означает что шкала времени плавно исчезнет через некоторое время, если пользователь не навел на них курсор, в то время как кнопки управления останутся видимыми. Значение 1  означает, что пропадать будет и шкала времени и кнопки. Значение 0 заставит кнопки и шкалу времени показываться всегда. Очевидно, что эта опция работает только при controls="1".


Цветовая схема шкалы времени

Если вы не хотите скрывать функции управления, но стандартный youtube-красный цвет не подходит по дизайну к вашему сайту, вы можете изменить цвет заполняющейся шкалы на белый с помощью опции "color". У опции два параметра: "red" и "white".


Остальные опции

cc_load_policy - принудительная загрузка субтитров
disablekb - управление с клавиатуры
end - остановка видео через заданное время
fs - управление кнопкой полноэкранного просмотра
hl - язык интерфейса
loop - зацикленное воспроизведение видео
start - начинать воспроизведение с заданного момента.

Комбинация опций Start и End может позволить встроить в страницу определенный фрагмент видео без редактирования самого видео.

Источник [2]