Question

Question in reference to : http://jsfiddle.net/yusaf/VVEY9/55/

When the video player state has changed so that onStateChange(0) ie the video has ended, how would I hide the .pause element and add a replay button to start the video over and once restarted show the .pause element

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

<a class="play" href="#">play</a>
<a class="pause" href="#">pause</a>
<a class="replay" href="#">replay</a>



$(document).ready(function(){
 var obj = $('object')
     .wrap('<div id="test"></div>')
     .find('embed').attr('src', function(i,s){return s+'&enablejsapi=1&version=3'}).end()
     .find('param[name=movie]').attr('value', function(i,v){return v+'&enablejsapi=1&version=3'}).end()
     .detach()
     .appendTo($('#test'));
    $('.pause').hide();

 $('.play').click(function(){
  obj.find('embed')[0].playVideo();
  $(".pause").show();
  $(".play").hide();   
 });
 $('.pause').click(function(){
  obj.find('embed')[0].pauseVideo();
    $(".pause").hide();
  $(".play").show();
 })
});
$('.replay').click(function(){
  obj.find('embed')[0].playVideo();  
 });

Answer 1

First of all, you will need to use Youtube API either iframe or flash. Why? simply because your current code is not crossbrowser compliant. And also there are plenty of methods and helpers to use there.

Secondly, you can assign a onPlayerStateChange function using one of the mentioned APIs, which will be called when video ends (on iframe api you can use some predefined constants such as YT.PlayerState.ENDED

Check a demo out at http://code.google.com/apis/ajax/playground/#polling_the_player

The code should look similar to:

function onPlayerStateChange(evt) {
    if (evt.data == YT.PlayerState.ENDED) {
          // do your jQuery login to hide and blah blah here.
    }
}