How to detect when a youtube video finishes playing?

This can be done through the youtube player API:

http://jsfiddle.net/7Gznb/

Working example:

    <div id="player"></div>    <script src="http://www.youtube.com/player_api"></script>    <script>        // create youtube player        var player;        function onYouTubePlayerAPIReady() {            player = new YT.Player('player', {              width: '640',              height: '390',              videoId: '0Bmhjf0rKe8',              events: {                onReady: onPlayerReady,                onStateChange: onPlayerStateChange              }            });        }        // autoplay video        function onPlayerReady(event) {            event.target.playVideo();        }        // when video ends        function onPlayerStateChange(event) {                    if(event.data === 0) {                          alert('done');            }        }    </script>

What you may want to do is include a script on all pages that does the following ...1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ...- looping through the window.frames by a for-in loop and then filter out by the properties

1. inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-functionhttp://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx

2. Add the event listeners etc..

Hope this helps