javascript/youtube api - zmienna YT nie jest zdefiniowana

Question

Tworzę odtwarzacz youtube osadzony za pomocą apletu YT, ale wciąż otrzymuję alert, że zmienna YT nie jest zdefiniowana. Widzę, że skrypt do youtube API jest dołączany, co ma stworzyć zmienną YT - dlaczego więc to nie działa? Działa w innym miejscu mojej witryny.

Oto link:

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

i mój kod:

<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

Musisz zawinąć wywołanie YT w funkcję i wywołać ją, gdy skrypt jest włączone. Możesz też dodać skrypt z pliku zamiast wywoływać ten skrypt, aby dołączyć inny skrypt.

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

Jest to metoda, którą lubię najbardziej. Używa 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);