Cara Mempercepat Loading Video Youtube di Blog

Cara Mempercepat Loading Video Youtube di Blog – Sekarang ini, media visual seperti video menjadi sesuatu yang sangat berperan dalam menarik perhatian orang untuk menikmati sebuah konten.

Video pun kerap digunakan para webmaster untuk medatangkan lebih banyak pengunjung, menjadikannya sebagai media promosi untuk meningkatkan penjualan, dan masih banyak manfaat lain.

Dari dulu hingga sekarang, tempat untuk menampung konten video yang paling populer adalah Youtube. Dan meng-embed video Youtube di blog sekarang sangat mudah.

Hanya saja, belum banyak orang yang sadar bahwa meng-embed video Youtube di blog bisa menambah beban server sehingga mengurangi kecepatan loading blog tersebut.Ada salah satu cara mempercepat loading video Youtube di blog yang bisa Anda coba. Dengan cara ini, Anda bisa menghemat banyak beban server blog Anda, sehingga kecepatan loading blog Anda bisa terus ditingkatkan dan meningkatkan kenyamanan pengunjung blog Anda saat mengunjunginya.

Membandingkan Dua Video Youtube: Yang Belum Dioptimisasi vs Yang Sudah

Mengutip metode oleh Amit Agarwal dari Labnol, cara mempercepat loading video Youtube di blog sebenarnya sangat mudah.

Kita hanya membutuhkan kombinasi antara kode HTML, Javascript, dan bantuan CSS untuk membuat loading-nya cepat sekaligus responsive di seluruh ukuran layar perangkat.

Pertama-tama, sebelum masuk ke bagian inti, coba bandingkan dua embed video Youtube di bawah ini:

Embed Video Youtube Tanpa Optimisasi

---

Embed Video Youtube Setelah Dioptimisasi

---

Bila membandingkan dua embed video Youtube di atas, sebenarnya keduanya tidak jauh berbeda. Perbedaan mendasar yang terlihat adalah bagian thumbnail dan tentu saja kecepatan loading video Youtube tersebut.

Nah sekarang, fokus kita adalah mengoptimalkan kecepatan loading video Youtube sehingga blog Anda juga bisa lebih cepat loading-nya. Ikuti tutorial berikut:

Cara Mempercepat Loading Video Youtube di Blog

Yang pertama sekali yang perlu dilakukan adalah menempatkan kode HTML berikut di mana pun Anda ingin meng-embed video, entah itu di widget, di dalam postingan, di mana pun:

<div class="youtube-player" data-id="ID_VIDEO"></div>

Pastikan Anda mengganti ID_VIDEO dengan ID Video Youtube yang ingin Anda embed. Contohnya adalah URL Youtube berikut:

https://www.you#tube.com/watch?v=s-CzXhbPiAA

Maka ID Video-nya adalah: s-CzXhbPiAA

Nah setelah itu, kita tinggal menempatkan kode Javascript, bila memungkinkan, tempat kode Javascript berikut di bagian Footer blog Anda sebelum tag </footer>:

<script>
document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = ; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = sberpikirThumb(v[n].dataset.id);
                div.onclick = sberpikirIframe;
                v[n].appendChild(div);
            }
        });

    function sberpikirThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function sberpikirIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

Setelah menempatkan kode Javascript di atas, kita tinggal menggunakan kode CSS untuk membuatnya responsive dan membuat semuanya bekerja dengan baik.

Tempat kode CSS berikut ke dalam blog Anda:

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: ;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: ;
        left: ;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: ;
        display: block;
        left: ;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: ;
        top: ;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

Nah sekarang, coba lihat bagaimana tampilannya. Apakah sudah sesuai dengan contoh di atas? Lihat juga tampilannya dari smartphone untuk memastikan responsivitasnya.

Bila semuanya sudah bekerja dengan baik, itu artinya Anda sudah berhasil mengimplementasikan cara mempercepat loading video Youtube di blog dalam tutorial kali ini. Selamat!

Untuk berikutnya, Anda hanya perlu menggunakan kode HTML di tahap pertama dan tinggal gunakan ID Video yang baru

#maaf jika ada kesalahan

#semoga bermanfaat

#terima kasih sudah berkunjung

Tweet