<iframe> menampilkan halaman web lain di dalam halaman kamu, kayak jendela kecil yang menghadap ke situs lain. Ini cara yang biasa dipakai buat memasang video YouTube atau peta Google Maps, tanpa bikin pengunjung pindah halaman.
🧪 Tebakan cepat: atribut
allowfullscreendi contoh video nanti gak punya tanda=dan nilai. Itu salah tulis atau memang begitu? Tebak dulu, jawabannya ada di bagian "Video YouTube dan layar penuh".
Memasang halaman lain pakai <iframe>
<iframe
src="https://example.com"
width="300"
height="200"
title="Halaman contoh"
></iframe>
<iframe ...>adalah tag pembuka. Atributnya boleh ditulis per baris biar gampang dibaca, hasilnya sama.srcadalah alamat halaman yang ditampilkan, ditulis lengkap darihttps://.widthdanheightadalah lebar dan tinggi jendelanya dalam piksel. Tulis angkanya aja, tanpapx.titleadalah keterangan singkat isi jendela itu. Gak tampil di layar, tapi dibacakan screen reader (program yang membacakan halaman buat pengguna tunanetra), jadi mereka tahu isinya apa.</iframe>adalah tag penutup. Harus tetap ditulis, walaupun di antaranya kosong.
Hasilnya kotak 300 x 200 piksel berisi halaman example.com, lengkap dengan garis tepi bawaan browser.
Gak semua situs mau ditampilkan di iframe. Google, bank dan halaman login biasanya menolak, jadi kotaknya kosong atau berisi pesan error. Yang memang disediakan buat iframe misalnya video YouTube dan Google Maps.
Video YouTube dan layar penuh
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
width="560"
height="315"
title="Video tutorial HTML"
allowfullscreen
></iframe>
- Alamatnya pakai
/embed/lalu kode videonya. Alamat halaman tontonan (youtube.com/watch?v=...) ditolak YouTube kalau dipasang di iframe. allowfullscreenadalah atribut tanpa nilai: cukup tulis namanya. Adanya atribut itu sudah berarti "boleh". Dengan ini tombol layar penuh di video bisa dipakai.
Lebih cepat dan lebih aman: loading dan sandbox
<iframe src="widget.html" title="Widget cuaca" loading="lazy" sandbox="allow-scripts"></iframe>
loading="lazy"bikin iframe baru dimuat waktu hampir kelihatan di layar. Halaman kamu jadi lebih cepat kebuka.sandboxmembatasi apa yang boleh dilakukan halaman di dalam iframe, buat konten yang gak kamu percaya.sandboxtanpa nilai adalah mode paling ketat: script, form dan popup semuanya mati.- Buka kemampuan satu per satu lewat nilainya.
sandbox="allow-scripts"cuma mengizinkan script, yang lain tetap mati.
⚠️ Jebakan yang sering ketemu
pxdiwidth. Tuliswidth="600", bukanwidth="600px". Satuannya sudah pasti piksel.- Lupa
</iframe>. Tanpa tag penutup, isi halaman sesudahnya bisa ketelan dan gak tampil. - Lupa
title. Screen reader cuma bilang "frame" tanpa tahu isinya apa. - Kotak kosong dikira kode salah. Bisa jadi situsnya menolak lewat header
X-Frame-Options. Coba alamat lain, misalnyahttps://example.com.
TL;DR: <iframe src="..." width="..." height="..." title="..."></iframe> menampilkan halaman lain di dalam halaman kamu. Lebar dan tinggi ditulis angka tanpa px, dan title menerangkan isinya buat screen reader. Video YouTube pakai alamat /embed/ plus allowfullscreen (atribut tanpa nilai). loading="lazy" menunda pemuatan, dan sandbox membatasi isinya: tanpa nilai berarti paling ketat.
