Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Manipulasi Untuk Mempercepat Loading Video YouTube

Cara mempercepat loading awal video YouTube di Blog.
Manipulasi Untuk Mempercepat Loading Video YouTube - Bagi sobat yang sering membagikan video baik lagu atau film di blognya, tentunya akan sedikit lambat untuk menampilkan video dari YouTube, karena harus load video yang di iframe atau di embed.

Trik ini bukan mempercepat loading video secara keseluruhan, akan tetapi tampilan awal saja. Cara kerjanya simple, ketika postingan dibuka, maka yang ditampilkan bukan video YouTube melainkan gambar hasil manipulasi jQuery. Video akan diload setelah gambar di klik.

Untuk lebih jelas silahkan lihat demo, sebagai catatan, yang ditampilkan adalah gambar2 dan judul palsu, serta gambar capture video.


Untuk menerapkan trik ini, silahkan ikuti langkah mudahnya :

Langkah 1 : Pasang script jQuery 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 jQuery pada template sobat, lewati langkah ini. jQuery hanya dipasang 1 saja pada template.

Langkah 2 : Simpan 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>

Langkah 3 : Simpan CSS 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;
}

Simpan Template

Cara Penggunaan


Apabila ingin menampilkan video youtube pada postingan, pada mode HTML tulis kode seperti ini :
<a class="youtube-link" href="URL-Halaman-YouTube">Judul Video</a>
contoh :

<a class="youtube-link" href="http://www.youtube.com/watch?v=5EhmPPQKjlg">Ust. Jefry Al Buchory - Bidadari Surgaku</a>

Kelebihan dan Kekurangannya


Kelebihannya :
Dengan menggunaknan manipulasi ini, menurut saya ada beberapa kelebihan diantaranya lebih SEO friendly dan Valid HTML5 karena tidak menggunakan iframe. Untuk lebih sempurna, bisa ditambahkan tag title.

Kekurangannya :
Kalau sobat jeli, diantara kekurangannya semua durasi sama yaitu 0:13 :) Tapi hal ini bisa diperbaiki dengan mengupload gambar lain, dengan durasi yang lebih panjang.

Semoga bermanfaat...

Resource : http://yabtb.blogspot.com/2011/12/lazy-load-youtube-videos.html - http://www.dte.web.id/2012/05/youtube-lazy-loader.html

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

43 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. iyha tu yg suka share video perlu diterapin biar enteng hahahay
    1. iya , service visitorrr sobbb !!! Pengunjung adalah Raja .. :D
  2. kang koq komentarnya juga muncul di komentar G+ yha? pdahal saya kan gk nulis komentar pakai form G+
    1. kalo komentar blogger emang tersinkron ke G+... tapi ngga sebaliknya,kalau nulis di G+ ga muncul di Blogger
  3. keren coy :D
    cocok buat movie blog ini.
    1. siapa dulu dong ...
  4. nyimak aja kang :D
    http://yoga-tc.blogspot.com/
  5. antikk maang , postingannya ngangeninn !!! pengen gw pacarin .. wkwkwk , #rikomendedbuangedth buat para blogger pasang ini plugin ..

    nuhun sekali .. sesuatu banget kang ismet .. :-D
    1. kayak raditya dika hehe
      kalau gak dipasang kita kudet .. kurang update haha
  6. hohoh keren kang, andaikan tidak manipulasi :D
  7. Nice kang... :D
  8. Nyimak kang..
  9. Izin bookmark dulu kang syapa tau nanti perlu :)
    Oea, kalau mau buat video promosi jasa di Youtube pakai software apa yang bagus?
    Kalau boleh sekalian link download gratisannya :p
    Terima kasih sebelumnya.
  10. haha.. saya baru tahu, ternyata pake jquery :D
  11. nyimak aja dulu, ane blum terlalu paham.. hehe
  12. Istilahnya streamingnya jadi lebih lancar ya Kang sewaktu mau membuka videonya.
  13. thanks for sharing,
  14. manipulasi #greget :D
  15. saaya hampir ga pernah posting video....
    1. klo ane gak pernah malah :D
  16. Nice Info :3
  17. maaf kang ikutan test doang
  18. baru tau kang ada trik kayak gini, hehe..
    tp saya jarang posting video, saya pelajari saja script-nya kang, ijinnya ya kang :)
    1. silahkan sob.... lumayan kalau pasang video review :)
  19. belum pernah pasang Video ke postingan.. :(
  20. Wah ini sanagt bermanfaat bagi saya yang suka memasang video di blog saya yang lain. terima kasih kang ismet.
  21. Nah lo ... ada lagi yang baru kan? hehe keren kang .... :D Jadi lebih ringan tampilannya ... :)
    1. betul sob.. apalagi kalau beberapa video dalam satu artikel... jadi lola
  22. wah bermanfaat mungkin tuh bagi yg suka posting tentang video :D makasih kang...
    1. betul sob.. ini khusus buat yang sering berbagi video
  23. canggih JS nya, baru tahu ane kang. hahaha
    1. gancang kapanggih nya :)
  24. ternyata apa aja ada triknya ..
    kang ismet ngapunten :D baru singgah lagi.. mohon maaf lahir dan batin #telat :D .
    1. sammi2... kemana aja atuh ?
  25. Ini tutorial yang sangat di butuhkan di blog saya Kang
    Ijin, copy script nya, untuk membuat video di blog saya
    Agar lebih seo friendly, hatur nuhun Kang Ismet
  26. Keren ini kang... cocok buat fast loading blog.. apa konsep nya seperti ini yah.. ambil gambar movie dari link tertuju / video yang di maksud, kemudian di tampilkan ke blog hanya gambarnya saja, setelah itu ketika di klik gambar tersebut akan menuju link video yang di maksud.. CMIIW .

    terima kasih banyak kang buat tutorialnya, sangat bermanfaat..
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.