Greetings dear experts. The question is this: can anyone in my life have come across a plyr video player and a person will tell me how to prevent multiple videos from being launched simultaneously? According to the plan, when launching a new video, the past should pause or stop completely. So far this is all the code, but it only initializes each player. The load parameter, in window.addEventListener, works with vimeo video successfully, and with YouTube it doesn’t work. Unfortunately, the inserted code does not want to work at all, therefore I leave the link to the codepen. https://codepen.io/Metalspell/pen/PLdwRW

const players = Array.from(document.querySelectorAll(".player")); players.map( player => new Plyr(player, { debug: true, autoplay: false, }) ); players.forEach(function(player) { window.addEventListener("load", function() { player.pause(); }); }); 
 <script src="https://cdn.plyr.io/3.4.8/plyr.js"></script> <link href="https://cdn.plyr.io/3.4.8/plyr.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='player' data-plyr-provider="youtube" data-plyr-embed-id="https://www.youtube.com/watch?v=X1Y8Z44P8qI"></div> <br> <div class='player' data-plyr-provider="youtube" data-plyr-embed-id="https://www.youtube.com/watch?v=EBE1_VWcpCw"></div>

    1 answer 1

    Solution found.

     const players = Array.from(document.querySelectorAll('.player')).map(player => new Plyr(player)); players.forEach(function(instance,index) { instance.on('play',function(){ players.forEach(function(instance1,index1){ if(instance != instance1){ instance1.pause(); } }); }); });