💡 ULASAN & REFERENSI • DIPERBARUI: 23 October 2026 • REDAKSI AZWINN

Cara Mengatasi Masalah Iframe di WordPress Tanpa Eror

Masalah iframe pada WordPress umumnya terjadi karena sistem keamanan bawaan (XSS filtering) yang menghapus tag <iframe> saat pos atau halaman disimpan, atau karena benturan antara plugin editor seperti Gutenberg dan Classic Editor. Untuk mengatasi hal ini secara permanen, Anda dapat menggunakan plugin khusus pembersih HTML, menyunting berkas functions.php, atau memanfaatkan blok kustom yang mendukung atribut HTML secara penuh.

Secara default, peran pengguna selain Administrator (seperti Editor dan Author) dibatasi hak aksesnya dalam menyisipkan kode HTML mentah atau skrip eksternal ke dalam editor WordPress demi alasan keamanan situs. Berikut adalah tabel matriks penyebab utama kegagalan iframe beserta solusi teknisnya di lapangan:

Penyebab Eror Gejala di WordPress Solusi Teknis Utama
Filter Kemanan WordPress (KSES) Tag iframe hilang otomatis setelah tombol 'Simpan' atau 'Terbitkan' diklik. Gunakan plugin iframe pihak ketiga atau tambahkan filter kustom pada functions.php.
Blok Gutenberg Tidak Kompatibel Tampilan iframe berantakan atau tidak merespons di perangkat seluler. Gunakan blok 'Custom HTML' bawaan alih-alih editor visual standar.
Atribut Keamanan Hilang (Sandbox/Allow) Konten iframe gagal dimuat dan memunculkan pesan 'Refused to connect'. Tambahkan atribut allowfullscreen atau loading="lazy" yang valid.

Cara 1: Menggunakan Blok HTML Kustom di Gutenberg

Editor blok bawaan WordPress menyediakan elemen khusus untuk menyisipkan kode mentah tanpa harus mengubah pengaturan inti sistem. Langkah-langkahnya adalah sebagai berikut:

  1. Buka halaman atau pos WordPress yang ingin disisipi iframe.
  2. Klik tombol tambah blok (+) lalu cari dan pilih blok Custom HTML.
  3. Tempelkan (paste) kode iframe Anda di dalam kotak yang tersedia. Contoh kode standar yang aman:
<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
  <iframe src="https://www.youtube.com/embed/contohvideo" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allowfullscreen></iframe>
</div>
  1. Klik tombol Preview untuk memastikan bingkai tampil dengan benar, lalu klik Update atau Publish.

Cara 2: Mengatasi Iframe yang Terhapus Saat Disimpan

Jika Anda memiliki peran sebagai Administrator dan tetap mendapati tag iframe terhapus oleh sistem, fungsi KSES WordPress mungkin menyaring atribut tersebut. Anda dapat melonggarkan batasan ini secara aman dengan menambahkan cuplikan kode pada berkas functions.php di tema aktif Anda atau menggunakan plugin penyunting fungsi.

function iz_allow_iframe_tags( $allowedposttags ) {
    $allowedposttags['iframe'] = array(
        'src'             => true,
        'height'          => true,
        'width'           => true,
        'frameborder'     => true,
        'allowfullscreen' => true,
        'loading'         => true,
        'style'           => true,
        'class'           => true,
    );
    return $allowedposttags;
}
add_filter( 'wp_kses_allowed_html', 'iz_allow_iframe_tags', 10, 2 );

Tips Troubleshooting Lapangan

Apabila iframe masih gagal dimuat setelah menerapkan langkah di atas, periksa beberapa hal berikut:

  • Mixed Content Error: Pastikan URL di dalam atribut src menggunakan protokol https://, bukan http://, terutama jika situs WordPress Anda sudah mengaktifkan SSL.
  • Kebijakan X-Frame-Options: Beberapa situs pihak ketiga melarang halaman mereka disematkan ke dalam iframe situs lain melalui kebijakan header keamanan server mereka. Hal ini berada di luar kendali WordPress.
  • Pembersihan Cache: Selalu bersihkan cache plugin (seperti LiteSpeed, WP Rocket, atau W3 Total Cache) serta cache peramban setelah melakukan perubahan kode.

🔍 Orang Lain Juga Mencari Ini