iFrame HTML: Arti, Cara, dan Contoh Script

Pernahkah kamu terpikir untuk menyematkan video YouTube, peta Google Maps, atau bahkan halaman web lain ke dalam situs kamu, namun merasa bingung bagaimana caranya?

Jawabannya ada dalam iFrame HTML.

Elemen ini sederhana dalam penulisan namun kaya akan fungsi. Yuk, jelajahi lebih jauh tentang iFrame dan temukan bagaimana cara mengubah website biasa menjadi experience yang dinamis dan menarik!

Apa itu iFrame HTML?

Inline Frame atau iFrame HTML adalah elemen yang berguna untuk menampilkan konten eksternal dalam halaman web, seperti video, maps, atau halaman web lain. Dengan kata lain, iFrame bertindak sebagai jendela ke dunia online lain yang langsung ditampilkan di halaman web milikmu.

Dengan menggunakan iFrame, kamu dapat menambahkan konten dari sumber lain tanpa harus mengubah seluruh struktur atau layout halaman web. Artinya, kamu bisa menyajikan konten yang lebih dinamis dan interaktif tanpa perlu melakukan banyak perubahan pada kode HTML halaman.

iFrame memberikan fleksibilitas dan keterpaduan, memungkinkan developer meningkatkan user experience dengan cara yang relatif sederhana.

Namun, penting untuk diingat bahwa menggunakan iFrame untuk menyematkan halaman web lain bisa menambahkan resource yang harus dimuat. Hal ini kemungkinan memengaruhi performa dan waktu pemuatan halaman. Oleh karena itu, penggunaan iFrame sering difokuskan pada konten seperti video atau maps saja agar menjaga efisiensi dan responsivitas.

Manfaat iFrame HTML

Berikut beberapa manfaat iFrame HTML:

• Menampilkan konten eksternal: salah satu keunggulan utama iFrame adalah kemampuannya untuk menampilkan konten eksternal seperti video, dokumen, atau halaman web lain tanpa harus meninggalkan halaman web kamu. Fitur ini memungkinkan audiens tetap berinteraksi dengan situs kamu sambil mengeksplorasi konten tambahan.
• Integrasi media sosial: kamu bisa menyematkan postingan dari media sosial seperti Facebook atau Twitter langsung ke halaman web menggunakan iFrame. Integrasi menggunakan media sosial akan meningkatkan interaksi dan keterlibatan audiens dengan konten kamu.
• Peta interaktif: dengan iFrame, kamu bisa menyematkan peta Google Maps atau peta lain yang interaktif, sehingga audiens dapat scroll, memperbesar, serta memperkecil peta langsung di halaman tersebut. Hal ini sangat berguna untuk bisnis yang memiliki lokasi fisik.
• Mudah dikelola: menggunakan iFrame, kamu bisa mengubah konten di banyak halaman dari satu sumber. Misalnya, jika kamu memiliki menu yang sama di banyak halaman, kamu dapat mengubahnya di satu tempat dan itu akan diperbarui di seluruh situs.
• Keamanan konten: meskipun harus berhati-hati dengan sumber yang kamu sematkan, iFrame memberikan tingkat isolasi antara konten sematan dan website, sehingga membantu dalam menjaga keamanan.

Cara Menambahkan iFrame

Berikut cara menambahkan iFrame ke halaman web:

#1 Gunakan elemen < iframe >

Elemen ini adalah tag yang digunakan untuk mendefinisikan iFrame dalam HTML. Kamu akan meletakkan tag ini di kode HTML di mana kamu ingin menampilkan iFrame.

#2 Tentukan URL dengan atribut src

Atribut src digunakan untuk menunjukkan URL konten yang ingin kamu sematkan. Misalnya, jika kamu ingin menyematkan video YouTube, kamu akan meletakkan URL video tersebut dalam atribut ini.

#3 Atur dimensi dengan atribut width dan height

Kamu bisa mengatur lebar dan tinggi iFrame menggunakan atribut width dan height. Misalnya, width="500" akan mengatur lebar iFrame menjadi 500 piksel.

#4 Atur bingkai dengan atribut frameborder

Jika kamu ingin menampilkan atau menyembunyikan bingkai sekitar iFrame, kamu bisa menggunakan atribut frameborder. Sebagai contoh, frameborder="0" akan menghapus bingkai.

{{COMPONENT_IDENTIFIER}}

#5 Aktifkan mode layar penuh dengan allowfullscreen

Untuk meningkatkan user experience, kamu dapat mengaktifkan mode layar penuh saat melihat konten iFrame. Caranya, tambahkan atribut allowfullscreen ke dalam tag iFrame.

Contoh Script iFrame

Berikut beberapa contoh script iFrame untuk menyematkan video YouTube dan menampilkan peta Google Map.

Menyematkan video YouTube

Menyematkan video dari YouTube ke halaman web sangat mudah dilakukan.

Kamu hanya perlu menemukan opsi "Share (bagikan)" di bawah video YouTube yang ingin kamu sematkan.

Setelah itu, pilih opsi “Embed” dan copy kode HTML yang ada di kotak Embed Video.

Berikut contoh kode untuk menyematkan video YouTube:

Hasil dari kode tersebut akan menampilkan link sesuai yang ingin kamu tampilkan.

Menampilkan peta Google Maps

Menampilkan peta Google Maps juga sangat sederhana dengan iFrame. Berikut langkah-langkahnya:

Buka Google Maps dan cari lokasi yang ingin kamu tampilkan.

Klik pada opsi "Share (Bagikan)" lalu pilih “Embed a map”. Setelahnya, copy link HTML di kotak tersebut.

Berikut hasil yang akan ditampilkan:

FAQ (Frequently Ask Question)

Apakah iFrame aman untuk digunakan?

iFrame umumnya aman digunakan. Namun, penting untuk hanya menyematkan konten dari sumber terpercaya. Menggunakan konten dari sumber yang tidak dikenal atau mencurigakan dapat menimbulkan risiko keamanan.

Apakah iFrame responsif?

Secara default, iFrame mungkin tidak responsif, tetapi kamu bisa membuatnya responsif menggunakan CSS.

Pengaturan seperti width: 100%; dan height: auto; akan membantu membuat iFrame menyesuaikan ukurannya dengan perangkat audiens.

Apakah semua browser mendukung iFrame?

Hampir semua browser modern mendukung iFrame. Namun, ada baiknya selalu menguji situs kamu di berbagai browser untuk memastikan kompatibilitasnya.

Kamu juga bisa mengecek apakah browser mendukung iFrame di link https://caniuse.com/?search=iframe

Penutup

iFrame HTML, singkatan dari Inline Frame, adalah elemen yang memungkinkan kamu menyematkan konten eksternal seperti halaman web, video, peta, dan lain-lain, langsung ke dalam halaman web.

Dibuat dengan tag < iframe >, elemen ini dapat dikontrol melalui berbagai atribut, seperti src untuk menunjukkan URL konten, width dan height untuk mengatur dimensi, serta frameborder dan allowfullscreen untuk mengelola tampilan bingkai dan mode layar penuh.