onYouTubeIframeAPIReady called once but multiple videos needed on a page

Question

I am using a server-side method to drop in YouTube videos with playlists and functioning buttons (think of a website widget that can be called anyway on a page, and potentia

Answer 1

I've implemented enqueueOnYoutubeIframeAPIReady function for adding callbacks to queue, so you can add as many callbacks as you want. It will fire the callback immediately if API is ready.

(function () {
  var isReady = false
  var callbacks = []

  window.enqueueOnYoutubeIframeAPIReady = function (callback) {
    if (isReady) {
      callback()
    } else {
      callbacks.push(callback)
    }
  }

  window.onYouTubeIframeAPIReady = function () {
    isReady = true
    callbacks.forEach(function (callback) {
      callback()
    })
    callbacks.splice(0)
  }
})()

Usage:

enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player1', { ... })
})

// Second player
enqueueOnYoutubeIframeAPIReady(function () {
  var player = new YT.Player('player2', { ... })
})