Plyr.js - Events not implementing on multiple video element

Question

I have apply plyr.js with play and pause events to automatically enter and exit fullscreen respectively.

but the events methods not working on multiple videos it only works when I apply single video.

HTML

<div class="video-container mini-canvas">
   <video id="player" playsinline class="js-player">
     <source src="./background-image3.mp4" type="video/mp4" />
   </video>

 </div>

 <div class="video-container mini-canvas">
     <video id="player" playsinline class="js-player">
         <source src="./background-image3.mp4" type="video/mp4" />
     </video>

 </div>

JS

 const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, {
    clickToPlay: true,
 }));



 players.on('play', function() {
    console.log('Play')
    players.fullscreen.enter();
    document.querySelector('.video-container').classList.remove('mini-canvas')
 })
   
 players.on('pause', function() {
    console.log('Pause')
    players.fullscreen.exit();
    document.querySelector('.video-container').classList.add('mini-canvas')
 })

CSS

   .video-container {
        width: 150px;
        margin: 0 auto;
    }
    .video-container.mini-canvas > .plyr {
        filter: blur(2px);
        
    }
    .video-container.mini-canvas .plyr__controls {
        display: none;
    }

Below is the link to download HTML file

https://github.com/Yusufzai/issue-plyer.js-github.git

Any help would be appreciated

Answer 1

It took me some time but I figure out my mistake what I am doing wrong.

I am not implementing it in the loop to extract those values

for (let index = 0; index < players.length; index++) {
    players[index].on('play', function() {
        console.log('Play')
        players[index].fullscreen.enter();
        document.querySelector('.video-container').classList.remove('mini-canvas')
    })

    players[index].on('pause', function() {
        console.log('Pause')
        players[index].fullscreen.exit();
        document.querySelector('.video-container').classList.add('mini-canvas')
    })
}