» » » Cara Mempercepat Loading Video Youtube Di Blog

Cara Mempercepat Loading Video Youtube Di Blog

, Edit

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


Video pun kerap dipakai 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 sampai sekarang, kawasan untuk menampung konten video yang paling terkenal yaitu Youtube. Dan meng-embed video Youtube di blog kini sangat mudah.


Hanya saja, belum banyak orang yang sadar bahwa meng-embed video Youtube di blog dapat 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 dapat Anda coba. Dengan cara ini, Anda dapat menghemat banyak beban server blog Anda, sehingga kecepatan loading blog Anda dapat terus ditingkatkan dan meningkatkan kenyamanan pengunjung blog Anda dikala 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 sebetulnya sangat mudah.


Baca Juga:



Kita hanya membutuhkan kombinasi antara arahan HTML, Javascript, dan sumbangan CSS untuk menciptakan loading-nya cepat sekaligus responsive di seluruh ukuran layar perangkat.


Pertama-tama, sebelum masuk ke bab 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, sebetulnya keduanya tidak jauh berbeda. Perbedaan fundamental yang terlihat yaitu bab thumbnail dan tentu saja kecepatan loading video Youtube tersebut.


Baca Juga: Cara Membuat Efek Parallax di Postingan WordPress


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


Cara Mempercepat Loading Video Youtube di Blog


Yang pertama sekali yang perlu dilakukan yaitu menempatkan arahan 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 yaitu URL Youtube berikut:


A22oy8dFjqc

Maka ID Video-nya adalah: A22oy8dFjqc


Nah sehabis itu, kita tinggal menempatkan arahan Javascript, bila memungkinkan, kawasan arahan Javascript berikut di bab 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 arahan Javascript di atas, kita tinggal memakai arahan CSS untuk membuatnya responsive dan menciptakan semuanya bekerja dengan baik.


Tempat arahan 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 pola 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 memakai arahan HTML di tahap pertama dan tinggal gunakan ID Video yang gres untuk meng-embed video gres 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 memakai embed code dari video Youtube, kini Anda cukup memakai shortcode.


Jadi, setiap kali Anda ingin meng-embed video Youtube sekaligsu mempercepat loading video Youtube di blog, Anda hanya perlu memakai 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 alasannya yaitu kita akan memodifikasi file functions.php atau memakai custom functions.


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


2. Buat Custom Shortcode


Setelah itu, silakan paste arahan 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/j4vascript">
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 diharapkan untuk meng-embed video Youtube menurut ID Video dengan sumbangan shortcode ala WordPress.


3. Manfaatkan CSS


Di panel admin WordPress Anda, silakan masuk ke Appearance => Customize => Additional CSS dan tambahkan arahan 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 bila sudah.


4. Mulai Gunakan Shortcode Untuk Embed Video Youtube


Nah sehabis semuanya selesai, maka Anda hanya perlu memakai 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 yaitu 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 aneka macam cara, dan khususnya bagi pengguna WordPress, Anda dapat memakai metode shortcode bila tidak ingin selalu berurusan dengan arahan HTML secara manual untuk meng-embed video Youtube.


Akhir kata, selamat mencoba dan biar bermanfaat!



Sumber https://www.seniberpikir.com

Berlangganan Informasi Terbaru:

0 Response to "Cara Mempercepat Loading Video Youtube Di Blog"

Posting Komentar

Langganan: Posting Komentar (Atom)