Cara dan tips mempercepat loading video Youtube di Blog

Cara mempercepat loading video Youtube di blog. Tentunya sobat sudah tahu bahwa kadang dalam meload video youtube di blog terasa berat dan lama baru videonya muncul. Jika sobat menggunakan trik ini dapat mempercepat loading video Youtube ditampilan awal video.

Mempercepat loading video Youtube di posting blog merupakan salah satu cara agar loading untuk menampilkan video di postingan menjadi lebih cepat. Pastinya telah kita ketahui bersama selain tulisan dan gambar, posting video juga menambah minat bagi pengunjung blog dan dapat memperjelas informasi yang tidak bisa anda jelaskan hanya dengan menggunkan tulisan ataupun gambar.

Menambah video Youtube di blog bermanfaat sekali untuk Blog yang membahas tentang tutorial, film, musik dan sebagainya yang membutuhkan dukungan video. Sebelumnya juga seobers1.blogspot.com telah membagikan tentang cara memasukan video youtube dan cara membuat Popup Video Youtube di blog.

Cara mempercepat loading video Youtube

Trik ini bukan mempercepat loading video secara keseluruhan, tetapi tampilan awal saja. Cara kerjanya, ketika postingan dibuka maka yang ditampilkan bukan video YouTube melainkan gambar hasil manipulasi jQuery. Jadi yang akan ditampilkan pertama kali adalah gambar video youtube nya, dan nanti videonya akan di load ketika gambarnya diklik. Ok berikut adalah cara membuatnya.

1. Pasang script jQuery dibawah ini di atas </head> , tapi jika sudah ada lewati saja langkah ini.

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

2. Letakan kode CSS dibawah 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. Letakan kode dibawah 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>

Simpan template.

Untuk menerapkannya dalam blog. Jika sobat ingin memasaukan video, pada mode HTML letakan kode seperti contoh dibawah ini.

<a class="youtube-link" href="http://www.youtube.com/watch?v=UOvvTehcAV0"> Deorro- Ye</a>

Kode berwarna biru dan hijau diatas adalah link youtube, untuk lebih mudahnya lagi jika yang diganti hanya id videonya ( contoh kode warna hijau ) dan kode berwarna merah diatas adalah judulnya. ( cara memasukan video youtube ke postingan ). Ok sobat sekian mengenai Mempercepat Loading Video Youtube di Blog untuk saat ini dan semoga bermanfaat.