YouTube iframe API - onReady and onStateChanged events not firing

Question

I'm really having a frustrating time handling YouTube's iFrame API. Everything was working fine until yesterday, when I noticed my .playVideo() and .pauseVideo() functions throw an "undefined is not a function" error. Now, I can see that none of my functions appear to work... the events "onready" and "onstatechange" don't appear to be firing either. Here's my code:

function addVideo(index, url){ $.getScript('https://www.youtube.com/iframe_api', function(){ processPlayer(); }); function processPlayer(){ var videos = document.getElementById("videos"); var individ = document.createElement("div"); individ.setAttribute("class", "individ"); var vid = document.createElement("div"); vid.setAttribute("id","vid"+index); individ.appendChild(vid); videos.appendChild(individ); var player; function onYouTubeIframeAPIReady() { console.log("Are we here at least?"); player = new YT.Player('vid'+index, { height: '165', width: '100%', videoId: url, playerVars: { 'controls': 0, 'showinfo': 0, 'rel': 0}, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); window.players.push(player); //individ.innerHTML+="Added by "+namesList[index]; individ.innerHTML+="<div style='float: left;'><span class='sname'>Let it Burn</span><br/><span class='aname'>Dave Matthews Band</span></div><div style='position: relative;'><img class='s_user' src='http://i.imgur.com/1AmnCp4.png'/></div>"; window.players.push(player); } onYouTubeIframeAPIReady(); // 4. The API will call this function when the video player is ready. function onPlayerReady(event) { //event.target.playVideo(); console.log("We're ready"); } // 5. The API calls this function when the player's state changes. // The function indicates that when playing a video (state=1), // the player should play for six seconds and then stop. var done = false; function onPlayerStateChange(event) { console.log("HI?"); if(event.data === 0) { if(window.currentIndex < window.players.length-1){ var videoID = window.players[window.currentIndex].getVideoUrl().split("v=")[1]; window.players[window.currentIndex].cueVideoById(videoID); window.currentIndex++; window.players[window.currentIndex].playVideo(); } } else if(event.data === 2 ){ onYouTubeIframeAPIReady(); } if(!window.playing){ //alert('playing'); window.playing = true; } else { //alert('stopping'); window.playing = false; } } function stopVideo() { player.stopVideo(); } } }

Any ideas why? I'd really appreciate some help on this. The video itself loads fine, and the YTPlayer object can be called from console... yet these functions don't work, and onready/onstatechange don't fire. The iframes by default have the "origin=" bit in there, so that fix didn't work either.

barak manos · Accepted Answer · 2014-11-29 19:28:55Z

I see several problems in your code, but I'm not sure which one of them is the one that's bothering you.

First of all, you're not supposed to call onYouTubeIframeAPIReady directly.

Instead, you should execute the following and let the browser do it asynchronously:

var scriptElement = document.createElement("script"); scriptElement.src = "http://www.youtube.com/iframe_api"; var firstScriptElement = document.getElementsByTagName("script")[0]; firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);

Second, I believe that you should initialize at least the following player parameters:

playerVars: { "enablejsapi":1, "origin":document.domain, "rel":0 }, events: { "onReady":onPlayerReady, "onError":onPlayerError, "onStateChange":onPlayerStateChange }

Here is the complete relevant piece of code that I have been using:

<body onload="LoadYouTubeIframeAPI()"> <div id="player">Loading Video Player...</div> <script type="text/javascript"> var player = null; function LoadYouTubeIframeAPI() { var scriptElement = document.createElement("script"); scriptElement.src = "http://www.youtube.com/iframe_api"; var firstScriptElement = document.getElementsByTagName("script")[0]; firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement); } function onYouTubeIframeAPIReady() { var playerParams = { playerVars: { "enablejsapi":1, "origin":document.domain, "rel":0 }, events: { "onReady":onPlayerReady, "onError":onPlayerError, "onStateChange":onPlayerStateChange } }; player = new YT.Player("player",playerParams); } function onPlayerReady(event) { ... } function onPlayerError(event) { ... } function onPlayerStateChange(event) { ... } </script> </body>

Thanks for the response. I tried your solution to adding the script, but this time the videos don't populate at all. The function onYouTubeIframeAPIReady() doesn't even appear to fire. Also, I should note that the extra params you sugested -- although I didn't add them initially, they seemed to automatically be added to the iframe. Any other thoughts? I'll keep trying.
@JoeyBonanza: Did you add onload="LoadYouTubeIframeAPI()" to the body tag?
I determined the problem! This line: individ.innerHTML+="<div style='float: left;'><s.. Is causing all the issues. No idea why -- but substituting in your code and removing that fixed it. I'll work now on determining why that line is causing issues to begin with. Thank you!
Got it! For anyone wondering, turns out adding anything to the parent div before the video finishes loading can cause issues to the YT object. Doing the innerHTML BEFORE generating the player fixed everything. Thanks again!
None of these worked for me. Perhaps somebody can help? pastebin.com/TDApehGu

Collectives™ on Stack Overflow

YouTube iframe API - onReady and onStateChanged events not firing

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related