4

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!

Community
  • 1
  • 1
buuuue
  • 165
  • 1
  • 3
  • 7
  • 3
    Possible duplicate of [Pause YouTube iframe embed when playing another](http://stackoverflow.com/questions/14942916/pause-youtube-iframe-embed-when-playing-another) – Dekel Dec 31 '16 at 01:55
  • Yes, I've looked into that solution, as mentioned in my post, but I'm trying to add more than 2 YouTube iframes and not quite sure the best way to do that. – buuuue Dec 31 '16 at 02:30
  • Use a class instead of id – Dekel Dec 31 '16 at 02:32
  • I'm sorry, can you be a little more specific? I'm pretty amateur with this stuff and would love to learn more via the solution. What does using class instead of id solve for? – buuuue Dec 31 '16 at 02:50

1 Answers1

3

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

Community
  • 1
  • 1
Vinay
  • 7,442
  • 6
  • 25
  • 48
  • This is great! Thanks so much! – buuuue Dec 31 '16 at 17:22
  • I believe I have to create the players through script so that I can attach the custom play/pause buttons. Or am I wrong? – buuuue Dec 31 '16 at 17:24
  • 2
    Yes you can use either of ways.For script based player it's just `player1.playVideo();` and `player1.pauseVideo();`.But if you are embedding yourself then you can make players array global and call functions on whatever player matches your button's role like [this one](http://jsfiddle.net/3sx5gprs/) – Vinay Dec 31 '16 at 18:21
  • Ahh this is another great solution! Really appreciate the explanation – buuuue Jan 02 '17 at 07:17
  • Hey @Novice, by chance is there an easy solution to also combine the play and pause buttons so that you can toggle between them using just one button? Ex. Press play and the button switches to pause. Then when you click pause, it switches back to a play button? – buuuue Jan 05 '17 at 07:47
  • 2
    Create one function that will handle the stuff pass your button reference and its associated player.In function check for playing/cued/ended status like [this](http://jsfiddle.net/s9mqo20d) – Vinay Jan 05 '17 at 10:56
  • You're a god among men – buuuue Jan 07 '17 at 19:39