Generator iFrame

Masukkan URL apa pun dan dapatkan kode iframe yang bersih secara gratis, dengan ukuran tetap atau responsif, untuk meng-embed halaman, formulir, atau aplikasi di situs web Anda. Tanpa perlu mendaftar.
Generator iFrame
Halaman apa pun yang mengizinkan embed, misalnya https://example.com/booking/

Pratinjau kosong atau muncul “refused to connect”? Situs tersebut tidak mengizinkan situs lain menampilkannya dalam bingkai (melalui header X-Frame-Options atau Content-Security-Policy), dan hanya pemiliknya yang dapat mengubahnya. Pelajari selengkapnya

Meng-embed formulir, ulasan, atau feed? Lihat Elfsight widgets →
Apa yang diketahui halaman di dalam bingkai tentang asal pengunjung (atribut referrerpolicy).
Proporsional: tinggi mengikuti lebar, seperti video. Tetap: tinggi yang ditentukan dalam piksel.

Embed halaman

<div style="position:relative;width:100%;aspect-ratio:16 / 9;">
  <iframe src="https://example.com/" title="example.com" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;border:0;"></iframe>
</div>
<p style="margin:4px auto 0;text-align:center;font:11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#a3a7b0;">Dibuat dengan <a href="https://elfsight.id/tools/iframe-generator/" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;">Elfsight</a></p>

  1. Klik Salin kode di atas untuk menyalinnya.
  2. Buka file HTML atau template halaman Anda.
  3. Tempel kode di dalam <body>, di tempat konten akan muncul.
  4. Simpan dan unggah halaman, lalu buka di browser untuk memeriksanya.

Meng-embed formulir, ulasan, atau feed? Widget Elfsight melakukannya tanpa iframe dan serasi dengan desain situs Anda. Lihat Elfsight widgets →

Sebelum Anda pergi

Meng-embed formulir, ulasan, atau feed? Widget Elfsight melakukannya tanpa iframe dan serasi dengan desain situs Anda.

Lihat Elfsight widgets →
Atau bagikan alat gratis ini:

Generator iFrame vs menulis iframe secara manual

Iframe hanyalah satu baris HTML, tetapi atribut yang membuatnya mudah diakses, cepat, dan aman mudah terlupa atau salah ketik. Inilah yang berubah saat Anda membuatnya dengan generator.
Menulis iframe secara manual
Generator ini
Atribut
Anda harus mengingat setiap nama atribut beserta nilai pastinya.
Pilih atribut dari daftar, dengan penjelasan singkat di samping masing-masing.
Judul aksesibilitas
Sering terlewat, sehingga pengguna pembaca layar tidak tahu apa isi bingkai.
Meminta title agar bingkai diberi label untuk teknologi bantu.
Sandbox
Anda mengetik token allow-* sendiri dan mencari tahu apa yang dibuka oleh masing-masing.
Kotak centang untuk setiap token, dengan penjelasan sederhana tentang apa yang diizinkannya.
Ukuran responsif
Anda menulis CSS untuk rasio aspek atau tinggi tetap.
Pilih rasio aspek atau tinggi tetap; kode sudah menyertakan pengaturan ukurannya.
Bisakah halaman ini di-embed?
Anda baru tahu setelah publikasi, saat bingkai tampil kosong.
Memeriksa header X-Frame-Options dan frame-ancestors halaman sebelum Anda menyalin kode.
Tautan video dan formulir
Halaman tonton YouTube atau tautan Google Form yang ditempel apa adanya mungkin tidak termuat atau tampak salah.
Mengenali tautan YouTube, Vimeo, dan Google Form lalu mengarahkan Anda ke generator khususnya.

Atribut

Menulis iframe secara manual

Anda harus mengingat setiap nama atribut beserta nilai pastinya.

Generator ini

Pilih atribut dari daftar, dengan penjelasan singkat di samping masing-masing.

Judul aksesibilitas

Menulis iframe secara manual

Sering terlewat, sehingga pengguna pembaca layar tidak tahu apa isi bingkai.

Generator ini

Meminta title agar bingkai diberi label untuk teknologi bantu.

Sandbox

Menulis iframe secara manual

Anda mengetik token allow-* sendiri dan mencari tahu apa yang dibuka oleh masing-masing.

Generator ini

Kotak centang untuk setiap token, dengan penjelasan sederhana tentang apa yang diizinkannya.

Ukuran responsif

Menulis iframe secara manual

Anda menulis CSS untuk rasio aspek atau tinggi tetap.

Generator ini

Pilih rasio aspek atau tinggi tetap; kode sudah menyertakan pengaturan ukurannya.

