Как вставить видео с YouTube на сайт: готовый код и адаптивный плеер

Скопируйте тег iframe ниже и замените VIDEO_ID идентификатором своего ролика. Проще всего взять готовый код у самого YouTube: как это сделать, показано в первом разделе. Дальше – как сделать плеер адаптивным, запустить ролик с нужной секунды и не замедлить страницу.

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Название ролика"
  allow="autoplay; encrypted-media"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

Обновлено: 2026-09-28 20:51:41 АР Алина Рыбакавтор материала

Как получить код вставки на YouTube

Код вставки YouTube выдаёт сам. Так вы не ошибётесь ни в идентификаторе ролика, ни в адресе плеера. Вся работа занимает меньше минуты.

1. Откройте страницу нужного ролика на youtube.com.
2. Под плеером нажмите «Поделиться» (в английском интерфейсе – Share).
3. В списке способов выберите «Встроить» (Embed).
4. Скопируйте код из открывшегося окна целиком – от <iframe до </iframe>.

В атрибуте src стоит адрес вида https://www.youtube.com/embed/ID. Идентификатор ролика – последняя часть этого адреса. Ссылки на ролики бывают разной формы, поэтому идентификатор лучше брать из этого кода, а не из адресной строки.

Чтобы ролик стартовал не с начала, в окне «Встроить» отметьте галочку «Начать с», если она там есть. Если её нет, допишите к адресу ?start= и время в секундах. Например, ?start=90 запускает ролик с 1:30. Остальные параметры разобраны в разделе про настройку плеера.

Если пункта «Встроить» нет

Соберите код сами по шаблону из начала статьи. Идентификатор в обычной ссылке на ролик стоит после v=: в адресе https://www.youtube.com/watch?v=VIDEO_ID это VIDEO_ID. Такой код работает так же, как скопированный.

Если вместо ролика плеер показывает ошибку, возможно, автор запретил встраивание. Такой ролик во встроенном плеере не играет, и код по шаблону не поможет. Что делать, описано в разделе про частые ошибки.

Если ролик ваш, включите флажок Allow embedding в YouTube Studio: он лежит в разделе Content на вкладке Details.

Как вставить iframe в HTML-страницу

Тег iframe показывает внутри вашей страницы плеер с другого сайта. Вставляйте его туда, где должно стоять видео: между абзацами или внутри блока с текстом. Отдельный скрипт или библиотека для этого не нужны.

1. Откройте файл страницы в редакторе кода или в админке сайта.
2. Найдите место внутри <body>, где нужен плеер.
3. Вставьте тег iframe целиком.
4. Сохраните файл и обновите страницу в браузере.

На месте кода появится плеер с кнопкой воспроизведения. Нажмите её и убедитесь, что ролик играет со звуком. Чтобы убрать видео, удалите тег iframe целиком.

Что означают атрибуты

• src – адрес плеера: https://www.youtube.com/embed/ и идентификатор ролика.
• title – название ролика. Оно нужно программам чтения с экрана: W3C описывает title у iframe как способ назвать содержимое (техника H64).
• allow – возможности, которые браузер даёт плееру. Значение autoplay; encrypted-media стоит в образце из справки YouTube.
• referrerpolicy – что браузер отправит в заголовке Referer. YouTube рекомендует политику strict-origin-when-cross-origin.
• allowfullscreen – включает кнопку полноэкранного режима.
• width и height – размеры плеера в пикселях. Для адаптивной вёрстки их заменит CSS.
• loading="lazy" – откладывает загрузку плеера, пока он далеко от экрана. О нём – в разделе про скорость страницы.

Атрибут frameborder из старых инструкций в HTML5 не нужен. Рамку убирает CSS: border: 0. Не копируйте frameborder="0" из чужих примеров.

Адаптивный плеер: как растянуть видео по ширине

Код из первого экрана задаёт плееру размер 560 на 315 пикселей. На экране телефона шириной 360 пикселей такая рамка вылезет за край страницы. Появится горизонтальная прокрутка, а часть видео уйдёт за экран.

Решение – задать плееру ширину в процентах и пропорции 16:9. Есть два приёма. Первый короче, второй запасной: он не зависит от поддержки aspect-ratio.

