Тег embed в HTML - как встраивать внешние ресурсы на страницу

Введение

Тег embed в HTML позволяет встроить во страницу внешний ресурс, который браузер должен отобразить с помощью встроенного плагина или собственного механизма. Исторически этот тег использовался в основном для Flash, Java-апплетов и других плагинов. Сейчас его роль изменилась, но он по-прежнему встречается в реальных проектах, особенно при встраивании PDF, некоторых видеоформатов и специализированного контента.

Давайте разберемся, как работает embed, какие у него особенности, чем он отличается от iframe и object, и в каких случаях его все-таки имеет смысл применять.

Общее представление о теге embed

Основной синтаксис

Вот минимальный пример использования embed:

<!-- Встраиваем внешний ресурс (например, PDF-файл) -->
<embed src="files/manual.pdf" type="application/pdf">

Комментарий:

• src — путь к внешнему ресурсу
• type — MIME-тип ресурса, который помогает браузеру понять, как его обрабатывать

Смотрите, я покажу вам чуть более полный вариант:

<!-- Пример встраивания PDF с заданными размерами -->
<embed 
  src="files/manual.pdf"        <!-- Путь к PDF-файлу -->
  type="application/pdf"        <!-- MIME-тип ресурса -->
  width="800"                   <!-- Ширина области отображения -->
  height="600">                 <!-- Высота области отображения -->

Ключевые особенности embed

• Это пустой (void) тег — у него нет закрывающего тега </embed>.
• Внутрь embed нельзя поместить запасной контент на случай, если ресурс не загрузится.
• Браузер просто пытается отрендерить указанный ресурс, используя:
  • собственную поддержку формата, или
  • установленный плагин/расширение.
• Поддержка и поведение могут отличаться от браузера к браузеру.

Из-за этих особенностей embed считается менее гибким, чем object или iframe, но при этом он часто работает «из коробки» для некоторых форматов (например, PDF в современных браузерах).

Где используется тег embed сегодня

Типичные сценарии использования

На практике вы чаще всего встретите embed в таких задачах:

• Встраивание PDF-документов прямо в страницу
• Подключение медиафайлов специфичных форматов (например, некоторых типов видео или аудио, если их обрабатывает плагин)
• Встраивание специализированных вьюеров и панелей (например, 3D-визуализаторов, если провайдер отдает код с embed)

Давайте разберемся на примере PDF — это наиболее актуальный сценарий.

<!-- Встраиваем PDF-документ внутрь страницы -->
<embed 
  src="/docs/report-2024.pdf"           <!-- PDF-файл -->
  type="application/pdf"                <!-- Явно указываем тип -->
  width="100%"                          <!-- Занимаем всю ширину родителя -->
  height="600">                         <!-- Фиксированная высота области -->

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

embed и современные медиа-теги

Для аудио и видео в современных проектах чаще используют:

• audio — для звука
• video — для видео

Теоретически можно встроить медиаресурс через embed, например:

<!-- Пример встраивания видеофайла через embed (не рекомендуется) -->
<embed 
  src="/media/promo.mp4"          <!-- Видеофайл -->
  type="video/mp4"                <!-- MIME-тип видео -->
  width="640"
  height="360">

Но лучше использовать тег video, потому что:

• он дает больше контроля через атрибуты (controls, autoplay, muted, loop и др.)
• у него есть доступный fallback-контент
• он лучше поддерживается стандартами HTML5

Поэтому embed обычно оставляют для более специфичных задач.

Основные атрибуты тега embed

Теперь давайте посмотрим, какие атрибуты вы можете использовать с embed. Я разделю их на обязательные и часто применяемые.

Атрибут src

src — основной атрибут, без которого embed не имеет смысла. Здесь вы указываете путь к ресурсу.

<embed src="files/presentation.pdf" type="application/pdf">

Рекомендации:

• Используйте относительные пути внутри одного сайта:
  • src="/docs/manual.pdf"
  • src="docs/manual.pdf"
• Для внешних ресурсов — абсолютные URL:
  • src="https://example.com/viewer/content.pdf"

Атрибут type (MIME-тип)

type помогает браузеру понять, как трактовать ресурс.

