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 potentially more than once on the page).

I am using the IFrame API. I can get a single video to render by creating a new instance of YT.Player inside the onYouTubeIframeAPIReady() method. This makes sense to me - waiting for the library to be loaded. However when I want to have more than one video players on a page I don't know how to trigger the launch of the second, third, forth, etc.

I can't define another onYouTubeIframeAPIReady() method because it will overwrite the first. How is it possible to add more players to the page? It seems strange that there isn't a way to create more videos after this initial method has fired...

Documention on the above method is here: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Thanks in advance.

Edit: (for clarification following the first answer from Miha Lampret)

I can't declare additional players inside the onYouTubeIframeAPIReady() method because this code is introduced via a server side called e.g. a "widget". So rather than:

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });

    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

my code would equivalent to:

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });
}
function onYouTubeIframeAPIReady() {
    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

The onYouTubeIframeAPIReady() is only executed once. What I need to check is the whether is has already been executed once.

Answer 1

onYouTubeIframeAPIReady() is executed after YouTube API is ready to be used, that is after API's Javascript file http://www.youtube.com/iframe_api is loaded.

You can create more players inside onYouTubeIframeAPIReady()

var ytplayer1 = undef;
var ytplayer2 = undef;

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });

    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

Note that you need to declare ytplayer1 and ytplayer2 outside of onYouTubeIframeAPIReady() so you can use them later:

ytplayer1.pauseVideo();
ytplayer2.playVideo();

Answer 2

The way I solved this in the end was by allowing each server side widget included on the page to add the information to a global javascript array. They I used the onYouTubeIframeAPIReady() function to loop over that array to produce instantiate the YT players in turn.

/* the Global array to hold all my stuff */
var new_player_attributes = new Array();
function onYouTubeIframeAPIReady() {
    for(key in new_player_attributes) {
        var player = new YT.Player(key, new_player_attributes[key]);
    }
}

How one goes about formatting this array is a trivial point. It is populated from javascript output to the document from the server side include. This function above and all the other generic utility functions that control the button etc are included only once. Only the definitions of the video parameters/playlist are the only bits included per interaction of the server side loop.

Answer 3

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', { ... })
})