Load Youtube Video And Listen To Onplayerstatechange

On clicking a link, I'm trying to play a YouTube video and replace that video with an image when it's done playing. The first half was easy. However I'm running into trouble with t

Solution 1:

Here is an example of how to play a video, detect when it ends, then display an image in its place.

Example: jsFiddle

<divid="player"style="display:none;"></div><ahref="#"id="link">play</a><script>// Load API asynchronously.var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
functiononYouTubeIframeAPIReady() {
    player = newYT.Player('player', {
        height: '390',
        width: '640',
        videoId: '9vHFsXOdTt0',
        events: {'onStateChange': onPlayerStateChange}
    }); // create the <iframe> (and YouTube player)
}

functiononPlayerStateChange(event) {    
    if(event.data === 0) {          
        hideVideo();
    }
}

functionhideVideo() {
    var img_url = 'https://www.google.com/images/srpr/logo4w.png';
    $('#player').replaceWith('<img src="'+img_url+'">');
}

$("#link").click(function(){
    $('#player').show(); // show player
    player.playVideo(); // begin playback
});
</script>