Kamis, 17 Februari 2011

Link YouTube.com be Flash Video on Blog

Tips untuk mencari berkas via search di blog Prodigy of Head ini, sobat hanya tinggal mengetikan keyword yang bersangkutan. Misalkan ingin mencari postingan tentang YouTube, sobat hanya tinggal ketikan saja kata YouTube itu dikotak search :) maka terbelalaklah kata-kata berbau uTube. Seperti pada kesempatan kali ini Beben si bloglang anu ganteng kalem tea akan berbagi mengenai bagaimana membuat link video YouTube, lalu dirubah menjadi embed yang siap ditonton. Mudeng apa endak nih penjelasannya ;)) Oke sekarang buka halaman berikut YouTube Video Collection.
Kalau secara kasat mata ketika membuka link tadi tidak ada yang istimewanya sob. Tapi ketika melihat Source dari halaman tersebut, baru deh akan nampak uniknya.

Singkatnya begini deh sob, kalau kita mau memasukan sebuah embed video (YouTube) ke bagian postingan blog kita maka cara umum yg dipakai yaitu mengambil kode embed bersangkutan Click to expand here (embed)


YouTubeNah begitu cara mengambil sebuah embed video. Sekarang bagaimana jika kita menulis macam gini di postingan blog<p>http://www.youtube.com/watch?v=doHnLiAzQ5M</p>lalu keluarlah deh itu si embed video?! Source link diatas tadi jika dibuka ya macam ini kelihatannya sob b-) Cocok banget bagi sobat blogger yg suka menyisipkan video pada artikel postnya :) Trik jQuery Plugins.

jQuery Plugins

Letakkan diatas/sebelum tag </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){
var vidWidth = 440; // youtbe video width
var vidHeight = 340; // youtube video height
var obj = '<object width="' + vidWidth + '" height="' + vidHeight + '">' +
'<param name="movie" value="http://www.youtube.com/v/[vid]&amp;hl=en&amp;fs=1">' +
'</param><param name="allowFullScreen" value="true"></param><param ' +
'name="allowscriptaccess" value="always"></param>' +
'<param name="wmode" value="transparent"></param><em' +
'bed src="http://www.youtube.com/v/[vid]&amp;hl=en&amp;fs=1" ' +
'type="application/x-shockwave-flash" wmode="transparent" allowscriptaccess="always" ' +
'allowfullscreen="true" width="' + vidWidth + '" ' + 'height="' +
vidHeight + '"></embed></object>';

$('.post-body').find('p:contains("youtube.com/watch")').each(function(){
var that = $(this);
var vid = that.html().match(/(?:v=)([\w\-]+)/g);
if (vid.length) {
$.each(vid, function(i){
that.replaceWith( obj.replace(/\[vid\]/g, this.replace('v=','')) );
});
}
});
});
//]]>
</script>

Save

Ketika akan memosting, sobat hanya tinggal menggunakan syntax seperti berikut ini:
<p>http://www.youtube.com/watch?v=doHnLiAzQ5M</p>
Setelah beres loading 100% maka akan tampil video pada postingan sobat. Salam bloglang.
Other methode http://yabtb.blogspot.com/2012/02/youtube-videos-lazy-load-improved-style.html
Happy YouTube \m/

Tidak ada komentar:

Posting Komentar