javascript/youtube api - 변수 YT가 정의되지 않았습니다.

Question

YT API를 통해 YouTube 플레이어를 삽입하려고하는데 변수 YT가 정의되지 않았다는 알림이 계속 나타납니다. YouTube API 용 스크립트가 포함되어 있다는 것을 알 수 있습니다.이 스크립트는 YT 변수를 생성하기로되어 있습니다. 왜 이것이 작동하지 않는 것입니까? 그것은 내 사이트의 다른 곳에서 작동합니다.

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

내 코드 : 당신은 함수에서 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

여기 링크입니다. 또는 다른 스크립트를 포함하도록 스크립트를 호출하는 대신 파일에서 스크립트를 추가 할 수 있습니다.

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 참고.

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