iframe

Tampilkan halaman lain di jendela dalam halamanmu.

Pahami konsepnya

iframe (inline frame) adalah jendela yang menyematkan halaman lain di dalam halamanmu — video YouTube, peta Google Maps, atau pratinjau situs lain tampil sebagai kotak di tengah konten tanpa pengunjung meninggalkan halamanmu.

Pemakaiannya sederhana: tag <iframe> dengan atribut src berisi alamat halaman yang ingin ditampilkan, serta width dan height untuk menentukan ukuran jendelanya. Konten di dalam iframe hidup di dunianya sendiri — CSS halamanmu tidak menjangkaunya.

Catatan penting: tidak semua situs mengizinkan disematkan; pemilik situs bisa memasang pembatasan X-Frame-Options sehingga iframe-nya kosong. Layanan besar seperti YouTube menyediakan kode iframe siap salin lewat menu "Sematkan" (Embed) — lengkap dengan ukuran yang bisa kamu sesuaikan.

Coba contoh kode

<h2>Video pilihan</h2>
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="Video pengantar">
</iframe>

Jendela 560×315 ini memutar video YouTube tanpa pengunjung pindah situs. Atribut title menjelaskan isi iframe bagi pembaca layar — detail kecil yang kerap terlupa. Ganti kode setelah /embed/ dengan ID video pilihanmu sendiri.

Latihan singkat

Sematkan satu video atau peta ke halaman latihanmu, atur ukurannya, lalu uji tampilannya di layar sempit (perkecil jendela browser).