Question

I got the following jsfiddle, which basically has 2 imgs and 2 iframes.
each img and iframe are in a different div (as pair).

the iframe is hidden while the img is not.
When you click on the img, the img disappear, and the iframe become visible instead (and starts immediately to play the video)

if I click on the second img, the first one should be visible again instead of the iframe, and the video should pause, while the video of the second one starts to play

my fiddle above works as I want just for the first 2 occurrences, after that I get an error:

Error: TypeError: player.pauseVideo is not a function

and the video doesnt play.

desperate for help, tried for about 7 hours with no luck.
Thank you!

Answer 1

Solved it by adding the player when click on the img, then check if player exist for this img, if exist play the existent

if (typeof players[index] == 'undefined') {
    players.push(new YT.Player(iframe[0], {
        events: {
            'onReady': function (event) {
                event.target.playVideo();
            }
        }
    }));
} else {
    players[index].seekTo(0).playVideo();
}

jsfiddle