YouTube - detect play, pause, ended

by Alvin Olavarrieta

HTML

<script src="http://www.youtube.com/iframe_api"></script>

<a style="display: block;" class="video-thumb" id="HuGbuEv_3AU" href="#">
    Megadeth: Back In The Day
</a>  
<a style="display: block;" class="video-thumb" id="jac80JB04NQ" href="#">
    Judas Priest: Metal Gods
</a> 
<a style="display: block;" class="video-thumb" id="_r0n9Dv6XnY" href="#">
    Baltimora: Tarzan Boy
</a> 
<div id="container"></div>
<div id="log">--Logging enabled--</div>

JavaScript

function log(msg) {
        jQuery('#log').prepend(msg + '<br/>');
    }

    function onPlayerStateChange(event) {
        switch(event.data) {
            case YT.PlayerState.ENDED:
                log('Video has ended.');
                break;
            case YT.PlayerState.PLAYING:
                log('Video is playing.');
                break;
            case YT.PlayerState.PAUSED:
                log('Video is paused.');
                break;
            case YT.PlayerState.BUFFERING:
                log('Video is buffering.');
                break;
            case YT.PlayerState.CUED:
                log('Video is cued.');
                break;
        }
    }
      
    jQuery(document).ready(function($) {
        jQuery('.video-thumb').click(function() {
            
            var vidId = $(this).attr('id');
            $('#container').html('<iframe id="player_'+vidId+'" width="420" height="315" src="http://www.youtube.com/embed/' + vidId + '?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" frameborder="0" allowfullscreen></iframe>');
            
            new YT.Player('player_'+vidId, {
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        });
    });