Способ 1: свойство aspect-ratio

Свойство aspect-ratio держит пропорции рамки, пока ширина меняется. С сентября 2021 года оно работает во всех основных браузерах: Chrome с версии 88, Firefox с 89, Safari с 15. Высота при этом должна быть auto.

<iframe class="youtube-player"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Название ролика"
  allow="autoplay; encrypted-media"
  referrerpolicy="strict-origin-when-cross-origin"
  allowfullscreen>
</iframe>

.youtube-player {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

Стили добавьте в файл CSS сайта. Атрибуты width и height из тега убраны: их заменяют стили. Уменьшите окно браузера: плеер сузится вместе с ним, а полос по бокам не появится.

Способ 2: контейнер с padding-top

Процентный отступ считается от ширины родителя. Отношение высоты к ширине у 16:9 равно 9 / 16 = 0,5625, то есть 56,25%. Контейнер получает такой отступ сверху, а iframe растягивается на весь контейнер.

<div class="video-box">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Название ролика"
    allowfullscreen>
  </iframe>
</div>

.video-box {
  position: relative;
  padding-top: 56.25%;
}
.video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Например, при ширине контейнера 800 пикселей его высота станет 450 пикселей. Ролик 16:9 займёт рамку без чёрных полос.

Настройка плеера параметрами ссылки

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

https://www.youtube.com/embed/VIDEO_ID?start=90&rel=0

Проверьте результат: откройте страницу и запустите ролик. Он должен стартовать с 1:30.

• start=90 – ролик стартует с 90-й секунды. Значение – положительное целое число секунд от начала ролика.
• autoplay=1 – автозапуск. Значения autoplay – 0 и 1, по умолчанию 0. Многие браузеры блокируют автозапуск при определённых условиях, и ролик может не стартовать. Как запустить его надёжнее – в подразделе про автозапуск без звука.
• controls=0 – скрывает элементы управления плеера. По умолчанию (controls=1) они показаны.
• loop=1&playlist=VIDEO_ID – повторяет ролик по кругу. Чтобы зациклить одиночный ролик, задайте loop=1 и укажите в playlist тот же идентификатор.
• rel=0 – меняет подборку в конце ролика. При rel=0 похожие ролики берутся с того же канала, а отключить их нельзя.

Автозапуск без звука

Браузеры не любят ролики, которые сами включают звук. Chrome всегда разрешает автозапуск видео без звука. MDN пишет, что блокировка автозапуска не касается видео с выключенным звуком. Поэтому у ролика без звука больше шансов стартовать сам.

Надёжный способ – метод mute() из IFrame Player API. Подключите скрипт API, включите его в адресе плеера параметром enablejsapi=1 и вызовите mute() и playVideo(), когда плеер будет готов.

<iframe id="player"
  src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1"
  title="Название ролика"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
  function onYouTubeIframeAPIReady() {
    new YT.Player('player', {
      events: {
        onReady: function (event) {
          event.target.mute();
          event.target.playVideo();
        }
      }
    });
  }
</script>

1. Замените VIDEO_ID идентификатором ролика.
2. Вставьте iframe туда, где нужен плеер, а скрипты – перед закрывающим тегом </body>.
3. Откройте страницу. Ролик должен стартовать сам и без звука. Звук включает кнопка громкости в плеере.

В адрес иногда дописывают и mute=1:

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

Гарантий у такого адреса нет, поэтому проверьте его на своей странице. Ролик должен стартовать без звука. Не стартовал – берите способ с API. Оставьте и кнопку play: браузер вправе заблокировать автозапуск.

Плейлист и канал целиком

Плейлист целиком встраивается адресом с параметрами listType и list.

https://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID

С каналом сложнее. Документация YouTube описывает адрес с listType=user_uploads и именем пользователя в list, но у канала может не быть имени пользователя. Надёжнее собрать нужные ролики в плейлист на самом канале и встроить этот плейлист.

Вставка видео в WordPress, Tilda и другие CMS

В системах управления сайтом чаще всего не нужно копировать iframe: у них есть свои блоки для видео. Разберём две самые распространённые системы и общий способ для остальных.

WordPress: ссылка отдельной строкой

Самый короткий путь подходит новичку. WordPress сам превращает ссылку на ролик в плеер, если она стоит на отдельной строке и не оформлена как гиперссылка.

1. Откройте запись или страницу в редакторе.
2. Поставьте курсор на пустую строку и вставьте обычную ссылку на ролик, например https://www.youtube.com/watch?v=VIDEO_ID. Не добавляйте к ней текст в том же абзаце.
3. Сохраните запись и откройте её на сайте. На месте ссылки должен появиться плеер.

WordPress: блок YouTube

1. В редакторе блоков нажмите значок «+» (Block Inserter) в верхней панели или рядом с пустым блоком.
2. Введите в поиске слово YouTube и выберите блок с таким названием.
3. Вставьте в поле ссылку на ролик.
4. Нажмите кнопку встраивания – в английском интерфейсе она называется Embed. В редакторе появится предпросмотр плеера.

Не нашли блок – вставьте iframe в блок Custom HTML: введите в поиске блоков слово HTML. Учтите роль пользователя: у роли Contributor нет права unfiltered_html, которое позволяет публиковать произвольный HTML-код и JavaScript. Если после сохранения плеера нет на странице, проверьте роль. Шорткод ссылка тоже работает, но в блоках он не нужен.

Tilda

Добавьте на страницу блок из категории «Видео». Выберите подходящий блок, перейдите в «Контент» блока и вставьте ссылку на ролик. Опубликуйте страницу и проверьте, что плеер играет. Ролик должен быть публичным, а автор не должен запрещать встраивание.

1С-Битрикс, Joomla и остальные

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

Если плеер пропал, редактор мог вырезать тег iframe. Тогда вставьте код в шаблон страницы или в блок с произвольным HTML. Прежде чем ставить плагин для видео, проверьте дату его последнего обновления.

Встроенное видео и скорость страницы

Встроенный плеер тянет тяжёлые скрипты ещё до нажатия на play. Lighthouse оценивает вес плеера в 540 КБ, а вес фасада – в 3 КБ. Фасад – статичный элемент, который выглядит как встроенный плеер, но не работает и потому почти не нагружает страницу.

Ленивая загрузка: loading="lazy"

Самый простой приём – добавить атрибут loading="lazy" к iframe. Браузер откладывает загрузку iframe, пока тот не приблизится к области просмотра. Не ставьте его на плеер в первом экране: он должен загрузиться сразу.

<iframe loading="lazy"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Название ролика"
  allowfullscreen>
</iframe>

Фасад: картинка вместо плеера до клика

Фасад идёт дальше ленивой загрузки. Вместо плеера страница показывает картинку с кнопкой, а iframe создаётся после клика.

Обложку сделайте сами: сохраните скриншот кадра из ролика или подготовьте свою картинку с пропорциями 16:9. Назовите файл preview.jpg и положите рядом со страницей. Значок play рисует CSS ниже, отдельная картинка для него не нужна.

<div class="yt-facade" data-id="VIDEO_ID">
  <button type="button" aria-label="Смотреть видео">
    <img src="preview.jpg" alt="Название ролика" loading="lazy">
  </button>
</div>

document.querySelectorAll('.yt-facade').forEach(function (box) {
  box.querySelector('button').addEventListener('click', function () {
    var frame = document.createElement('iframe');
    frame.src = 'https://www.youtube.com/embed/' + box.dataset.id + '?autoplay=1';
    frame.title = 'Видео с YouTube';
    frame.allow = 'autoplay; encrypted-media';
    frame.referrerPolicy = 'strict-origin-when-cross-origin';
    frame.allowFullscreen = true;
    box.replaceChildren(frame);
  });
});

.yt-facade {
  aspect-ratio: 16 / 9;
  max-width: 800px;
  background: #000;
}
.yt-facade button,
.yt-facade iframe {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}
.yt-facade button {
  position: relative;
  background: none;
  cursor: pointer;
}
.yt-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-facade button::after {
  content: "\25B6";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

Правило object-fit: cover вписывает обложку любого размера в рамку 16:9. Клик – действие посетителя, поэтому autoplay=1 после него уместен. Скрипт подключите перед закрывающим тегом </body>. Проверьте фасад: до клика во вкладке «Сеть» инструментов разработчика браузера запросов к YouTube быть не должно.

Приватность и права на контент

Режим повышенной конфиденциальности

Замените в атрибуте src домен www.youtube.com на www.youtube-nocookie.com – и плеер работает в режиме Privacy Enhanced Mode. Просмотр ролика в этом режиме не используется для персонализации YouTube – ни в плеере, ни в последующем просмотре YouTube. Название домена читайте как название, а не как гарантию: справка Google описывает режим только через персонализацию.

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Название ролика"
  allowfullscreen>
</iframe>

Можно ли встраивать чужие ролики

Условия YouTube разрешают показывать ролики встроенным плеером. Те же условия запрещают скачивать и распространять ролики, если сервис или YouTube письменно этого не разрешили. Поэтому встроить чужое видео можно, а скачать и залить к себе – нет.

Автор ролика может снять флажок Allow embedding в YouTube Studio. Тогда ролик перестанет играть на чужих сайтах. Как это выглядит и что делать, описано в разделе про частые ошибки.

Реклама во встроенном ролике приносит доход только YouTube и владельцу видео. Владелец сайта, где ролик встроен, доли не получает.

Когда YouTube не нужен

Тег <video> проигрывает файл с вашего сервера. Плеера YouTube здесь нет, зато хранение и трафик оплачиваете вы. Подходит для короткого собственного ролика.

<video controls width="640" poster="preview.jpg">
  <source src="clip.mp4" type="video/mp4">
</video>

Частые ошибки при встраивании видео

Ролик не отображается

Вместо ролика плеер сообщает, что воспроизведение на других сайтах отключено? Точная формулировка может отличаться, а смысл один: автор запретил встраивание этого ролика. Выберите другой ролик или попросите автора включить встраивание. Откройте ролик на youtube.com: если он не играет и там, вставка не поможет.

Разработчикам, которые подключают IFrame Player API, плеер отдаёт коды ошибок в событии onError. Ошибка 100 означает, что ролик удалён или закрыт для просмотра. Ошибки 101 и 150 означают, что владелец ролика запретил воспроизведение во встроенных плеерах. Посетитель страницы эти коды не видит: он видит только сообщение в плеере.

Ошибка 153

Ошибка 153 означает, что в запросе к плееру нет заголовка Referer. В документации YouTube ошибка 153 появилась 9 июля 2025 года. Проверьте, что в iframe есть referrerpolicy="strict-origin-when-cross-origin", а сайт или плагин безопасности не запрещает отправку Referer. После правки обновите страницу.

Плеер вылезает за границы контейнера

Причина почти всегда в фиксированных width="560" и height="315". Уберите их и примените один из приёмов из раздела про адаптивный плеер. Если плеер всё равно шире колонки, проверьте, нет ли у родительского блока фиксированной ширины в пикселях.

Чёрные полосы у вертикального ролика

Чёрные полосы по бокам появляются, когда пропорции рамки не совпадают с пропорциями ролика. Для вертикального ролика задайте рамке aspect-ratio: 9 / 16 и ограничьте ширину, например max-width: 360px. Плеер сохранит пропорции, а на телефоне займёт узкую колонку.

Ролик не запускается сам

Если autoplay=1 не срабатывает, скорее всего, браузер заблокировал автозапуск со звуком. Запустите ролик без звука способом из подраздела про автозапуск. Не сработало и это – оставьте посетителю кнопку play: это надёжнее.

Какой способ выбрать под задачу

Выбор зависит от того, сколько роликов на странице и как быстро она должна грузиться. Сравнение ниже покажет, где какой приём уместен.

Один ролик на странице – берите iframe с aspect-ratio. Несколько роликов – ставьте фасад. Сайт на WordPress или Tilda – начинайте со встроенного блока, а плеер к нему подгоняйте стилями. Фасад добавляйте, когда PageSpeed Insights покажет, что плеер тормозит страницу.