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

Inclusione di iframe

Important: this documentation is not applicable to your currently selected format email!

Scopri come visualizzare e includere contenuti multimediali nelle tue pagine e come utilizzare iframe per visualizzare contenuti avanzati superando le limitazioni di AMP.

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"<br>  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.