Cara Mempercepat Loading Video Youtube Pada Blog

Terkadang saat nge load video di blog terasa berat, loadingnya juga
lama. Jika anda menggunakan video youtube di blog anda, tentu
mempercepat loading akan membuat video di postingan menjadi lebih
cepat.

Kita tau kalau video yang di tampilkan di postingan blog akan menjadi
informasi tambahan jika di rasa kalau penjelasan ataupun gambar tidak
terlalu bisa memperjelas apa yang anda sampaikan.

Cara ini sebenarnya bukan mempercepat loading video secara
keseluruhan, tapi hanya tampilan awalnya saja. Ketika postigan di
buka, maka yang di tampilkan di video youtube hanyalah gambar
manipulasi jQuery. Jadi nantunya yang tampil pertama kali adalah
gambar dari video youtubenya sedangkan untuk videonya akan di load
nanti ketika gambarnya di klik.

Baik, berikut cara mempercepat loading video youtube di postingan.

1. Pasang kode ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Ada template yang memang sudah di sisipkan kode itu, jadi jika
template anda sudah ada, maka anda boleh melewati tahap ini.

2. Letakkan kode CSS ini di atas ]]></b:skin>

.youtube-box,.youtube-frame { display:block; width:420px; height:315px; background-color:black; background-size:100%; position:relative; border:none; margin:0 auto 15px; }
.youtube-box span { display:block; position:absolute; top:0; right:0; bottom:0; left:0; }
.youtube-box .youtube-title { background-color:rgba(0,0,0,0.4); font:bold 15px Verdana,Arial,Sans-Serif; color:white; text-shadow:0 1px 2px black; bottom:auto; line-height:30px; height:30px; overflow:hidden; padding:0 15px; }
.youtube-box .youtube-bar { background:black url('http://4.bp.blogspot.com/-7keKvgPlMUA/T7vJpi3X_YI/AAAAAAAACtw/4OUd7uHadDk/s1600/yt-bar-center.png') repeat-x top; height:35px; top:auto; }
.youtube-box .youtube-bar .yt-bar-left { background:transparent url('http://4.bp.blogspot.com/-WL_y2cwe57k/T7xHS3C8tTI/AAAAAAAACug/xIqhenfa-4o/s1600/yt-bar-left.png') no-repeat top left; z-index:4; cursor:pointer; }
.youtube-box .youtube-bar .yt-bar-right { background:transparent url('http://1.bp.blogspot.com/-DCNevn4jQx0/T7vJt3X3pjI/AAAAAAAACuA/uIKxoT3685M/s1600/yt-bar-right.png') no-repeat top right; }
.youtube-box .youtube-play { cursor:pointer; width:83px; height:56px; top:50%; left:50%; margin:-28px 0 0 -42px; background:transparent url('http://1.bp.blogspot.com/-JVqaIffy7Ws/T7vK4-ya81I/AAAAAAAACuI/UCL8Y7G4DqE/s1600/yt-play.png') no-repeat top left; }
.youtube-box .youtube-play:hover { background-position:bottom left; }

3. Letakkan kode ini di atas </body> atau di atas </head>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('a.youtube-link').each(function() {
        var yt_url   = this.href,
            yt_id    = yt_url.split('?v=')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<div class="youtube-box" style="background-image:url(http://img.youtube.com/vi/' + yt_id + '/0.jpg);"><span class="youtube-title">' + yt_title + '</span><span class="youtube-bar"><span class="yt-bar-left"></span><span class="yt-bar-right"></span></span><span class="youtube-play"></span></div>');
        $('div.youtube-box').click(function() {
            $(this).replaceWith('<iframe class="youtube-frame" src="http://www.youtube.com/embed/' + yt_id + '?autoplay=1"></iframe>');
        });
    });
});
//]]>
</script>

4. Simpan template anda.

Jika anda ingin memasukkan video youtube kedalam postingan blog, maka
letakkan kode ini pada mode penulisan HTML.
<a class="youtube-link" href="https://www.youtube.com/watch?v=LKYj3zeiT2E">
Iklan Raya lucu 2016 - Lepas Tu (TNB)</a>

Keterangan :
Warna Merah = Link video youtube
Warna Biru = Judul youtube

Sekian penjelasan kali ini dan semoga bisa membantu dan bermanfaat bagi anda.

Thanks for reading & sharing Despul Media