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

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

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

То есть это обычная гиперссылка, кликнув по которой, пользователь попадет на страницу 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, чтобы не замедлять работу сайта из-за дополнительных плагинов.

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

    Хочу на конференцию!
    p>Источник: blog.seopult.ru

    Ссылка на основную публикацию