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.

Baca Juga: Trik Youtube: Trik di Balik URL Youtube yang Harus Digunakan

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.

Baca Juga: Cara Memasang Facebook Messenger di Blog

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.

Baca Juga:

• Lengkap: Cara Mempercepat Loading WordPress – Part 1
• Lengkap: Cara Mempercepat Loading WordPress – Part 2
• Tips Untuk Mempercepat Loading Blog Lainnya
• Percepat Loading Gambar di WordPress dengan Wp Smush.it

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.

Baca Juga: Cara Membuat Efek Parallax di Postingan WordPress

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:

A22oy8dFjqc

Maka ID Video-nya adalah: A22oy8dFjqc

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 = 0; 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: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        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.

Baca Juga: Cara Mengoptimalkan Database WordPress Dengan Satu Kali Klik

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 untuk meng-embed video baru sekaligus mempercepat loading video Youtube di blog Anda.

---

Cara Mempercepat Loading Video Youtube di Blog Dengan Bantuan Shortcode Untuk Pengguna WordPress

Bila Anda pengguna WordPress, ada cara sederhana untuk menerapkan metode di atas. Bila selama ini, untuk meng-embed video Youtube di postingan blog, Anda hanya perlu meng-copy paste URL blog di text editor atau menggunakan embed code dari video Youtube, kini Anda cukup menggunakan shortcode.

Jadi, setiap kali Anda ingin meng-embed video Youtube sekaligsu mempercepat loading video Youtube di blog, Anda hanya perlu menggunakan shortcode sederhana.

1. Akses dan Modifikasi File Functions.php di Theme WordPress Anda

Pertama-tama, silakan buat WordPress Child Theme atau install plugin My Custom Functions karena kita akan memodifikasi file functions.php atau menggunakan custom functions.

Buka file functions.php bila Anda menggunakan Child Theme atau buka menu PHP Inserter bila Anda menggunakan plugin My Custom Functions.

2. Buat Custom Shortcode

Setelah itu, silakan paste kode berikut:

// Seni Berpikir Youtube Shortcode
function sberpikir_youtube($atts, $content = null) {
 extract(shortcode_atts(array(
 "src" => ''
 ), $atts));
 return '<div class="youtube-player" data-id="'.$src.'"></div>';
}
add_shortcode("youtube", "sberpikir_youtube");

// Seni Berpikir Youtube calling script
function ytube_sc() { ?>
 <script type="text/javascript">
document.addEventListener("DOMContentLoaded",
 function() {
 var div, n,
 v = document.getElementsByClassName("youtube-player");
 for (n = 0; 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>
 <?php
}
add_action('wp_footer','ytube_sc');

Kode PHP di atas berfungsi untuk memanggil script yang dibutuhkan untuk meng-embed video Youtube berdasarkan ID Video dengan bantuan shortcode ala WordPress.

3. Manfaatkan CSS

Di panel admin WordPress Anda, silakan masuk ke Appearance => Customize => Additional CSS dan tambahkan kode CSS berikut:

 .youtube-player {
 position: relative;
 padding-bottom: 56.23%;
 /* Use 75% for 4:3 videos */
 height: 0;
 overflow: hidden;
 max-width: 100%;
 background: #000;
 margin: 5px;
 }
 
 .youtube-player iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 100;
 background: transparent;
 }
 
 .youtube-player img {
 bottom: 0;
 display: block;
 left: 0;
 margin: auto;
 max-width: 100%;
 width: 100%;
 position: absolute;
 right: 0;
 top: 0;
 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;
 }

Save Changes jika sudah.

4. Mulai Gunakan Shortcode Untuk Embed Video Youtube

Nah setelah semuanya selesai, maka Anda hanya perlu menggunakan shortcode berikut dan tempatkan di mana pun Anda ingin meng-embed video Youtube:

[youtube src="ID_VIDEO"]

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

A22oy8dFjqc

Maka ID Video-nya adalah: A22oy8dFjqc

---

Cara Mempercepat Loading Video Youtube di Blog: Penutup

Nah, itulah cara mempercepat loading video Youtube di blog. Ada berbagai cara, dan khususnya bagi pengguna WordPress, Anda bisa menggunakan metode shortcode bila tidak ingin selalu berurusan dengan kode HTML secara manual untuk meng-embed video Youtube.

Akhir kata, selamat mencoba dan semoga bermanfaat!