AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt

Размещение элементов iframe

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

Основы

Отобразить iframe на странице можно с помощью элемента amp-iframe.

Элементы iframe особенно полезны в AMP для отображения содержимого, которое не поддерживается в контексте основной страницы, например контента, использующего пользовательский код JavaScript.

Требования к элементам amp-iframe

  • Должны обладать размером не менее 600px или 75% от области видимости, следующей сразу за исходной областью видимости открываемой страницы (за исключением элементов iframe, которые используют атрибут placeholder).
  • Могут запрашивать ресурсы только по HTTPS и не должны находиться в том же домене, что и контейнер, если только они не используют режим allow-same-origin.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ. Чтобы узнать больше, обратитесь к полной спецификации amp-iframe.

Включите скрипт

Чтобы включить amp-iframe на свою страницу, сначала включите в <head> следующий скрипт, который загружает дополнительный код расширенного компонента:

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Напишите разметку

В следующем примере мы создаем адаптивный элемент amp-iframe для Google Карты, которая будет встроена с помощью Google Maps Embed API:

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

Использование заполнителей

amp-iframe можно отображать в верхней части документа, если amp-iframe содержит элемент с атрибутом placeholder (например, элемент amp-img), который будет показан в виде заполнителя, пока iframe не будет готов к отображению.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: больше о заполнителях можно узнать в разделе iframe с заполнителями.

Пример с заполнителем:

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

Отображается как:

{a0}Примеры{/a0}

Более сложные примеры использования amp-iframe можно найти в составе курса AMP By Example.