HTML YouTube Видео
Самым простым способом воспроизведения видео в HTML является использование сайта YouTube.
Что такое YouTube и для чего он необходим?
YouTube (от англ. you "ты, вы" + tube "труба" = "телевизор") - самый большой и самый популярный мировой видеохостинг, который предоставляет услуги размещения видеоматериалов (веб-адрес: https://www.youtube.com/). Основан 14 февраля 2005 года тремя работниками PayPal: Чадом Герли, Стивеном Чени и Джаведом Каримом. Это подразделение компании Google. По состоянию на май 2026 года YouTube является вторым по посещаемости сайтом в Интернете (по данным компании Alexa Internet).
Пользователи могут добавлять, просматривать и комментировать те или иные видеозаписи. Благодаря простоте и удобству использования YouTube стал одним из самых популярных видеохостингов. Служба содержит как профессиональные, так и аматорськие видео, включая видеоблоги.
Любой человек может бесплатно зарегистрироваться на сайте Google (создать собственный email), а потом перейти на сайт YouTube и создать свой видеоканал. Затем все свои видео с YouTube можно встраивать на любые другие веб-сраницы (сайты), используя обычный html-код.
Борьба с видеоформатами
Ранее в этом учебнике вы видели, что для воспроизведения видео во всех браузерах нужно конвертировать его в разные форматы.
Но конвертация видеороликов в несколько форматов может быть сложной и занимать много времени.
Более простое решение — встроить видео с YouTube прямо на вашу веб‑страницу.
YouTube — идентификатор видео (ID)
YouTube показывает идентификатор видео (например, tgbNymZ7vqY) при сохранении или воспроизведении ролика.
Вы можете использовать этот идентификатор, чтобы встроить видео в HTML‑код.
Воспроизведение YouTube‑видео на HTML‑странице
Чтобы встроить видео с YouTube на веб‑страницу, выполните следующие шаги:
- Загрузите видео на YouTube
- Запомните идентификатор видео — ID
- Добавьте на страницу элемент
<iframe> - Укажите URL‑адрес видео в атрибуте
src - Используйте атрибуты
widthиheightдля задания размеров плеера - При необходимости добавьте параметры к URL (см. ниже)
Например — использование iFrame (рекомендуется)
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
Попробуйте сами »
YouTube Autoplay — автоматическое воспроизведение
Вы можете включить автозапуск видео при загрузке страницы, добавив параметр к URL‑адресу YouTube.
Примечание: Будьте осторожны с автозапуском. Он может раздражать посетителей и привести к тому, что они покинут сайт.
Значение 0 (по умолчанию): видео не запускается автоматически.
Значение 1: видео запускается автоматически.
YouTube — Autoplay
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
Попробуйте сами »
YouTube Playlist — список воспроизведения
Можно указать список видео через запятую (в дополнение к основному URL).
YouTube Loop — повтор видео
Значение 0 (по умолчанию): видео проигрывается один раз.
Значение 1: видео будет повторяться.
YouTube — Повтор
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
Попробуйте сами »
YouTube Controls — панель управления
Значение 0: элементы управления не отображаются.
Значение 1 (по умолчанию): элементы управления отображаются.
YouTube — Панель управления
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Попробуйте сами »
YouTube — использование <object> или <embed>
Примечание: Встраивание YouTube‑видео через <object> и <embed> считается устаревшим с января 2015 года.
Вы должны использовать <iframe> вместо них.
Пример — использование <object> (устарело)
<object width="420" height="315"
data="https://www.youtube.com/embed/tgbNymZ7vqY">
</object>
Пример — использование <embed> (устарело)
<embed width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
Также вы можете прочитать статью Как сделать адаптивным встроенное видео YouTube? — о том, как плеер автоматически подстраивается под размер окна браузера — на нашем сайте W3Schools на русском.
