iFrame: Pengertian, Cara Menggunakan, dan Contohnya

Apa itu iFrame?

iFrame merupakan elemen HTML yang memungkinkan kita untuk menampilkan konten dari sebuah halaman web di dalam halaman web lainnya. Singkatnya, iFrame adalah jendela ke dalam situs web lain yang dapat ditampilkan di dalam situs web utama.

Kenapa Menggunakan iFrame?

1. Menghindari Pelanggaran Hak Cipta: Dengan menggunakan iFrame, kita dapat menampilkan konten dari situs web lain tanpa melanggar hak cipta. Ini karena konten tetap dihosting oleh situs asalnya.
2. Menghemat Penggunaan Media Penyimpanan (Storage): Daripada menyimpan konten secara lokal di server kita sendiri, kita dapat menggunakan iFrame untuk menampilkan konten dari server eksternal. Ini dapat menghemat ruang penyimpanan dan mempercepat waktu pemuatan halaman.

Mau jadi Digital Marketer? Baca panduan lengkap Digital Marketing berikut.

Cara Menggunakan iFrame

Ada beberapa cara untuk menggunakan iFrame di situs web kita:

1. Membuat iFrame di WordPress dengan Cara Manual
Untuk membuat iFrame secara manual di WordPress, kita dapat menggunakan tag HTML <iframe>. Kita cukup menentukan atribut src dengan URL situs web yang ingin kita tampilkan. Contohnya:

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

2. Membuat iFrame dengan Kode Embed
Banyak situs web menyediakan kode embed yang dapat kita salin dan tempelkan ke situs web kita. Misalnya, YouTube menyediakan kode embed untuk memasukkan video ke dalam halaman web kita.

3. Membuat iFrame dengan Bantuan Plugin
Ada beberapa plugin WordPress yang dapat kita gunakan untuk membuat iFrame dengan mudah tanpa perlu menulis kode secara manual. Plugin seperti “iFrame” atau “Advanced iFrame” dapat membantu kita membuat iFrame dengan konfigurasi yang lebih fleksibel.

4. Menggunakan Menu Embed WordPress – Bonus
WordPress memiliki fitur bawaan yang disebut “Embed” yang memungkinkan kita untuk menyisipkan konten dari berbagai situs web populer seperti YouTube, Twitter, Instagram, dan banyak lagi. Kita cukup tempelkan URL konten yang ingin kita sisipkan ke dalam editor, dan WordPress akan secara otomatis menangani pembuatan iFrame.

Mau jadi UI-UX Designer? Cek panduan lengkap UI-UX Design berikut.

Contoh Penggunaan iFrame

Contoh penggunaan iFrame yang umum adalah menampilkan peta dari layanan seperti Google Maps di dalam halaman web kita. Kita dapat menggunakan iFrame untuk menyisipkan kode peta dari Google Maps ke dalam situs web kita. Contohnya:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.862431166987!2d7.101654915608617!3d50.73529257950988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b8fbf33462a1d7%3A0xc8e615e177fc5e80!2sEuropa-Park!5e0!3m2!1sen!2sde!4v1629816973247!5m2!1sen!2sde" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Tertarik Jadi Software engineering? Baca panduan lengkap Software Engineering di sini.

Siap Menggunakan iFrame di Website?
Dengan mengetahui pengertian, cara penggunaan, dan contohnya, kita siap untuk memanfaatkan iFrame dalam situs web kita. Selalu perhatikan hak cipta dan keamanan saat menggunakan iFrame untuk menyajikan konten dari situs web lain.

Mari terus belajar dan kembangkan skill di MySkill