Типичные значения:

• Для PDF:
  • type="application/pdf"
• Для MP4-видео:
  • type="video/mp4"
• Для изображений (если вдруг вы решили использовать embed):
  • type="image/png"
  • type="image/jpeg"

Пример:

<!-- Встраиваем PDF с явным MIME-типом -->
<embed 
  src="/docs/specification.pdf"
  type="application/pdf">

Браузеры часто могут определить тип автоматически по заголовкам сервера и расширению файла, но указание type повышает предсказуемость поведения и делает код более понятным.

Атрибуты width и height

Эти атрибуты задают размеры области, в которой будет отображаться встраиваемый ресурс.

<!-- Фиксированные размеры в пикселях -->
<embed 
  src="/docs/manual.pdf"
  type="application/pdf"
  width="800"
  height="600">

Особенности:

• В HTML-атрибутах width и height обычно указываются без единиц измерения — по умолчанию это пиксели.
• В CSS вы можете использовать любые допустимые единицы (px, %, vh и т. д.).

Например, вы можете комбинировать HTML и CSS:

<!-- Пример с классом и размерами по CSS -->
<embed 
  src="/docs/manual.pdf"
  type="application/pdf"
  class="embedded-pdf">  <!-- Применяем стили по классу -->

/* Здесь мы управляем размерами через CSS */
.embedded-pdf {
  width: 100%;      /* Занять всю ширину контейнера */
  height: 80vh;     /* Высота — 80% от высоты окна браузера */
  border: 1px solid #ccc;  /* Добавляем рамку для визуального разделения */
}

Комментарий к CSS:

• Так проще адаптировать отображение под разные устройства.
• Использование vh/vw помогает сделать интерфейс более отзывчивым.

Атрибуты title и role для доступности

Embed сам по себе почти не дает информации для вспомогательных технологий. Поэтому стоит добавлять атрибут title и, при необходимости, role.

<!-- Встраиваем отчет с описанием для ассистивных технологий -->
<embed 
  src="/docs/financial-report-2024.pdf"
  type="application/pdf"
  width="100%"
  height="600"
  title="Финансовый отчет за 2024 год"  <!-- Описание содержимого -->
  role="document">                      <!-- Семантическая роль -->

Зачем это нужно:

• title помогает пользователям экранных читалок понять, что находится в этой области.
• role уточняет, какого типа контент вы встраиваете (document, application и др.).

Кастомные data-атрибуты

Вы можете использовать data-атрибуты, если вам нужно хранить дополнительную информацию для JavaScript.

<!-- Встраиваем PDF с идентификатором документа -->
<embed
  src="/docs/manual.pdf"
  type="application/pdf"
  data-doc-id="manual-2024"     <!-- Кастомный идентификатор -->
  data-category="docs">         <!-- Категория документа -->

А затем в JavaScript:

// Находим все embed-элементы c data-doc-id
const embeds = document.querySelectorAll('embed[data-doc-id]');

embeds.forEach((el) => {
  // Здесь мы читаем кастомные атрибуты
  const docId = el.dataset.docId;        // Значение data-doc-id
  const category = el.dataset.category;  // Значение data-category

  // Дальше вы можете использовать эти данные по своему сценарию
  // Например, отправить статистику или логирование
  console.log('Встроенный документ', docId, 'категории', category);
});

Комментарий:

• data-атрибуты — стандартный способ «прикрепить» данные к элементам без нарушения семантики HTML.
• Это удобный мост между версткой и JavaScript-логикой.

Встраивание PDF с помощью embed

Базовый пример

Сейчас PDF — главный «живой» сценарий использования embed. Покажу вам типичный код:

<!-- Встраиваем PDF с базовыми настройками -->
<embed
  src="/docs/guide.pdf"           <!-- Путь к PDF-файлу -->
  type="application/pdf"          <!-- MIME-тип PDF -->
  width="100%"                    <!-- Ширина по контейнеру -->
  height="700"                    <!-- Высота области просмотра -->
  title="Руководство пользователя">

Что произойдет:

