AMP

Menyertakan iframe

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

Dasar-dasar

Anda dapat menampilkan iframe di halaman Anda dengan menggunakan elemen amp-iframe.

Iframe sangat bermanfaat di AMP untuk menampilkan konten yang tidak didukung di konteks halaman utama, seperti konten yang memerlukan JavaScript yang ditulis oleh pengguna.

Persyaratan untuk amp-iframe

  • Harus minimal 600 piksel atau 75% viewport pertama yang jauh dari bagian atas (kecuali untuk iframe yang menggunakan placeholder).
  • Hanya dapat meminta referensi melalui HTTPS, dan tidak boleh memiliki asal yang sama dengan wadah, kecuali permintaan tidak mengharuskan izinkan-asal-yang-sama (allow-same-origin).

BACA – Pelajari lebih lanjut dalam spesifikasi lengkap untuk amp-iframe.

Menyertakan skrip

Untuk menyertakan amp-iframe di halaman Anda, pertama-tama sertakan skrip berikut ini ke <head>, yang memuat kode tambahan untuk komponen yang diperluas:

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

Di dalam contoh berikut ini, kita membuat amp-iframe responsif untuk menyematkan Google Map melalui Google Maps Embed API:

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

Menggunakan bakal tempat

Anda dapat menampilkan amp-iframe di bagian atas dokumen, sepanjang amp-iframe berisi elemen dengan atribut placeholder, (contoh: elemen amp-img) yang akan dirender sebagai bakal tempat sampai iframe siap ditampilkan.

BACA –: Pelajari lebih lanjut tentang bakal tempat di Iframe dengan bakal tempat.

Contoh dengan bakal tempat:

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

Render sebagai:

Contoh-contoh

Anda dapat menemukan contoh amp-iframe yang lebih lanjut di AMP Berdasarkan Contoh.