Suryadi Kurniawan Suryadi is a digital content writer at Niagahoster. He keeps on pursuing opportunities to engage with more people through articles about WordPress, Internet Marketing and other IT-related issues. During his free time, he enjoys playing Clash Royale a lot.

iFrame: Pengertian, Cara Menggunakan dan Contohnya

4 min read

iFrame: Pengertian dan Contoh

Anda pernah membaca artikel yang dilengkapi dengan video menarik? Tahukah Anda bahwa video tersebut bisa saja berasal dari website lain? Itulah contoh penggunaan iFrame.

iFrame adalah tool yang sangat bermanfaat jika Anda sedang mendesain suatu website. Sebab, alat ini memungkinkan Anda untuk memasukkan berbagai macam media ke dalam halaman website Anda.

Di artikel ini, kami akan membahas apa itu iFrame secara lengkap, termasuk cara penggunaan dan beberapa contohnya. Mari baca lebih lanjut!

Apa itu iFrame?

1 iFrame adalah komponen file HTML yang memungkinkan Anda menyematkan file seperti video ke website

iFrame adalah singkatan dari Inline Frame, sebuah komponen dari file HTML yang memungkinkan Anda menyematkan video, dokumen, dan file lainnya ke dalam sebuah halaman website.

Proses untuk menyematkan file dengan teknik ini disebut sebagai embed iFrame. Pada sebuah file HTML, penggunaan iFrame ditandai dengan adanya tag <iframe>.

Ketika menggunakan iFrame HTML, file yang disematkan bisa berasal dari halaman lain website Anda. Namun, bisa juga dari website lain. Contoh yang paling umum dari penggunaan iFrame adalah penyematan video YouTube.

Kenapa Menggunakan iFrame?

Anda bisa dengan mudah mengunggah file yang Anda butuhkan ketika membuat artikel di blog/website. Lalu, kenapa harus menggunakan iFrame?

Jawabannya adalah menggunakan iFrame memberikan berbagai keuntungan. Apa saja?

1. Menghindari Pelanggaran Hak Cipta

Kadang Anda menemukan konten menarik di internet dan ingin menggunakannya di website Anda. Hal yang akan Anda lakukan mungkin mengunduh file tersebut, dan lalu mengunggahnya kembali di postingan Anda.

Bagaimana jika file tersebut ternyata memiliki hak cipta? Anda tentu harus siap dengan konsekuensi hukum yang akan Anda terima jika pemiliknya keberatan.

Nah, penggunaan iFrame bisa menghindarkan anda dari pelanggaran hak cipta. Sebab, penyematan konten dari pihak lain dengan cara embed iFrame tidak melanggar hak cipta

Salah satu contohnya adalah pernyataan di laman resmi YouTube. Disebutkan bahwa secara default, setiap video YouTube bisa disematkan pada website lain. Jika pengguna YouTube ingin menerapkan pembatasan (restriction), mereka bisa melakukan setting khusus terlebih dahulu.

Jadi, jika ingin menggunakan konten dari website lain, menggunakan iFrame merupakan cara paling aman. Namun, tentu saja secara etika Anda tetap disarankan untuk meminta izin dari pemilik konten yang bersangkutan.

2. Menghemat Penggunaan Media Penyimpanan (Storage) 

iFrame bisa membantu Anda mengurangi penggunaan media penyimpanan. Sebab, Anda tidak perlu mengunggah semua file ke Media Library WordPress.

Dengan embedding iFrame, file yang Anda gunakan tidak disimpan di server hosting Anda. Jadi, Anda tidak perlu khawatir kehabisan storage. 

Sebagai contoh, ketika Anda memasukkan video di website dengan fitur embed, video tersebut masih berada di server milik YouTube. Saat pengunjung memutar video di website Anda, aksesnya pun langsung dari server YouTube. 

Dengan kondisi ini, Anda jadi tidak perlu ragu ketika ingin menampilkan file video dengan kualitas terbaik yang umumnya memiliki ukuran file cukup besar. 

Nah, walaupun menggunakan iFrame memiliki banyak keuntungan, ada kekurangan yang harus Anda waspadai. 

Penggunaan iFrame harus selalu mempertimbangkan faktor keamanan. Artinya, Anda harus benar-benar mengetahui keamanan website yang memiliki file tersebut. Jika website tersebut rentan malware, tentu akan mengganggu kondisi website Anda. 

Apabila ingin mempelajari cara mengamankan website, Anda bisa megunduh ebook keamanan WordPress di bawah ini.

Cara Menggunakan iFrame

Setelah mengetahui manfaatnya, saatnya Anda belajar cara menggunakan iFrame dengan beberapa metode yang berbeda. 

1. Membuat iFrame di WordPress dengan Cara Manual

Metode pertama adalah dengan memasukkan elemen iFrame secara manual ke dalam HTML. Pada metode manual, Anda bisa menggunakan tag <iframe> berikut tautan dari file yang ingin Anda sematkan.

Kode yang digunakan adalah <iframe src="https://www.example.com"></iframe>. Anda bisa mengganti example.com dengan tautan yang Anda inginkan

