menardmam menardmam - 7 months ago 12
Javascript Question

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


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

Answer

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