• В современных браузерах откроется встроенный PDF-вьюер.
• Пользователь сможет:
  • листать страницы
  • масштабировать документ
  • открывать его в отдельной вкладке
  • сохранять файл

При этом весь просмотр будет происходить прямо внутри вашей страницы.

Контролируем высоту через CSS

Если вы хотите, чтобы высота подстраивалась под размер окна, удобно использовать vh:

<!-- Пример адаптивного окна просмотра PDF -->
<embed
  src="/docs/guide.pdf"
  type="application/pdf"
  class="pdf-viewer">

/* Адаптивный просмотрщик PDF */
.pdf-viewer {
  width: 100%;        /* Используем всю доступную ширину */
  height: 80vh;       /* Высота — 80% от окна браузера */
  border: none;       /* Убираем рамку браузера, если она появляется */
}

Теперь давайте посмотрим, как можно добавить fallback на случай, если PDF не поддерживается.

Обход ограничений: имитация fallback для embed

У тега embed нет встроенного механизма резервного содержимого (в отличие от object). Но вы можете реализовать свое поведение с помощью JavaScript.

Идея подхода

1. Вы выводите embed.
2. Параллельно добавляете блок с ссылкой на файл и уведомлением.
3. Скрываете его, если загрузка прошла успешно.
4. Показываете, если появились признаки ошибки.

Вот пример реализации:

<div class="pdf-container">
  <!-- Сам embed -->
  <embed
    src="/docs/guide.pdf"
    type="application/pdf"
    class="pdf-viewer"
    id="user-guide">

  <!-- Резервный блок, который покажется при ошибке -->
  <div class="pdf-fallback" id="user-guide-fallback">
    <!-- Текстовое сообщение для пользователя -->
    <p>Не удалось отобразить PDF-документ.</p>
    <!-- Ссылка на скачивание файла -->
    <a href="/docs/guide.pdf" download>Скачать PDF-файл</a>
  </div>
</div>

/* Изначально скрываем fallback */
.pdf-fallback {
  display: none;  /* Спрятать до тех пор, пока не понадобится */
}

/* Стили для контейнера PDF (по желанию) */
.pdf-container {
  border: 1px solid #ddd;  /* Визуальное разделение области */
  padding: 8px;
}

// Функция, которая пытается обнаружить проблемы с загрузкой embed
function setupEmbedFallback(embedId, fallbackId) {
  const embed = document.getElementById(embedId);
  const fallback = document.getElementById(fallbackId);

  if (!embed || !fallback) {
    // Если элементы не найдены — ничего не делаем
    return;
  }

  // Простейшая проверка — по событию load
  embed.addEventListener('load', () => {
    // Если ресурс загрузился, скрываем fallback на всякий случай
    fallback.style.display = 'none';
  });

  // В некоторых браузерах у embed нет onerror
  // Поэтому мы можем использовать таймер как запасной вариант
  setTimeout(() => {
    // Если область отображения не имеет размеров
    // можно предположить, что что-то пошло не так
    if (embed.clientHeight === 0) {
      // Показываем резервное содержимое
      fallback.style.display = 'block';
    }
  }, 2000); // Ждем 2 секунды после загрузки страницы
}

// Инициализируем логику после загрузки документа
document.addEventListener('DOMContentLoaded', () => {
  setupEmbedFallback('user-guide', 'user-guide-fallback');
});

Обратите внимание:

• Это не идеальный и не универсальный способ, но в простых сценариях он помогает.
• Поведение embed с точки зрения событий очень непоследовательно между браузерами, поэтому полноценный контроль сложен.

embed против iframe и object

Теперь давайте сравним embed с двумя родственными тегами — iframe и object. Это одна из частых точек путаницы.

Сравнение с iframe

iframe — это по сути встроенное окно с отдельным документом (мини-браузер внутри страницы).

Основные отличия:

• iframe:
  • загружает полноценную HTML-страницу
  • внутри может быть любой HTML-контент
  • вы можете взаимодействовать с ним через JavaScript (с ограничениями по CORS)
• embed:
  • загружает ресурс как единый объект (PDF, видео, плагин)
  • у него нет внутреннего DOM, с которым вы можете работать напрямую
  • поведение сильно зависит от формата и браузера

