Перейти к основному содержимому

Видео YouTube в HTML

Самый простой способ воспроизводить видео в HTML — использовать YouTube.


Проблемы с Видеоформатами?

Преобразование видео в разные форматы может быть сложным и трудоёмким. Более простое решение — позволить YouTube воспроизводить видео на вашей странице.


Идентификатор Видео YouTube

YouTube показывает идентификатор (например, tgbNymZ7vqY), когда вы сохраняете или воспроизводите видео. Вы используете этот идентификатор, чтобы ссылаться на видео в своём HTML.


Воспроизведение Видео YouTube в HTML

Чтобы воспроизвести видео на странице: загрузите его на YouTube, запишите идентификатор видео, добавьте элемент <iframe>, укажите в атрибуте src URL видео, задайте width и height для плеера и добавьте любые другие параметры к URL.

Пример

Видео YouTube, встроенное с помощью <iframe>.

Prompt
Страница, встраивающая видео YouTube с помощью iframe (ширина 420, высота 315), src которого указывает на URL встраивания YouTube для видео с id tgbNymZ7vqY.
Вывод: полная HTML-страница

Автовоспроизведение + Без Звука YouTube

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

Примечание: Браузеры на базе Chromium обычно блокируют автовоспроизведение, но автовоспроизведение без звука всегда разрешено. Добавьте mute=1 после autoplay=1, чтобы видео запускалось автоматически, но без звука.

Пример

Видео YouTube с автовоспроизведением без звука.

Prompt
Страница, встраивающая видео YouTube, которое автоматически воспроизводится без звука, добавляя autoplay=1 и mute=1 к URL встраивания для видео с id tgbNymZ7vqY.
Вывод: полная HTML-страница

Плейлист YouTube

Параметр playlist принимает список видео, разделённых запятыми, для воспроизведения в дополнение к исходному URL.


Цикл YouTube

Добавьте playlist=videoID и loop=1, чтобы видео зацикливалось бесконечно. loop=0 (по умолчанию) воспроизводит видео только один раз, а loop=1 зацикливает его бесконечно.

Пример

Видео YouTube, настроенное на бесконечное зацикливание.

Prompt
Страница, встраивающая видео YouTube, зацикленное навсегда, добавляя playlist=tgbNymZ7vqY и loop=1 к URL встраивания.
Вывод: полная HTML-страница

Элементы Управления YouTube

Добавьте controls=0, чтобы скрыть элементы управления плеера. controls=0 скрывает их, а controls=1 (по умолчанию) показывает их.

Пример

Видео YouTube со скрытыми элементами управления плеера.

Prompt
Страница, встраивающая видео YouTube со скрытыми элементами управления плеера, добавляя controls=0 к URL встраивания для видео с id tgbNymZ7vqY.
Вывод: полная HTML-страница