Füge iframes hinzu
Important: this documentation is not applicable to your currently selected format stories!
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.
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.
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.