Question

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> </object> 

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

Answer 1

If you dun like the popup just get rid of it:

function play(id)     {        var html  = '';         html += '<object >';        html += '<param name='movie' value='http://www.youtube.com/v/'+id+''></param>';        html += '<param name='autoplay' value='1'>';        html += '<param name='wmode' value='transparent'></param>';        html += '<embed src='http://www.youtube.com/v/'+id+'&autoplay=1' type='application/x-shockwave-flash' wmode='transparent' ></embed>';        html += '</object>';         return html;     };  <div id='button1' /> <div id='playvideo' />  $('#button1').click(function() { $('#playvideo').html(play('YOURVIDEOID')); }); 

Hope this helps