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

Адаптивное встраивание — это фрагмент [кода встраивания](/glossary/embed-code), который автоматически масштабирует встроенный контент под ширину и высоту родительского контейнера или экрана посетителя. В отличие от [iframe](/glossary/iframe) с фиксированными размерами, которые создают горизонтальные полосы прокрутки или оставляют пустое пространство, адаптивные встраивания используют процентные ширины и CSS-техники aspect-ratio для плавного заполнения доступного пространства. Контент сохраняет свои пропорции как при ширине контейнера 1440 пикселей на десктоп-мониторе, так и при 375 пикселях на смартфоне. Этот подход гарантирует, что встроенные флипбуки, документы, видео или интерактивный контент корректно отображаются на всех устройствах без ручного изменения размеров или кода для конкретных устройств.

Читатели обращаются к контенту с самых разных устройств и размеров экранов. Если встроенный флипбук выходит за границы экрана на мобильном, читателям приходится прокручивать горизонтально — явный признак того, что страница не оптимизирована. Если встраивание выглядит крошечным на широкоформатном мониторе, контент становится нечитаемым. Обе ситуации увеличивают показатель отказов и подрывают доверие к странице-хосту. Адаптивные встраивания устраняют эти проблемы, сохраняя публикации профессиональными и доступными везде. Они также защищают [Core Web Vitals](/glossary/core-web-vitals) сайта, резервируя правильное пространство макета до загрузки контента, предотвращая [Cumulative Layout Shift](/glossary/cls).

FlipLink генерирует готовые к использованию адаптивные коды встраивания для каждого опубликованного флипбука и документа. Вы копируете фрагмент из настроек публикации и вставляете его на любой сайт, блог или CMS. [Iframe](/glossary/iframe) автоматически подстраивается под ширину контейнера, а просмотрщик флипбука масштабирует страницы соответственно. Код встраивания по умолчанию включает ленивую загрузку, поэтому флипбук загружается только когда попадает в видимую область, сохраняя быстродействие страницы. Вы также можете использовать функцию [кликабельного изображения](/features/clickable-image-embed) для размещения миниатюры, открывающей полный адаптивный просмотрщик по клику — полезно, когда нужно показать превью без немедленной загрузки полного просмотрщика.

Адаптивные встраивания обычно работают через одну из двух CSS-техник: - **Контейнер aspect-ratio** — обёрточный `div` с CSS-свойством `aspect-ratio` (например, `aspect-ratio: 16 / 9`) и `width: 100%`. Внутренний iframe настроен на полное заполнение обёртки. Это современный подход, поддерживаемый всеми актуальными браузерами. - **Хак с padding-bottom** — более старая техника, где обёртка использует `padding-bottom` в процентах (например, `56.25%` для 16:9) для создания правильной высоты относительно ширины. Iframe позиционируется абсолютно внутри. Этот метод всё ещё широко используется для обратной совместимости. Код встраивания FlipLink использует подход aspect-ratio с фоллбэком, обеспечивая совместимость между браузерами. Ключевые CSS-свойства — `width: 100%`, `height: auto` и `border: none` для iframe в сочетании с соотношением сторон обёртки. Результат — встраивание, которое занимает полную ширину контейнера и пропорционально масштабирует высоту.

- **Размещайте встраивание в контейнере с ограниченной шириной** — при вставке кода в секцию полной ширины флипбук растянется на весь [viewport](/glossary/viewport). Используйте колонку контента или обёртку с max-width для комфортного размера чтения. - **Избегайте фиксированной высоты в пикселях** — это сводит на нет цель адаптивного встраивания. Позвольте aspect ratio автоматически управлять высотой. - **Тестируйте на разных размерах экрана** — просматривайте страницу на десктопе, планшете и телефоне для подтверждения корректного масштабирования. Симуляция устройств в DevTools браузера хорошо подходит для быстрых проверок. - **Используйте ленивую загрузку для встраиваний ниже видимой области** — код FlipLink включает ленивую загрузку по умолчанию, но при кастомизации кода сохраняйте атрибут `loading="lazy"`, чтобы не замедлять начальную загрузку. - **Одно встраивание на секцию viewport** — размещение нескольких флипбуков в одной видимой области может перегрузить читателей и замедлить страницу. Расположите их на расстоянии или используйте [кликабельное изображение](/features/clickable-image-embed), чтобы читатели сами выбирали, какую публикацию открыть.

1. **Опубликовать флипбук** — код встраивания доступен только после публикации 2. **Скопировать код встраивания** — перейти к настройкам публикации и скопировать адаптивный фрагмент 3. **Вставить на страницу** — добавить код в HTML-редактор сайта, блок встраивания CMS или виджет конструктора страниц 4. **Проверить ширину контейнера** — убедиться, что родительский элемент имеет определённую ширину (в процентах или max-width), чтобы встраивание знало, какую ширину рендерить 5. **Предварительный просмотр на всех устройствах** — проверить отображение на десктопе, планшете и мобильном для подтверждения пропорционального масштабирования 6. **Проверить скорость страницы** — запустить аудит Lighthouse для подтверждения, что встраивание не ухудшает время загрузки или показатели layout shift 7. **Рассмотреть белый список доменов** — использовать [белый список доменов](/glossary/domain-whitelisting) для ограничения сайтов, которые могут встраивать ваши публикации

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