Пример с iframe:

<!-- Встраиваем внешнюю HTML-страницу через iframe -->
<iframe
  src="https://example.com/help"
  width="100%"
  height="600"
  title="Раздел помощи">
</iframe>

Когда лучше iframe:

• когда нужно встроить другую веб-страницу
• когда нужен JavaScript-взаимодействие с содержимым (если это ваш домен)
• когда нужно гибко управлять политиками безопасности (sandbox, referrerpolicy и др.)

Когда лучше embed:

• когда вы хотите просто показать PDF или другой документ как отдельный объект
• когда содержимое — не HTML (например, специализированный вьюер)

Сравнение с object

object исторически задумывался как универсальный контейнер для медиаконтента, плагинов и любых внешних ресурсов.

Пример:

<!-- Встраиваем PDF через object с fallback содержимым -->
<object
  data="/docs/manual.pdf"
  type="application/pdf"
  width="100%"
  height="600">
  <!-- Этот текст покажется, если PDF не отобразится -->
  <p>Ваш браузер не поддерживает просмотр PDF. 
     <a href="/docs/manual.pdf">Скачайте файл</a>.</p>
</object>

Главное отличие:

• object поддерживает вложенный контент как fallback.
• embed — нет, он всегда самозакрывающийся и fallback внутрь него положить нельзя.

object удобнее, если вам нужно:

• всегда иметь запасной вариант (текст + ссылка)
• сохранить семантику и улучшить доступность

embed проще, когда:

• вы не хотите усложнять разметку
• вас устраивает поведение браузера «по умолчанию»
• вы ориентируетесь на современные браузеры с поддержкой нужного формата (например, PDF)

Взаимодействие с embed через JavaScript

Доступ к элементу embed

Вы можете получить ссылку на элемент embed как на обычный DOM-узел и менять его атрибуты.

<!-- Размещаем embed с идентификатором -->
<embed
  id="doc-viewer"
  src="/docs/guide-v1.pdf"
  type="application/pdf"
  width="100%"
  height="600">

// Находим элемент по id
const viewer = document.getElementById('doc-viewer');

// Меняем ресурс по событию (например, по клику на кнопку)
function switchToNewVersion() {
  // Переключаем src на новый документ
  viewer.src = '/docs/guide-v2.pdf'; // Здесь мы подставляем другой PDF-файл
}

// Пример: вешаем обработчик на кнопку
const btn = document.getElementById('switch-doc-btn');
if (btn) {
  btn.addEventListener('click', switchToNewVersion);
}

<!-- Кнопка для переключения документа -->
<button id="switch-doc-btn">Показать новую версию документа</button>

Комментарий:

• Вы можете динамически менять src, как у обычного изображения.
• При смене src браузер повторно загрузит ресурс.

Ограничения на доступ к содержимому

Важный момент: для embed практически нет стандартного способа «залезть внутрь» встроенного объекта (например, в PDF) и управлять его содержимым так же, как DOM-деревом HTML.

Вы не можете стандартными средствами:

• прочитать текст из PDF, встроенного через embed
• программно пролистать его страницы встроенными методами PDF-вьюера
• менять настройки отображения PDF-вьюера на уровне стандартного API HTML

Иногда провайдеры сторонних вьюеров (например, 3D или карт) предоставляют свои JavaScript-API. Тогда взаимодействие идет не через сам embed, а через глобальные объекты или события, которые добавляет этот провайдер.

Стилизация и встраивание в адаптивный дизайн

Базовая стилизация через CSS

Вы можете стилизовать embed как блочный или строчно-блочный элемент.

<!-- Несколько встроенных документов -->
<div class="docs-grid">
  <embed src="/docs/doc1.pdf" type="application/pdf" class="doc-item">
  <embed src="/docs/doc2.pdf" type="application/pdf" class="doc-item">
</div>

/* Сетка документов */
.docs-grid {
  display: grid;                    /* Включаем CSS Grid */
  grid-template-columns: 1fr 1fr;   /* Две колонки одинаковой ширины */
  gap: 16px;                        /* Отступы между ячейками */
}

