Cara memasang Video Youtube di blog dengan load Page lebih cepat

HaiSob apa kabar? semoga semua dalam keadaan baik. Tentunya sobat sudah tahu bahwa kadang dalam me-load video youtube di blog biasanya postingan seolah-olah terasa berat dan lama baru seluruh postingan selesai di buka, walau sebenarnya ini tergantung jaringan internet juga, tapi tahukan Indonesia, yang jaringan bagus pada mahal harganya 😑.

Pastinya telah kita ketahui bersama selain tulisan dan gambar, posting dengan video juga bisa  menambah minat pengunjung untuk setia dan kembali ke blog kita. Selain dapat memperjelas informasi ini juga dapat menambah darik dan tentu saja dolar ke blog kita.

Baca juga: Cara memasang video Youtube responsive di Blogger

Trik ini bukan mempercepat loading video secara keseluruhan, tetapi untuk tampilan awalnya 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.

Cara memasang Video Youtube di blog dengan load Page lebih cepat


1. Masuk ke menu Template >> Edit Html
Cara memasang Video Youtube di blog dengan load Page lebih cepat
Template - Edit HTML

Baca juga: Cara membuat Fp Facebook untuk Bisnis

2. Selanjutnya, letakan 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'/>
3. 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; }
4. 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>
5. Save template.

Baca juga: 2 langkah mudah memasukan video Youtube ke postingan Blog

Untuk menerapkannya dalam blog. Jika sobat ingin memasukan video pada postingan, pilih mode HTML sebelahnya Compose dan masukan kode seperti contoh dibawah ini.
<a class="youtube-link" href="http://www.youtube.com/watch?v=pIMwhEflezE"> 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.

Ok sobat sekian mengenai cara mempercepat loading video Youtube di blog, semoga bermanfaat.
Join This Site