Iframe dan Menyematkan Konten Luar

Apa Itu iframe?

<iframe> (inline frame) menampilkan halaman web lain di dalam halamanmu, seperti jendela kecil ke situs lain:

<iframe src="https://contoh.com" width="600" height="400" title="Contoh"></iframe>

Atribut title wajib diisi untuk screen reader, supaya pengguna tunanetra tahu isi frame itu apa.

Embed YouTube

Kasus paling umum: menyematkan video YouTube. Buka video, klik Share, pilih Embed, salin kodenya:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Video YouTube"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Perhatikan URL-nya memakai format youtube.com/embed/ID_VIDEO, bukan URL tonton biasa. Atribut allowfullscreen mengizinkan tombol fullscreen di player.

Embed Google Maps

Pola yang sama untuk peta. Di Google Maps, klik Share lalu Embed a map:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450"
  title="Peta lokasi"
  loading="lazy">
</iframe>

Atribut loading="lazy" menunda memuat iframe sampai pengguna scroll ke dekatnya. Iframe itu berat (memuat seluruh halaman lain), jadi lazy loading bikin halaman awal jauh lebih cepat.

Keamanan: Atribut sandbox

iframe bisa berbahaya: halaman di dalamnya bisa menjalankan JavaScript yang mencoba mengganggu halamanmu. Atribut sandbox membatasi apa yang boleh dilakukan konten iframe:

<iframe src="widget.html" sandbox="allow-scripts" title="Widget"></iframe>

Tanpa nilai apa pun, sandbox memblokir semua: script, form, pop-up. Kamu buka izin satu per satu sesuai kebutuhan (allow-scripts, allow-forms, allow-same-origin). Prinsipnya: beri izin minimum yang dibutuhkan.

Catatan teknis: Tidak semua situs bisa di-iframe. Banyak situs mengirim header X-Frame-Options: DENY atau Content-Security-Policy: frame-ancestors yang melarang halamannya ditampilkan dalam iframe orang lain (mencegah clickjacking). Kalau iframe-mu kosong padahal URL benar, kemungkinan besar situs tujuannya memblokir. Ini bukan bug di kodemu.

Batasan iframe

• Tidak responsif otomatis: iframe punya ukuran fixed. Untuk mobile-friendly perlu trik CSS (dibahas di seri CSS).
• SEO: konten iframe dianggap milik situs asalnya, bukan halamanmu.
• Performa: tiap iframe memuat halaman penuh lain. Jangan pasang belasan iframe dalam satu halaman.

Contoh Halaman Kontak

<h1>Hubungi Kami</h1>
<p>Kunjungi toko kami di alamat berikut:</p>

<iframe
  src="https://www.google.com/maps/embed?pb=contoh"
  width="600" height="450"
  title="Peta lokasi toko"
  loading="lazy">
</iframe>

<h2>Video Profil</h2>
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video profil toko"
  allowfullscreen>
</iframe>

Ganti URL contoh dengan kode embed asli dari YouTube dan Google Maps, dan halaman kontakmu langsung terlihat profesional.