Basic HTML: IFrame

Elemen <iframe> (inline frame) adalah elemen HTML yang digunakan untuk menyematkan halaman web lain atau konten eksternal di dalam halaman web utama. Elemen ini berfungsi seperti jendela kecil yang menampilkan dokumen lain, sering kali dari domain yang berbeda.

Contoh Sintaks Dasar

<iframe src="https://www.asibuka.com" width="600" height="400"></iframe>

Atribut Umum

src: Menentukan URL halaman yang akan ditampilkan.
width & height: Mengatur ukuran iframe (bisa diatur dengan CSS juga).
frameborder: Menghilangkan batas/frame di sekitar iframe.
allowfullscreen: Mengizinkan tampilan layar penuh.
referrerpolicy: Mengontrol bagaimana data referer dikirim.
allow: Memberikan izin khusus seperti autoplay, akses clipboard, dll.

Elemen <iframe> adalah elemen HTML yang digunakan untuk menyematkan halaman web lain di dalam dokumen HTML. Iframe memungkinkan konten dari sumber eksternal dimuat dalam halaman tanpa perlu meninggalkan halaman utama. Elemen ini sering digunakan untuk menampilkan video, peta, atau dokumen lain dalam suatu halaman web.

Atribut	Deskripsi
`src`	Menentukan URL halaman yang akan dimuat dalam iframe.
`srcdoc`	Menentukan HTML yang akan dirender langsung dalam iframe.
`name`	Menentukan nama unik untuk iframe, berguna untuk navigasi target.
`width`	Menentukan lebar iframe dalam piksel atau persentase.
`height`	Menentukan tinggi iframe dalam piksel atau persentase.
`sandbox`	Memberikan batasan keamanan pada iframe, mencegahnya menjalankan skrip atau mengakses data sensitif. Nilai opsional: `allow-forms`: Mengizinkan pengisian dan pengiriman formulir. `allow-modals`: Mengizinkan penggunaan modal (pop-up). `allow-popups`: Mengizinkan pembukaan jendela pop-up. `allow-same-origin`: Mengizinkan akses ke sumber yang sama. `allow-scripts`: Mengizinkan eksekusi JavaScript.
`allowfullscreen`	Mengizinkan iframe masuk ke mode layar penuh.
`referrerpolicy`	Menentukan bagaimana informasi referer dikirim ke sumber eksternal. Nilai opsional: `no-referrer`: Tidak mengirim referer sama sekali. `origin`: Mengirim hanya asal domain. `same-origin`: Mengirim referer hanya jika sumber dan tujuan berada di domain yang sama.
`allow`	Mengontrol fitur tambahan dalam iframe. Nilai opsional: `accelerometer`: Mengizinkan akses ke akselerometer perangkat. `autoplay`: Mengizinkan pemutaran otomatis media. `clipboard-write`: Mengizinkan penulisan ke clipboard. `encrypted-media`: Mengizinkan pemutaran media terenkripsi. `gyroscope`: Mengizinkan akses ke sensor gyroscope. `picture-in-picture`: Mengizinkan mode picture-in-picture.
`frameborder` (deprecated)	Menentukan apakah iframe memiliki batas atau tidak (gunakan CSS sebagai gantinya).
`scrolling` (deprecated)	Menentukan apakah scrollbar diizinkan (`yes`, `no`, `auto`).
`loading`	Menentukan kapan iframe dimuat: `eager` (langsung) atau `lazy` (ditunda sampai mendekati viewport).

Berikut contoh penggunaan elemen <iframe> dalam HTML:

<iframe src="https://www.asibuka.com" width="600" height="400" name="exampleFrame" sandbox="allow-scripts allow-same-origin"referrerpolicy="strict-origin"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"frameborder="0"loading="lazy"allowfullscreen></iframe>

Kegunaan

Menyematkan video (misalnya dari YouTube atau Vimeo).
Menampilkan widget pihak ketiga (peta, media sosial, dll.).
Memuat situs eksternal di dalam halaman web.
Menjalankan konten dalam lingkungan sandbox untuk keamanan (menggunakan atribut sandbox).

Contoh Penggunaan

Menyematkan video dari YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Hasil Contoh

Mohon maaf, fitur ini tidak tersedia di versi AMP. Silahkan klik tombol di bawah untuk menggunakan fitur ini.