load new youtube iframes with javascript youtube api

Question

All my code is here: http://jsfiddle.net/frankzfaz/B8nex/

Basically, I have the youtube api working the way I want it to with object embeds, but I'd like it to work this way with iframes.

What is going on in my jsfiddle is that new videos are loaded each time a button is pressed, and these videos are loaded from the JavaScript array, one at a time. This is how I want it to work with iframes.

I know I'm supposed to use this:

function onYouTubeIframeAPIReady() { // called automatically when the iframe API loads.
  var player = new YT.Player(playerId, { // passing the reference to the DOM element of your existing iframe
    events: {
      'onStateChange': onPlayerStateChange,
      'onError': onPlayerError
    }
  });
}

I've tried using this in both the global scope and the function scope, no luck! It only works if there's one video loaded immediately on page load. If the video loads after the page, the iframe api will not pick it up.

Why do you want to replace a perfectly working solution with iframes, if I might ask? — Kerstomaat

Kerstomaat Kerstomaat · Accepted Answer · 2014-01-08T18:08:17

You can just initiate the player once and play the next video using player.loadVideoById (docs), just like you're using player.getCurrentTime(). No need to use iframes :).

load new youtube iframes with javascript youtube api

1 Answers