I'm creating a youtube player embed via the YT api but I keep getting an alert that the variable YT is not defined. I can see that the script for the youtube API is getting included, which is supposed to create the variable YT - so why isn't this working? It works elsewhere on my site.
Here's the link:
http://oncreativity.tv/site/single/4/7CtQaTmEuWk
and my code:
You'll need to wrap the YT call in a function and call it when the script is included. Or you can add the script from the file instead of calling that script to include another 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) }();
This is the method I like best. Uses 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);