/* Каждый встроенный документ */
.doc-item {
  width: 100%;      /* Занимает всю ширину ячейки */
  height: 400px;    /* Фиксированная высота */
  border: 1px solid #ccc;  /* Легкая рамка */
  box-sizing: border-box;  /* Включаем рамку в расчет ширины */
}

Так вы можете строить, например, «галерею документов» или набор встраиваемых ресурсов.

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

Если вам нужно, чтобы встраиваемый ресурс сохранял определенное соотношение сторон (актуально, например, для видео или презентаций), можно использовать подход с «резиновым контейнером».

Давайте посмотрим, как это сделать.

<div class="embed-wrapper">
  <embed
    src="/docs/presentation.pdf"
    type="application/pdf"
    class="embed-content">
</div>

/* Обертка создает соотношение сторон 16:9 */
.embed-wrapper {
  position: relative;          /* Базис для абсолютного позиционирования */
  width: 100%;                 /* Растягиваем по ширине родителя */
  padding-bottom: 56.25%;      /* 9 / 16 * 100% -> для 16:9 */
  height: 0;                   /* Высота контролируется через padding-bottom */
  overflow: hidden;            /* Скрываем все, что выходит за пределы */
}

/* Сам embed растягиваем под размер обертки */
.embed-content {
  position: absolute;          /* Абсолютное позиционирование внутри wrapper */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;                /* Заполняем wrapper полностью */
  border: none;
}

Как это работает:

• Обертка за счет padding-bottom задает нужное соотношение сторон.
• embed растягивается ровно под размер обертки.
• При изменении ширины окна высота адаптируется автоматически, сохраняя пропорции.

Безопасность и ограничения

Встраивание с других доменов

Когда вы встраиваете ресурс с внешнего домена:

<embed 
  src="https://external-site.com/viewer/document.pdf"
  type="application/pdf"
  width="100%"
  height="600">

нужно учитывать:

• Владелец внешнего ресурса может ограничивать доступ и встраивание.
• Некоторые сервера отдают заголовки, запрещающие встраивание (аналог X-Frame-Options и Content-Security-Policy для iframe). Для embed ситуация менее формализована, но вьюер может просто отказываться отображаться.
• У вас практически нет контроля над содержимым, которое показывается пользователю.

Политики безопасности содержимого (CSP)

Если вы используете строгие Content-Security-Policy на сайте, может потребоваться явно разрешить типы или источники, которые вы встраиваете.

Например, для PDF с вашего домена:

Content-Security-Policy: object-src 'self'; frame-ancestors 'self';

Комментарий:

• object-src влияет и на ряд встраиваемых ресурсов.
• Конкретное влияние на embed зависит от браузера и настроек, но при строгих CSP лучше проверить поведение.

Рекомендации по использованию embed

Когда embed оправдан

Использовать embed разумно, когда:

• вам нужно быстро встроить PDF-документ, и вы:
  • не хотите делать отдельную страницу-вьюер
  • не хотите подключать тяжелые JS-библиотеки
• у вас есть специфичный формат или внешний плагин, и поставщик дает инструкцию с embed
• вы встраиваете внутренние корпоративные отчетные формы или специальные вьюеры, где embed — стандарт

Когда лучше выбрать альтернативу

Подумайте об альтернативных тегах, если:

• вы показываете видео/аудио:
  • лучше использовать video и audio
• вам нужно встроить HTML-страницу или веб-приложение:
  • лучше использовать iframe
• вам жизненно важен fallback-контент и доступность:
  • стоит рассмотреть object с вложенным текстом и ссылками
• нужно глубоко управлять содержимым:
  • embed почти не дает API, лучше использовать HTML- или JS-решения

Поддержка браузеров

Поддержка самого тега embed есть практически во всех современных браузерах. Но реальная проблема в том, как каждый браузер обрабатывает конкретный тип ресурса:

• PDF:
  • большинство современных браузеров имеют встроенные вьюеры
  • в некоторых конфигурациях (особенно в старых корп. средах) отрисовка может зависеть от плагинов
• Специфичные форматы:
  • могут требовать установленных плагинов или расширений
  • могут не отображаться вовсе, если нет соответствующей поддержки

