Jquery – How to change the video playing in Youtube embedded player


I'd like to make a playlist, where a click on each <li> will change the video link just below. The list will look like this:

  • video1

    <li><a href="MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">">video1</a></li>
  • bbbbb

  • ccccc

video player here

So clicking on aaaaa will play aaaaa , clicking on bbbbb will play bbbbb, etc.

I'd like to make it ajax, without redraw, just clic and play.

Here is the youtube object to edit

<object width="320" height="265">
  <param name="movie" value="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>

How can I change the video playing in Youtube embedded player ?

Best Solution

check out the jQuery TubePlayer Plugin --

the plugin handles the player initialization for you and you'd be able to get full control of the player.. allowing you to put jQuery("#player").tubeplayer("play", "[videoId]") on the event handler on your li's..