Índice

Include iframes

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

Conceitos básicos

Você pode exibir iframes na página usando o elemento amp-iframe.

Nas páginas AMP, os iframes são úteis principalmente para exibir conteúdos incompatíveis no contexto da página principal, como os que exigem JavaScript criado pelo usuário.

Requisitos do elemento `amp-iframe`:

Precisa estar a uma distância de pelo menos 600 px ou 75% da primeira janela de visualização em relação à parte superior (exceto em iframes que usam um placeholder).
Pode solicitar recursos somente através de HTTPS, e eles não podem estar na mesma origem que o container, a menos que não especifiquem o valor allow-same-origin.

LEIA MAIS –: Saiba mais nas especificações completas do amp-iframe.

Inclua o script

Para incluir o amp-iframe em sua página, inclua primeiro o script a seguir em <head>. Ele carregará código adicional para o componente estendido:

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

Escreva a marcação

No exemplo a seguir criamos um amp-iframe responsivo para integrar um Mapa do Google através da 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>

Usando placeholders

É possível exibir um amp-iframe na parte superior de um documento desde que o amp-iframe inclua um elemento com o atributo placeholder (por exemplo, um elemento amp-img) para ser renderizado como placeholder até que o iframe esteja pronto para exibição.

LEIA MAIS –: Saiba mais sobre placeholders em iframe com placeholder.

Exemplo com placeholder:

<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>

Renderização do exemplo:

Exemplos

Veja mais exemplos avançados em AMP através de exemplos.

Written by @pbakaus
with contributions from @Meggin and @bpaduch