jquery - YouTube Iframe API to handle multiple players is not working on IE/Opera

Question

jsFiddle: http://jsfiddle.net/krU9K/4/

My WordPress posts will have embed youtube and vimeo videos beneath the post thumbnail, after user clicks on the thumbnail I want it to fadeout and video should start playing.

All embed iframe ids are of this structure "youtube-{postid}" or "vimeo-{postid}". So on page load I can check for the id prefix and use youtube/vimeo player api initialization and put them into global var players - {}; object to hold all players.

Firefox/Chrome works OK, but not on Opera/IE. Operas console gives an error Uncaught exception: TypeError: Cannot convert 'players[iframeID]' to object. So it looks like on Opera the object is empty while on FF/Chrome it has all players and works.

Any tips/ideas?

Answer 1

It turns out the jQuery .each() function is occurring before the iframes are ready on the page, so wrap a standard jQuery Document Ready Function for that.

Updated jsfiddle:
http://jsfiddle.net/krU9K/17/