Indice

Inclusione di 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.

Elementi di base

Per visualizzare un iframe nelle pagine è possibile utilizzare l'elemento amp-iframe.

Gli iframe sono particolarmente utili in AMP per visualizzare contenuti non supportati nel contesto della pagina principale, ad esempio i contenuti che richiedono JavaScript creato dall'utente.

Requisiti per l'utilizzo di `amp-iframe`

Deve essere almeno di 600 pixel o il 75% della prima finestra di visualizzazione a partire dalla parte superiore (ad eccezione degli iframe che utilizzano un placeholder).
Possono richiedere risorse solo tramite HTTPS e non devono essere nella stessa origine del contenitore, a meno che non specifichino l'attributo allow-same-origin.

CONTINUA A LEGGERE: Ulteriori informazioni disponibili nella specifica completa per amp-iframe.

Inclusione di script

Per includere un elemento amp-iframe in una pagina, occore prima includere il seguente script nella sezione <head>, che si occupa di caricare il codice aggiuntivo per il componente esteso:

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

Scrittura dei markup

Nel seguente esempio, abbiamo creato un elemento amp-iframe reattivo per integrare una mappa Google tramite l'API per incorporare Google Maps:

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

Utilizzo di segnaposti

Si può visualizzare un elemento amp-iframe nella parte superiore di un documento, a condizione che amp-iframe contenga un elemento con l'attributo placeholder, (ad esempio, un elemento amp-img ) che verrà visualizzato come segnaposto finché l'iframe non è pronto per la visualizzazione.

CONTINUA A LEGGERE: Ulteriori informazioni disponibili nella sezione Iframe con segnaposto.

Esempio con segnaposto:

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

Il risultato del rendering sarà:

Esempi

Esempi di utilizzo più avanzato di amp-iframe si trovano nella sezione AMP tramite esempi.

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