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

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.