Bisakah halaman ini di-embed?

Menulis iframe secara manual

Anda baru tahu setelah publikasi, saat bingkai tampil kosong.

Generator ini

Memeriksa header X-Frame-Options dan frame-ancestors halaman sebelum Anda menyalin kode.

Tautan video dan formulir

Menulis iframe secara manual

Halaman tonton YouTube atau tautan Google Form yang ditempel apa adanya mungkin tidak termuat atau tampak salah.

Generator ini

Mengenali tautan YouTube, Vimeo, dan Google Form lalu mengarahkan Anda ke generator khususnya.

Referensi atribut iframe

Fungsi setiap atribut dan kapan menggunakannya. Tips keamanan: berikan konten pihak ketiga izin sesedikit mungkin yang diperlukannya.
Opsi
Fungsinya
Nilai
Catatan
src
Alamat halaman yang ditampilkan di dalam bingkai.
URL lengkap
Gunakan alamat https://. Di situs HTTPS, browser memblokir bingkai yang dimuat melalui http:// biasa.
title
Memberi label pada bingkai untuk pembaca layar.
Teks singkat, misalnya “Peta lokasi toko”
Jelaskan kontennya secara singkat. Tanpa ini, pengguna teknologi bantu harus masuk ke dalam bingkai untuk mengetahui isinya.
width / height
Mengatur ukuran bingkai dalam piksel.
Angka; tanpa angka, bingkai berukuran 300 × 150
Untuk bingkai yang menyesuaikan halaman, gunakan CSS (width: 100% dan aspect-ratio) sebagai ganti angka tetap.
loading
Mengatur kapan browser memuat bingkai.
eager (default), lazy
lazy menunggu hingga bingkai mendekati area yang terlihat, sehingga mempercepat pemuatan awal halaman. Cocok untuk bingkai yang lebih bawah di halaman.
allow
Memberi halaman di dalam bingkai akses ke fitur browser (kebijakan izin).
Daftar yang dipisahkan titik koma, misalnya fullscreen; autoplay
Cantumkan hanya fitur yang dibutuhkan konten. Kamera, mikrofon, dan geolokasi memerlukan kehati-hatian ekstra.
allowfullscreen
Memungkinkan bingkai beralih ke layar penuh.
Ada atau tidak ada
Atribut lama. Padanan modernnya adalah allow="fullscreen"; banyak kode embed menyertakan keduanya.
referrerpolicy
Mengatur seberapa banyak alamat halaman Anda yang dikirim ke situs di dalam bingkai.
no-referrer, origin, strict-origin-when-cross-origin (default), dan lainnya
Default hanya mengirim domain Anda ke situs lain. Hindari unsafe-url: nilai ini mengirim alamat lengkap, bahkan ke situs yang tidak aman.
sandbox
Menerapkan pembatasan ketat pada halaman di dalam bingkai. Setiap token allow-* mencabut satu pembatasan.
Kosong (semua pembatasan) atau token seperti allow-scripts, allow-forms, allow-popups
Gunakan untuk konten yang tidak sepenuhnya Anda percayai. Jangan gabungkan allow-scripts dan allow-same-origin untuk halaman dari situs Anda sendiri: keduanya bersama-sama memungkinkan halaman menghapus sandbox.

src

Fungsinya

Alamat halaman yang ditampilkan di dalam bingkai.

Nilai

URL lengkap

Catatan

Gunakan alamat https://. Di situs HTTPS, browser memblokir bingkai yang dimuat melalui http:// biasa.

title

Fungsinya

Memberi label pada bingkai untuk pembaca layar.

Nilai

Teks singkat, misalnya “Peta lokasi toko”

Catatan

Jelaskan kontennya secara singkat. Tanpa ini, pengguna teknologi bantu harus masuk ke dalam bingkai untuk mengetahui isinya.

width / height

Fungsinya

Mengatur ukuran bingkai dalam piksel.

Nilai

Angka; tanpa angka, bingkai berukuran 300 × 150

Catatan

Untuk bingkai yang menyesuaikan halaman, gunakan CSS (width: 100% dan aspect-ratio) sebagai ganti angka tetap.

loading

Fungsinya

Mengatur kapan browser memuat bingkai.

Nilai

eager (default), lazy

Catatan

lazy menunggu hingga bingkai mendekati area yang terlihat, sehingga mempercepat pemuatan awal halaman. Cocok untuk bingkai yang lebih bawah di halaman.

allow

Fungsinya

Memberi halaman di dalam bingkai akses ke fitur browser (kebijakan izin).

Nilai

Daftar yang dipisahkan titik koma, misalnya fullscreen; autoplay

