AMP
DE
English Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Füge iframes hinzu

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

Grundlagen

Mit dem Element amp-iframe kannst du auf deiner Seite ein iframe anzeigen.

In AMP eignen sich iframes besonders dazu, Inhalte anzuzeigen, die im Hauptseitenkontext nicht unterstützt werden, z. B. Inhalte, die vom Benutzer erstelltes JavaScript erfordern.

Anforderungen für amp-iframe

  • Mindestens 600px oder 75 % des ersten Viewports vom oberen Rand entfernt (außer für iframes, die einen placeholder verwenden)
  • Ressourcen können nur über HTTPS angefordert werden und müssen einen anderen Ursprung haben als der Container, es sei denn, "allow-same-origin" ist bei ihnen nicht angegeben.

ERFAHRE MEHR: Mehr Infos findest du in der vollständigen Spezifikation für amp-iframe.

Binde das Skript ein

Um ein amp-iframe zu deiner Seite hinzuzufügen, binde zuerst das folgende Skript in <head> ein, um den zusätzlichen Code für die erweiterte Komponente zu laden:

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

Schreibe das Markup

Im folgenden Beispiel haben wir ein responsives amp-iframe erstellt, um eine Google Map über die Google Maps Embed API einzubetten:

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

Verwendung von Platzhaltern

Du kannst ein amp-iframe am Anfang des Dokuments anzeigen, vorausgesetzt, das amp-iframe enthält ein Element mit dem Attribut placeholder (z. B. ein amp-img Element), das als Platzhalter gerendert wird, bis das iframe zur Anzeige bereit ist.

ERFAHRE MEHR: Mehr Infos über Platzhalter findest du in iframe mit Platzhalter.

Beispiel mit Platzhalter:

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

Wird gerendert als:

Beispiele

Komplexere Beispiele für amp-iframe findest du bei AMP By Example.