Поэтому всегда полезно:

• протестировать embed на целевых браузерах и устройствах
• предусмотреть альтернативу (хотя бы ссылку на скачивание файла)

Заключение

Тег embed в HTML — это простой способ встроить во страницу внешний ресурс, чаще всего PDF-документы или специализированные форматы. Он не такой гибкий и управляемый, как iframe или object, но удобен своей простотой: вы указываете src, type и размеры — и браузер делает остальное, если умеет работать с этим форматом.

Ключевые моменты, которые стоит запомнить:

• embed — пустой тег, без встроенного fallback.
• Основные атрибуты: src, type, width, height, дополнительный title для доступности.
• Для аудио и видео есть более подходящие теги — audio и video.
• Для встраивания HTML-страниц лучше использовать iframe.
• Для ситуаций, где нужен резервный контент, полезен object.
• Взаимодействие с содержимым embed через JavaScript сильно ограничено.

Если вы используете embed, постарайтесь дополнить его хотя бы ссылкой на исходный файл (через отдельный элемент или JavaScript) и продумать, как поведет себя интерфейс в браузерах без поддержки нужного формата.

Частозадаваемые технические вопросы по теме статьи

Как сделать так чтобы embed занимал всю высоту окна браузера без прокрутки страницы

Можно использовать единицы vh и обнулить отступы у body и html.

html,
body {
  margin: 0;      /* Убираем внешние отступы */
  padding: 0;     /* Убираем внутренние отступы */
  height: 100%;   /* Высота на всю страницу */
}

.fullscreen-embed {
  width: 100%;    /* Полная ширина */
  height: 100vh;  /* Высота = 100% высоты окна */
  border: none;
}

<embed
  src="/docs/manual.pdf"
  type="application/pdf"
  class="fullscreen-embed">

Как программно узнать загрузился ли ресурс внутри embed

Универсального надежного события нет, но можно использовать эвристики. Один из подходов — проверять размеры clientWidth/clientHeight с таймером.

function checkEmbedLoaded(el, callback) {
  const start = Date.now();

  const timer = setInterval(() => {
    const loaded = el.clientWidth > 0 && el.clientHeight > 0;

    if (loaded || Date.now() - start > 5000) {
      // Вызываем callback с результатом
      callback(loaded);
      clearInterval(timer);
    }
  }, 300); // Проверяем каждые 300 мс
}

const embed = document.getElementById('doc-viewer');
checkEmbedLoaded(embed, (loaded) => {
  if (!loaded) {
    console.warn('Похоже ресурс не загрузился');
  }
});

Как изменить встроенный ресурс в зависимости от размера экрана

Вы можете использовать JavaScript и matchMedia чтобы менять src.

function updateEmbedSrc() {
  const embed = document.getElementById('doc-viewer');
  if (!embed) return;

  // Проверяем ширину экрана
  if (window.matchMedia('(max-width: 768px)').matches) {
    // Мобильная версия документа
    embed.src = '/docs/manual-mobile.pdf';
  } else {
    // Полная версия документа
    embed.src = '/docs/manual-desktop.pdf';
  }
}

// Вызываем при загрузке и при изменении размеров окна
window.addEventListener('load', updateEmbedSrc);
window.addEventListener('resize', updateEmbedSrc);

Как запретить пользователю скачивать PDF встроенный через embed

Строго запретить скачивание нельзя. Любой ресурс загружается в браузер и может быть сохранен. Можно лишь немного усложнить задачу — например, показывать PDF не как файл а через серверный рендер в изображения или HTML. Но это уже выходит за рамки обычного embed и требует серверной логики.

Почему embed с PDF работает в одном браузере и не работает в другом хотя файл доступен

Скорее всего причина в разной поддержке PDF:

• один браузер имеет встроенный PDF-вьюер
• другой требует отдельного плагина или расширения

Проверить можно так:

• открыть PDF напрямую по адресу в адресной строке
• если браузер предлагает сохранить файл — встроенного вьюера нет

В таком случае стоит:

• добавить ссылку «Скачать PDF»
• рассмотреть использование стороннего JS-вьюера PDF вместо простого embed.