Dokumentasi HTML interaktif: Tag iframe

Q: Kenapa iframe-ku bilang situsnya menolak terhubung?

Situs itu mengirim header X-Frame-Options atau Content-Security-Policy: frame-ancestors yang melarang situs lain menampilkannya di dalam frame. Banyak situs melakukan ini untuk mencegah clickjacking. Kamu tidak bisa menimpanya dari halamanmu; pakai URL sematan resmi situs itu kalau ada.

Q: Bagaimana cara menghapus border iframe?

Atur border: 0 di CSS. Atribut lama frameborder="0" sudah usang, walaupun banyak kode sematan yang disalin orang masih menyertakannya.

Q: Bagaimana cara membuat iframe responsif?

Beri width: 100% dan aspect-ratio di CSS, misalnya aspect-ratio: 16 / 9 untuk video, dan jangan pakai tinggi yang tetap. Iframe lalu menyesuaikan ukuran dengan container-nya dan tetap mempertahankan bentuknya.

Q: Apa fungsi atribut sandbox di iframe?

Atribut sandbox yang kosong memblokir script, pengiriman form, popup, dan lainnya di dalam frame, dan memperlakukan kontennya seolah berasal dari origin yang unik. Lalu kamu hanya mengizinkan apa yang dibutuhkan sematan itu dengan kata kunci seperti allow-scripts atau allow-forms.

iframe HTML: Menyematkan Halaman, Video dan Peta

Elemen <iframe> menampilkan halaman web lain di dalam halamanmu. Pelajari atribut yang kamu butuhkan (src, title, width, height), cara menyematkan video YouTube dan peta, cara membuat iframe responsif, bagaimana sandbox membatasi apa yang bisa dilakukannya, dan kenapa beberapa situs menolak dimuat di dalam iframe.

Halaman ini dilengkapi editor yang bisa dijalankan. Edit, jalankan, dan lihat output-nya seketika.

Oleh Kevin Spektor, Co-founder & CTO

Diterbitkan Sep 24, 2026

Cara memakai iframe

<iframe> menampilkan halaman lain di dalam halamanmu. Beri alamat halaman itu di src, title yang menjelaskannya, dan ukurannya:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Frame memuat halaman itu sebagai dokumen terpisah, dengan gaya dan script-nya sendiri. Contoh-contoh di halaman ini memakai srcdoc, bukan src, yang menaruh HTML frame langsung di atributnya, jadi contohnya berjalan tanpa memuat situs lain:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Paragraf di halaman luar berwarna biru dan tebal; paragraf di dalam frame tidak, walaupun aturan p yang sama ada di halaman itu. Gaya tidak pernah melintasi batas frame, ke arah mana pun. Border default dan ukuran default 300×150 berasal dari browser; atribut width dan height menimpa ukurannya.

Menyematkan video YouTube atau peta

Situs video dan layanan peta menyediakan kode iframe siap pakai. Di YouTube, tekan Bagikan (Share), lalu Sematkan (Embed):

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

Untuk Google Maps, buka tempatnya, tekan Bagikan (Share), lalu Sematkan peta (Embed a map), dan salin iframe-nya dengan cara yang sama. Pertahankan title (screen reader mengumumkannya saat masuk ke frame) dan ganti ukuran tetap dengan CSS responsif di bawah. Atribut allow memberi frame fitur seperti autoplay atau layar penuh yang secara default mati untuk halaman yang disematkan.

Ukuran, border dan iframe responsif

Kode sematan yang disalin memakai ukuran piksel tetap, yang meluber di ponsel. width: 100% ditambah aspect-ratio membuat frame mengisi container-nya dan tetap mempertahankan bentuknya, dan border: 0 menghapus border inset default:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

Ubah max-width: 480px ke nilai lain dan frame tetap berbentuk 16:9 di setiap lebar. Hapus border: 0 untuk melihat border default browser. Atribut lama frameborder, scrolling dan marginheight sudah usang; pakai CSS.

sandbox: membatasi apa yang bisa dilakukan frame

Sebuah frame bisa menjalankan script, mengirim form, dan membuka popup seperti halaman lainnya. Atribut sandbox mencabut kemampuan itu; sandbox yang kosong memblokir hampir semuanya, dan setiap kata kunci mengembalikan satu kemampuan. Kedua frame di bawah ini mendapat HTML yang sama dengan sebuah script kecil:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

Frame pertama tetap menampilkan teks placeholder-nya karena script-nya tidak pernah berjalan (console Chrome mencatat pesan "Blocked script execution" untuknya). Pakai sandbox setiap kali kamu menampilkan konten yang tidak sepenuhnya kamu percayai di dalam frame, seperti HTML yang ditulis pengguna, dan tambahkan hanya kata kunci yang dibutuhkannya:

