Что такое код встраивания? PDF, флипбуки и видео

Что такое код встраивания?

Код встраивания — это фрагмент HTML, отображающий внешний контент — видео, PDF, флипбук, карту, твит — внутри вашей собственной веб-страницы. Когда читатель загружает вашу страницу, браузер получает внешний контент и встраивает его, как если бы он был частью вашего сайта.

Наиболее распространённая базовая технология — HTML-элемент <iframe>, который загружает отдельную веб-страницу в прямоугольном фрейме на вашей странице.

Базовая структура кода встраивания

Типичный код встраивания выглядит так:

<iframe
  src="https://example.com/your-content"
  width="100%"
  height="600"
  allowfullscreen
  frameborder="0"
></iframe>

Каждый код встраивания включает четыре элемента:

• src — URL встраиваемого контента.
• width и height — размеры фрейма (в пикселях или процентах).
• Атрибуты разрешений — флаги allowfullscreen, allow="autoplay" или sandbox, позволяющие встроенному контенту использовать определённые функции браузера.
• Опциональная стилизация — атрибуты frameborder, style для визуальной отделки.

Когда читатель открывает вашу страницу, браузер видит тег <iframe>, запрашивает URL из src и отображает возвращённую страницу внутри фрейма.

Откуда берутся коды встраивания

Каждая платформа, поддерживающая встраивание, генерирует свой собственный код встраивания. Вы копируете его с платформы и вставляете на свой сайт:

• YouTube / Vimeo — Кнопка "Поделиться" → Встроить → скопировать код iframe.
• Google Maps — Поделиться → Встроить карту → скопировать iframe.
• Twitter / X — Пост → Встроить этот пост → скопировать.
• FlipLink — каждая публикация автоматически генерирует код встраивания, или используйте бесплатный инструмент embed-pdf для разовых встраиваний без регистрации.

Каждая платформа настраивает размеры, разрешения и поведение загрузки iframe под свой контент. Вам редко нужно изменять сгенерированный код — копировать, вставить, готово.

Чем код встраивания отличается от ссылки?

Ссылка уводит читателя со страницы на внешний контент. Код встраивания удерживает его на вашей странице, показывая внешний контент прямо в ней.

• Ссылка: <a href="...">Смотреть видео</a> — клик уводит со страницы.
• Встраивание: <iframe src="..."> — контент появляется прямо на странице, без навигации.

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

Встраивание PDF: четыре подхода

Встраивание PDF развилось дальше базового iframe. Четыре подхода в порядке простоты:

1. Нативный тег <embed> или <object>

<embed src="document.pdf" type="application/pdf" width="100%" height="600" />

Работает в десктоп-браузерах, но непоследовательно на мобильных. Читатели видят стандартный PDF-просмотрщик браузера, который различается по устройствам и теряет интерактивность.

2. Iframe просмотрщика Google Docs

<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600"></iframe>

Бесплатно, работает на мобильных, но ограниченный контроль над внешним видом просмотрщика и нет аналитики.

3. Кастомный просмотрщик на основе PDF.js

Разместите библиотеку PDF.js от Mozilla на своём сайте и встройте кастомный просмотрщик. Полный контроль над брендингом и поведением, но требует разработки и постоянной поддержки.

4. Iframe платформы флипбуков (рекомендуется для бизнеса)

<iframe src="https://your-flipbook-url" width="100%" height="600" allowfullscreen></iframe>

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

Адаптивные коды встраивания

По умолчанию width="640" height="360" ломается на мобильных. Для адаптивных встраиваний оберните iframe в контейнер, сохраняющий соотношение сторон:

<div style="position:relative; padding-bottom:141.4%; height:0;">
  <iframe
    src="..."
    style="position:absolute; top:0; left:0; width:100%; height:100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

Значение padding-bottom задаёт соотношение сторон (141.4% = A4 портрет; 56.25% = видео 16:9; 75% = 4:3).

Безопасность: что делает sandbox

Встроенный контент выполняется в браузере посетителя, поэтому он может исполнять JavaScript, читать cookies для своего домена и даже переходить по родительской странице. Атрибут sandbox ограничивает, что может делать встроенный контент:

<iframe src="..." sandbox="allow-scripts allow-same-origin allow-forms"></iframe>

Распространённые флаги:

• allow-scripts — разрешить выполнение JavaScript
• allow-forms — разрешить отправку форм
• allow-same-origin — считать контент собственным (нужно для сохранения логина)
• allow-popups — разрешить ссылки с target="_blank"

Для встраивания PDF значение по умолчанию (без sandbox) обычно подходит, если вы не встраиваете ненадёжный пользовательский контент.

Распространённые ошибки в кодах встраивания

• Фиксированная ширина в пикселях. Использование width="600" ломается на узких мобильных экранах. Используйте width="100%" или адаптивную обёртку.
• Отсутствие allowfullscreen. Пользователи не могут развернуть видео или флипбук на полный экран.
• Вырезание iframe конструкторами страниц. Некоторые CMS-редакторы (блок Embed в Squarespace, WordPress без блока Custom HTML) удаляют теги iframe. Всегда вставляйте коды встраивания в блок "Code" или "Custom HTML".
• Ошибки cross-origin в консоли. Некоторым встраиваниям нужны специфичные CORS-заголовки от источника; если встраивание выглядит сломанным, проверьте консоль браузера.
• Сломанный предпросмотр в редакторе страниц. Многие CMS-редакторы не отображают iframe в режиме редактирования — всегда проверяйте на опубликованной странице, а не в предпросмотре.

Часто задаваемые вопросы

Iframe — это то же самое, что код встраивания?

Iframe — это один из типов кода встраивания, самый распространённый. Коды встраивания могут также использовать <embed>, <object>, <video> или специфичные для платформы JavaScript-виджеты. Для PDF и флипбуков iframe — стандарт.

Замедляет ли встраивание PDF мой сайт?

Iframe загружает PDF по требованию, поэтому он влияет на производительность страницы только если пользователь до него прокрутит. Используйте loading="lazy" на iframe для отложенной загрузки до появления встраивания рядом с областью просмотра.

Могу ли я настроить внешний вид встроенного контента?

Вы можете контролировать внешний фрейм (размер, рамку, положение) через CSS на iframe. Внешний вид внутреннего контента зависит от платформы, генерирующей код встраивания. FlipLink позволяет применять фирменные цвета и кастомную стилизацию к встроенному просмотрщику.

Работает ли код встраивания на каждом конструкторе сайтов?

Любой сайт, поддерживающий вставку сырого HTML (WordPress Custom HTML, Wix HTML iframe, Squarespace Code Block, Webflow Embed, Shopify Custom Liquid, Notion /embed), принимает коды встраивания iframe. У некоторых конструкторов есть дополнительные ограничения — см. наше руководство по встраиванию на каждой платформе для деталей.

Как получить код встраивания для моего PDF?

Используйте бесплатный инструмент embed-pdf: загрузите PDF, получите iframe-код встраивания за секунды. Регистрация не нужна для разовых встраиваний.

Похожие статьи

• Как встроить PDF на сайт: 5 методов в сравнении
• Как вставить PDF на сайт, в документ или в письмо
• Как встроить флипбук в Squarespace
• Как встроить флипбук в Shopify
• Что такое интерактивный PDF?