revert demo

feature demo is available here: https://codepen.io/theprojectsomething/full/bGdyJmv

demo/dist/demo.js

@@ -17736,25 +17736,6 @@ typeof navigator === "object" && (function () {
 
 	  var method = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
 	  return method.call(element, selector);
-	} // Closest ancestor element matching selector (also tests element itself)
-
-	function closest(element, selector) {
-	  var _Element2 = Element,
-	      prototype = _Element2.prototype; // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
-
-	  function closestElement() {
-	    var el = this;
-
-	    do {
-	      if (matches$2.matches(el, selector)) return el;
-	      el = el.parentElement || el.parentNode;
-	    } while (el !== null && el.nodeType === 1);
-
-	    return null;
-	  }
-
-	  var method = prototype.closest || closestElement;
-	  return method.call(element, selector);
 	} // Find all elements
 
 	function getElements(selector) {
@@ -18260,7 +18241,7 @@ typeof navigator === "object" && (function () {
 	  });
 	} // Get the closest value in an array
 
-	function closest$1(array, value) {
+	function closest(array, value) {
 	  if (!is$2.array(array) || !array.length) {
 	    return null;
 	  }
@@ -20723,9 +20704,6 @@ typeof navigator === "object" && (function () {
 	    fallback: true,
 	    // Fallback using full viewport/window
 	    iosNative: false // Use the native fullscreen in iOS (disables custom controls)
-	    // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
-	    // Non-ancestors of the player element will be ignored
-	    // container: null, // defaults to the player element
 
 	  },
 	  // Local storage
@@ -21082,10 +21060,7 @@ typeof navigator === "object" && (function () {
 	      y: 0
 	    }; // Force the use of 'full window/browser' rather than fullscreen
 
-	    this.forceFallback = player.config.fullscreen.fallback === 'force'; // Get the fullscreen element
+	    this.forceFallback = player.config.fullscreen.fallback === 'force'; // Register event listeners
-	    // Checks container is an ancestor, defaults to null
-
-	    this.player.elements.fullscreen = player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container); // Register event listeners
 	    // Handle event (incase user presses escape etc)
 
 	    on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
@@ -21311,7 +21286,7 @@ typeof navigator === "object" && (function () {
 	  }, {
 	    key: "target",
 	    get: function get() {
-	      return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen || this.player.elements.container;
+	      return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
 	    }
 	  }], [{
 	    key: "native",
@@ -22314,18 +22289,7 @@ typeof navigator === "object" && (function () {
 
 	      this.bind(elements.controls, 'mouseenter mouseleave', function (event) {
 	        elements.controls.hover = !player.touch && event.type === 'mouseenter';
-	      }); // Also update controls.hover state for any non-player children of fullscreen element (as above)
+	      }); // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-
-	      if (elements.fullscreen) {
-	        for (var i = 0; i < elements.fullscreen.children.length; i++) {
-	          if (!elements.fullscreen.children[i].contains(elements.container)) {
-	            this.bind(elements.fullscreen.children[i], 'mouseenter mouseleave', function (event) {
-	              elements.controls.hover = !player.touch && event.type === 'mouseenter';
-	            });
-	          }
-	        }
-	      } // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-
 
 	      this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function (event) {
 	        elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
@@ -25184,7 +25148,6 @@ typeof navigator === "object" && (function () {
 
 	    this.elements = {
 	      container: null,
-	      fullscreen: null,
 	      captions: null,
 	      buttons: {},
 	      display: {},
@@ -25370,12 +25333,10 @@ typeof navigator === "object" && (function () {
 	      on.call(this, this.elements.container, this.config.events.join(' '), function (event) {
 	        _this.debug.log("event: ".concat(event.type));
 	      });
-	    } // Setup fullscreen
+	    } // Setup interface
-
-
-	    this.fullscreen = new Fullscreen(this); // Setup interface
 	    // If embed but not fully supported, build interface now to avoid flash of controls
 
+
 	    if (this.isHTML5 || this.isEmbed && !this.supported.ui) {
 	      ui.build.call(this);
 	    } // Container listeners
@@ -25383,7 +25344,9 @@ typeof navigator === "object" && (function () {
 
 	    this.listeners.container(); // Global listeners
 
-	    this.listeners.global(); // Setup ads if provided
+	    this.listeners.global(); // Setup fullscreen
+
+	    this.fullscreen = new Fullscreen(this); // Setup ads if provided
 
 	    if (this.config.ads.enabled) {
 	      this.ads = new Ads(this);
@@ -26082,7 +26045,7 @@ typeof navigator === "object" && (function () {
 	      var updateStorage = true;
 
 	      if (!options.includes(quality)) {
-	        var value = closest$1(options, quality);
+	        var value = closest(options, quality);
 	        this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
 	        quality = value; // Don't update storage if quality is not supported
 
@@ -26523,12 +26486,6 @@ typeof navigator === "object" && (function () {
 	        vimeo: {
 	          // Prevent Vimeo blocking plyr.io demo site
 	          referrerPolicy: 'no-referrer'
-	        },
-	        fullscreen: {
-	          enabled: true,
-	          fallback: true,
-	          iosNative: false,
-	          container: '#container'
 	        }
 	      }); // Expose for tinkering in the console
 

demo/index.html

@@ -180,92 +180,6 @@
                             >Download</a
                         >
                     </video>
-
-                    <!-- BEGIN FULLSCREEN OVERLAY EXAMPLE -->
-                    <style>
-                        #container {
-                            overflow: hidden;
-                        }
-                        #container:not(.plyr--fullscreen-fallback) {
-                            position: relative;
-                            margin-top: 16px;
-                        }
-                        .plyr {
-                            margin-top: 0;
-                        }
-                        .plyr--overlay {
-                            position: absolute;
-                            pointer-events: none;
-                            top: 0;
-                            left: 0;
-                            margin: 0.4444em;
-                            transition: 0.2s 0.3s opacity ease-in-out,
-                                        0.3s 0.3s visibility ease-in-out,
-                                        0.3s 0.3s transform ease-in-out;
-                        }
-                        .plyr--hide-controls ~ .plyr--overlay {
-                            transition-delay: 0;
-                            transform:  translateX(-1em);
-                            opacity: 0;
-                            visibility: hidden;
-                        }
-                        .plyr--title {
-                            padding: 0.125em 0.625em;
-                            background: linear-gradient(to left top,#e0f6ff,#f5fcff);
-                            color: #00b3ff;
-                            z-index: 1;
-                            border-radius: 4px;
-                            margin: 0;
-                            pointer-events: all;
-                        }
-                        .plyr--tags {
-                            display: flex;
-                            margin-top:  0.2em;
-                            list-style: none;
-                            transition: 0.3s 0.2s transform ease-in-out;
-                        }
-                        .plyr--hide-controls ~ .plyr--overlay .plyr--tags {
-                            transition-delay: 0.2s;
-                            transform:  translateX(-1em);
-                        }
-                        .plyr--tags-item {
-                            color: #fff;
-                            background: #00b3ff;
-                            padding: 0 0.4em 0.1em;
-                            border: none;
-                            border-radius: 4px;
-                            margin-right: 0.2em;
-                            pointer-events: all;
-                        }
-                        .plyr--tags-item:hover {
-                            color: #00b3ff;
-                            background: #fff;
-                            transition: none;
-                        }
-                        .plyr--tags-item small {
-                            display: inline;
-                            margin: 0;
-                        }
-                        .plyr--tags-item::after {
-                            content:  none;
-                        }
-                    </style>
-                    <div class="plyr--overlay">
-                        <h2 class="plyr--title">View From A Blue Moon</h2>
-                        <ul class="plyr--tags">
-                            <li>
-                                <a class="plyr--tags-item" href="#surf-film"><small>Surf film</small></a>
-                            </li>
-                            <li>
-                                <a class="plyr--tags-item" href="#oceans"><small>Oceans</small></a>
-                            </li>
-                            <li>
-                                <a class="plyr--tags-item" href="#bio"><small>Bio</small></a>
-                            </li>
-                        </ul>
-                    </div>
-                    <!-- / END FULLSCREEN OVERLAY EXAMPLE -->
-
                 </div>
 
                 <ul>

demo/src/js/demo.js

@@ -65,12 +65,6 @@ import toggleClass from './toggle-class';
                     // Prevent Vimeo blocking plyr.io demo site
                     referrerPolicy: 'no-referrer',
                 },
-                fullscreen: {
-                    enabled: true,
-                    fallback: true,
-                    iosNative: false,
-                    container: '#container',
-                },
             });
 
             // Expose for tinkering in the console