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