Prevent any YouTube iframe from playing when a different one is activated

Question

Prevent any YouTube iframe from playing when a different one is activated

I have a unique challenge where I need to embed 10 YouTube iframes in my webpage, each with its own custom play/pause buttons. While I started with this solution from http://jsfiddle.net/buuuue/dzroqgj0/, I am struggling to modify the code to ensure that when one video starts playing, any other currently playing videos are paused...

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

For instance, if player 1 is active and player 3 is initiated, I want to automatically pause player 1. Although I came across this helpful solution at , it seems like I might need to generate the players using JavaScript so I can integrate the customized play/pause controls.

Any assistance would be greatly appreciated!

javascript iframe youtube youtube-api youtube-iframe-api

Answer 1

Answer №1

Once you have created the players, add them to an array.


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

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

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

You can access each player object's id through its a.id property (a is an object itself, id is a string property).

When a user plays a specific player, you just need to pause all others except the one being played (you can get its id in the stopVideo). This task becomes easy since you have the id.


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 generating players through scripts but simply embedding iframes, then refer to this answer provided by vbence. The following is a demo with enhancements suggested by Jennie

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

All credits go to the original authors of these solutions.

Answer 2

Once you have created the players, add them to an array.


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

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

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

You can access each player object's id through its a.id property (a is an object itself, id is a string property).

When a user plays a specific player, you just need to pause all others except the one being played (you can get its id in the stopVideo). This task becomes easy since you have the id.


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 generating players through scripts but simply embedding iframes, then refer to this answer provided by vbence. The following is a demo with enhancements suggested by Jennie

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

All credits go to the original authors of these solutions.

Prevent any YouTube iframe from playing when a different one is activated

Answer №1

Similar questions

Is it possible for jQuery to detect if an email was sent from the client's email account?

Deciphering the Cause of mapStateToPropsCall in Redux and React

When adding an object to an array in AngularJS, it seems to trigger updates for

Executing multiple asynchronous function calls within a for loop using JavaScript

Removing message board posts

Transform the decimal numbers within an array into percentages before feeding all the values into a graph

Having trouble retrieving a specific key from the state object in Redux using TypeScript

What's the best way to incorporate local storage into my Calculator application?

What is the correct way to update the state in an array of objects using useState?

Storing JSON data in an array using JavaScript is a powerful method to

Unable to view Vue.js bulma modal pop-up

How can Angular 7 be used to accept a ZIP response from an API?

Generating a linked pledge with AngularJS

Implementing NodeJS to showcase an array of items - the step-by-step guide

Discover in Mongo DB with Mongoose, except for the find() method, which excludes documents containing a specific property

Applying Styles to Cells Using the Google Sheets API (v4)

Unable to .map two separate arrays within the same table row, <tr>

Importing multiple exports dynamically in Next.js

Revamp your JavaScript code to trigger when the clock strikes bold!

Creating a BPMN web-based designer using JavaScript