Как вставить видео с YouTube на сайт
Ютуб-виджет – инструмент, который позволяет добавлять видеоролики с видеохостинга на сайт или делиться в соцсетях. В этой статье рассмотрим преимущества и недостатки виджета и как его разместить на сайте.
Преимущества:
- Для просмотра не требуется регистрация или скачивание дополнительных программ.
- Поддерживаются различные форматы видео.
- Вставляется на сайт одной строчкой кода.
Недостатки:
- Показывается реклама, которая отвлекает от просмотра.
- Фиксированный дизайн виджета не позволяет точно настроить его внешний вид под свой сайт.
Добавление на сайт
Самый легкий способ встроить видео YouTube на сайт – использовать тег iframe (фрейм). Но для начала разберемся, что это такое.
Фрейм – это элемент html-разметки, который создает дочернее окно на странице сайта, где можно загружать содержимое другой веб-страницы.
Теперь приступим.
Для примера мы создали простую страницу и внутри html-документа добавили блок div в качестве контейнера. Внутри него разместили заголовок h1, и сюда же будет вставляться код фрейма.
Далее откроем страницу с видео, которое собираемся вставить.
У нас это будет:
https://www.youtube.com/watch?v=mENBC34X2Q4
Под видеоплеером нажмите кнопку Поделиться
Затем в открывшемся модальном окне нажмите кнопку Встроить
В правой части окна будет отображаться сгенерированный код для вставки
В нашем случае код выглядит так:
| <iframe width="560" height="315" src="https://www.youtube.com/embed/mENBC34X2Q4?si=3r_X0uUcm0ruAVvD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> |
Внутри представлены такие атрибуты, как:
- width и height – устанавливают длину и высоту окна соответственно;
- src – для вставки полного пути к видео ютуб;
- frameborder – вставка рамки вокруг окна. Значения 1 – yes (да), 0 – no (нет);
- allowfullscreen – наличие этого атрибута означает, что разрешается отображать видео в полноэкранном режиме.
Вот как теперь выглядит страница
На YouTube есть не только обычные ролики, но и укороченные вертикальные Shorts продолжительностью до 1 минуты.
Они также вставляются через тег iframe. Получить его можно так:
- Откройте нужный «шортс».
- Наведите на него курсор и нажмите правую кнопку мыши, чтобы открыть контекстное меню.
- Выберите пункт «Копировать HTML-код».
Скопированный фрагмент вставьте в html-разметку страницы, как в предыдущем примере. Результат выглядит так:
Важно: размещение видео на сайте должно быть согласовано с автором ролика и политикой сервиса. Убедитесь, что видеоролик имеет разрешение на встраивание и не нарушает авторские права.
Примеры использования
Видео с YouTube может быть разного содержания. В зависимости от целей это может быть обзор и демонстрация продукта, его сравнение с конкурентами, обучающее видео об отрасли, товаре или услуге, отзывы клиентов и прямые трансляции.
Готовое решение от QForm
Благодаря встраиваемым видео YouTube, пользователи могут просматривать ролики прямо на странице сайта, без необходимости перехода на другой ресурс. Но помимо самого хостинга есть и другие сервисы, которые позволяют размещать видео на сайте. Один из таких – видеовиджет QForm. Он позволяет добавить видео на сайт, настроить вид отображения, параметры запуска, кнопку CTA. Есть возможность прикрепить видео к форме обратной связи, что может быть полезно для инструкции или ответов на вопросы.