Видео YouTube в HTML

Самостоятельно хостить и отдавать видео непросто: нужно кодировать его в нескольких форматах для разных браузеров, хранить большие файлы и оплачивать трафик. Более простое решение — позволить YouTube взять на себя всё это и встроить его плеер на страницу с помощью элемента <iframe>. Браузер загружает плеер YouTube внутри фрейма, так что несколько строк HTML дают вам адаптивный стриминг, субтитры и полноэкранный режим бесплатно.

На этой странице рассказывается, как сформировать URL-адрес встраивания, сделать плеер адаптивным, настроить разрешения через атрибут allow и передать параметры воспроизведения — автовоспроизведение, цикл и элементы управления.

Поиск идентификатора видео и URL-адреса встраивания

Самая распространённая ошибка — указывать URL-адрес просмотра в атрибуте src. Адрес, который вы видите в браузере при просмотре видео на YouTube, — это URL-адрес просмотра, и он не может быть встроен напрямую:

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

Часть после v= — это идентификатор видео (i8n1gSw_o_8 в примере выше). Для встраивания нужен URL-адрес встраивания, в котором используется путь /embed/, за которым следует этот идентификатор:

https://www.youtube.com/embed/i8n1gSw_o_8

Чтобы найти идентификатор: откройте видео на YouTube, скопируйте значение параметра запроса v из адресной строки (или используйте опцию Поделиться → Встроить, которая даёт полный URL-адрес вида /embed/ и разметку <iframe>). Сокращённые ссылки вида https://youtu.be/i8n1gSw_o_8 также содержат идентификатор в качестве последнего сегмента пути.

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

Чтобы встроить видео, укажите в атрибуте src элемента iframe URL-адрес встраивания и задайте его размеры:

Запишите идентификатор видео (см. выше).
Добавьте на страницу элемент <iframe>.
Укажите в атрибуте src URL-адрес встраивания: https://www.youtube.com/embed/VIDEO_ID.
Задайте width и height (или задайте размер с помощью CSS — см. Адаптивное встраивание).
Добавьте атрибут title с описанием видео для обеспечения доступности.
Добавьте параметры URL-адреса для настройки воспроизведения (например, ?rel=0, чтобы ограничить рекомендуемые видео после просмотра только каналом).

