| Tweet |
|
Topik:
|
Apa Itu Iframe HTML?Oleh: Hobon.id (31/07/2024)
 Iframe, berasal dari kata inline frame, adalah tag HTML yang berguna untuk menyematkan (embed) dokumen atau konten dari halaman website eksternal seperti halaman web, vidio, peta dan lain-lain ke sebuah halaman website.Sintaks Iframe HTML<iframe src="url" ></iframe> Contoh, jika URL halaman artikel ini disematkan ke atribut src, maka akan tampil seperti berikut ini: Advertisement:
Mengatur Tinggi dan Lebar IframeUntuk mengatur tinggi dan lebar iframe, gunakan atribut width dan height. Secara default, ukuran lebar dan tinggi adalah dalam piksel. Contoh: <iframe src="url" width="300" height="200" ></iframe> Maka iframe tersebut akan ditampilkan di dokumen HTML dengan ukuran lebar 300 piksel dan tinggi 200 piksel. Kita juga bisa menggunakan penataan CSS untuk mengatur lebar dan tinggi iframe. Contoh: <iframe src="url" style="width:300px;height:200px;" ></iframe> Menghapus BorderSecara default, iframe akan memiliki border di keempat sisinya. Untuk menghilangkan border yang terbentuk secara otomatis, kita bisa menggunakan atribut style dengan memberi nilai none pada properti border. Contoh: <iframe src="url" style="border:none;" ></iframe> Maka border yang terbentuk secara default tidak akan ditampilkan lagi: Kita juga bisa menata border menggunakan CSS. Misalnya, kita ingin membuat border iframe dengan ketebalan 2 piksel, warna merah dan lengkungan sudut 10 piksel: <iframe src="url" style="border:2px solid red;border-radius:10px;" ></iframe> Hasilnya: Cara Menyematkan Vidio YoutubeContoh penggunaan iframe yang paling umum dan sering dilakukan adalah menyematkan vidio Youtube ke sebuah halaman web sehingga vidio bisa dibuka (diputar) di website kita tanpa perlu harus membuka halaman website Youtube. Untuk melakukan ini, pertama-tama klik tautan Bagikan (Share) di bawah vidio Youtube yang ingin kita sematkan. Setelah itu pilih opsi Embed lalu salin kode HTML Sematkan Video yang diberikan.  Berikut adalah contoh kode HTML untuk penyematan video dari Youtube: <iframe width="560" height="315" src="https://www.youtube.com/embed/PFJ-AvXUfNc?si=Yy3FIfroWSVVABnS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> Pada kode HTML tersebut Youtube secara default membuat lebar 560 piksel dan tinggi 315 piksel. Tentu ukuran video default seperti ini akan tidak baik ditampilkan untuk berbagai ukuran layar. Sehingga langkah terbaik adalah kita harus memodifikasi ukuran video tersebut menggunakan pengaturan CSS seperti yang sudah dijelaskan di atas. Untuk itu kita akan mengganti properti width="560" height="315" menjadi style="width:100%;height:auto;". Maka kode HTML untuk embed video dari Youtube akan menjadi: <iframe style="width:100%;height:auto;" src="https://www.youtube.com/embed/PFJ-AvXUfNc?si=Yy3FIfroWSVVABnS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> Dan hasil penyematan akan menjadi seperti ini: Advertisement:
Menyematkan Peta Google MapUntuk menyematkan peta Google Map hampir sama langkahnya dengan penyematan video Youtube. Pertama, tentukan dulu lokasi yang ingin disematkan kemudian klik tautan Bagikan (Share).  Lalu salin kode HTML yang diberikan untuk penyematan:  Berikut adalah contoh kode HTML untuk penyematan Lokasi Google Map: <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.63464313219!2d106.86755267409949!3d-6.44094136298154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69eb32d0e6992b%3A0x5628a95e4f5445e3!2sHobon.id%20-%20Jasa%20Pembuatan%20Website!5e0!3m2!1sid!2sid!4v1722418367080!5m2!1sid!2sid" style="border:0;width:100%;height:auto;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> Dan hasilnya adalah sebagai berikut: Artikel Terkait:
|