Menggunakan Tag iFrame pada HTML (Menyisipkan Situs/Website Orang Lain Pada Blog)

Apa itu iFrame?

iFrame atau singkatan dari Inline Frame merupakan sebuah komponen HTML yang fungsinya memungkinkan kita untuk dapat menyematkan sebuah file media pada halaman website.

Atau sederhananya, iFrame itu bisa kita istilahkan sebagai bingkai yang di dalamnya bisa saja berisi sebuah halaman, dokumen, maupun video yang berasal dari situs/website orang lain maupun dari halaman pada blog kita sendiri jika itu memang diperlukan. Bukan berarti berisi fotonya si dia ya guys.. 😅 kan kumat lagi galaunya.. 😓

Proses memasukan file media dari teknik ini disebut sebagai Embed iFrame pada sebuah file HTML, dan biasanya kita dapat menandainya dengan adanya penggunaan tag <iFrame> pada sebuah kode HTML.

Penggunaan iFrame sering saya gunakan pada blog ini terutama untuk menyisipkan sebuah file video dari channel Youtube saya sebagai pelengkap pada sebuah artikel tutorial misalnya, atau saya bisa gunakan juga untuk menampilkan beberapa widget seperti follower Facebook dll. untuk menghias desain dari halaman blog.

Lalu mengapa menggunakan iFrame?

Bukankah untuk menyematkan sebuah file media kita dapat dengan mudah mengunggahnya pada artikel bog/website kita?

Iya memang benar guys.. namun ada beberapa keuntungan yang akan kita dapatkan dengan penggunaan tag iFrame ini, diantaranya adalah:

1. Menghindari Pelanggaran Hak Cipta (COPYRIGHT)

Penggunaan iFrame dapat menghindarkan kita dari pelanggaran hak cipta. Sebab, penyematan konten dari pihak lain dengan cara embed iFrame tidak melanggar hak cipta.

Jadi kita dapat menyisipkan halaman maupun video dari situs orang lain dengan leluasa, jika itu memang sebuah hal menarik yang dapat kita pergunakan untuk mendukung konten yang kita buat pada artikel blog.

2. Menghemat Media Penyimpanan (STORAGE)

Dengan menggunakan iFrame kita dapat menghemat ruang penyimpanan pada hosting yang kita gunakan guys.. karena kita tidak perlu mengupload file satu persatu jika misalnya kita ingin menyematkan sebuah/beberapa file video yang berada pada situs milik orang lain.

Jadi file dari video tersebut tidak disimpan pada server hosting kita, namun masih tetap berada pada server hosting dari pemilik situs tersebut.

Nah dari penjelasan di atas tentu kita sudah dapat memahami pengertian dan fungsi dari penggunaan iFrame bukan guys?

Baiklah mari kita lanjutkan pembahasan untuk cara penggunaannya berikut ini:

Menyematkan Halaman Situs/Website Orang Lain pada Blog Kita

Salin kode di bawah ini dengan mengganti url tujuan sesuai alamat situs yang ingin kita tampilkan pada teks yang saya tandai berwarna merah, sesuaikan juga angka width untuk lebar dan height untuk tingginya ya guys.

<iframe src="https://www.labalabawirata.com" width="1000" height="580"></iframe>

Dari contoh penulisan kode di atas maka kita sudah dapat menyematkan tampilan home page dari blog labalabawirata.com pada halaman situs/blog kita.

Untuk tampilannya memang akan tampak sudah pas pada tampilan PC saat kita menentukan nilai dari ukurannya, namun akan tampak kacau atau berbeda saat berada pada tampilan mobile (ponsel).

Penyebabnya tentu saja pada CSS dari Template yang kita gunakan berbeda dengan elemen-elemen CSS dari situs orang lain yang ingin kita sematkan.

Lalu bagaimana caranya menuliskan kode agar penggunaan iFrame dapat terlihat secara dinamis dan responsif?

artinya dapat tampil dengan baik pada tampilan apapun dan dapat mengaktifkan fitur-fitur yang tertanam pada situs tersebut, misalnya saja penggunaan tombol fullscreen pada pemutar video, maka kita dapat melakukan penulisan kode seperti di bawah ini:

<html>

<head>

<style>html,body{height:100%}

</style>

</head>

<body>

<iframe allowfullscreen="" height="1800" src="https://labalabawirata.com" width="100%"></iframe>

</body>

</html>

Membuat iFrame Menggunakan Kode Embed

Selain menambahkan kode secara manual seperti di atas, kita juga dapat menyematkan kode Embed untuk membuat tag iFrame. Kode Embed ini digunakan untuk mengambil sebuah koten tertentu pada sebuah website.

Sebagai contoh website yang kini telah menyediakan penggunaan kode Embed adalah Youtube, walaupun sebenarnya untuk menyematkan sebuah video dari Youtube ke artikel pada Blogspot saat inipun kita dapat dengan mudah melakukannya dengan bantuan insert video pada tool bar editing, namun itu hanya berlaku untuk video-video dari channel kita yang menggunakan 1 email dengan akun Blogspot yang kita gunakan.

Untuk yang ingin mendapatkan kode Embed langsung dari situsnya, maka langkah-langkah yang kita lakukan adalah sebagai berikut:

Pertama pilih video Youtube yang ingin kita sematkan, lalu buka halaman videonya, kemudian klik tombol bagikan seperti gambar di bawah ini.

Spiderrsss Youtube Channel

Kemudian akan muncul beberapa pilihan seperti gambar di bawah ini, lalu pilih sematkan.

Youtube Sharing Option

Setelah itu Youtube akan memberikan sebuah kode HTML yang berisikan tag iFrame dari video yang ingin kita sematkan, seperti gambar di bawah ini.

Youtube Embed Code

Copy/salin semua kode tersebut lalu tempel pada artikel/halaman blog yang ingin kita tampilkan videonya.

👉 NOTE:

Tidak semua situs/Website dapat kita Embed karena alasan security yang diberlakukan pada situs tersebut, contohnya seperti google.com dan facebook.com, dll.

Mungkin cukup sekian yang dapat saya sampaikan tentang Menggunakan Tag iFrame pada HTML (Menyisipkan Situs/Website Orang Lain Pada Blog), semoga dapat bermanfaat dan terima kasih atas kunjungannya.

Cari Blog Ini

LABALABA WIRATA