1 files changed, 9 insertions, 7 deletions
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index 5029e7de..7bb22391 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -5,7 +5,7 @@
 // ==========================================================================
 
 import browser from './utils/browser';
-import { closest,getElements, hasClass, toggleClass } from './utils/elements';
+import { closest, getElements, hasClass, toggleClass } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import is from './utils/is';
 import { silencePromise } from './utils/promise';
@@ -43,17 +43,17 @@ class Fullscreen {
     );
 
     // Fullscreen toggle on double click
-    on.call(this.player, this.player.elements.container, 'dblclick', event => {
+    on.call(this.player, this.player.elements.container, 'dblclick', (event) => {
       // Ignore double click in controls
       if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {
         return;
       }
 
-      this.toggle();
+      this.player.listeners.proxy(event, this.toggle, 'fullscreen');
     });
 
     // Tap focus when in fullscreen
-    on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));
+    on.call(this, this.player.elements.container, 'keydown', (event) => this.trapFocus(event));
 
     // Update the UI
     this.update();
@@ -85,7 +85,7 @@ class Fullscreen {
     let value = '';
     const prefixes = ['webkit', 'moz', 'ms'];
 
-    prefixes.some(pre => {
+    prefixes.some((pre) => {
       if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {
         value = pre;
         return true;
@@ -145,8 +145,10 @@ class Fullscreen {
       button.pressed = this.active;
     }
 
+    // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
+    const target = this.target === this.player.media ? this.target : this.player.elements.container;
     // Trigger an event
-    triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+    triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
   }
 
   toggleFallback(toggle = false) {
@@ -189,7 +191,7 @@ class Fullscreen {
       } else if (this.cleanupViewport) {
         viewport.content = viewport.content
           .split(',')
-          .filter(part => part.trim() !== property)
+          .filter((part) => part.trim() !== property)
           .join(',');
       }
     }