Пример воспроизведения видео YouTube в HTML с помощью элемента `<iframe>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8" allow="autoplay; fullscreen"></iframe>
  </body>
</html>

Попробуйте сами »

Режим конфиденциальности (youtube-nocookie.com)

Стандартное встраивание YouTube может устанавливать файлы cookie для отслеживания сразу при загрузке страницы — ещё до того, как посетитель нажмёт кнопку воспроизведения. Согласно GDPR и аналогичным нормативным актам это может потребовать явного согласия пользователя. YouTube предлагает режим повышенной конфиденциальности, который откладывает сохранение персональных файлов cookie до тех пор, пока посетитель не начнёт просмотр. Для его использования замените хост на youtube-nocookie.com:

<iframe width="560" height="315" title="YouTube video player"
  src="https://www.youtube-nocookie.com/embed/i8n1gSw_o_8"
  allow="autoplay; fullscreen"></iframe>

Всё остальное — путь /embed/, идентификатор видео и все параметры URL-адреса — работает точно так же. Учтите, что это снижает, но не полностью устраняет объём данных, которые может отправлять плеер, поэтому пересмотрите свою политику согласия, если к вам предъявляются строгие требования.

Атрибут `allow`

Браузеры ограничивают использование мощных функций через Permissions Policy. Чтобы iframe YouTube мог использовать автовоспроизведение, полноэкранный режим и другие возможности, родительская страница должна предоставить соответствующие разрешения через атрибут allow элемента iframe. Атрибут принимает список токенов разрешений, разделённых точкой с запятой. Набор, который генерирует диалог Поделиться → Встроить YouTube:

<iframe width="560" height="315" title="YouTube video player"
  src="https://www.youtube.com/embed/i8n1gSw_o_8"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen></iframe>

Распространённые токены и их назначение:

Токен	Назначение
`accelerometer`	Позволяет плееру считывать данные об ускорении устройства (используется в некоторых видео 360°/VR).
`autoplay`	Разрешает запуск видео без жеста пользователя.
`clipboard-write`	Позволяет плееру копировать текст (например, ссылки для общего доступа) в буфер обмена.
`encrypted-media`	Включает защищённое DRM-воспроизведение через Encrypted Media Extensions.
`gyroscope`	Позволяет плееру считывать ориентацию устройства (для видео 360°/VR).
`picture-in-picture`	Позволяет видео открываться в плавающем окне.
`web-share`	Позволяет плееру открывать нативный диалог общего доступа.

Отдельный атрибут allowfullscreen разрешает кнопку полноэкранного режима. Токены, которые вам не нужны, можно опустить; например, если убрать autoplay, автовоспроизведение просто будет заблокировано.

Адаптивное встраивание YouTube

Элемент iframe с фиксированными width/height не адаптируется к маленьким экранам и может выходить за пределы контейнера. Есть два надёжных способа, позволяющих плееру масштабироваться по родительскому элементу с сохранением пропорций видео 16:9.

С помощью свойства CSS `aspect-ratio` (современные браузеры)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .video {
        width: 100%;
        max-width: 720px;
      }
      .video iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div class="video">
      <iframe title="YouTube video player"
        src="https://www.youtube.com/embed/i8n1gSw_o_8"
        allow="autoplay; fullscreen"></iframe>
    </div>
  </body>
</html>

С помощью трюка с padding-bottom (широкая поддержка)

Для старых браузеров, не поддерживающих aspect-ratio, оберните iframe в контейнер, высота которого задаётся через padding-bottom: 56.25% (то есть 9 ÷ 16, соотношение 16:9), а затем растяните iframe абсолютно, чтобы он заполнил этот контейнер:

<style>
  .video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
  }
  .video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>
<div class="video-wrap">
  <iframe title="YouTube video player"
    src="https://www.youtube.com/embed/i8n1gSw_o_8"
    allow="autoplay; fullscreen"></iframe>
</div>

Настройка воспроизведения с помощью параметров URL-адреса

Плеер настраивается путём добавления параметров запроса к URL-адресу встраивания. Первый параметр вводится с помощью ?, каждый последующий присоединяется через &:

https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&controls=0

Большинство параметров принимают значение 0 (выкл.) или 1 (вкл.). В следующих разделах описаны наиболее часто используемые из них.

Автовоспроизведение YouTube

Чтобы видео начинало воспроизводиться автоматически при загрузке плеера, добавьте autoplay=1 (по умолчанию autoplay=0 ожидает нажатия кнопки воспроизведения пользователем).

Важно: браузеры блокируют автовоспроизведение со звуком. Автовоспроизводимое видео также должно быть без звука, поэтому сочетайте autoplay=1 с mute=1 — иначе видео не запустится. Элементу iframe также должно быть предоставлено разрешение autoplay через атрибут allow.

Пример автовоспроизведения YouTube:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?autoplay=1&mute=1" allow="autoplay; fullscreen"></iframe>
  </body>
</html>

Попробуйте сами »

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

Параметр controls переключает панель управления плеера (воспроизведение/пауза, громкость, полноэкранный режим и т. д.). Используйте controls=0, чтобы скрыть её, и controls=1 (по умолчанию), чтобы показать.

Пример элементов управления YouTube:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?controls=0" allow="autoplay; fullscreen"></iframe>
  </body>
</html>

Попробуйте сами »

Цикл воспроизведения YouTube

Используйте loop=1, чтобы видео повторялось бесконечно (по умолчанию loop=0 воспроизводит его один раз). Есть один нюанс: для одного видео цикл работает только при одновременной передаче параметра playlist с тем же идентификатором видео. YouTube воспринимает цикл как «вернуться к началу плейлиста», поэтому без этой записи в плейлисте видео остановится после одного воспроизведения. Пример ниже устанавливает оба параметра:

Пример цикла воспроизведения YouTube:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe width="560" height="315" title="YouTube video player" src="https://www.youtube.com/embed/i8n1gSw_o_8?playlist=i8n1gSw_o_8&loop=1" allow="autoplay; fullscreen"></iframe>
  </body>
</html>

Попробуйте сами »

Устаревшие варианты: теги `<embed>` и `<object>`

В старых руководствах вы можете встретить встраивание YouTube с помощью элементов <embed> или <object>. Не используйте их для YouTube — современный и поддерживаемый метод — это <iframe>, показанный выше. Примеры ниже приведены только для того, чтобы вы могли распознать устаревший паттерн:

<!-- Legacy / not recommended -->
<embed width="560" height="315" src="https://www.youtube.com/embed/i8n1gSw_o_8" />

<object width="560" height="315" data="https://www.youtube.com/embed/i8n1gSw_o_8"></object>

Связанные темы

Тег HTML <iframe> — элемент, используемый для каждого встраивания YouTube.
Тег HTML <video> — для воспроизведения собственных видеофайлов вместо встраивания YouTube.
Аудио и видео в HTML5 — общая картина нативных медиа в HTML.

Практика

Какой HTML-тег используется для встраивания видео YouTube на веб-страницу?

Практика

Автовоспроизводимое видео YouTube не запустится, если не добавить какой параметр?

mute=1controls=0loop=1rel=0

Практика

Какой хост включает режим повышенной конфиденциальности YouTube (без cookie до начала воспроизведения)?

youtube.comyoutu.beyoutube-nocookie.comyt-privacy.com

Поиск идентификатора видео и URL-адреса встраивания

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

Пример воспроизведения видео YouTube в HTML с помощью элемента <iframe>:

Режим конфиденциальности (youtube-nocookie.com)

Атрибут allow

Адаптивное встраивание YouTube

С помощью свойства CSS aspect-ratio (современные браузеры)

С помощью трюка с padding-bottom (широкая поддержка)

Настройка воспроизведения с помощью параметров URL-адреса

Автовоспроизведение YouTube

Пример автовоспроизведения YouTube:

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

Пример элементов управления YouTube:

Цикл воспроизведения YouTube

Пример цикла воспроизведения YouTube:

Устаревшие варианты: теги <embed> и <object>

Связанные темы

Практика

Пример воспроизведения видео YouTube в HTML с помощью элемента `<iframe>`:

Атрибут `allow`

С помощью свойства CSS `aspect-ratio` (современные браузеры)

Устаревшие варианты: теги `<embed>` и `<object>`