Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как встроить видео с YouTube, карту или другой сайт

Короткий ответ

Вставьте <iframe> с адресом страницы. Ему нужны размеры и title для программ чтения с экрана:

<iframe src="https://example.com" title="Example Domain" width="320" height="180" style="border: 1px solid silver;"></iframe>

Видео и карты

YouTube, сервисы карт и соцсети дают готовый код: кнопка «Поделиться» → «Встроить». Это и есть <iframe> с адресом встраиваемой страницы — у YouTube в нём есть /embed/ и номер ролика. Скопируйте его, а затем поправьте размеры и добавьте title и loading="lazy", если их нет.

Ленивая загрузка

Встроенный плеер или карта тянут много скриптов. loading="lazy" откладывает загрузку, пока посетитель не прокрутит до них:

<p style="height: 260px;">Scroll down ↓</p>
<iframe src="https://example.com" title="Example Domain" width="320" height="180" loading="lazy"></iframe>

Ограничить встроенную страницу

Атрибут sandbox без значения запрещает внутри iframe скрипты, формы и всплывающие окна. Нужные возможности перечисляют в нём словами, например sandbox="allow-scripts".

Частая ошибка

В src ставят обычный адрес ролика или страницы, например ссылку из адресной строки YouTube. Большинство крупных сайтов запрещают показывать себя во фрейме, и вместо содержимого появляется ошибка. Берите адрес из кода «Встроить» — у YouTube он содержит /embed/.

Функции из этого ответа

  • <iframe> — Встраивает другую страницу внутрь текущей: карту, видео, виджет.
  • title — Дополнительная информация об элементе; показывается подсказкой при наведении мыши.
  • loading — Отложенная загрузка картинок и фреймов, которые пока не видны.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.