javascript/youtube api - variabile YT non definita

Question

Sto creando un player di YouTube incorporato tramite l'API di YT ma continuo a ricevere un avviso che la variabile YT non è definita. Vedo che viene incluso lo script per l'API di youtube, che dovrebbe creare la variabile YT - quindi perché non funziona? Funziona altrove sul mio sito.

ecco il link:

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

e il mio codice:

<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

Avrai bisogno di avvolgere la chiamata YT in una funzione e chiamarlo quando lo script è incluso. Oppure puoi aggiungere lo script dal file invece di chiamare quello script per includere un altro 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

Questo è il metodo che mi piace di più. Utilizza 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);