Stop any embeded YouTube iframe when another is played

Question

I am embedding about 10 YouTube iframes in my page, all with their own custom play/pause buttons. I have used this solution to begin http://jsfiddle.net/buuuue/dzroqgj0/ but I'm not sure how to tweak this piece of the code to stop ANY other video that is playing if another one begins...

function stopVideo(player_id) {
    if (player_id == "player1") {
        player2.stopVideo();
    } else if (player_id == "player2") {
        player1.stopVideo();
    }
}

For example, if player 1 is currently playing, and player 3 is played, I'd want player 1 to stop playing. I've also looked into this solution https://stackoverflow.com/a/38405859/1798756, but I think I need to create the players via JS so that I can also create the custom play/pause buttons.

Thanks in advance for any help!

Answer 1

After creating players push them onto an array.

    var vids =[];
    player1 = new YT.Player('player1', {
     //stuff
    });
    vids.push(player1);

    player2 = new YT.Player('player2', {
     // stuff
    });
    vids.push(player2);

    ....
    ..
    playerN = new YT.Player('playerN', {
     // stuff
    });
    vids.push(playerN);

Every player object's id can be accessed by its a.id property(a is itself an object , id is a property(string) )

Now when user plays a given player you have to just pause all other except the one being played(id of which you get in stopVideo).Since you have id it's easy

 function stopVideo(player_id) {
  for(var i=0;i<vids.length;i++){
    if (player_id !=vids[i].a.id)    
      vids[i].stopVideo();
  }
 }

Example : - http://jsfiddle.net/4t9ah1La/

If you are not creating player through scripts but rather just embedding iframes then this answer mentioned by vbence is enough , below is a demo of that with improvements suggested by Jennie

Example : - http://jsfiddle.net/fyb7fyw1/

All credits to respective original authors