javascript/youtube api - 変数YTが定義されていません

Question

YT APIを使用してYouTubeプレーヤーの埋め込みを作成していますが、変数YTが定義されていないという警告が表示され続けます。私はyoutube API用のスクリプトが含まれていることがわかります。これは変数YTを作成することになっています - なぜこれが機能していないのですか？私のサイトのどこかで動作します。あなたが関数内で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> 

Answer 1

：

http://oncreativity.tv/site/single/4/7CtQaTmEuWk

と私のコード：

はここのリンクです。または、スクリプトを呼び出して別のスクリプトを組み込む代わりに、ファイルからスクリプトを追加することもできます。

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

これは私が一番好きな方法です。 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);