javascript / api youtube - variable YT n'est pas défini

Je suis de la création d'un player youtube embed via YT api, mais je reçois une alerte de la variable YT n'est pas défini. Je vois que le script de l'API youtube est arriver inclus, qui est censé créer la variable YT - alors, pourquoi n'est-ce pas de travail? Il travaille d'ailleurs sur mon site.

Voici le lien:

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

et mon 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>

OriginalL'auteur mheavers | 2012-06-12

  1. 9

    Vous aurez besoin d'envelopper le YT appel à une fonction et de l'appeler quand le script est inclus. Ou vous pouvez ajouter le script dans le fichier au lieu de l'appel à ce script pour inclure un autre 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)
}();
    Ah merci! Qui pourrait expliquer un comportement erratique, j'étais d'ailleurs dans mon site aussi, quand rien n'avait été mis en cache.
    Vous êtes les bienvenus. Content d'avoir pu aider.

    OriginalL'auteur Andy

  2. 7

    C'est la méthode que j'aime le mieux. Utilise jQuery pour info.

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

    OriginalL'auteur Justin