javascript / youtube api - variable YT is not defined

Question

I\'m creating a youtube player embed via the YT api but I keep getting an alert that the variable YT is not defined. I can see that the script for the youtube API is getting

Answer 1

You'll need to wrap the YT call in a function and call it when the script is included. Or you can add the script from the file instead of calling that script to include another script.

function doYT(){
    window.player = new YT.Player('video_player', {
        width: '768',
        height: '432',
        videoId: vidID,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    }
}

window.YT && doYT() || function(){
    var a=document.createElement("script");
    a.setAttribute("type","text/javascript");
    a.setAttribute("src","http://www.youtube.com/player_api");
    a.onload=doYT;
    a.onreadystatechange=function(){
        if (this.readyState=="complete"||this.readyState=="loaded") doYT()
    };
    (document.getElementsByTagName("head")[0]||document.documentElement).appendChild(a)
}();

Answer 2

This is the method I like best. Uses jQuery FYI.

var player = {
    playVideo: function(container, videoId) {
        if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
            window.onYouTubePlayerAPIReady = function() {
                player.loadPlayer(container, videoId);
            };
            $.getScript('//www.youtube.com/player_api');
        } else {
            player.loadPlayer(container, videoId);
        }
    },
    loadPlayer: function(container, videoId) {
        window.myPlayer = new YT.Player(container, {
            playerVars: {
                modestbranding: 1,
                rel: 0,
                showinfo: 0,
                autoplay: 1
            },
            height: 200,
            width: 200,
            videoId: videoId,
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
};

var containerId = 'ytplayer';
var videoId = 'abc123';
player.playVideo(containerId, videoId);