Table des matières

Comment inclure les 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.

Fondamentaux

Vous pouvez afficher une iframe sur votre page en utilisant l'élément amp-iframe.

Les iframes sont particulièrement utiles dans AMP pour afficher du contenu non pris en charge dans le contexte de la page principale, tel que le contenu nécessitant du JavaScript créé par l'utilisateur.

Exigences pour `amp-iframe`

Doit être à au moins 600 px ou 75% du haut de la première fenêtre d'affichage (sauf pour les iframes qui utilisent un placeholder).
Ne peut demander des ressources que via HTTPS et celles-ci ne doivent pas avoir la même origine que le conteneur, sauf si elles ne spécifient pas allow-same-origin.

LIRE – Plus de détails dans les spécifications complètes pour amp-iframe.

Comment inclure le script

Pour inclure une balise amp-iframe dans votre page, commencez par inclure le script suivant dans la section <head> afin e charger le code supplémentaire pour le composant étendu:

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

Comment écrire le balisage

Dans l'exemple suivant, nous avons créé une balise amp-iframe réactive pour intégrer une carte Google Map via l'API d'intégration de 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>

Utilisation des caractères de remplacement

Vous pouvez afficher une amp-iframe en haut d'un document, à condition que cette amp-iframe contienne un élément avec l'attribut placeholder (par exemple, un élément amp-img) qui sera affiché comme caractère de remplacement jusqu'à ce que l'iframe soit prête à être affichée.

LIRE –: Plus de détails sur les caractères de remplacement dans la section Iframe avec caractère de remplacement.

Exemple avec caractère de remplacement:

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

Rendu:

Exemples

Vous trouverez des exemples amp-iframe plus élaborés dans AMP par l'exemple.

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