вSEO-технологии

Как встроить плеер YouTube на сайт?

Добавить плеер YouTube на сайт очень просто, и сегодня вы научитесь это делать. Также вам наверняка будет интересно узнать о дополнительных настройках плеера (размеры окна видео, автовоспроизведение, воспроизведение с определенного места и т. п.).
Распространенная ошибка в попытке вставить плеер на сайт — добавление прямой ссылки на ролик в HTML-редактор.

добавление прямой ссылки

Ссылка на видео, конечно, добавится, но отражаться она будет так:

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

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

Инструкция по добавлению плеера:

  1. Переходим на страницу видео, которое нужно добавить. Пусть это будет https://www.youtube.com/watch?v=Ppjq_BlOukQ.
  2. Нажимаем кнопку «Поделиться» под роликом, а потом (во всплывающем окне) — кнопку «Встроить».
  3. Как встроить плеер YouTube на сайт?

  4. Копируем ссылку, заключенную в тег iframe:
  5. Как встроить плеер YouTube на сайт?

  6. Добавляем ссылку в режиме HTML-редактора на свой сайт (если у вас CMS WordPress, необходимо добавлять ссылку в режиме «Текст»):
  7. Как встроить плеер YouTube на сайт?

  8. Сохраняем и просматриваем результат:
  9. Как встроить плеер YouTube на сайт?

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

Как встроить плеер YouTube на сайт?

Вот результат:

Как встроить плеер YouTube на сайт?

Изменить размер плеера можно, поменяв значения параметров width и height в ссылке. Зададим width=810 и height=400. В результате видео точно соответствует области контента и смотрится эстетично:

Как встроить плеер YouTube на сайт?

Это еще не все. При вставке видео доступны полезные настройки:

Как встроить плеер YouTube на сайт?

После добавления и снятия галочек код для вставки изменяется автоматически. Вот что можно настроить:

  • указать время начала воспроизведения (для этого устанавливаем галочку напротив надписи «Начало» и задаем время начала в секундах);
  • показывать похожие видео после просмотра (эта опция активирована по умолчанию; при желании галочку можно снять, и тогда пользователи не увидят списка похожих видео в конце ролика);
  • показывать панель управления проигрывателем (опция тоже активирована по умолчанию; если галочку снять, то пользователи не будут видеть полосу прокрутки и кнопки управления, расположенные внизу видео; остановить и развернуть ролик они смогут соответственно одиночным или двойным нажатием левой кнопкой мыши по области видео);
  • показывать название видео и панель действий (по умолчанию YouTube включает эту опцию; при ее отключении исчезает название ролика вверху области видео, а также кнопки «Просмотреть позже» и «Поделиться»);
  • включить режим повышенной конфиденциальности (опция отключена по умолчанию; если ее включить, то YouTube будет сохранять информацию о посетителях вашей страницы при условии просмотра видео).

Это только базовые настройки, доступные в окне встройки видео. Но есть еще «продвинутые» настройки, доступные на странице Google для разработчиков «Демонстрация YouTube Player API». Для того чтобы настроить видео, необходимо добавить код идентификатора — это буквы после знака = в конце прямой ссылки на видео в YouTube:

Как встроить плеер YouTube на сайт?

Копируем код, вставляем в соответствующее поле и нажимаем кнопку «Обновить проигрыватель с выбранными настройками»:

Как встроить плеер YouTube на сайт?

Теперь нажимаем кнопку «Показать параметры проигрывателя» и видим развернутый список опций:

Как встроить плеер YouTube на сайт?

Здесь можно включить автоматическое проигрывание видео при открытии страницы (autoplay), принудительно включить субтитры (cc_load_policy), задать цветовую схему полосы прокрутки (color — красная или белая), убрать кнопку перехода в полноэкранный режим (fs), циклически воспроизводить видео (loop) и т. д. Полный перечень и подробное описание функций представлены в справке Google.

После настройки функций надо обязательно нажать кнопку «Обновить проигрыватель с выбранными настройками». После этого можно копировать ссылку и добавлять ее на сайт.

Если у вас на сайте много видеороликов, то упростить работу с ними можно при помощи специальных плагинов для CMS:

  • WordPress (YouTube Channel, Video Sidebar Widgets, Vixy YouTube Embed и т. п.);
  • Joomla! (AllVideos, Simple YouTube и др.);
  • ModX (Videobox);
  • Drupal (CKEditor Youtube).

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

Напоминаем, что 27 сентября состоится онлайн-конференция по видеомаркетингу CyberVideoDay 2017. Известные видеоблогеры, маркетологи, специалисты по SMM поделятся опытом и расскажут, как привлечь трафик с помощью видеороликов. Вы научитесь создавать классные ролики, развивать свой канал на YouTube, сотрудничать с известными видеоблогерами и выжимать максимум из рекламных кампаний в YouTube и Facebook. Стать участником конференции может каждый желающий совершенно бесплатно.

Источник: SeoPult Блог