Seopult Cybermarketing Click.ru Seopult TV Trustlink Webartex.ru UpToLike.ru Blog.Seopult.ru Форум
25 сентября 2017

Как встроить плеер 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. Стать участником конференции может каждый желающий совершенно бесплатно.




Плюсануть
Поделиться
Отправить
Класснуть
Линкануть

Давайте это обсудим

Расписание вебинаров и
мастер-классов
24 октября 2017 Вторник 13:00
Евгений Костин
SEO: продвинутый курс
26 октября 2017 Четверг 12:00
Александр Серебряков
Новый инструмент для маркетолога - мессенджер-маркетинг
26 октября 2017 Четверг 13:00
Дмитрий Климчуков
Контекстная реклама: продвинутый курс