Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Размещение элементов 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.