Perlu diingat bahwa Anda hanya bisa melakukan embed konten dari website yang memiliki protokol yang sama. Artinya, jika website Anda menggunakan https, gunakan tautan yang berasal dari website dengan https juga.

Selain itu, Anda juga bisa mengatur bagaimana iFrame ditampilkan. Misalnya seperti contoh di bawah ini:

2 panduan cara menggunakan iFrame

iFrame di atas ditampilkan dalam ukuran 680×480 piksel. Oleh karena itu, kode HTML yang digunakan harus menambahkan parameter weight dan height. Weight untuk lebar iFrame, height untuk tingginya.

Inilah kode HTML yang kami gunakan: <iframe src="https://www.example.com" width="680" height="480"></iframe>

2. Membuat iFrame dengan Kode Embed

Selain menambahkan kode secara manual, Anda juga bisa menyematkan kode embed untuk membuat iFrame. Hal ini berguna jika Anda ingin menggunakan konten tertentu dari sebuah website, misalnya YouTube.

Cara membuat iFrame dengan kode embed dari YouTube adalah sebagai berikut:

Pada video YouTube yang Anda saksikan, akan ada tombol Share

3 Cara membuat iFrame dengan kode embed dari YouTube

Ketika memilih tombol tersebut, Anda akan menemukan pilihan cara untuk membagikan video. Salah satunya dengan cara embedding.

4 tombol share untuk embedding

Saat Anda memilih kode embed, YouTube akan menampilkan kode yang bisa Anda gunakan di website Anda. Silakan klik Copy

5 kode embed video dari youtube

Inilah contoh kode embed yang kami gunakan:

<iframe width="560" height="315" src="https://www.youtube.com/embed/Fsxf_KsaUX8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Selanjutnya, masuk ke Block Editor WordPress Anda untuk membuat posting. Lalu, tempel kode embed yang sudah Anda dapatkan dari YouTube. Pastikan Block Editor telah mengenalnya sebagai Custom HTML.

6 tempel kode embed ke block editor website

Jika berhasil, inilah tampilan posting Anda saat sudah diterbitkan.

7 tampilan video yang sudah diembed

3. Membuat iFrame dengan Bantuan Plugin

Anda juga bisa menggunakan plugin untuk membuat iFrame. 

Plugin adalah software yang menawarkan fungsi tambahan untuk website WordPress Anda. Untuk menggunakan plugin WordPress, Anda harus mengunduh dan menginstalnya terlebih dahulu. 

Ada banyak plugin iFrame yang tersedia di WordPress directory. Salah satunya adalah iframe.

8 plugin iFrame

iframe memudahkan Anda untuk menyematkan konten dari YouTube, Vimeo dan lainnya dengan menggunakan shortcode. Inilah contoh penggunaan shortcodenya:

9 cara menggunakan iframe untuk embed video di halaman website dengan lebih mudah

Tidak hanya itu, plugin WordPress ini juga memungkinkan Anda melakukan kustomisasi pada konten yang ditampilkan seperti scroll bar, frame border hingga transparansi. Caranya, Anda bisa menambahkan beberapa parameter sebagai berikut:

  • Frame Border – [iframe frameborder="0"]
  • Scrolling – [iframe scrolling="yes"]
  • Transparency – [iframe allowtransparency="true"]

4. Menggunakan Menu Embed WordPress – Bonus

WordPress merupakan CMS atau Content Management System yang ramah pengguna. Platform ini memungkinkan Anda untuk menyematkan file dari website lain dengan mudah. 

Menggunakan editor terbaru WordPress yaitu Gutenberg, langkah tersebut bisa dilakukan melalui menu embed WordPress.

Inilah cara melakukannya:

Pada halaman WordPress Block Editor, silakan pilih menu tambah, dan pilih menu Embed.

10 tombol embed di block editor

Dari berbagai pilihan, silakan pilih platform yang Anda ingin gunakan. Di contoh ini, kami menggunakan YouTube. 

Masukkan tautan video YouTube di kolom yang tersedia, lalu klik Embed.

11 copas link video youtube untuk embed video menggunakan iFrame

Setelah proses embedding berhasil, inilah tampilan preview yang muncul di halaman editor Anda.

12 tampilan video di halaman website

Siap Menggunakan iFrame di Website?

Anda baru saja belajar cara menggunakan iFrame. Tidak sesulit yang Anda bayangkan, bukan?

iFrame merupakan elemen yang bisa Anda tambahkan pada sebuah halaman HTML. Tujuannya untuk membuat artikel/konten website Anda lebih menarik. 

Selain itu, iFrame memiliki banyak kelebihan yaitu membantu Anda menghemat penggunaan storage dan menghindarkan Anda dari pelanggaran hak cipta. 

Semoga informasi ini bermanfaat. Jangan ragu untuk selalu membuat beragam konten yang menarik dan sukses selalu untuk Anda.

Suryadi Kurniawan Suryadi is a digital content writer at Niagahoster. He keeps on pursuing opportunities to engage with more people through articles about WordPress, Internet Marketing and other IT-related issues. During his free time, he enjoys playing Clash Royale a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *