Размещение видео с видеохостинга YouTube

Чтение — около 9 минут· без учёта практики

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

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

Код встраивания с YouTube

Чтобы получить готовый HTML-код проигрывателя, сделайте по порядку следующие действия:

  1. Откройте страницу видео на YouTube. Если вы хотите разместить на сайте своё видео, предварительно загрузите его на YouTube: для этого необходим аккаунт Google и канал.
  2. Под видео нажмите кнопку «Поделиться» (Share).
  3. В открывшемся окне выберите «Встроить» (Embed). Проверка: справа или ниже появился код, который начинается с <iframe.
  4. При необходимости отметьте настройки под кодом, например «Начало» (Start at) или «Включить режим повышенной конфиденциальности» (Enable privacy-enhanced mode), и нажмите «Копировать» (Copy).

Код встраивания выглядит примерно так:

HTML
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojULkWEUsPs?si=..."
  title="YouTube video player" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Разберём его атрибуты:

  • width и height — ширина и высота проигрывателя в пикселях.
  • src — адрес проигрывателя: https://www.youtube.com/embed/ и идентификатор видео. Параметр si YouTube добавляет для статистики: его можно удалить.
  • title — название фрейма. YouTube подставляет общее «YouTube video player»; замените его названием ролика, чтобы пользователи программ экранного доступа понимали, что это за видео.
  • allow, referrerpolicy и allowfullscreen — разрешения и правила, которые мы разобрали в уроке о фреймах: автозапуск, «картинка в картинке», полноэкранный режим.
  • frameborder="0" убирает рамку вокруг фрейма. Этот атрибут устарел: валидатор отметит его как ошибку. Рамку элемента задают и убирают средствами CSS — подробно об этом в уроке учебника CSS «Границы элемента в CSS». Атрибут allowfullscreen, наоборот, есть в стандарте HTML.

Режим повышенной конфиденциальности меняет адрес на https://www.youtube-nocookie.com/embed/…. В этом режиме просмотр встроенного ролика не используется для персонализации рекомендаций YouTube и рекламы вне вашего сайта; реклама внутри проигрывателя также неперсонализированная. Это не означает полного отсутствия передачи данных сервису. Подробнее — в справке YouTube о встраивании.

Адрес проигрывателя по идентификатору видео

Код можно составить и самостоятельно. Для этого найдите идентификатор видео (англ. ID) — символы после ?v= в адресе страницы видео: в адресе https://www.youtube.com/watch?v=ojULkWEUsPs это ojULkWEUsPs. В коротких ссылках вида https://youtu.be/ojULkWEUsPs идентификатор идёт сразу после косой черты. Добавьте его к адресу https://www.youtube.com/embed/ и укажите в атрибуте src.

Размеры проигрывателя задайте атрибутами width и height. Согласно официальной документации, окно просмотра встроенного проигрывателя должно быть не меньше 200 × 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью их показать. Для видео формата 16:9 YouTube рекомендует размер не меньше 480 × 270 пикселей; это рекомендация, а не обязательный минимум.

Проигрыватель YouTube на странице

Нажмите кнопку воспроизведения: ролик начнётся примерно с 17-й секунды, если YouTube доступен и автор разрешает встраивание. Для проверки на своём компьютере нажмите «Скачать HTML» и откройте файл через локальный веб-сервер по инструкции ниже. Ссылка под проигрывателем ведёт на страницу видео: она пригодится, если встроенный проигрыватель недоступен.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Размещение видео с YouTube</title>
  </head>
  <body>
    <h1>Размещение видео с YouTube</h1>
    <iframe width="480" height="270"
      src="https://www.youtube.com/embed/ojULkWEUsPs?start=17&amp;color=white"
      title="Baha Men — Who Let the Dogs Out"
      allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
      referrerpolicy="strict-origin-when-cross-origin"
      loading="lazy"></iframe>
    <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Смотреть видео на YouTube</a></p>
  </body>
</html>

В этом примере элементом <iframe> мы разместили на странице проигрыватель шириной 480 и высотой 270 пикселей. В атрибуте src указали адрес проигрывателя с идентификатором видео и добавили параметры, о которых пойдёт речь ниже. Атрибут loading="lazy" откладывает загрузку проигрывателя, пока он не окажется близко к видимой области, а ссылка рядом позволяет открыть видео на YouTube.

Как проверить проигрыватель на компьютере

Скачанный HTML открывайте через локальный веб-сервер, а не двойным кликом по файлу. Адрес страницы должен начинаться с http://localhost или http://127.0.0.1, а не file://. Для запуска сервера выполните инструкцию из предыдущего урока. Для самого ролика также требуется доступ к YouTube через интернет.

