'Plyr library: can't stop event propagation when multiple instances of plyr are on the same page

Expected behaviour : Having multiple instances of Plyr on the page, should be able to add a 'enterfullscreen' and 'exitfullscreen' event that fires when a specific instance's full screen button is clicked. - this works perfectly when only 1 instance of Plyr exists. using event.stopPropagation() / event.stopImmediatePropagation() should stop other instances from triggering.

Actual behaviour :

'enterfullscreen' successfully triggers , but also calls the custom 'exitfullscreen' event multiple times (even though still in full screen mode). The amount of extra unwanted triggers for 'exitfullscreen' pends where the element is in the DOM, it triggers each subsequent instance of plyr to 'exitfullscreen' event.

Console errors (if any) no errors

player[0].on('enterfullscreen', function(event) {
    alert('enter full screen');
    event.stopImmediatePropagation();
});
player[0].on('exitfullscreen', function(event) {
    alert('exit full screen');
    event.stopImmediatePropagation();
});

Link to where the bug is happening https://codepen.io/stewart-so-bold/pen/BammmoR



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source