Cara Mempercepat Loadig Video Youtube

Cara manipulasi untuk mempercepat Loading Video Youtube-Terkadang postingan bolg yang berbentuk video Youtube akan lambat, karena loading videonya yang di iframe atau di embed. Dan sekarang saya akan berbagi tutorial bagaimana cara agar video di youtube yang ada di blog bisa fast load?
Sebenarnya trik ini bukan mempercepat loading keseluruhan video, melainkan hanya pada tampilan awal saja, cara kerjanya cukup simpel, ketika postingan video dibuka, maka sebenarnya yang di tampilkan bukanlah video Youtube melainkan sebuah gambar manipulasi dari Scrip jQuary.

 

Trik ini saya pelajari dari kang Ismet, beliau membuat sebuah script jQuery yang di gunakan untuk memaniulasi video Youtube agar Loading cepat. dan setelah saya coba ternyata memang work!.
Jika sobat tertarik/ingin mempercepat loading video Youtube, simaklah tutorialnya di bawah ini:

• Login ke akun Blogger anda
• Pada menu Dashboard pilih Template
• Klik Edit HTML
• Pasang script di bawah ini di ATAS </head>

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

Catatan : apabila sudah ada Script jQuery pada template sobat, maka sobat bisa melompati step di atas.

• Simpan 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 CCS di bawah dan pasang di atas ]]</b:skin>

.youtube-box,
.youtube-frame {
  display:block;
  width:420px; /* Lebar video */
  height:315px; /* Tinggi video */
  background-color:black;
  background-size:100%;
  position:relative;
  border:none;
  margin:0px auto 15px;
}
.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
.youtube-box .youtube-title {
  background-color:rgba(0,0,0,0.4);
  font:bold 15px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:30px;
  height:30px;
  overflow:hidden;
  padding:0px 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 0px 0px -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;
}

Terakhir Simpan Template.

Cara Penggunaan
Apabila sobat ingin menampilkan video Youtube pada postingan, tulis kode di bawah ini pada mode HTML (bukan mode Compose)

<a class="youtube-link" href="URL VIDEO YouTube">Judul Video</a>

Ganti URL video Youtube dan judul video yang sudah saya beri tanda merah sesuai URL dan title video anda.

Share :