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!
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