CODEWITHSUNDEEP
javascriptyoutubeyoutube-javascript-apiyoutube-iframe-api
Terence Chow
Terence Chow

Reputation: 11163

onYoutubePlayerAPIReady does not fire

In my index.html I have

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

which is taken directly from the Google.

Rather then set a function right after, in my index.js, I have added a

window.onYouTubePlayerAPIReady = this.onYoutubeReadyCallback.bind(this)

However I don't always see the onYouTubePlayerAPIReady function firing. (I have a console log in that function to see when it fires.)

The odd thing is sometimes it fires, and other times it does not.

I can't figure it out. What could be a reason that it is not firing sometimes but is firing others?

Is there some sort of race condition?

Is window.onYoutubePlayerAPIReady being added after the script tag is loaded? Is it loaded after the script tag sometimes? What's going on and what can I do to fix this?

Upvotes: 2

Views: 2740

Answers (2)

Виктор Гусев
Виктор Гусев

Reputation: 31

The answer from Jeremy states:

I had to make sure the youtube.com/player_api script had to be included AFTER the definition of the onYouTubePlayerAPIReady function

This works, but in addition, don't forget this attribute: enablejsapi=1, e.g.:

src="https://www.youtube.com/embed/bqAM6OwzjBg?rel=0&enablejsapi=1&controls=0&showinfo=0"

Upvotes: 1

Jeremy
Jeremy

Reputation: 3748

I had a similar issue: sometimes the onYouTubePlayerAPIReady would fire, sometimes it wouldn't. I had to make sure the youtube.com/player_api script had to be included AFTER the definition of the onYouTubePlayerAPIReady function

See the note on this JSFiddle (not mine): http://jsfiddle.net/ramp/4M2YL/

Upvotes: 4

Related Questions