Bagaimana Membuat Web Component untuk Menanamkan Video YouTube

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!

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>.

• 
  HTML5
  Bagaimana Membuat Elemen HTML Anda Sendiri dengan Komponen Web
  Kezz Bracey

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.

( function( window, document, undefined ) {

    // (1)
    var thatDoc = document;
    var thisDoc = ( thatDoc._currentScript || thatDoc.currentScript ).ownerDocument;

    // (2)
    var template = thisDoc.querySelector( 'template' ).content;

    // (3)
    var YoutubeProto = Object.create( HTMLElement.prototype );

    // (4)
    YoutubeProto.createdCallback = function() {
      // (5)
        var shadowRoot = this.createShadowRoot();
        var clone = thatDoc.importNode(template, true);
        	shadowRoot.appendChild( clone );

		// Add custom code here...
    };

    // (6)
    window.youtubeEmbed = thatDoc.registerElement( 'youtube-embed', {
        prototype : YoutubeProto
    });

})( window, document );

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.

<script src="webcomponents.min.js"></script>
<link rel="import" href="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.

<script src="webcomponents.min.js"></script>

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.

<template>
    <style>
        .youtube {
            background-color: #000;
            margin-bottom: 30px;
            position: relative;
            cursor: pointer;
            padding-top: 56.25%;
        }
        .youtube img {
            width: 100%;
            top: 0;
            left: 0;
            opacity: 0.7;
        }
        .youtube .play-button {
            width: 90px;
            height: 60px;
            background-color: #333;
            box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
            z-index: 1;
            opacity: 0.8;
            border-radius: 6px;
        }
        .youtube .play-button:before {
            content: "";
            border-style: solid;
            border-width: 15px 0 15px 26.0px;
            border-color: transparent transparent transparent #fff;
        }
        .youtube img,
        .youtube .play-button {
            cursor: pointer;
        }
        .youtube img,
        .youtube iframe,
        .youtube .play-button,
        .youtube .play-button:before {
            position: absolute;
        }
        .youtube .play-button,
        .youtube .play-button:before {
            top: 50%;
            left: 50%;
            transform: translate3d( -50%, -50%, 0 );
        }
        .youtube iframe {
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
        }
    </style>
    <div class="youtube">
    	<div class="play-button"></div>
    </div>
</template>

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.

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.

YoutubeProto.createdCallback = function() {
    ...
	var video = shadowRoot.querySelector( ".youtube" ); // Select the video wrapper
};

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.

<youtube-embed embed="AqcjdkPMPJA">

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

YoutubeProto.createdCallback = function() {
    ...
	var video = shadowRoot.querySelector( ".youtube" ); // Select the video wrapper.
	var embed = this.getAttribute( "embed" ); // Get the embed attribute value.
};

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.

YoutubeProto.createdCallback = function() {
    ...

    var embed = this.getAttribute( "embed" );
    var video = shadowRoot.querySelector( ".youtube" );

    this.doTheThing( embed, video );
};

YoutubeProto.doTheThing = function( embedID, videoElem ) {
	var source = "https://img.youtube.com/vi/"+ embedID +"/sddefault.jpg";
	var image  = new Image();

    image.src = source;

    image.addEventListener( "load", function() {
        videoElem.appendChild( image );
    });

    videoElem.addEventListener( "click", function() {

        var iframe = document.createElement( "iframe" );

            iframe.setAttribute( "frameborder", "0" );
            iframe.setAttribute( "allowfullscreen", "" );
            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ embedID +"?rel=0&showinfo=0&autoplay=1" );

            this.innerHTML = "";
            this.appendChild( iframe );
    } );
};

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:

<youtube-embed embed="AqcjdkPMPJA"></youtube-embed>

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.

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

• WebComponents.org suatu tempat untuk berdiskusi dan mengembangkan praktek-praktek terbaik komponen web.
• Bagaimana Membuat Elemen HTML Anda Sendiri dengan Komponen Web
• Elemen Kustom: Jelajahi dunia Komponen Web
• Pelajaran-pelajaran praktis dari setahun membangun komponen webGoogle I/O 2016
• Polymer: membuat Komponen Web bisa diakses