Dodawanie ramek iframe
Important: this documentation is not applicable to your currently selected format ads!
Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.
Podstawy
Możesz wyświetlić ramkę iframe na swojej stronie, używając elementu amp-iframe
.
Ramki iframe są szczególnie przydatne w AMP do wyświetlania treści nieobsługiwanych w kontekście strony głównej, takich jak treści wymagające kodu JavaScript użytkownika.
Wymagania składnika amp-iframe
- Musi znajdować się o 600 px lub 75% pierwszego okienka na stronie od góry (z wyjątkiem ramek iframe używających elementu
placeholder
). - Mogą żądać zasobów jedynie za pośrednictwem protokołu HTTPS i nie mogą mieć tego samego pochodzenia, co kontener, chyba że nie określają one reguły allow-same-origin.
amp-iframe
. Dodawanie skryptu
Aby dodać składnik amp-iframe
do strony, najpierw umieść w sekcji <head>
następujący skrypt, który ładuje dodatkowy kod składnika rozszerzonego:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Napisz znaczniki
W poniższym przykładzie utworzyliśmy responsywny składnik amp-iframe
, aby osadzić mapę Google za pomocą interfejsu API Google Maps Embed:
<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>
Stosowanie elementów zastępczych
Składnik amp-iframe
można wyświetlać na początku dokumentu, o ile składnik amp-iframe
zawiera element z atrybutem placeholder
(na przykład element amp-img
), renderowany jako zastępczy do chwili przygotowania ramki iframe do wyświetlenia.
Przykład z atrybutem placeholder:
<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>
Renderowany jako:
Przykłady
Bardziej zaawansowane przykłady składnika amp-iframe
można znaleźć w sekcji AMP By Example.