Tips Mempercepat Loading video di blog

 Tips Mempercepat Loading video di blog

- Tentu kamu sering mengalami loading yang berat saat memasang video di sebuah postingan bukan? kali ini saya akan berbagi pengalaman yang juga pernah mengalami hal seperti itu .

Mempercepat loading video di suatu postingan blog merupakan salah satu cara agar mempercepat video yang di tampilkan di sebuah postingan blog, dengan begitu pembaca tidak mudah bosan karna loadingnya sangat lambat atau berat ?

Menambah video di dalam suatu postingan blog sangat lahbermanfaat , untuk memperjelas suatu article tutorial atau yang lainya bukan ? ini paling cocok sekali untuk blog yang membahas tentang film,, musik dan sebagainya, Ok langsung simak baik-baik.

---

Tips Mempercepat Loading video youtube di blog

---

#Trik ini bukan mempercepat loading video secara keseluruhan ya, hanya tampilan awal saja. Cara kerjanya, ketika suatu postingan kita dibuka maka yang ditampilkan bukan video YouTube melainkan gambar hasil manipulasi jQuery. Jadi yang akan ditampilkan pertama kali adalah gambar video youtube nya,dan videonya akan di load ketika di klik. Ok jika sudah mengerti, Ini caranya :D

1. Pasang script jQuery dibawah ini di atas , #tapi jika sudah ada jangan di pasang lagi karna akan berakibat error.

<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 ]]>.


.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 atau di atas .


<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.

Untuk cara pemasangan video youtube ke dalam potingan dengan cara :


<a class="youtube-link" href="Link Video di sini"> Ini Judul ya?</a>

#Link video di sini di ganti dengan link Video kamu, selesai. Sekian Tutorial Tips Mempercepat loading video di blog . Semoga bermafaat ^_^

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Unknown