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

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

Часто владельцы сайтов сталкиваются с проблемой вставки видео с YouTube на сайт. Давайте рассмотрим этот вопрос более подробно.

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

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

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

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

  • Копируем ссылку, заключенную в тег iframe:

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

  • Сохраняем и просматриваем результат:

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

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

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

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

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

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

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

Источник

Оставить комментарий