EMBEDDING YOUTUBE LINKS FOR BLOGSPOT

Long time not see Hoctro's. Lama tak melihat blognya master satu ini :( Iseng-iseng main deh kesana, ada lagi trik yang GAYA :)) Kenal sama YouTube tidak :-/ Iyah bener YouTube tempat menyimpan video-video yang asoy geboy itu :p Vietnam salah satu negara tetangga kita master ini berasal. Trik dan hack yang selalu dikeluarkannya selalu membuat BeBeN si bloglang ganteng kalem ini tekesima dibuatnya :x

Coba klik beberapa link yang ada dibawah ini...

• Our Last Summer
• Stupify
• One of Us

"In 1985, a team of superstars gathered together to record the song"We Are the World". The song itself was a collaboration between Michael Jackson (Billie Jean, Beat It) and Lionel Richie (Hello, Dancing on the ceiling, etc.)"

Kalau BeBeN benar memasangnya maka, sobat bisa mendengarkan list-list lagu dan juga embed video yang berasal dari web U-Tube tanpa harus meninggalkan blog gitoh :-bd Dengan hanya memasukan link dengan memanggil ID lagu/video yang kita sukai, kita sudah dapat bersuka youtube ria :D ReaL-DeMo.

1. Masukan beberapa kode CSS berikut diatas/sebelum kode ]]></b:skin>

#videoDiv {
margin-right: 3px;
}
#videoInfo {
margin-left: 3px;
}
#content-links {
RIGHT: 55px; width: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
}

Kode tersebut akan menampilkan control tune of youtube berada diam dipojok kanan bawah. Kalau sobat mau berkreasi sendiri juga tidak apa-apa mau di pojok kanan atas..bisa, mau dipojok bawah kiri..bisa etc
2. Masukan javascript berikut dibawah/sesudah kode ]]></b:skin>
<script src="http://www.google.com/jsapi" type="text/javascript" />
<script type='text/javascript'>
google.load("swfobject", "2.1");

</script>
<script type="text/javascript">
/*
* Change out the video that is playing
*/

// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

// Loads the selected video into the player.

function loadVideo(id, num) {

if(ytplayer) {
if (!num) num=0;
ytplayer.loadVideoById(id, num);
}
else // Flash not allowed, call loadVideoWindow
{
loadVideoWindow(id);
}
}

// Open a new window in case the video doesn't allow embedding
// or for peaceful degradation purposes
function loadVideoWindow(id) {
var ytlink;
var newwindow;
ytlink = "http://www.youtube.com/watch?v=" + id;
newwindow=window.open(ytlink,'name','height=600,width=700');
if (window.focus) {newwindow.focus()}
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
}

// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "jfivtWEAyrk"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", "280", "25", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);

</script>
Perhatikan tulisan tebal yang berwarna biru!!! Itulah ID U-Tubenya sobat. Kalau sobat mau menggantinya, ya silahkan pilih-pilih dulu di YouTube Music. Dan lihat di address bar, lihat yang paling dibelakang. L-)



3. Setelah itu masukan kode HTML berikut diatas/sebelum tag </body>
<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>
4. Langkah terakhirnya, yaitu memasukan link berupa syntax sederhana kedalam postingan supaya waktu membaca artikel bisa juga ber-youtube ;)).
<a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Nama Lagu</a>
Ganti tulisan yang bercetak tebalnya :) Kalau mau membuat satu halaman khusus tentang lagu dan video-video sobat sendiri tinggal panggil saja dengan rumus syntax seperti itu. Bisa juga dengan varibel seperti berikut...
<li><a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Nama Lagu</a></li>
Original Post

Cheers and c u :-h