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

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

Вставьте ссылку на YouTube и получите код плеера, который тянется под любой экран и быстро грузится.

Соотношение сторон

Сначала загружается превью, а плеер YouTube — только по клику. Страницы работают намного быстрее.

Настройки
px
Стиль кода
Дополнительно

Только для очень старых браузеров или CMS, которые удаляют стиль aspect-ratio.

Предпросмотр
Вставьте ссылку на YouTube, чтобы увидеть превью

Предпросмотр загружается с YouTube. Если в нём написано «Video unavailable», владелец, возможно, отключил встраивание.

Код

    

Работает в браузере: данные никуда не загружаются.

Как пользоваться

  1. Вставьте ссылку на YouTube или 11-символьный ID видео в поле ввода.
  2. Выберите нужное «Соотношение сторон».
  3. Включите «Загрузка по клику (облегчённый)», чтобы плеер загружался только после нажатия на миниатюру.
  4. Нажмите «Копировать код» и вставьте полученный код в HTML страницы.

Примеры

Видео в статье с началом на 1:30

Исходные данные
https://youtu.be/dQw4w9WgXcQ?si=XyZ&t=1m30s
Результат
<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=90&amp;rel=0&amp;playsinline=1" srcdoc="&lt;style&gt;*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}img{height:100%;object-fit:cover}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:#fff;text-shadow:0 0 .5em #000}&lt;/style&gt;&lt;a href='https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=90&amp;amp;autoplay=1&amp;amp;rel=0&amp;amp;playsinline=1' aria-label='Play: YouTube video player'&gt;&lt;img src='https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg' alt='YouTube video player' loading='lazy'&gt;&lt;span&gt;▶&lt;/span&gt;&lt;/a&gt;" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;max-width:800px;margin:0 auto;"></iframe>

Вертикальный Shorts на сайте

Исходные данные
https://www.youtube.com/shorts/dQw4w9WgXcQ
Результат
<iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&amp;playsinline=1" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="display:block;width:100%;height:auto;aspect-ratio:9/16;border:0;max-width:360px;margin:0 auto;"></iframe>

Видео для старой CMS

Исходные данные
https://www.youtube.com/watch?v=dQw4w9WgXcQ
Результат
<div style="max-width:800px;margin:0 auto;"><div style="position:relative;width:100%;padding-bottom:75%;height:0;overflow:hidden;"><iframe src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0&amp;playsinline=1" title="YouTube video player" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;"></iframe></div></div>

Частые вопросы

Как начать встроенное видео с нужного момента?

Вставьте ссылку с параметром t=90 или t=1m30s либо укажите «Время начала»: в коде появится start=90, то есть старт с 1:30. «Время окончания» должно быть позже времени начала, иначе конец фрагмента будет отброшен.

Можно ли встроить плейлист YouTube на сайт?

Вставьте ссылку на плейлист с параметром list=. Для ссылки без отдельного видео опция «Загрузка по клику (облегчённый)» недоступна.

Как включить автовоспроизведение видео на сайте?

Отключите «Загрузка по клику (облегчённый)» и включите «Автовоспроизведение при загрузке страницы». Генератор автоматически включит «Без звука».

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

Опция «Режим повышенной конфиденциальности (youtube-nocookie.com)» заменяет в коде домен плеера на youtube-nocookie.com. Обращения к YouTube она не отключает: миниатюра загружается с i.ytimg.com сразу, а плеер при включённой «Загрузка по клику (облегчённый)» — только по клику. Если эта опция выключена, плеер загружается сразу, без ожидания клика.