Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Components
Webdesign

Bagaimana Membuat Web Component untuk Menanamkan Video YouTube

by
Difficulty:AdvancedLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Di tutorial sebelumnya "Bagaimana Melakukkan "Lazy Load" Video YouTube yang Ditanamkan" kita melihat cara memuat video YouTube hanya jika pengguna mengkliknya. Ini akan membantu halaman web kita dimuat sedikit lebih cepat, terutama jika berisi banyak video Youtube.

Jika Anda mengikuti keseluruhan tutorial, Anda akan melihat bahwa kami menambah sejumlah elemen div, bersama classes, style, dan script-nya supaya bisa berjalan dengan baik.

Menambahkan semua itu setiap saat bukanlah pendekatan yang paling baik; bagaimana jika kita bisa menggantikannya dengan suatu elemen yang out-of-the-box, seperti <youtube-embed>? Itulah yang tepatnya akan kita lakukan di tutorial omo; kita akan membuat elemen HTML custom dengan menggunakan "Komponen Web". Lihat demonya, lalu selami lebih dalam!

shadow-root Read on to find out more
#shadow-root? Baca terus untuk menemukan lebih banyak

Suatu Primer Cepat

Sebelum mulai bekerja, saya sangat merekomendasikan Anda melihat salah satu dari berbagai tutorial fantastis Kezz Bracey, Bagaimana Membuat Elemen HTML Anda Sendiri dengan Komponen Web. Ini akan memberi Anda wawasan tentang Komponen Web dan hal-hal semacam "Shadow DOM" (juga dikenal sebagai "Shadow Root"), Impor HTML, dan elemen <template>.

Memulai

Untuk memulai kita harus membuat suatu file HTML baru. Akan kita beri nama "youtube-embed.html". File ini berisi semua kode untuk registrasi dan membuat elemen baru yang bernama <youtube-embed>.

Itu mencakup JavaScript berikut, jadi mari kita lihat mulai yang paling dasar.

Cukup sedikit, tapi diberi urutan secara logis, jadi mari kita lihat apa yang bisa dilakukan dengan itu:

  1. Di sini kita mendefinisikan dua variable yang merujuk pada dua objek "dokumen" yang berbeda. Variabel pertama, thatDoc, merujuk pada dokumen utama di mana kita menempatkan elemen kustom. Variable kedua, thisDoc, adalah dokumen tempat kita akan meregistrasi elemen HTML baru kita, yaitu youtube-embed.html.
  2. Selanjutnya akan kita definisikan variabel untuk menyimpan konten elemen <template> (akan kita segera bahas yang ini). 
  3. Lalu kita akan membuat objek baru yang berbasis objek HTMLElement. Ini akan memungkinkan elemen baru untuk mewarisi metode dan sifat tiap elemen HTML seperti id, className, clientHeith, scrollTop, dan childeNodes.
  4. createdCallback adalah fungsi yang akan langsung dipakai apabila ada elemen baru yang dibuat.
  5. Dalam fungsi callback kita membuat "Shadow DOM" yang menentukan bentuk elemen kustomnya, <youtube-embed>, di perambannya. Kita juga akan mulai menulis fungsi kustomnya di sini.
  6. Akhirnya, kita registrasikan elemen kustom kita agar diikenali oleh peramban.

Mengimpor HTML

Selanjutnya, dalam dokumen utama (main), tempat video akan ditanamkan, kita mengimpor youtube-embed.html.

Komponen Web Polyfill

Komponen Web adalah serangkaian teknologi web (Templat, Impor HTML, Elemen Kustom, dan Shadow DOM) secara bersama-sama. Beberapa peramban seperti Opera dan Chrome sudah mendukung fitur-fitur ini, tetapi Firefox, Edge, dan Safari punya pandangan sendiri tentang mendukung fitur-fitur tadi, sehingga hanya mendukung sebagian saja, bukan semuanya.

Jadi, jika Anda ingin elemen Anda bisa diterapkan dalam sejumlah besar peramban (tentunya Anda menginginkannya), Anda juga butuh untuk memuat Komponen Web polyfill.

Begitu Anda selesai dengan semua hal tersebut dan meletakkan file-file ke tempatnya masing-masing, sekarang kita siap untuk menambahkan snippet kode lainnya untuk membuat elemen kustom kita hidup.

Menghidupkan Elemen Kustom

Untuk memulai, dalam "youtube-embed.html", kita tambahkan elemen <template>. Selajutnya kita pasang div dan style yang kita buat di tutorial sebelumnya ke dalamnya.

Di titik ini, jika kita menempatkan elemen <youtube-embed> kita dan menginspeksinya dengan Chrome DevTools, kita akan menemukan elemen div dan style yang baru kita tambahkan muncul di bawah elemen kustom Shadow DOM.

The Custom Element Shadow DOM Tree viewed in Chrome DevTools

Memilih Elemen Shadow DOM

Kembali ke JavaScript, kita harus menambahkan kode berikut untuk memilih elemen video wrapper dari Shadow DOM. Perhatikan bahwa kita menggunakan querySelector() dari variabel shadowRoot kita; inilah elemen di mana nanti kita akan menambahkan Youtube iframe.

Atribut Kustom

Di tutorial sebelumnya, kita menggunakan atribut data-embed untuk melewati ID video Youtube. Sebagai pengingat, ID digunakan untuk mengambil gambar kecil (thumbnail) video dan untuk menunjukkan embedding URL video yang benar.

Dalam hal Komponen Web, suatu atribut nama kustom bisa diterima. Dalam hal ini, sebagai contoh kita bisa mengenalkan atribut embed.

Lalu dalam fungsi createdCallback, kita harus menambahkan yang berikut ini untuk mendapatkan nilai atribut embed.

Kita akan melewatkan dua variable berikut ke fungsi kustomnya.

Lakukan Itu

Mungkin kepala saya sedang penuh, tapi saya tidak bisa berpikir nama yang tepat untuk fungsinya, pakai saja doTheThing.

Fungsi ini membawa baris-baris kode yang sama dengan yang ditambahkan di tutorial-tutorial sebelumnya, meskipun dengan sedikit penyesuaian. Fungsi ini akan menampilkan gambar kecil video Youtube dan menambahkan video Youtube di elemen wrapper, .youtube, begitu pengguna mengkliknya.

Dan kita sudah siap! Lihat source code dan situs demo ini.

Gunakan

Di tutorial ini, kita telah membungkus kode dari tutorial sebelumnya ke dalam suatu Komponen Web. Sekarang kita bisa menanamkan suatu video Youtube dengan lebih elegan menggunakan elemen kustom baru kita: <youtube-embed>, sebagai contoh:

Semua kode (JavaScript, CSS, HTML) dikemas di HTML yang berbeda, untuk mencegah potensi kesalahan dalam file yang akan merusak seluruh situs. Dan kapan saja kita butuh menggunakannya kembali di proyek-proyek lain, lakukan saja dengan mengimpor HTMLnya, youtube-embed.html.

youtube web component demo
Lihat demonya di Github

Kesimpulan

Ini hanya salah satu contoh bagaimana kita bisa menggunakan Komponen Web. Anda bisa menemukan lebih banyak penerapan-penerapan Komponen Web yang dahsyat di customelements.io. Terakhir, saya berharap Anda menikmati tutorial ini dan mendapatinya sebagai referensi yang mudah diikuti.

Referensi Lebih Lanjut

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.