Параметры проигрывателя

Поведение проигрывателя настраивается параметрами в адресе. Первый параметр записывается после знака ?, каждый следующий — после знака &: …/embed/ID?start=17&color=white. Внутри атрибута HTML знак & можно записать как &amp;, как в примере выше. Часто используемые параметры (подробное описание доступно в официальной документации):

Параметры проигрывателя YouTube
Параметр Описание
start=17 Определяет, с какой секунды начнётся воспроизведение. Значение — положительное целое число.
end=60 Определяет секунду, на которой воспроизведение остановится.
autoplay=1 Видео запускается автоматически. Браузеры обычно разрешают автозапуск только без звука, поэтому вместе с ним указывают mute=1.
mute=1 Воспроизведение с отключённым звуком.
loop=1 Проигрыватель воспроизводит видео по кругу. Для одного видео параметр работает только вместе с playlist, в котором указан тот же идентификатор: loop=1&playlist=ojULkWEUsPs.
controls=0 Скрывает элементы управления проигрывателя.
cc_load_policy=1 Включает субтитры по умолчанию, если они есть у видео.
color=white Шкала просмотренной части становится белой; по умолчанию — красная.
Из истории: object, embed и адреса /v/

Раньше видео с YouTube размещали не во фрейме, а прямо на странице элементами <object> и <embed>. Проигрыватель тогда был роликом для внешнего плагина, а адреса вида https://www.youtube.com/v/ID вели к нему. Современные браузеры плагины не поддерживают, адреса /v/ больше не работают, а в официальной документации YouTube этого способа нет. Сейчас используйте <iframe>.

Элемент <object> — универсальный способ внедрения в страницу внешнего ресурса: изображения, документа PDF, веб-страницы или содержимого для плагина. Путь к ресурсу указывается атрибутом data, элемент парный. Он может содержать несколько элементов <param>, которые задавали параметры плагинов (сейчас <param> устарел). Внутри элемента можно поместить резервное содержимое, которое отображается, если ресурс не удалось показать.

Элемент <embed> определяет контейнер для внешнего ресурса, который браузер показывает собственными средствами или с помощью плагина. Он имеет синтаксис, схожий с элементом <img>: использует атрибут src и не требует закрывающего тега. Элемент не входил в стандарт HTML 4, но поддерживался браузерами; официальный статус он получил в HTML5. Спецификация HTML 4 рекомендовала для внешних файлов <object>, поэтому веб-мастера помещали <embed> внутрь <object> как запасной вариант для более широкого круга браузеров.

HTML
<!-- Устаревший способ: не используйте его для видео с YouTube -->
<object width="320" height="240" data="https://www.youtube.com/embed/ojULkWEUsPs"></object>
<embed width="320" height="240" src="https://www.youtube.com/embed/ojULkWEUsPs">

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Адрес видео — https://www.youtube.com/watch?v=abc123XYZ_0. Какой адрес указать в src фрейма?
Показать ответ

https://www.youtube.com/embed/abc123XYZ_0 — Идентификатор после ?v= добавляется к адресу https://www.youtube.com/embed/.

2. Видео должно начинаться с 30-й секунды и воспроизводиться без звука. Какой адрес верный?
Показать ответ

…/embed/ID?start=30&mute=1 — Первый параметр — после ?, следующий — после &.

3. Параметр loop=1 не повторяет видео. Чего не хватает?
Показать ответ

Параметра playlist с тем же идентификатором видео — Для одного видео повтор работает вместе с playlist=ID.

4. YouTube добавил в код title="YouTube video player". Что с ним лучше сделать?
Показать ответ

Заменить названием ролика — Название должно описывать содержимое фрейма, а общее «YouTube video player» этого не делает.

5. Чем заменить устаревший атрибут frameborder="0"?
Показать ответ

Средствами CSS — Рамку элемента задают и убирают свойствами CSS.

6. Скачанный HTML с правильным адресом видео открыт через file://. Проигрыватель сообщает об ошибке 153. Что проверить первым?
Показать ответ

Открыть страницу через локальный веб-сервер и проверить, что передача Referer не запрещена — YouTube требует идентификацию страницы. При открытии с диска Referer обычно отсутствует; referrerpolicy не устраняет это ограничение file://.

Задание

