Javascript/youtube api - Variable YT ist nicht definiert

Question

Ich erstelle einen Youtube-Player über die YT-API einbetten, aber ich bekomme immer eine Warnung, dass die Variable YT nicht definiert ist. Ich kann sehen, dass das Skript für die Youtube-API aufgenommen wird, das die Variable YT erstellen soll - warum funktioniert das nicht? Es funktioniert anderswo auf meiner Website.

Hier ist der Link:

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

und mein Code:

<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

Sie benötigen die YT Anruf in einer Funktion wickeln und es nennen, wenn das Skript enthalten ist. Oder Sie können das Skript aus der Datei hinzufügen, anstatt dieses Skript aufzurufen, um ein anderes Skript einzuschließen.

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

Dies ist die Methode, die ich am besten mag. Verwendet 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);