javascript - Youtube iframe player JS API with jQuery - player object has no method 'getPlayerState'

Question

I've got following code, that is suppose to pause Slidedeck's autoscroll whenever there is a mouseover event. For mouseout event, the autoscroll should resume working unless the youtobe video in the Slidedeck is currently playing or buffering. I got it working fine if there wasn't the condition for the Youtube video. I believe there's a problem with the scope for the object player, but can't work it out, how to fix this problem.

The error I get in console on mouseout is:

Uncaught TypeError: Object #<T> has no method 'getPlayerState'

Any advice welcome.

Here's link to YT player iframe JS API function reference: https://developers.google.com/youtube/iframe_api_reference#Functions

Here's my code:

// remap jQuery to $
jQuery(function ($) {

/* trigger when page is ready */
$(document).ready(function (){

// Control for the video in Slidedeck
// Find slidedeck
$( "dl.slidedeck" )
    // On mouseenter stop the Slidedeck autoplay
    .mouseenter( function() {
        $( this ).slidedeck().pauseAutoPlay = true;
    })
    // On mouseleave start the Slidedeck autoplay again
    .mouseleave( function() {
        // But only if the YT player isn't actually playing or buffering
        if ( player && ( player.getPlayerState() == 1 || player.getPlayerState() == 3 )) {
            // If that's so, leave the function
            return;
        } else {
            // Turn on autoplay
            $( this ).slidedeck().pauseAutoPlay = false;
        }
    });


});
}); // end of remap for $ to jQuery


// Youtube player API
var player;
/*
 * The API will call this function when the page has finished downloading the JavaScript
 * for the player API, which enables you to then use the API on your page. Thus,
 * this function might create the player objects that you want to display when
 * the page loads.
 */
function onYouTubeIframeAPIReady() {
/*
 * Constructing a YT.Player object.
 * All methods and properties of the player will be found there later.
 */
player = new YT.Player( "myYTPlayer", {
    events: {
        /*
         * Here we attach callback for the onStateChange event.
         * That is called everytime a state of the player is changed.
         */
        "onStateChange": onPlayerStateChange
    }
});
return;
}

/*
 * Implementation of the onStateChange event.
 * Only parameter is an event object, its data property holds a value of a new player state.
 * Values: -1 (unstarted), 0 (ended), 1 (playing), 2 (paused), 3 (buffering), 5 (video cued)
 */
function onPlayerStateChange( event ) {
// integer indicating new state of the player
var newState = event.data,
    // store the slideck element for later calls, so we don't have to query the DOM again
    $slidedeck = jQuery( "dl.slidedeck" );

// Video loading or buffering?
if ( newState == 1 || newState == 3 ) {
    // Then pause the slidedeck autoplay.
    $slidedeck.slidedeck().pauseAutoPlay = true;
// Video has just ended?
} else if ( newState == 0 ) {
    // Then resume the Slidedeck autoplay.
    $slidedeck.slidedeck().pauseAutoPlay = false;
}
}

Answer 1

Ok I got it resolved, it was worth reading the Youtube manual. Problem was in HTML definition of id for the iframe element of the embedded video. When creating the player object, there's first parameter 'myYTPlayer' - this must be the id of the iframe

<iframe id="myYTPlayer" width="729" height="410" src="http://www.youtube.com/embed/xxxxxxxxxxx?wmode=opaque&version=3&enablejsapi=1&origin=http://example.com" frameborder="0"></iframe>