Kata kunci	Mengizinkan
`allow-scripts`	Menjalankan JavaScript
`allow-forms`	Mengirim form
`allow-popups`	`window.open` dan link `target="_blank"`
`allow-modals`	`alert()`, `confirm()` dan `prompt()`
`allow-same-origin`	Memperlakukan konten sebagai origin aslinya (cookie, storage)
`allow-top-navigation`	Memindahkan seluruh tab keluar dari halamanmu

Jangan pernah menggabungkan allow-scripts dan allow-same-origin untuk konten dari origin-mu sendiri: script di dalam frame bisa menghapus sandbox-nya sendiri.

Berkomunikasi dengan frame: postMessage

Halaman luar dan frame adalah dokumen yang terpisah. Saat origin-nya berbeda, keduanya tidak bisa menyentuh DOM satu sama lain, tapi bisa saling mengirim pesan. Ketik pesan lalu kirim ke dalam frame:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

Di kode sungguhan, berikan origin frame yang tepat (seperti 'https://maps.example.com'), bukan '*', dan periksa e.origin di penerimanya, supaya pesan hanya dikirim ke dan diterima dari situs yang kamu harapkan.

Performa dan saat situs menolak

Lazy loading. Tambahkan loading="lazy" ke frame yang jauh di bawah halaman; browser hanya memuatnya saat pembaca menggulir mendekatinya. Setiap iframe adalah pemuatan halaman penuh, jadi halaman dengan banyak sematan menjadi lambat tanpa atribut ini.
"Refused to connect". Banyak situs (bank, sebagian besar media sosial, pencarian Google) mengirim header X-Frame-Options atau frame-ancestors yang melarang ditampilkan di dalam frame, dan browser menampilkan error di frame itu. Halamanmu tidak bisa menimpanya. Pakai URL sematan resmi situs itu, atau sebuah link.
Aksesibilitas. Selalu atur title. Dari situlah screen reader menamai frame, dan halaman dengan beberapa frame tanpa judul sulit dinavigasi.

Kesalahan umum

Tidak ada title. Screen reader mengumumkan frame itu sebagai tanpa nama.
Lebar tetap dari kode sematan yang disalin. Ganti dengan width: 100% dan aspect-ratio.
Menampilkan file video biasa di dalam frame. Untuk file .mp4 milikmu sendiri, pakai elemen video; iframe adalah untuk halaman.
Memercayai konten di dalam frame. Tambahkan sandbox untuk apa pun yang tidak kamu tulis sendiri.
Berharap CSS luar memberi gaya pada frame. Beri gaya halaman di dalam frame dari dalam halaman itu sendiri.

Pertanyaan yang sering diajukan

Apa itu iframe di HTML?

<iframe> (inline frame) adalah kotak yang menampilkan halaman web terpisah di dalam halaman saat ini. Iframe punya dokumen, gaya, dan script-nya sendiri, itulah kenapa iframe dipakai untuk sematan seperti video, peta, iklan, dan pratinjau kode.

Bagaimana cara menyematkan video YouTube dengan iframe?

Di YouTube, pilih Bagikan (Share), lalu Sematkan (Embed), dan salin kodenya. Kode itu adalah iframe yang src-nya https://www.youtube.com/embed/ ditambah id videonya. Pertahankan atribut title dan allowfullscreen, dan pakai CSS aspect-ratio: 16 / 9 dengan width: 100% supaya responsif.

Kenapa iframe-ku bilang situsnya menolak terhubung?

Situs itu mengirim header X-Frame-Options atau Content-Security-Policy: frame-ancestors yang melarang situs lain menampilkannya di dalam frame. Banyak situs melakukan ini untuk mencegah clickjacking. Kamu tidak bisa menimpanya dari halamanmu; pakai URL sematan resmi situs itu kalau ada.

Bagaimana cara menghapus border iframe?

Atur border: 0 di CSS. Atribut lama frameborder="0" sudah usang, walaupun banyak kode sematan yang disalin orang masih menyertakannya.

Bagaimana cara membuat iframe responsif?

Beri width: 100% dan aspect-ratio di CSS, misalnya aspect-ratio: 16 / 9 untuk video, dan jangan pakai tinggi yang tetap. Iframe lalu menyesuaikan ukuran dengan container-nya dan tetap mempertahankan bentuknya.

Apa fungsi atribut sandbox di iframe?

Atribut sandbox yang kosong memblokir script, pengiriman form, popup, dan lainnya di dalam frame, dan memperlakukan kontennya seolah berasal dari origin yang unik. Lalu kamu hanya mengizinkan apa yang dibutuhkan sematan itu dengan kata kunci seperti allow-scripts atau allow-forms.

Konsep terkait