Play embedded YouTube videos on one page

Question

I embed a YouTube video on my webpage with something like this

<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/RU-bMtPz1cY"></param> <param name="allowFullScreen" value="false"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/RU-bMtPz1cY" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object> 

If I say 3 YouTube videos on the same web page, I was wondering if it is possible (perhaps with the YouTube API?) To play each video in sequence? That is, the first video starts auto play. When this video ends, will the second video on the web page play, and then the third? Thank you for your time.

Link: http://code.google.com/apis/youtube/js_api_reference.html

Answer 1

See http://code.google.com/apis/youtube/js_api_reference.html#Events

You want to listen to the onStateChange event. note that when the transmitted value is 0 , the video ended. Listen to this event / meaning to start the next video.

Just a basic outline of what you probably want to do:

• add end listener for video
• video playback
• when the event has ended (and caught), skip to the next video and repeat from step 1.

Answer 2

You can use jQuery plugin - jQuery YouTube TubePlayer Plugin

if you have the correct markup (in this example, the "active" class on the video being played), you could basically set up something like ..

 jQuery("#player-container").tubeplayer({ onPlayerEnded:function(){ var $vid = jQuery(".active").next(); if($vid.length){ jQuery('#player-container').tubeplayer('play',vid.attr("vid"); $vid.siblings().andSelf().removeClass("active"); $vid.addClass("active"); } } }); 

Answer 3

You’ll want to create a playlist containing the videos you want to play, and then embed them on your site. Direct instructions can be found here .