Embedding Youtube music links in your blog (without leaving the page)

Hi,

It's been a long time since I post a new hack. Recently I'm very interested in featuring music in my Vietnamese blog.

I devise a way to hear the music by just clicking on the "a" tag, and the music will play from the static bar at the lower right hand corner of your blog.

I found some interesting music from Youtube, then employ this new hack there. Please take a look.

http://hoctroviet.blogspot.com/p/paul-mauriat.html#65vol1

Here's how to do it:

1. Change CSS in the header section, (before the tag ]]>). The third CSS statement is very important, it'll make the youtube to stay static as you scroll the entire page down.

#videoDiv {
margin-right: 3px;
}


#videoInfo {
margin-left: 3px;
}


#content-links {

RIGHT: 55px; WIDTH: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
}


 2. Next, add this Javascript code, right after ]]>, but before the header tag:

<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 +
"&amp;enablejsapi=1&amp;playerapiid=player1",
"videoDiv", "280", "25", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);


</script>

3. Now we need to add the video bar. If you want the bar to be static, then keep the third CSS tag as stated above, and add this code at the end of your HTML page(right before </body> tag,)

You can add this code inside a script widget as well (like the blogger label widget, for example), so it'll scroll along with the page, but you will have to take the third CSS out.

<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>
 
4. Finally, add this code to your post, every time you want the user to hear some music, for example, I add two songs here:

<li><a href="javascript:void(0);" onclick="loadVideo('lOMhkGZdujY');">VOUS LES FEMMES</a></li>


<li><a href="javascript:void(0);" onclick="loadVideo('-JutiwteRj8');">N'AVOUE JAMAIS</a></li>

This way, you can refer to many Youtube music links without ever exiting the current page.

The syntax then, is

<a href="javascript:void(0);" onclick="loadVideo('YoutubeID');">Song name</a>

Example:

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM');">Our Last Summer</a>

For this reason, you have to enter the link from the Edit HTML box, not from the Compose box.

Here is a test of the code:

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

Notice, you can also start from somewhere after the beginning of the song, such as 20 seconds after:

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM', 20)">Our Last Summer</a>

Our Last Summer


(Note: if the embed tag on the original Youtube page is shown as "Embedding disabled by request", you will not be able to embed here either. I already added a new function called loadVideoWindow to pop-up a new window for that purpose.)

<a href="javascript:void(0);" onclick="loadVideo('5eoDjKcZamM')">Our Last Summer</a>

Our Last Summer

One of Us



Cheers,

Hoctro

Feb. 2010