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

Но начнем с того, как не надо действовать.

Как не нужно вставлять ссылку на видео с YouTube

Распространенная ошибка при попытке вставить YouTube-видео на сайт — добавление прямой ссылки на ролик в HTML-редактор.

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

https://www.youtube.com/watch?v=xfIQ8h2_0TI&ab_channel=PromoPult

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

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

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

Инструкция по добавлению плеера с помощью HTML-кода

1. Переходим на страницу видео, которое нужно добавить. Пусть это будет:

https://www.youtube.com/watch?v=xfIQ8h2_0TI&ab_channel=PromoPult

2. Нажимаем кнопку «Поделиться» под роликом, а потом во всплывающем окне выбираем первый вариант — «Встроить»:

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

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

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

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

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

5. Просмотреть, как ролик будет выглядеть на странице можно в режиме «Визуально» (речь опять о WordPress):

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

6. Если вас все устраивает — сохраняем и любуемся результатом на странице:

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

Вот и все — видео добавлено.

Полезные настройки при вставке ролика через iframe

Центрирование

Бывает, что при таком способе ролик некрасиво встраивается в контент страницы: не устраивает размер окна или оно размещается несимметрично.

Можно отцентрировать видео, заключив ссылку в тег:

<center>...</center>

В режиме кода это выглядит так:

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

Результат уже лучше:

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

Изменение размера плеера

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

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

В результате видео точно соответствует области контента и смотрится эстетично:

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

Время начала воспроизведения и другие настройки

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

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

После добавления и снятия галочек код для вставки изменяется автоматически.

Вот что можно настроить:

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

Добавили видео на сайт? А оптимизировать не забыли? Вот бесплатный интерактивный чек-лист, который поможет найти недочеты в оптимизации и подскажет, что делать.

Настройки «для профи»

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

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

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

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

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

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

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

Что можно дополнительно настроить при вставке видео с YouTube

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

Есть и другие опции. Полный перечень и подробное описание функций представлены в справке Google.

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

Хотите, чтобы ваши видео собирали тысячи просмотров? Тогда им нужна оптимизация. Вот подробное руководство по самостоятельному аудиту YouTube-роликов.

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

  • WordPress — YouTube Channel, Video Sidebar Widgets, Vixy YouTube Embed и другие;
  • Joomla! — AllVideos, Simple YouTube и другие;
  • ModX — Videobox;
  • Drupal — CKEditor Youtube.

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

Заключение

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

Чтобы продолжить чтение, зарегистрируйтесь в PromoPult и применяйте знания на практике

Подключите бесплатное продвижение на 2 недели в PromoPult

Для селлеров и владельцев сайтов:

реклама в Яндексе, VK, на Wildberries и SEO в едином интерфейсе

Бесплатные инструменты

для управления рекламой и аналитики конкурентов на WB

Аналитика бустера WB
Вы выбираете инструменты wildberries
Бесплатно отслеживайте KPI автокампаний
и позиции товара до и после буста

Настоящим Я даю свое полное согласие на получение электронных уведомлений (на указанные мой абонентский номер и адрес электронной почты), а также выражаю явное и полное согласие на сбор, хранение, обработку и передачу персональных данных, согласно положениям, изложенным в Политике конфиденциальности, расположенных по адресу: promopult.ru/rules.html?op=private, с которыми я ознакомился и принял.