Тони просит добавить на сайт песню, под которую он гуляет. В файле index.html уже есть раздел «Песня для прогулок» со ссылкой на видео. После первого абзаца раздела добавьте проигрыватель YouTube:

  • размером 480 × 270 пикселей с понятным названием;
  • идентификатор видео возьмите из адреса ссылки в разделе;
  • видео должно начинаться с 17-й секунды;
  • загрузка проигрывателя откладывается до приближения к видимой области;
  • разрешите полноэкранный режим.

Ожидаемый результат: в разделе «Песня для прогулок» под первым абзацем редактор показывает сообщение со ссылкой https://www.youtube.com/embed/ojULkWEUsPs?start=17. Если адрес в сообщении другой, проверьте идентификатор и знак ? перед параметром.

Выполните задание

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body style="background-color: linen">
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption style="color: dimgray">Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2 style="color: #8B4513">Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule" style="color: #8B4513">Мой режим дня</h2>
        <table>
          <caption>Режим дня Тони</caption>
          <thead>
            <tr>
              <th scope="col">Время</th>
              <th scope="col">Будни</th>
              <th scope="col">Выходные</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">07:00</th>
              <td>Прогулка, 20 минут</td>
              <td>Сплю</td>
            </tr>
            <tr>
              <th scope="row">08:00</th>
              <td colspan="2">Завтрак</td>
            </tr>
            <tr>
              <th scope="row">13:00</th>
              <td>Жду хозяина и сплю</td>
              <td>Прогулка в парке, 1 час</td>
            </tr>
            <tr>
              <th scope="row">19:00</th>
              <td colspan="2">Ужин</td>
            </tr>
            <tr>
              <th scope="row">21:00</th>
              <td colspan="2">Вечерняя прогулка</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="progress" style="color: #8B4513">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks" style="color: #8B4513">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song" style="color: #8B4513">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2 style="color: #8B4513">Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer style="background-color: hsl(30, 50%, 90%)">
      <p style="text-align: center"><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/toys.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/walks.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Где гуляет Тони</title>
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Продолжите в VS Code

  1. Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
  2. Откройте index.html через локальный веб-сервер в обычном браузере при подключении к интернету и запустите видео.

Ожидаемый результат: проигрыватель YouTube показывает обложку видео, при доступности ролика воспроизведение начинается примерно с 17-й секунды, кнопка полноэкранного режима работает. При ошибке 153 проверьте запуск через веб-сервер. Если результат отличается и найти ошибку не получается, нажмите в редакторе выше «Показать решение» и сравните его со своим кодом.

Дополнительное задание: мои любимые видеозаписи

Используя полученные знания, составьте страницу «Мои любимые видеозаписи». В редакторе уже есть её разметка: шапка, основная часть с разделом и боковой панелью, подвал. Добавьте:

  1. в раздел — проигрыватель Baha Men — Who Let the Dogs Out (ojULkWEUsPs), а в боковую панель — Rick Astley — Never Gonna Give You Up (dQw4w9WgXcQ). Размер каждого — 480 × 270 пикселей: в разделе — после абзаца, в боковой панели — перед абзацем. Второе видео пусть начинается с 43-й секунды;
  2. атрибутами style — фон страницы #f8fafc и цвет текста #334155, фон шапки и подвала #e2e8f0, раздела — #f0f9ff, боковой панели — #eef2ff. Слово «Мои» в заголовке выделите цветом #0369a1, остальной заголовок — #1e293b;
  3. у элемента <main> — display: flex; flex-wrap: wrap, а у раздела и боковой панели — flex: 1 1 480px. Эти стили позволяют двум блокам делить место поровну, а на узком экране — переноситься друг под друга. У фреймов задайте max-width: 100%, чтобы они помещались в блоки. Высоту 270 пикселей сохраните.

Ожидаемый результат: на широком экране два блока стоят рядом, а на узком — друг под другом; в каждом — свой проигрыватель и подпись. Проверьте результат при уменьшении ширины окна. Как задавать цвета в шестнадцатеричной записи, вы можете повторить в уроке «HTML цвета», а о шапке, боковой панели и подвале — в уроке «Теги разметки страницы».

Соберите страницу с видео

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Мои любимые видеозаписи</title>
  </head>
  <body>
    <header>
      <h1>Мои любимые видеозаписи</h1>
    </header>
    <main>
      <section>
        <p>Baha Men — Who Let the Dogs Out</p>
      </section>
      <aside>
        <p>Rick Astley — Never Gonna Give You Up</p>
      </aside>
    </main>
    <footer>
      <p>Смотреть на YouTube: <a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men</a> и <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Rick Astley</a></p>
    </footer>
  </body>
</html>