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

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

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

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

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc" frameborder="0" allowfullscreen></iframe>

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

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autoplay=1" frameborder="0" allowfullscreen></iframe>

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autoplay=1&controls=0" frameborder="0" allowfullscreen></iframe>

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autoplay=1&controls=0&showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autoplay=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>

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

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?autohide=1" frameborder="0" allowfullscreen></iframe>

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

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

<iframe width="640" height="360" src="https://www.youtube.com/embed/juRt6ynLEPc?color=white" frameborder="0" allowfullscreen></iframe>

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

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

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

Источник