Catatan

Cantumkan hanya fitur yang dibutuhkan konten. Kamera, mikrofon, dan geolokasi memerlukan kehati-hatian ekstra.

allowfullscreen

Fungsinya

Memungkinkan bingkai beralih ke layar penuh.

Nilai

Ada atau tidak ada

Catatan

Atribut lama. Padanan modernnya adalah allow="fullscreen"; banyak kode embed menyertakan keduanya.

referrerpolicy

Fungsinya

Mengatur seberapa banyak alamat halaman Anda yang dikirim ke situs di dalam bingkai.

Nilai

no-referrer, origin, strict-origin-when-cross-origin (default), dan lainnya

Catatan

Default hanya mengirim domain Anda ke situs lain. Hindari unsafe-url: nilai ini mengirim alamat lengkap, bahkan ke situs yang tidak aman.

sandbox

Fungsinya

Menerapkan pembatasan ketat pada halaman di dalam bingkai. Setiap token allow-* mencabut satu pembatasan.

Nilai

Kosong (semua pembatasan) atau token seperti allow-scripts, allow-forms, allow-popups

Catatan

Gunakan untuk konten yang tidak sepenuhnya Anda percayai. Jangan gabungkan allow-scripts dan allow-same-origin untuk halaman dari situs Anda sendiri: keduanya bersama-sama memungkinkan halaman menghapus sandbox.

MDN Web Docs: elemen iframe ↗

Mengapa sebuah situs tidak terbuka di iframe

Bingkai kosong atau menampilkan “refused to connect”.

Situs mengirim header X-Frame-Options. DENY memblokir semua pembingkaian; SAMEORIGIN hanya mengizinkannya di halaman milik situs itu sendiri. Situs telah melarang embed, dan ini tidak dapat dilewati dari sisi Anda. Tautkan ke halamannya saja, atau tanyakan kepada pemilik situs apakah mereka menyediakan embed.

Kebijakan keamanan situs memblokir bingkai.

Situs mengirim Content-Security-Policy dengan frame-ancestors, yang mencantumkan situs yang diizinkan meng-embed-nya ('none' berarti tidak seorang pun). Jika ada, browser mengikutinya dan bukan X-Frame-Options. Hanya pemilik situs yang dapat menambahkan domain Anda ke daftar tersebut.

Bingkai termuat sendiri tetapi tidak di situs HTTPS Anda.

src diawali http://. Browser memblokir bingkai yang tidak aman di halaman aman dan tidak meningkatkannya secara otomatis. Ubah alamatnya menjadi https://; jika situs tidak memiliki versi HTTPS, situs itu tidak dapat di-embed di halaman yang aman.

Tautan YouTube menampilkan error, bukan video.

Halaman tonton YouTube biasa melarang pembingkaian. Gunakan alamat embed video (youtube.com/embed/…) atau generator YouTube khusus.

Halaman termuat, tetapi tombol, formulir, atau tautan di dalamnya tidak berfungsi.

Atribut sandbox memblokirnya. Tambahkan hanya token yang Anda perlukan: allow-scripts untuk konten interaktif, allow-forms untuk mengirim formulir, allow-popups untuk tautan yang membuka tab baru.

Video tidak bisa layar penuh, atau kamera atau mikrofon tidak berfungsi.

Fitur-fitur ini harus diberikan di atribut allow, misalnya allow="fullscreen; camera; microphone".

Pembuat situs Anda menghapus kode setelah disimpan.

Beberapa editor menghapus iframe dari blok teks biasa. Tempel kode ke blok HTML kustom atau blok embed.

Cara membuat iframe

  1. Masukkan alamat halaman

    Tempel URL halaman yang ingin Anda tampilkan.

  2. Atur ukuran dan perilaku

    Pilih ukuran, jaga agar tetap responsif, dan izinkan pengguliran atau layar penuh jika perlu.

  3. Periksa pratinjau

    Beberapa situs tidak mengizinkan ditampilkan dalam bingkai. Pratinjau langsung menunjukkannya.

  4. Salin kodenya

    Tempel kode ke blok HTML di situs Anda.

Pertanyaan yang sering diajukan

Generator kode embed lainnya

Generator Kode Embed YouTube

Tempel tautan YouTube apa pun dan dapatkan kode embed responsif dalam hitungan detik.Generator Kode Embed YouTube

Generator Kode Embed Video

Embed video yang di-host di mana saja: MP4, Google Drive, Dropbox, Loom, atau Wistia.Generator Kode Embed Video

Generator Embed PDF

Tampilkan menu, daftar harga, atau brosur PDF langsung di halaman.Generator Embed PDF