Tag iframe

Tag iframe memungkinkan untuk menyematkan konten dari satu situs ke situs lainnya. Tag ini digunakan untuk menampilkan konten, seperti video, gambar, atau artikel, tanpa perlu membuka jendela atau tab baru.

Konten dari situs yang disematkan akan memiliki desain dari situs tersebut. Dalam hal ini, gaya CSS dari situs kita, serta kode JavaScript kita tidak akan mempengaruhi konten di dalam tag iframe.

JavaScript kita dapat diterapkan ke konten iframe, namun untuk melakukannya diperlukan metode-metode khusus.

Tag iframe banyak digunakan di situs-situs untuk menyematkan video dari YouTube dan platform lainnya, serta untuk menampilkan artikel dan gambar dari sumber lain.

Atribut

Atribut	Keterangan
`src`	Menentukan alamat halaman yang akan disematkan.
`srcdoc`	Memungkinkan untuk mengatur konten iframe langsung di dalam atribut.
`frameborder`	Mengatur bingkai di sekitar iframe. Nilai `yes` mengatur bingkai (default), dan nilai `no` menghilangkan bingkai.
`scrolling`	Mengatur scroll bar di dalam iframe. Nilai `auto` - scroll bar muncul bila diperlukan (default), nilai `yes` - scroll bar selalu muncul, nilai `no` - tidak ada scroll bar.

Contoh

Mari sematkan iframe dengan situs lain (sebagai contoh, kita ambil ) ke dalam situs kita:

html<iframe src="/" width="600" height="400"></iframe>

Результат:

Contoh

Sematkan video dari YouTube ke situs kita:

html<iframe
  src="https://www.youtube.com/embed/KzQrHpB1H8U"
  allowfullscreen
  width="400"
  height="400">
</iframe>

Результат:

Contoh

Tulis konten langsung di dalam iframe:

html<iframe
  srcdoc="<h1>judul</h1><p>teks</p>"
  width="300"
  height="200">
</iframe>

Результат: