Как вставить видео с YouTube на сайт

Ютуб-виджет – инструмент, который позволяет добавлять видеоролики с видеохостинга на сайт или делиться в соцсетях. В этой статье рассмотрим преимущества и недостатки виджета и как его разместить на сайте.

Преимущества:

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

Недостатки:

• Показывается реклама, которая отвлекает от просмотра.
• Фиксированный дизайн виджета не позволяет точно настроить его внешний вид под свой сайт.

Добавление на сайт

Самый легкий способ встроить видео YouTube на сайт – использовать тег iframe (фрейм). Но для начала разберемся, что это такое.

Фрейм – это элемент html-разметки, который создает дочернее окно на странице сайта, где можно загружать содержимое другой веб-страницы.

Теперь приступим.

Для примера мы создали простую страницу и внутри html-документа добавили блок div в качестве контейнера. Внутри него разместили заголовок h1, и сюда же будет вставляться код фрейма.

Далее откроем страницу с видео, которое собираемся вставить.

У нас это будет:

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

Под видеоплеером нажмите кнопку Поделиться

Затем в открывшемся модальном окне нажмите кнопку Встроить

В правой части окна будет отображаться сгенерированный код для вставки

В нашем случае код выглядит так:

Внутри представлены такие атрибуты, как:

• width и height – устанавливают длину и высоту окна соответственно;
• src – для вставки полного пути к видео ютуб;
• frameborder – вставка рамки вокруг окна. Значения 1 – yes (да), 0 – no (нет);
• allowfullscreen – наличие этого атрибута означает, что разрешается отображать видео в полноэкранном режиме.

Вот как теперь выглядит страница

На YouTube есть не только обычные ролики, но и укороченные вертикальные Shorts продолжительностью до 1 минуты.

Они также вставляются через тег iframe. Получить его можно так:

• Откройте нужный «шортс».
• Наведите на него курсор и нажмите правую кнопку мыши, чтобы открыть контекстное меню.
• Выберите пункт «Копировать HTML-код».

Скопированный фрагмент вставьте в html-разметку страницы, как в предыдущем примере. Результат выглядит так:

Важно: размещение видео на сайте должно быть согласовано с автором ролика и политикой сервиса. Убедитесь, что видеоролик имеет разрешение на встраивание и не нарушает авторские права.

Примеры использования

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

Благодаря встраиваемым видео YouTube, пользователи могут просматривать ролики прямо на странице сайта, без необходимости перехода на другой ресурс. Но помимо самого хостинга есть и другие сервисы, которые позволяют размещать видео на сайте. Один из таких – видеовиджет QForm. Он позволяет добавить видео на сайт, настроить вид отображения, параметры запуска, кнопку CTA. Есть возможность прикрепить видео к форме обратной связи, что может быть полезно для инструкции или ответов на вопросы.