javascript/youtube api-未定义变量YT

我正在通过YT api创建一个youtube播放器嵌入，但我一直收到一个警告，变量YT没有定义。我可以看到youtube API的脚本被包括在内，它应该创建变量YT——那么为什么这不起作用呢？它在我的网站的其他地方工作

以下是链接：

我的代码是：

<script>

 $(document).ready(function() {

    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;

    var videoSupport = Modernizr.video;
    var ua = navigator.userAgent.toLowerCase();
    var vid = {};

    var params = { allowScriptAccess: "always" };
    var atts = { id: "video_player_flash" };

    {exp:channel:entries channel="creators" dynamic="off" entry_id="{segment_3}" sort="asc" limit="1"}  
    vid.description = "{creator_description}";
    vid.videoID = '{segment_4}';
    vid.link = encodeURI("{creator_link}");
    vid.title = "{title}";
    vid.photos = [];
    {creator_work}  
        vid.photos[{row_index}] = {};
        vid.photos[{row_index}].url = "{work_img}";
        vid.photos[{row_index}].title = "{work_title}";
    {/creator_work}
    {/exp:channel:entries}

    var $vidContainerRef = $('#video_player_container');
    var $vidPlayer = $('<div id="video_player"/>');
    $vidContainerRef.append($vidPlayer);
    vidID = vid.videoID;

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

});

</script>

$（文档）.ready（函数（）{
var tag=document.createElement（'script'）；
tag.src=”http://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
var videoSupport=现代化视频；
var ua=navigator.userAgent.toLowerCase（）；
var vid={}；
var params={allowScriptAccess:“始终”}；
var atts={id:“视频播放器\闪存”}；
{exp:channel:entries channel=“creators”dynamic=“off”entry\u id=“{segment\u 3}”sort=“asc”limit=“1”}
vid.description=“{creator\u description}”；
vid.videoID='{segment_4}'；
vid.link=encodeURI（“{creator_link}”）；
vid.title=“{title}”；
vid.photos=[]；
{创作者工作}
vid.photos[{row_index}]={}；
vid.photos[{row\u index}].url=“{work\u img}”；
vid.photos[{row_index}].title=“{work_title}”；
{/creator_work}
{/exp:channel:entries}
var$vidContainerRef=$（“#视频播放器_容器”）；
变量$vidPlayer=$（''）；
$vidContainerRef.append（$vidPlayer）；
vidID=vid.videoID；
播放器=新的YT.player（'视频播放器'{
宽度：“768”，
高度：'432'，
vidoid:vidID，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
});

您需要将YT调用包装在函数中，并在包含脚本时调用它。或者，您可以从文件中添加脚本，而不是调用该脚本以包含另一个脚本

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)
}();

---

这是我最喜欢的方法。使用jQuery供参考

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);

---

啊-谢谢！这可以解释我在没有缓存任何内容的情况下，在我的站点的其他地方也会出现一些不稳定的行为。