v3.6.3 (#2016)

* force fullscreen events to trigger on plyr element (media element in iOS) and not fullscreen container * Fixing "missing code in detail" for PlyrEvent type When using typescript and listening for youtube statechange event, it is missing the code property definition inside the event (even though it is provided in the code). By making events a map of key-value, we can add easily custom event type for specific event name. Since YouTube "statechange" event differs from the basic PlyrEvent, I added a new Event Type "PlyrStateChangeEvent" having a code property corresponding to a YoutubeState enum defined by the YouTube API documentation. This pattern follows how addEventListener in the lib.dom.d.ts is defined. * Update link to working dash.js demo (was broken) * Fix PreviewThumbnailsOptions type According to the docs, the `src` should also accept an array of strings. * fix issue #1872 * Check if key is a string before attempt --plyr checking * Fix for Slow loading videos not autoplaying * Fix for Slow loading videos not autoplaying * Network requests are not cancelled after the player is destroyed * Fix for apect ratio problem when using Vimeo player on mobile devices (issue #1940) * chore: update packages and linting * Invoke custom listener on triggering fullscreen via double-click * Fix volume when unmuting from volume 0 * adding a nice Svelte plugin that I found * Add missing unit to calc in media query * Assigning player's lastSeekTime on rewind/fast forward to prevent immediate controls hide on mobile * Fix youtube not working when player is inside shadow dom * v3.6.2 * ESLint to use common config * add BitChute to users list * Fix aspect ratio issue * Revert noCookie change * feat: demo radius tweaks * fix: poster image shouldn’t receive click events * chore: package updates * chore: linting * feat: custom controls option for embedded players * Package upgrades * ESLint to use common config * Linting changes * Update README.md * chore: formatting * fix: revert pointer events change for poster * fix: hack for Safari 14 not repainting Vimeo embed on entering fullscreen * fix: demo using custom controls for YouTube * doc: Add STROLLÿN among the list of Plyr users * Fixes #2005 * fix: overflowing volume slider * chore: clean up CSS * fix: hide poster when not using custom controls * Package upgrades * ESLint to use common config * Linting changes * chore: revert customControls default option (to prevent breaking change) * docs: changelog for v3.6.3 Co-authored-by: Som Meaden <som@theprojectsomething.com> Co-authored-by: akuma06 <demon.akuma06@gmail.com> Co-authored-by: Jonathan Arbely <dev@jonathanarbely.de> Co-authored-by: Takeshi <iwatakeshi@users.noreply.github.com> Co-authored-by: Hex <hex@codeigniter.org.cn> Co-authored-by: Syed Husain <syed.husain@appspace.com> Co-authored-by: Danielh112 <Daniel@sbgsportssoftware.com> Co-authored-by: Danil Stoyanov <d.stoyanov@corp.mail.ru> Co-authored-by: Guru Prasad Srinivasa <gurupras@buffalo.edu> Co-authored-by: Stephane Fortin Bouchard <stephane.f.bouchard@gmail.com> Co-authored-by: Zev Averbach <zev@averba.ch> Co-authored-by: Vincent Orback <hello@vincentorback.se> Co-authored-by: trafium <trafium@gmail.com> Co-authored-by: xansen <27698939+xansen@users.noreply.github.com> Co-authored-by: zoomerdev <59863739+zoomerdev@users.noreply.github.com> Co-authored-by: Mikaël Castellani <mikael.castellani@gmail.com> Co-authored-by: dirkjf <d.j.faber@outlook.com>
2020-11-14 13:24:11 +11:00
parent 5d2c288721
commit e8d883edba
55 changed files with 3858 additions and 2180 deletions
@@ -1,30 +1,18 @@
 {
-    "parser": "babel-eslint",
+  "parser": "babel-eslint",
-    "extends": ["airbnb-base", "prettier"],
+  "extends": ["@sampotts/eslint-config/es6"],
-    "plugins": ["simple-import-sort", "import"],
+  "env": {
-    "env": {
+    "browser": true,
-        "browser": true,
+    "es6": true
-        "es6": true
+  },
-    },
+  "globals": {
-    "globals": {
+    "Plyr": false,
-        "Plyr": false,
+    "jQuery": false
-        "jQuery": false
+  },
-    },
+  "rules": {
-    "rules": {
+    "import/no-cycle": "warn"
-        "import/no-cycle": "warn",
+  },
-        "padding-line-between-statements": [
+  "parserOptions": {
-            "error",
+    "sourceType": "module"
-            {
+  }
                "blankLine": "never",
                "prev": ["singleline-const", "singleline-let", "singleline-var"],
                "next": ["singleline-const", "singleline-let", "singleline-var"]
            }
        ],
        "sort-imports": "off",
        "import/order": "off",
        "simple-import-sort/sort": "error"
    },
    "parserOptions": {
        "sourceType": "module"
    }
 }
@@ -1,3 +1,18 @@
 ### v3.6.3
 - Fix volume when unmuting from volume 0 using YouTube (thanks @stephanefbouchard)
 - Add missing unit to calc in media query (thanks @vincentorback)
 - Assigning player's lastSeekTime on rewind/fast forward to prevent immediate controls hide on mobile (thanks @trafium)
 - Fix for volume control overflowing in Firefox (thanks @dirkjf)
 - Force fullscreen events to trigger on plyr element (media element in iOS) and not fullscreen container (thanks @theprojectsomething)
 - TypeScript types improvements (thanks @akuma06 & @iwatakeshi)
 - Dash demo link fixed (thanks @jonathanarbely)
 - Fix "A `ReferenceError: _classCallCheck is not defined` error has occurred." error (thanks @hex-ci)
 - Fix issue with CSS custom property check (thanks @syedhusain-appspace)
 - Fix for slow loading videos not autoplaying (thanks @DanielHuntleySBG)
 - Fix for betwork requests are not cancelled after the player is destroyed (thanks @DanielHuntleySBG)
 - Added option to disable custom controls for YouTube and Vimeo
 ### v3.6.2
 - Fixes for CSS Custom Property related errors in some build tools (thanks @Bashev)
@@ -31,7 +31,7 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
 ### Demos
-You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=zaBgBy), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
+You can try Plyr in Codepen using our minimal templates: [HTML5 video](https://codepen.io/pen?template=bKeqpr), [HTML5 audio](https://codepen.io/pen?template=rKLywR), [YouTube](https://codepen.io/pen?template=GGqbbJ), [Vimeo](https://codepen.io/pen?template=bKeXNq). For Streaming we also have example integrations with: [Dash.js](https://codepen.io/pen?template=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
 # Quick setup
@@ -790,6 +790,7 @@ Some awesome folks have made plugins for CMSs and Components for JavaScript fram
 | Neos      | Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))                    | [https://packagist.org/packages/jonnitto/plyr](https://packagist.org/packages/jonnitto/plyr) |
 | Kirby     | Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))            | [https://github.com/dpschen/kirby-plyrtag](https://github.com/dpschen/kirby-plyrtag)         |
 | REDAXO    | FriendsOfRedaxo / skerbis ([@skerbis](https://friendsofredaxo.github.io)) | [https://github.com/FriendsOfREDAXO/plyr](https://github.com/FriendsOfREDAXO/plyr)           |
 | svelte-plyr    | Ben Woodward / benwoodward ([@benwoodward](https://github.com/benwoodward)) | [https://github.com/benwoodward](https://github.com/benwoodward)           |
 # Issues
@@ -836,6 +837,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 - [BitChute](https://www.bitchute.com)
 - [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)
 - [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
 - [STROLLÿN: Work with a View](https://strollyn.com)
 If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
@@ -5,10 +5,10 @@
  "homepage": "https://plyr.io",
  "author": "Sam Potts <sam@potts.es>",
  "dependencies": {
-    "@sentry/browser": "^5.15.5",
+    "@sentry/browser": "^5.22.3",
    "core-js": "^3.6.5",
    "custom-event-polyfill": "^1.0.7",
    "shr-buttons": "2.0.3",
-    "url-polyfill": "^1.1.8"
+    "url-polyfill": "^1.1.10"
  }
 }
@@ -22,7 +22,7 @@ import toggleClass from './toggle-class';
  if (window.location.host === production) {
    Sentry.init({
      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
-      whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+      whitelistUrls: [production].map((d) => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
    });
  }
@@ -79,13 +79,13 @@ import toggleClass from './toggle-class';
    function render(type) {
      // Remove active classes
-      Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+      Array.from(buttons).forEach((button) => toggleClass(button.parentElement, 'active', false));
      // Set active on parent
      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
      // Show cite
-      Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+      Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {
        // eslint-disable-next-line no-param-reassign
        cite.hidden = true;
      });
@@ -110,7 +110,7 @@ import toggleClass from './toggle-class';
    }
    // Bind to each button
-    Array.from(buttons).forEach(button => {
+    Array.from(buttons).forEach((button) => {
      button.addEventListener('click', () => {
        const type = button.getAttribute('data-source');
@@ -123,7 +123,7 @@ import toggleClass from './toggle-class';
    });
    // List for backwards/forwards
-    window.addEventListener('popstate', event => {
+    window.addEventListener('popstate', (event) => {
      if (event.state && Object.keys(event.state).includes('type')) {
        setSource(event.state.type);
      }
@@ -3,7 +3,7 @@ const container = document.getElementById('container');
 const tabClassName = 'tab-focus';
 // Remove class on blur
-document.addEventListener('focusout', event => {
+document.addEventListener('focusout', (event) => {
  if (!event.target.classList || container.contains(event.target)) {
    return;
  }
@@ -12,7 +12,7 @@ document.addEventListener('focusout', event => {
 });
 // Add classname to tabbed elements
-document.addEventListener('keydown', event => {
+document.addEventListener('keydown', (event) => {
  if (event.keyCode !== 9) {
    return;
  }
@@ -4,7 +4,7 @@
 // Example players
 .plyr {
-  border-radius: $border-radius-base;
+  border-radius: $border-radius-large;
  box-shadow: 0 2px 15px rgba(#000, 0.1);
  margin: $spacing-base auto;
@@ -7,6 +7,7 @@ $arrow-size: 5px;
 // Radii
 $border-radius-base: 4px;
 $border-radius-large: 8px;
 // Background
 $page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
@@ -2,56 +2,56 @@
 # yarn lockfile v1
-"@sentry/browser@^5.15.5":
+"@sentry/browser@^5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.5.tgz#d9a51f1388581067b50d30ed9b1aed2cbb333a36"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.3.tgz#7a64bd1cf01bf393741a3e4bf35f82aa927f5b4e"
-  integrity sha512-rqDvjk/EvogfdbZ4TiEpxM/lwpPKmq23z9YKEO4q81+1SwJNua53H60dOk9HpRU8nOJ1g84TMKT2Ov8H7sqDWA==
+  integrity sha512-2TzE/CoBa5ZkvxJizDdi1Iz1ldmXSJpFQ1mL07PIXBjCt0Wxf+WOuFSj5IP4L40XHfJE5gU8wEvSH0VDR8nXtA==
  dependencies:
-    "@sentry/core" "5.15.5"
+    "@sentry/core" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"
-"@sentry/core@5.15.5":
+"@sentry/core@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.5.tgz#40ea79bff5272d3fbbeeb4a98cdc59e1adbd2c92"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.3.tgz#030f435f2b518f282ba8bd954dac90cd70888bd7"
-  integrity sha512-enxBLv5eibBMqcWyr+vApqeix8uqkfn0iGsD3piKvoMXCgKsrfMwlb/qo9Ox0lKr71qIlZVt+9/A2vZohdgnlg==
+  integrity sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==
  dependencies:
-    "@sentry/hub" "5.15.5"
+    "@sentry/hub" "5.22.3"
-    "@sentry/minimal" "5.15.5"
+    "@sentry/minimal" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"
-"@sentry/hub@5.15.5":
+"@sentry/hub@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.5.tgz#f5abbcdbe656a70e2ff02c02a5a4cffa0f125935"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.3.tgz#08309a70d2ea8d5e313d05840c1711f34f2fffe5"
-  integrity sha512-zX9o49PcNIVMA4BZHe//GkbQ4Jx+nVofqU/Il32/IbwKhcpPlhGX3c1sOVQo4uag3cqd/JuQsk+DML9TKkN0Lw==
+  integrity sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==
  dependencies:
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"
-"@sentry/minimal@5.15.5":
+"@sentry/minimal@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.5.tgz#a0e4e071f01d9c4d808094ae7203f6c4cca9348a"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.3.tgz#706e4029ae5494123d3875c658ba8911aa5cc440"
-  integrity sha512-zQkkJ1l9AjmU/Us5IrOTzu7bic4sTPKCatptXvLSTfyKW7N6K9MPIIFeSpZf9o1yM2sRYdK7GV08wS2eCT3JYw==
+  integrity sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==
  dependencies:
-    "@sentry/hub" "5.15.5"
+    "@sentry/hub" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
    tslib "^1.9.3"
-"@sentry/types@5.15.5":
+"@sentry/types@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.5.tgz#16c97e464cf09bbd1d2e8ce90d130e781709076e"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.3.tgz#d1d547b30ee8bd7771fa893af74c4f3d71f0fd18"
-  integrity sha512-F9A5W7ucgQLJUG4LXw1ZIy4iLevrYZzbeZ7GJ09aMlmXH9PqGThm1t5LSZlVpZvUfQ2rYA8NU6BdKJSt7B5LPw==
+  integrity sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==
-"@sentry/utils@5.15.5":
+"@sentry/utils@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.5.tgz#dec1d4c79037c4da08b386f5d34409234dcbfb15"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.3.tgz#e3bda3e789239eb16d436f768daa12829f33d18f"
-  integrity sha512-Nl9gl/MGnzSkuKeo3QaefoD/OJrFLB8HmwQ7HUbTXb6E7yyEzNKAQMHXGkwNAjbdYyYbd42iABP6Y5F/h39NtA==
+  integrity sha512-AHNryXMBvIkIE+GQxTlmhBXD0Ksh+5w1SwM5qi6AttH+1qjWLvV6WB4+4pvVvEoS8t5F+WaVUZPQLmCCWp6zKw==
  dependencies:
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
    tslib "^1.9.3"
 core-js@^3.6.5:
@@ -74,7 +74,7 @@ tslib@^1.9.3:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
-url-polyfill@^1.1.8:
+url-polyfill@^1.1.10:
-  version "1.1.8"
+  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.10.tgz#fd5bbcf66c9491fa682b0cb6d6a855e1643a9281"
-  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==
+  integrity sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A==
@@ -1,7 +1,7 @@
 typeof navigator === "object" && (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define('Plyr', factory) :
-  (global = global || self, global.Plyr = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Plyr = factory());
 }(this, (function () { 'use strict';
  function _classCallCheck(instance, Constructor) {
@@ -1197,7 +1197,12 @@ typeof navigator === "object" && (function (global, factory) {
    if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
      var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
      var offset = (height - padding) / (height / 50);
-      this.media.style.transform = "translateY(-".concat(offset, "%)");
+
      if (this.fullscreen.active) {
        wrapper.style.paddingBottom = null;
      } else {
        this.media.style.transform = "translateY(-".concat(offset, "%)");
      }
    } else if (this.isHTML5) {
      wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
    }
@@ -4101,10 +4106,12 @@ typeof navigator === "object" && (function (global, factory) {
        if (is$1.element(button)) {
          button.pressed = this.active;
-        } // Trigger an event
+        } // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
-        triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+        var target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event
        triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
      }
    }, {
      key: "toggleFallback",
@@ -4570,7 +4577,7 @@ typeof navigator === "object" && (function (global, factory) {
      // Loop through values (as they are the keys when the object is spread 🤔)
      Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
      .filter(function (key) {
-        return !is$1.empty(key) && key.startsWith('--plyr');
+        return !is$1.empty(key) && is$1.string(key) && key.startsWith('--plyr');
      }).forEach(function (key) {
        // Set on the container
        _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
@@ -8291,9 +8298,9 @@ typeof navigator === "object" && (function (global, factory) {
      if (this.isHTML5 && this.config.autoplay) {
-        setTimeout(function () {
+        this.once('canplay', function () {
          return silencePromise(_this.play());
-        }, 10);
+        });
      } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -8582,7 +8589,9 @@ typeof navigator === "object" && (function (global, factory) {
            }
          } else {
            // Unbind listeners
-            unbindListeners.call(_this3); // Replace the container with the original element provided
+            unbindListeners.call(_this3); // Cancel current network requests
            html5.cancelRequests.call(_this3); // Replace the container with the original element provided
            replaceElement(_this3.elements.original, _this3.elements.container); // Event
@@ -1,4 +1,4 @@
-typeof navigator === "object" && function _classCallCheck(instance, Constructor) {
+function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
@@ -1191,7 +1191,12 @@ function setAspectRatio(input) {
  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
    var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
    var offset = (height - padding) / (height / 50);
-    this.media.style.transform = "translateY(-".concat(offset, "%)");
+
    if (this.fullscreen.active) {
      wrapper.style.paddingBottom = null;
    } else {
      this.media.style.transform = "translateY(-".concat(offset, "%)");
    }
  } else if (this.isHTML5) {
    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
  }
@@ -4095,10 +4100,12 @@ var Fullscreen = /*#__PURE__*/function () {
      if (is$1.element(button)) {
        button.pressed = this.active;
-      } // Trigger an event
+      } // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
-      triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+      var target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event
      triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
    }
  }, {
    key: "toggleFallback",
@@ -4564,7 +4571,7 @@ var ui = {
    // Loop through values (as they are the keys when the object is spread 🤔)
    Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
    .filter(function (key) {
-      return !is$1.empty(key) && key.startsWith('--plyr');
+      return !is$1.empty(key) && is$1.string(key) && key.startsWith('--plyr');
    }).forEach(function (key) {
      // Set on the container
      _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
@@ -8285,9 +8292,9 @@ var Plyr = /*#__PURE__*/function () {
    if (this.isHTML5 && this.config.autoplay) {
-      setTimeout(function () {
+      this.once('canplay', function () {
        return silencePromise(_this.play());
-      }, 10);
+      });
    } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -8576,7 +8583,9 @@ var Plyr = /*#__PURE__*/function () {
          }
        } else {
          // Unbind listeners
-          unbindListeners.call(_this3); // Replace the container with the original element provided
+          unbindListeners.call(_this3); // Cancel current network requests
          html5.cancelRequests.call(_this3); // Replace the container with the original element provided
          replaceElement(_this3.elements.original, _this3.elements.container); // Event
@@ -1,7 +1,7 @@
 typeof navigator === "object" && (function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define('Plyr', factory) :
-  (global = global || self, global.Plyr = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Plyr = factory());
 }(this, (function () { 'use strict';
  // Polyfill for creating CustomEvents on IE9/10/11
@@ -4408,7 +4408,7 @@ typeof navigator === "object" && (function (global, factory) {
    var checkIfURLSearchParamsSupported = function checkIfURLSearchParamsSupported() {
      try {
        var URLSearchParams = global.URLSearchParams;
-        return new URLSearchParams('?a=1').toString() === 'a=1' && typeof URLSearchParams.prototype.set === 'function';
+        return new URLSearchParams('?a=1').toString() === 'a=1' && typeof URLSearchParams.prototype.set === 'function' && typeof URLSearchParams.prototype.entries === 'function';
      } catch (e) {
        return false;
      }
@@ -4532,7 +4532,11 @@ typeof navigator === "object" && (function (global, factory) {
          anchorElement.href = anchorElement.href; // force href to refresh
        }
-        if (anchorElement.protocol === ':' || !/:/.test(anchorElement.href)) {
+        var inputElement = doc.createElement('input');
        inputElement.type = 'url';
        inputElement.value = url;
        if (anchorElement.protocol === ':' || !/:/.test(anchorElement.href) || !inputElement.checkValidity() && !base) {
          throw new TypeError('Invalid URL');
        }
@@ -7433,7 +7437,12 @@ typeof navigator === "object" && (function (global, factory) {
    if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
      var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
      var offset = (height - padding) / (height / 50);
-      this.media.style.transform = "translateY(-".concat(offset, "%)");
+
      if (this.fullscreen.active) {
        wrapper.style.paddingBottom = null;
      } else {
        this.media.style.transform = "translateY(-".concat(offset, "%)");
      }
    } else if (this.isHTML5) {
      wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
    }
@@ -10422,10 +10431,12 @@ typeof navigator === "object" && (function (global, factory) {
        if (is$1.element(button)) {
          button.pressed = this.active;
-        } // Trigger an event
+        } // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
-        triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+        var target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event
        triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
      }
    }, {
      key: "toggleFallback",
@@ -10904,7 +10915,7 @@ typeof navigator === "object" && (function (global, factory) {
      // Loop through values (as they are the keys when the object is spread 🤔)
      Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
      .filter(function (key) {
-        return !is$1.empty(key) && key.startsWith('--plyr');
+        return !is$1.empty(key) && is$1.string(key) && key.startsWith('--plyr');
      }).forEach(function (key) {
        // Set on the container
        _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
@@ -14726,9 +14737,9 @@ typeof navigator === "object" && (function (global, factory) {
      if (this.isHTML5 && this.config.autoplay) {
-        setTimeout(function () {
+        this.once('canplay', function () {
          return silencePromise(_this.play());
-        }, 10);
+        });
      } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -15017,7 +15028,9 @@ typeof navigator === "object" && (function (global, factory) {
            }
          } else {
            // Unbind listeners
-            unbindListeners.call(_this3); // Replace the container with the original element provided
+            unbindListeners.call(_this3); // Cancel current network requests
            html5.cancelRequests.call(_this3); // Replace the container with the original element provided
            replaceElement(_this3.elements.original, _this3.elements.container); // Event
@@ -1,4 +1,4 @@
-typeof navigator === "object" && // Polyfill for creating CustomEvents on IE9/10/11
+// Polyfill for creating CustomEvents on IE9/10/11
 // code pulled from:
 // https://github.com/d4tocchini/customevent-polyfill
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent#Polyfill
@@ -4402,7 +4402,7 @@ function _nonIterableRest() {
  var checkIfURLSearchParamsSupported = function checkIfURLSearchParamsSupported() {
    try {
      var URLSearchParams = global.URLSearchParams;
-      return new URLSearchParams('?a=1').toString() === 'a=1' && typeof URLSearchParams.prototype.set === 'function';
+      return new URLSearchParams('?a=1').toString() === 'a=1' && typeof URLSearchParams.prototype.set === 'function' && typeof URLSearchParams.prototype.entries === 'function';
    } catch (e) {
      return false;
    }
@@ -4526,7 +4526,11 @@ function _nonIterableRest() {
        anchorElement.href = anchorElement.href; // force href to refresh
      }
-      if (anchorElement.protocol === ':' || !/:/.test(anchorElement.href)) {
+      var inputElement = doc.createElement('input');
      inputElement.type = 'url';
      inputElement.value = url;
      if (anchorElement.protocol === ':' || !/:/.test(anchorElement.href) || !inputElement.checkValidity() && !base) {
        throw new TypeError('Invalid URL');
      }
@@ -7427,7 +7431,12 @@ function setAspectRatio(input) {
  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
    var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
    var offset = (height - padding) / (height / 50);
-    this.media.style.transform = "translateY(-".concat(offset, "%)");
+
    if (this.fullscreen.active) {
      wrapper.style.paddingBottom = null;
    } else {
      this.media.style.transform = "translateY(-".concat(offset, "%)");
    }
  } else if (this.isHTML5) {
    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
  }
@@ -10416,10 +10425,12 @@ var Fullscreen = /*#__PURE__*/function () {
      if (is$1.element(button)) {
        button.pressed = this.active;
-      } // Trigger an event
+      } // Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
-      triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+      var target = this.target === this.player.media ? this.target : this.player.elements.container; // Trigger an event
      triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
    }
  }, {
    key: "toggleFallback",
@@ -10898,7 +10909,7 @@ var ui = {
    // Loop through values (as they are the keys when the object is spread 🤔)
    Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
    .filter(function (key) {
-      return !is$1.empty(key) && key.startsWith('--plyr');
+      return !is$1.empty(key) && is$1.string(key) && key.startsWith('--plyr');
    }).forEach(function (key) {
      // Set on the container
      _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
@@ -14720,9 +14731,9 @@ var Plyr = /*#__PURE__*/function () {
    if (this.isHTML5 && this.config.autoplay) {
-      setTimeout(function () {
+      this.once('canplay', function () {
        return silencePromise(_this.play());
-      }, 10);
+      });
    } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -15011,7 +15022,9 @@ var Plyr = /*#__PURE__*/function () {
          }
        } else {
          // Unbind listeners
-          unbindListeners.call(_this3); // Replace the container with the original element provided
+          unbindListeners.call(_this3); // Cancel current network requests
          html5.cancelRequests.call(_this3); // Replace the container with the original element provided
          replaceElement(_this3.elements.original, _this3.elements.container); // Event
@@ -35,66 +35,66 @@
    "lint:fix": "eslint --fix src/js",
    "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
    "deploy": "yarn lint && gulp version && gulp build && gulp deploy",
-    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\""
+    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\"",
    "start": "gulp"
  },
  "devDependencies": {
    "@sampotts/eslint-config": "1.1.5",
    "ansi-colors": "^4.1.1",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^10.0.2",
-    "aws-sdk": "^2.668.0",
+    "aws-sdk": "^2.773.0",
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
+    "browser-sync": "^2.26.13",
-    "del": "^5.1.0",
+    "del": "^6.0.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.3.1",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "fancy-log": "^1.3.3",
    "fastly-purge": "^1.0.1",
    "git-branch": "^2.0.1",
    "gulp": "^4.0.2",
-    "gulp-awspublish": "^4.1.1",
+    "gulp-awspublish": "^4.1.2",
    "gulp-better-rollup": "^4.0.1",
    "gulp-filter": "^6.0.0",
    "gulp-header": "^2.0.9",
    "gulp-hub": "^4.2.0",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-open": "^3.0.1",
    "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
    "gulp-svgstore": "^7.0.1",
-    "gulp-terser": "^1.2.0",
+    "gulp-terser": "^1.4.1",
    "postcss": "^8.1.7",
    "postcss-clean": "^1.1.0",
-    "postcss-custom-properties": "^9.1.1",
+    "postcss-custom-properties": "^10.0.0",
-    "prettier-eslint": "^9.0.1",
+    "prettier-eslint": "^11.0.0",
    "prettier-stylelint": "^0.4.2",
-    "remark-cli": "^8.0.0",
+    "remark-cli": "^9.0.0",
-    "remark-validate-links": "^10.0.0",
+    "remark-validate-links": "^10.0.2",
-    "rollup": "^2.7.6",
+    "rollup": "^2.33.1",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.7.2",
-    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-sass-guidelines": "^7.0.0",
+    "stylelint-config-sass-guidelines": "^7.1.0",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.17.1",
+    "stylelint-scss": "^3.18.0",
    "stylelint-selector-bem-pattern": "^2.1.0",
-    "through2": "^3.0.1"
+    "through2": "^4.0.2"
  },
  "dependencies": {
-    "core-js": "^3.6.5",
+    "core-js": "^3.7.0",
    "custom-event-polyfill": "^1.0.7",
    "loadjs": "^4.2.0",
    "rangetouch": "^2.0.1",
-    "url-polyfill": "^1.1.8"
+    "url-polyfill": "^1.1.12"
  }
 }
@@ -56,7 +56,7 @@ const captions = {
    if (browser.isIE && window.URL) {
      const elements = this.media.querySelectorAll('track');
-      Array.from(elements).forEach(track => {
+      Array.from(elements).forEach((track) => {
        const src = track.getAttribute('src');
        const url = parseUrl(src);
@@ -66,7 +66,7 @@ const captions = {
          ['http:', 'https:'].includes(url.protocol)
        ) {
          fetch(src, 'blob')
-            .then(blob => {
+            .then((blob) => {
              track.setAttribute('src', window.URL.createObjectURL(blob));
            })
            .catch(() => {
@@ -84,7 +84,7 @@ const captions = {
    // * toggled:   The real captions state
    const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
-    const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
+    const languages = dedupe(browserLanguages.map((language) => language.split('-')[0]));
    let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
    // Use first browser language when language is 'auto'
@@ -119,13 +119,13 @@ const captions = {
    const tracks = captions.getTracks.call(this, true);
    // Get the wanted language
    const { active, language, meta, currentTrackNode } = this.captions;
-    const languageExists = Boolean(tracks.find(track => track.language === language));
+    const languageExists = Boolean(tracks.find((track) => track.language === language));
    // Handle tracks (add event listener and "pseudo"-default)
    if (this.isHTML5 && this.isVideo) {
      tracks
-        .filter(track => !meta.get(track))
+        .filter((track) => !meta.get(track))
-        .forEach(track => {
+        .forEach((track) => {
          this.debug.log('Track added', track);
          // Attempt to store if the original dom element was "default"
@@ -309,19 +309,19 @@ const captions = {
    // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
    // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
    return tracks
-      .filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
+      .filter((track) => !this.isHTML5 || update || this.captions.meta.has(track))
-      .filter(track => ['captions', 'subtitles'].includes(track.kind));
+      .filter((track) => ['captions', 'subtitles'].includes(track.kind));
  },
  // Match tracks based on languages and get the first
  findTrack(languages, force = false) {
    const tracks = captions.getTracks.call(this);
-    const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
+    const sortIsDefault = (track) => Number((this.captions.meta.get(track) || {}).default);
    const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
    let track;
-    languages.every(language => {
+    languages.every((language) => {
-      track = sorted.find(t => t.language === language);
+      track = sorted.find((t) => t.language === language);
      return !track; // Break iteration if there is a match
    });
@@ -383,12 +383,12 @@ const captions = {
      const track = captions.getCurrentTrack.call(this);
      cues = Array.from((track || {}).activeCues || [])
-        .map(cue => cue.getCueAsHTML())
+        .map((cue) => cue.getCueAsHTML())
        .map(getHTML);
    }
    // Set new caption text
-    const content = cues.map(cueText => cueText.trim()).join('\n');
+    const content = cues.map((cueText) => cueText.trim()).join('\n');
    const changed = content !== this.elements.captions.innerHTML;
    if (changed) {
@@ -422,20 +422,23 @@ const defaults = {
    title: false,
    speed: true,
    transparent: false,
    // Custom settings from Plyr
    customControls: true,
    referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
    // Whether the owner of the video has a Pro or Business account
    // (which allows us to properly hide controls without CSS hacks, etc)
    premium: false,
    // Custom settings from Plyr
    referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
  },
  // YouTube plugin
  youtube: {
    noCookie: true, // Whether to use an alternative version of YouTube without cookies
    rel: 0, // No related vids
    showinfo: 0, // Hide info
    iv_load_policy: 3, // Hide annotations
    modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
    // Custom settings from Plyr
    customControls: true,
    noCookie: false, // Whether to use an alternative version of YouTube without cookies
  },
 };
@@ -179,7 +179,7 @@ const controls = {
      iconPressed: null,
    };
-    ['element', 'icon', 'label'].forEach(key => {
+    ['element', 'icon', 'label'].forEach((key) => {
      if (Object.keys(attributes).includes(key)) {
        props[key] = attributes[key];
        delete attributes[key];
@@ -193,7 +193,7 @@ const controls = {
    // Set class name
    if (Object.keys(attributes).includes('class')) {
-      if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
+      if (!attributes.class.split(' ').some((c) => c === this.config.classNames.control)) {
        extend(attributes, {
          class: `${attributes.class} ${this.config.classNames.control}`,
        });
@@ -401,7 +401,7 @@ const controls = {
      this,
      menuItem,
      'keydown keyup',
-      event => {
+      (event) => {
        // We only care about space and ⬆️ ⬇️️ ➡️
        if (![32, 38, 39, 40].includes(event.which)) {
          return;
@@ -448,7 +448,7 @@ const controls = {
    // Enter will fire a `click` event but we still need to manage focus
    // So we bind to keyup which fires after and set focus here
-    on.call(this, menuItem, 'keyup', event => {
+    on.call(this, menuItem, 'keyup', (event) => {
      if (event.which !== 13) {
        return;
      }
@@ -493,8 +493,8 @@ const controls = {
        // Ensure exclusivity
        if (check) {
          Array.from(menuItem.parentNode.children)
-            .filter(node => matches(node, '[role="menuitemradio"]'))
+            .filter((node) => matches(node, '[role="menuitemradio"]'))
-            .forEach(node => node.setAttribute('aria-checked', 'false'));
+            .forEach((node) => node.setAttribute('aria-checked', 'false'));
        }
        menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
@@ -504,7 +504,7 @@ const controls = {
    this.listeners.bind(
      menuItem,
      'click keyup',
-      event => {
+      (event) => {
        if (is.keyboardEvent(event) && event.which !== 32) {
          return;
        }
@@ -698,7 +698,7 @@ const controls = {
    }
    const visible = `${this.config.classNames.tooltip}--visible`;
-    const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
+    const toggle = (show) => toggleClass(this.elements.display.seekTooltip, visible, show);
    // Hide on touch
    if (this.touch) {
@@ -894,7 +894,7 @@ const controls = {
    // Set options if passed and filter based on uniqueness and config
    if (is.array(options)) {
-      this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));
+      this.options.quality = dedupe(options).filter((quality) => this.config.quality.options.includes(quality));
    }
    // Toggle the pane and tab
@@ -913,7 +913,7 @@ const controls = {
    }
    // Get the badge HTML for HD, 4K etc
-    const getBadge = quality => {
+    const getBadge = (quality) => {
      const label = i18n.get(`qualityBadge.${quality}`, this.config);
      if (!label.length) {
@@ -929,7 +929,7 @@ const controls = {
        const sorting = this.config.quality.options;
        return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
      })
-      .forEach(quality => {
+      .forEach((quality) => {
        controls.createMenuItem.call(this, {
          value: quality,
          list,
@@ -1052,7 +1052,7 @@ const controls = {
    const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
    // Filter out invalid speeds
-    this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
+    this.options.speed = this.options.speed.filter((o) => o >= this.minimumSpeed && o <= this.maximumSpeed);
    // Toggle the pane and tab
    const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
@@ -1070,7 +1070,7 @@ const controls = {
    }
    // Create items
-    this.options.speed.forEach(speed => {
+    this.options.speed.forEach((speed) => {
      controls.createMenuItem.call(this, {
        value: speed,
        list,
@@ -1085,7 +1085,7 @@ const controls = {
  // Check if we need to hide/show the settings menu
  checkMenu() {
    const { buttons } = this.elements.settings;
-    const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);
+    const visible = !is.empty(buttons) && Object.values(buttons).some((button) => !button.hidden);
    toggleHidden(this.elements.settings.menu, !visible);
  },
@@ -1099,7 +1099,7 @@ const controls = {
    let target = pane;
    if (!is.element(target)) {
-      target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
+      target = Object.values(this.elements.settings.panels).find((p) => !p.hidden);
    }
    const firstItem = target.querySelector('[role^="menuitem"]');
@@ -1191,7 +1191,7 @@ const controls = {
    // Hide all other panels
    const container = target.parentNode;
-    const current = Array.from(container.children).find(node => !node.hidden);
+    const current = Array.from(container.children).find((node) => !node.hidden);
    // If we can do fancy animations, we'll animate the height/width
    if (support.transitions && !support.reducedMotion) {
@@ -1203,7 +1203,7 @@ const controls = {
      const size = controls.getMenuSize.call(this, target);
      // Restore auto height/width
-      const restore = event => {
+      const restore = (event) => {
        // We're only bothered about height and width on the container
        if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
          return;
@@ -1275,7 +1275,7 @@ const controls = {
    const defaultAttributes = { class: 'plyr__controls__item' };
    // Loop through controls in order
-    dedupe(is.array(this.config.controls) ? this.config.controls: []).forEach(control => {
+    dedupe(is.array(this.config.controls) ? this.config.controls : []).forEach((control) => {
      // Restart button
      if (control === 'restart') {
        container.appendChild(createButton.call(this, 'restart', defaultAttributes));
@@ -1437,7 +1437,7 @@ const controls = {
        this.elements.settings.panels.home = home;
        // Build the menu items
-        this.config.settings.forEach(type => {
+        this.config.settings.forEach((type) => {
          // TODO: bundle this with the createMenuItem helper and bindings
          const menuItem = createElement(
            'button',
@@ -1510,7 +1510,7 @@ const controls = {
            this,
            pane,
            'keydown',
-            event => {
+            (event) => {
              // We only care about <-
              if (event.which !== 37) {
                return;
@@ -1661,7 +1661,7 @@ const controls = {
    }
    // Replace props with their value
-    const replace = input => {
+    const replace = (input) => {
      let result = input;
      Object.entries(props).forEach(([key, value]) => {
@@ -1702,7 +1702,7 @@ const controls = {
    // Add pressed property to buttons
    if (!is.empty(this.elements.buttons)) {
-      const addProperty = button => {
+      const addProperty = (button) => {
        const className = this.config.classNames.controlPressed;
        Object.defineProperty(button, 'pressed', {
          enumerable: true,
@@ -1718,11 +1718,9 @@ const controls = {
      // Toggle classname when pressed property is set
      Object.values(this.elements.buttons)
        .filter(Boolean)
-        .forEach(button => {
+        .forEach((button) => {
          if (is.array(button) || is.nodeList(button)) {
-            Array.from(button)
+            Array.from(button).filter(Boolean).forEach(addProperty);
              .filter(Boolean)
              .forEach(addProperty);
          } else {
            addProperty(button);
          }
@@ -1740,7 +1738,7 @@ const controls = {
      const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;
      const labels = getElements.call(this, selector);
-      Array.from(labels).forEach(label => {
+      Array.from(labels).forEach((label) => {
        toggleClass(label, this.config.classNames.hidden, false);
        toggleClass(label, this.config.classNames.tooltip, true);
      });
@@ -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(',');
      }
    }
@@ -18,7 +18,7 @@ const html5 = {
    const sources = Array.from(this.media.querySelectorAll('source'));
    // Filter out unsupported sources (if type is specified)
-    return sources.filter(source => {
+    return sources.filter((source) => {
      const type = source.getAttribute('type');
      if (is.empty(type)) {
@@ -39,7 +39,7 @@ const html5 = {
    // Get sizes from <source> elements
    return html5.getSources
      .call(this)
-      .map(source => Number(source.getAttribute('size')))
+      .map((source) => Number(source.getAttribute('size')))
      .filter(Boolean);
  },
@@ -63,7 +63,7 @@ const html5 = {
      get() {
        // Get sources
        const sources = html5.getSources.call(player);
-        const source = sources.find(s => s.getAttribute('src') === player.source);
+        const source = sources.find((s) => s.getAttribute('src') === player.source);
        // Return size, if match is found
        return source && Number(source.getAttribute('size'));
@@ -80,7 +80,7 @@ const html5 = {
          // Get sources
          const sources = html5.getSources.call(player);
          // Get first match for requested size
-          const source = sources.find(s => Number(s.getAttribute('size')) === input);
+          const source = sources.find((s) => Number(s.getAttribute('size')) === input);
          // No matching source found
          if (!source) {
@@ -277,7 +277,7 @@ class Listeners {
      player,
      elements.container,
      'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
-      event => {
+      (event) => {
        const { controls: controlsElement } = elements;
        // Remove button states for fullscreen
@@ -319,7 +319,7 @@ class Listeners {
    };
    // Resize on fullscreen change
-    const setPlayerSize = measure => {
+    const setPlayerSize = (measure) => {
      // If we don't need to measure the viewport
      if (!measure) {
        return setAspectRatio.call(player);
@@ -336,7 +336,7 @@ class Listeners {
      timers.resized = setTimeout(setPlayerSize, 50);
    };
-    on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
+    on.call(player, elements.container, 'enterfullscreen exitfullscreen', (event) => {
      const { target, usingNative } = player.fullscreen;
      // Ignore events not from target
@@ -356,6 +356,11 @@ class Listeners {
      // Set Vimeo gutter
      setGutter(ratio, padding, isEnter);
      // Horrible hack for Safari 14 not repainting properly on entering fullscreen
      if (isEnter) {
        setTimeout(() => repaint(elements.container), 100);
      }
      // If not using native browser fullscreen API, we need to check for resizes of viewport
      if (!usingNative) {
        if (isEnter) {
@@ -373,10 +378,10 @@ class Listeners {
    const { elements } = player;
    // Time change on media
-    on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));
+    on.call(player, player.media, 'timeupdate seeking seeked', (event) => controls.timeUpdate.call(player, event));
    // Display duration
-    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
+    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', (event) =>
      controls.durationUpdate.call(player, event),
    );
@@ -393,20 +398,20 @@ class Listeners {
    });
    // Check for buffer progress
-    on.call(player, player.media, 'progress playing seeking seeked', event =>
+    on.call(player, player.media, 'progress playing seeking seeked', (event) =>
      controls.updateProgress.call(player, event),
    );
    // Handle volume changes
-    on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));
+    on.call(player, player.media, 'volumechange', (event) => controls.updateVolume.call(player, event));
    // Handle play/pause
-    on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
+    on.call(player, player.media, 'playing play pause ended emptied timeupdate', (event) =>
      ui.checkPlaying.call(player, event),
    );
    // Loading state
-    on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
+    on.call(player, player.media, 'waiting canplay seeked playing', (event) => ui.checkLoading.call(player, event));
    // Click video
    if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
@@ -419,7 +424,7 @@ class Listeners {
      }
      // On click play, pause or restart
-      on.call(player, elements.container, 'click', event => {
+      on.call(player, elements.container, 'click', (event) => {
        const targets = [elements.container, wrapper];
        // Ignore if click if not container or in video wrapper
@@ -459,7 +464,7 @@ class Listeners {
        player,
        elements.wrapper,
        'contextmenu',
-        event => {
+        (event) => {
          event.preventDefault();
        },
        false,
@@ -485,7 +490,7 @@ class Listeners {
    });
    // Quality change
-    on.call(player, player.media, 'qualitychange', event => {
+    on.call(player, player.media, 'qualitychange', (event) => {
      // Update UI
      controls.updateSetting.call(player, 'quality', null, event.detail.quality);
    });
@@ -499,7 +504,7 @@ class Listeners {
    // Bubble up key events for Edge
    const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
-    on.call(player, player.media, proxyEvents, event => {
+    on.call(player, player.media, proxyEvents, (event) => {
      let { detail = {} } = event;
      // Get error details from media
@@ -539,7 +544,7 @@ class Listeners {
      player,
      element,
      type,
-      event => this.proxy(event, defaultHandler, customHandlerKey),
+      (event) => this.proxy(event, defaultHandler, customHandlerKey),
      passive && !hasCustomHandler,
    );
  }
@@ -553,7 +558,7 @@ class Listeners {
    // Play/pause toggle
    if (elements.buttons.play) {
-      Array.from(elements.buttons.play).forEach(button => {
+      Array.from(elements.buttons.play).forEach((button) => {
        this.bind(
          button,
          'click',
@@ -569,10 +574,28 @@ class Listeners {
    this.bind(elements.buttons.restart, 'click', player.restart, 'restart');
    // Rewind
-    this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');
+    this.bind(
      elements.buttons.rewind,
      'click',
      () => {
        // Record seek time so we can prevent hiding controls for a few seconds after rewind
        player.lastSeekTime = Date.now();
        player.rewind();
      },
      'rewind',
    );
    // Rewind
-    this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');
+    this.bind(
      elements.buttons.fastForward,
      'click',
      () => {
        // Record seek time so we can prevent hiding controls for a few seconds after fast forward
        player.lastSeekTime = Date.now();
        player.forward();
      },
      'fastForward',
    );
    // Mute toggle
    this.bind(
@@ -624,7 +647,7 @@ class Listeners {
    this.bind(
      elements.buttons.settings,
      'click',
-      event => {
+      (event) => {
        // Prevent the document click listener closing the menu
        event.stopPropagation();
        event.preventDefault();
@@ -641,7 +664,7 @@ class Listeners {
    this.bind(
      elements.buttons.settings,
      'keyup',
-      event => {
+      (event) => {
        const code = event.which;
        // We only care about space and return
@@ -669,21 +692,21 @@ class Listeners {
    );
    // Escape closes menu
-    this.bind(elements.settings.menu, 'keydown', event => {
+    this.bind(elements.settings.menu, 'keydown', (event) => {
      if (event.which === 27) {
        controls.toggleMenu.call(player, event);
      }
    });
    // Set range input alternative "value", which matches the tooltip time (#954)
-    this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
+    this.bind(elements.inputs.seek, 'mousedown mousemove', (event) => {
      const rect = elements.progress.getBoundingClientRect();
      const percent = (100 / rect.width) * (event.pageX - rect.left);
      event.currentTarget.setAttribute('seek-value', percent);
    });
    // Pause while seeking
-    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
+    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', (event) => {
      const seek = event.currentTarget;
      const code = event.keyCode ? event.keyCode : event.which;
      const attribute = 'play-on-seeked';
@@ -715,14 +738,14 @@ class Listeners {
    // it takes over further interactions on the page. This is a hack
    if (browser.isIos) {
      const inputs = getElements.call(player, 'input[type="range"]');
-      Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
+      Array.from(inputs).forEach((input) => this.bind(input, inputEvent, (event) => repaint(event.target)));
    }
    // Seek
    this.bind(
      elements.inputs.seek,
      inputEvent,
-      event => {
+      (event) => {
        const seek = event.currentTarget;
        // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
        let seekTo = seek.getAttribute('seek-value');
@@ -739,13 +762,13 @@ class Listeners {
    );
    // Seek tooltip
-    this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>
+    this.bind(elements.progress, 'mouseenter mouseleave mousemove', (event) =>
      controls.updateSeekTooltip.call(player, event),
    );
    // Preview thumbnails plugin
    // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this
-    this.bind(elements.progress, 'mousemove touchmove', event => {
+    this.bind(elements.progress, 'mousemove touchmove', (event) => {
      const { previewThumbnails } = player;
      if (previewThumbnails && previewThumbnails.loaded) {
@@ -763,7 +786,7 @@ class Listeners {
    });
    // Show scrubbing preview
-    this.bind(elements.progress, 'mousedown touchstart', event => {
+    this.bind(elements.progress, 'mousedown touchstart', (event) => {
      const { previewThumbnails } = player;
      if (previewThumbnails && previewThumbnails.loaded) {
@@ -771,7 +794,7 @@ class Listeners {
      }
    });
-    this.bind(elements.progress, 'mouseup touchend', event => {
+    this.bind(elements.progress, 'mouseup touchend', (event) => {
      const { previewThumbnails } = player;
      if (previewThumbnails && previewThumbnails.loaded) {
@@ -781,8 +804,8 @@ class Listeners {
    // Polyfill for lower fill in <input type="range"> for webkit
    if (browser.isWebkit) {
-      Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {
-        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+        this.bind(element, 'input', (event) => controls.updateRangeFill.call(player, event.target));
      });
    }
@@ -805,30 +828,30 @@ class Listeners {
    this.bind(
      elements.inputs.volume,
      inputEvent,
-      event => {
+      (event) => {
        player.volume = event.target.value;
      },
      'volume',
    );
    // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mouseenter mouseleave', event => {
+    this.bind(elements.controls, 'mouseenter mouseleave', (event) => {
      elements.controls.hover = !player.touch && event.type === 'mouseenter';
    });
    // Also update controls.hover state for any non-player children of fullscreen element (as above)
    if (elements.fullscreen) {
      Array.from(elements.fullscreen.children)
-        .filter(c => !c.contains(elements.container))
+        .filter((c) => !c.contains(elements.container))
-        .forEach(child => {
+        .forEach((child) => {
-          this.bind(child, 'mouseenter mouseleave', event => {
+          this.bind(child, 'mouseenter mouseleave', (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', event => {
+    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', (event) => {
      elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
    });
@@ -861,12 +884,12 @@ class Listeners {
    this.bind(
      elements.inputs.volume,
      'wheel',
-      event => {
+      (event) => {
        // Detect "natural" scroll - suppored on OS X Safari only
        // Other browsers on OS X will be inverted until support improves
        const inverted = event.webkitDirectionInvertedFromDevice;
        // Get delta from event. Invert if `inverted` is true
-        const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
+        const [x, y] = [event.deltaX, -event.deltaY].map((value) => (inverted ? -value : value));
        // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
        const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
@@ -41,6 +41,7 @@ const media = {
      // Poster image container
      this.elements.poster = createElement('div', {
        class: this.config.classNames.poster,
        hidden: '',
      });
      this.elements.wrapper.appendChild(this.elements.poster);
@@ -15,7 +15,7 @@ import { silencePromise } from '../utils/promise';
 import { formatTime } from '../utils/time';
 import { buildUrlParams } from '../utils/urls';
-const destroy = instance => {
+const destroy = (instance) => {
  // Destroy our adsManager
  if (instance.manager) {
    instance.manager.destroy();
@@ -179,10 +179,10 @@ class Ads {
    // Listen and respond to ads loaded and error events
    this.loader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
-      event => this.onAdsManagerLoaded(event),
+      (event) => this.onAdsManagerLoaded(event),
      false,
    );
-    this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
+    this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, (error) => this.onAdError(error), false);
    // Request video ads to be pre-loaded
    this.requestAds();
@@ -264,11 +264,11 @@ class Ads {
    // Add listeners to the required events
    // Advertisement error events
-    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
+    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, (error) => this.onAdError(error));
    // Advertisement regular events
-    Object.keys(google.ima.AdEvent.Type).forEach(type => {
+    Object.keys(google.ima.AdEvent.Type).forEach((type) => {
-      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], (e) => this.onAdEvent(e));
    });
    // Resolve our adsManager
@@ -278,7 +278,7 @@ class Ads {
  addCuePoints() {
    // Add advertisement cue's within the time line if available
    if (!is.empty(this.cuePoints)) {
-      this.cuePoints.forEach(cuePoint => {
+      this.cuePoints.forEach((cuePoint) => {
        if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
          const seekElement = this.player.elements.progress;
@@ -310,7 +310,7 @@ class Ads {
    const adData = event.getAdData();
    // Proxy event
-    const dispatchEvent = type => {
+    const dispatchEvent = (type) => {
      triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
    };
@@ -565,7 +565,7 @@ class Ads {
        }
        // Re-set our adsManager promises
-        this.managerPromise = new Promise(resolve => {
+        this.managerPromise = new Promise((resolve) => {
          this.on('loaded', resolve);
          this.player.debug.log(this.manager);
        });
@@ -586,7 +586,7 @@ class Ads {
    const handlers = this.events[event];
    if (is.array(handlers)) {
-      handlers.forEach(handler => {
+      handlers.forEach((handler) => {
        if (is.function(handler)) {
          handler.apply(this, args);
        }
@@ -5,15 +5,15 @@ import is from '../utils/is';
 import { formatTime } from '../utils/time';
 // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
-const parseVtt = vttDataString => {
+const parseVtt = (vttDataString) => {
  const processedList = [];
  const frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
-  frames.forEach(frame => {
+  frames.forEach((frame) => {
    const result = {};
    const lines = frame.split(/\r\n|\n|\r/);
-    lines.forEach(line => {
+    lines.forEach((line) => {
      if (!is.number(result.startTime)) {
        // The line with start and end times on it is the first line of interest
        const matchTimes = line.match(
@@ -130,7 +130,7 @@ class PreviewThumbnails {
  // Download VTT files and parse them
  getThumbnails() {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
      const { src } = this.player.config.previewThumbnails;
      if (is.empty(src)) {
@@ -149,7 +149,7 @@ class PreviewThumbnails {
      // Via callback()
      if (is.function(src)) {
-        src(thumbnails => {
+        src((thumbnails) => {
          this.thumbnails = thumbnails;
          sortAndResolve();
        });
@@ -159,7 +159,7 @@ class PreviewThumbnails {
        // If string, convert into single-element list
        const urls = is.string(src) ? [src] : src;
        // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
-        const promises = urls.map(u => this.getThumbnail(u));
+        const promises = urls.map((u) => this.getThumbnail(u));
        // Resolve
        Promise.all(promises).then(sortAndResolve);
      }
@@ -168,8 +168,8 @@ class PreviewThumbnails {
  // Process individual VTT file
  getThumbnail(url) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
-      fetch(url).then(response => {
+      fetch(url).then((response) => {
        const thumbnail = {
          frames: parseVtt(response),
          height: null,
@@ -360,7 +360,7 @@ class PreviewThumbnails {
    // Find the desired thumbnail index
    // TODO: Handle a video longer than the thumbs where thumbNum is null
    const thumbNum = this.thumbnails[0].frames.findIndex(
-      frame => this.seekTime >= frame.startTime && this.seekTime <= frame.endTime,
+      (frame) => this.seekTime >= frame.startTime && this.seekTime <= frame.endTime,
    );
    const hasThumb = thumbNum >= 0;
    let qualityIndex = 0;
@@ -454,7 +454,7 @@ class PreviewThumbnails {
  // Remove all preview images that aren't the designated current image
  removeOldImages(currentImage) {
    // Get a list of all images, convert it from a DOM list to an array
-    Array.from(this.currentImageContainer.children).forEach(image => {
+    Array.from(this.currentImageContainer.children).forEach((image) => {
      if (image.tagName.toLowerCase() !== 'img') {
        return;
      }
@@ -481,7 +481,7 @@ class PreviewThumbnails {
  // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
  // This will only preload the lowest quality
  preloadNearby(thumbNum, forward = true) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
      setTimeout(() => {
        const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;
@@ -496,7 +496,7 @@ class PreviewThumbnails {
          let foundOne = false;
-          thumbnailsClone.forEach(frame => {
+          thumbnailsClone.forEach((frame) => {
            const newThumbFilename = frame.text;
            if (newThumbFilename !== oldThumbFilename) {
@@ -58,7 +58,7 @@ const vimeo = {
        .then(() => {
          vimeo.ready.call(player);
        })
-        .catch(error => {
+        .catch((error) => {
          player.debug.warn('Vimeo SDK (player.js) failed to load', error);
        });
    } else {
@@ -112,25 +112,29 @@ const vimeo = {
    }
    // Inject the package
-    const { poster } = player;
+    if (premium || !config.customControls) {
-    if (premium) {
+      iframe.setAttribute('data-poster', player.poster);
      iframe.setAttribute('data-poster', poster);
      player.media = replaceElement(iframe, player.media);
    } else {
-      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
+      const wrapper = createElement('div', {
        class: player.config.classNames.embedContainer,
        'data-poster': player.poster,
      });
      wrapper.appendChild(iframe);
      player.media = replaceElement(wrapper, player.media);
    }
    // Get poster image
-    fetch(format(player.config.urls.vimeo.api, src)).then(response => {
+    if (!config.customControls) {
-      if (is.empty(response) || !response.thumbnail_url) {
+      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
-        return;
+        if (is.empty(response) || !response.thumbnail_url) {
-      }
+          return;
        }
-      // Set and show poster
+        // Set and show poster
-      ui.setPoster.call(player, response.thumbnail_url).catch(() => { });
+        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
-    });
+      });
    }
    // Setup instance
    // https://github.com/vimeo/player.js
@@ -263,11 +267,11 @@ const vimeo = {
    let currentSrc;
    player.embed
      .getVideoUrl()
-      .then(value => {
+      .then((value) => {
        currentSrc = value;
        controls.setDownloadUrl.call(player);
      })
-      .catch(error => {
+      .catch((error) => {
        this.debug.warn(error);
      });
@@ -285,49 +289,49 @@ const vimeo = {
    });
    // Set aspect ratio based on video size
-    Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
+    Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then((dimensions) => {
      const [width, height] = dimensions;
      player.embed.ratio = [width, height];
      setAspectRatio.call(this);
    });
    // Set autopause
-    player.embed.setAutopause(player.config.autopause).then(state => {
+    player.embed.setAutopause(player.config.autopause).then((state) => {
      player.config.autopause = state;
    });
    // Get title
-    player.embed.getVideoTitle().then(title => {
+    player.embed.getVideoTitle().then((title) => {
      player.config.title = title;
      ui.setTitle.call(this);
    });
    // Get current time
-    player.embed.getCurrentTime().then(value => {
+    player.embed.getCurrentTime().then((value) => {
      currentTime = value;
      triggerEvent.call(player, player.media, 'timeupdate');
    });
    // Get duration
-    player.embed.getDuration().then(value => {
+    player.embed.getDuration().then((value) => {
      player.media.duration = value;
      triggerEvent.call(player, player.media, 'durationchange');
    });
    // Get captions
-    player.embed.getTextTracks().then(tracks => {
+    player.embed.getTextTracks().then((tracks) => {
      player.media.textTracks = tracks;
      captions.setup.call(player);
    });
    player.embed.on('cuechange', ({ cues = [] }) => {
-      const strippedCues = cues.map(cue => stripHTML(cue.text));
+      const strippedCues = cues.map((cue) => stripHTML(cue.text));
      captions.updateCues.call(player, strippedCues);
    });
    player.embed.on('loaded', () => {
      // Assure state and events are updated on autoplay
-      player.embed.getPaused().then(paused => {
+      player.embed.getPaused().then((paused) => {
        assurePlaybackState.call(player, !paused);
        if (!paused) {
          triggerEvent.call(player, player.media, 'playing');
@@ -360,13 +364,13 @@ const vimeo = {
      assurePlaybackState.call(player, false);
    });
-    player.embed.on('timeupdate', data => {
+    player.embed.on('timeupdate', (data) => {
      player.media.seeking = false;
      currentTime = data.seconds;
      triggerEvent.call(player, player.media, 'timeupdate');
    });
-    player.embed.on('progress', data => {
+    player.embed.on('progress', (data) => {
      player.media.buffered = data.percent;
      triggerEvent.call(player, player.media, 'progress');
@@ -377,7 +381,7 @@ const vimeo = {
      // Get duration as if we do it before load, it gives an incorrect value
      // https://github.com/sampotts/plyr/issues/891
-      player.embed.getDuration().then(value => {
+      player.embed.getDuration().then((value) => {
        if (value !== player.media.duration) {
          player.media.duration = value;
          triggerEvent.call(player, player.media, 'durationchange');
@@ -395,13 +399,15 @@ const vimeo = {
      triggerEvent.call(player, player.media, 'ended');
    });
-    player.embed.on('error', detail => {
+    player.embed.on('error', (detail) => {
      player.media.error = detail;
      triggerEvent.call(player, player.media, 'error');
    });
    // Rebuild UI
-    setTimeout(() => ui.build.call(player), 0);
+    if (config.customControls) {
      setTimeout(() => ui.build.call(player), 0);
    }
  },
 };
@@ -70,7 +70,7 @@ const youtube = {
      };
      // Load the SDK
-      loadScript(this.config.urls.youtube.sdk).catch(error => {
+      loadScript(this.config.urls.youtube.sdk).catch((error) => {
        this.debug.warn('YouTube API failed to load', error);
      });
    }
@@ -81,7 +81,7 @@ const youtube = {
    const url = format(this.config.urls.youtube.api, videoId);
    fetch(url)
-      .then(data => {
+      .then((data) => {
        if (is.object(data)) {
          const { title, height, width } = data;
@@ -104,6 +104,7 @@ const youtube = {
  // API ready
  ready() {
    const player = this;
    const config = player.config.youtube;
    // Ignore already setup (race condition)
    const currentId = player.media && player.media.getAttribute('id');
    if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
@@ -121,43 +122,46 @@ const youtube = {
    // Replace the <iframe> with a <div> due to YouTube API issues
    const videoId = parseId(source);
    const id = generateId(player.provider);
    // Get poster, if already set
    const { poster } = player;
    // Replace media element
-    const container = createElement('div', { id, 'data-poster': poster });
+    const container = createElement('div', { id, 'data-poster': config.customControls ? player.poster : undefined });
    player.media = replaceElement(container, player.media);
-    // Id to poster wrapper
+    // Only load the poster when using custom controls
-    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+    if (config.customControls) {
      const posterSrc = (s) => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
-    // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
-    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
+      loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-      .then(image => ui.setPoster.call(player, image.src))
+        .then((image) => ui.setPoster.call(player, image.src))
-      .then(src => {
+        .then((src) => {
-        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+          // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-        if (!src.includes('maxres')) {
+          if (!src.includes('maxres')) {
-          player.elements.poster.style.backgroundSize = 'cover';
+            player.elements.poster.style.backgroundSize = 'cover';
-        }
+          }
-      })
+        })
-      .catch(() => {});
+        .catch(() => {});
-
+    }
    const config = player.config.youtube;
    // Setup instance
    // https://developers.google.com/youtube/iframe_api_reference
-    player.embed = new window.YT.Player(id, {
+    player.embed = new window.YT.Player(player.media, {
      videoId,
      host: getHost(config),
      playerVars: extend(
        {},
        {
-          autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+          // Autoplay
-          hl: player.config.hl, // iframe interface language
+          autoplay: player.config.autoplay ? 1 : 0,
-          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
+          // iframe interface language
-          disablekb: 1, // Disable keyboard as we handle it
+          hl: player.config.hl,
-          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Only show controls if not fully supported or opted out
          controls: player.supported.ui && config.customControls ? 0 : 1,
          // Disable keyboard as we handle it
          disablekb: 1,
          // Allow iOS inline playback
          playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
          // Captions are flaky on YouTube
          cc_load_policy: player.captions.active ? 1 : 0,
          cc_lang_pref: player.config.captions.language,
@@ -278,6 +282,7 @@ const youtube = {
              const toggle = is.boolean(input) ? input : muted;
              muted = toggle;
              instance[toggle ? 'mute' : 'unMute']();
              instance.setVolume(volume * 100);
              triggerEvent.call(player, player.media, 'volumechange');
            },
          });
@@ -299,10 +304,10 @@ const youtube = {
          // Get available speeds
          const speeds = instance.getAvailablePlaybackRates();
          // Filter based on config
-          player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
+          player.options.speed = speeds.filter((s) => player.config.speed.options.includes(s));
          // Set the tabindex to avoid focus entering iframe
-          if (player.supported.ui) {
+          if (player.supported.ui && config.customControls) {
            player.media.setAttribute('tabindex', -1);
          }
@@ -335,7 +340,9 @@ const youtube = {
          }, 200);
          // Rebuild UI
-          setTimeout(() => ui.build.call(player), 50);
+          if (config.customControls) {
            setTimeout(() => ui.build.call(player), 50);
          }
        },
        onStateChange(event) {
          // Get the instance
@@ -386,7 +393,7 @@ const youtube = {
            case 1:
              // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
-              if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
+              if (config.customControls && !player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
                player.media.pause();
              } else {
                assurePlaybackState.call(player, true);
@@ -214,26 +214,17 @@ declare class Plyr {
  /**
   * Add an event listener for the specified event.
   */
-  on(
+  on<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
    callback: (this: this, event: Plyr.PlyrEvent) => void,
  ): void;
  /**
   * Add an event listener for the specified event once.
   */
-  once(
+  once<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
    callback: (this: this, event: Plyr.PlyrEvent) => void,
  ): void;
  /**
   * Remove an event listener for the specified event.
   */
-  off(
+  off<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
    callback: (this: this, event: Plyr.PlyrEvent) => void,
  ): void;
  /**
   * Check support for a mime type.
@@ -249,37 +240,51 @@ declare class Plyr {
 declare namespace Plyr {
  type MediaType = 'audio' | 'video';
  type Provider = 'html5' | 'youtube' | 'vimeo';
-  type StandardEvent =
+  type StandardEventMap = {
-    | 'progress'
+    progress: PlyrEvent;
-    | 'playing'
+    playing: PlyrEvent;
-    | 'play'
+    play: PlyrEvent;
-    | 'pause'
+    pause: PlyrEvent;
-    | 'timeupdate'
+    timeupdate: PlyrEvent;
-    | 'volumechange'
+    volumechange: PlyrEvent;
-    | 'seeking'
+    seeking: PlyrEvent;
-    | 'seeked'
+    seeked: PlyrEvent;
-    | 'ratechange'
+    ratechange: PlyrEvent;
-    | 'ended'
+    ended: PlyrEvent;
-    | 'enterfullscreen'
+    enterfullscreen: PlyrEvent;
-    | 'exitfullscreen'
+    exitfullscreen: PlyrEvent;
-    | 'captionsenabled'
+    captionsenabled: PlyrEvent;
-    | 'captionsdisabled'
+    captionsdisabled: PlyrEvent;
-    | 'languagechange'
+    languagechange: PlyrEvent;
-    | 'controlshidden'
+    controlshidden: PlyrEvent;
-    | 'controlsshown'
+    controlsshown: PlyrEvent;
-    | 'ready';
+    ready: PlyrEvent;
-  type Html5Event =
+  };
-    | 'loadstart'
+  // For retrocompatibility, we keep StandadEvent
-    | 'loadeddata'
+  type StandadEvent = keyof Plyr.StandardEventMap;
-    | 'loadedmetadata'
+  type Html5EventMap = {
-    | 'canplay'
+    loadstart: PlyrEvent;
-    | 'canplaythrough'
+    loadeddata: PlyrEvent;
-    | 'stalled'
+    loadedmetadata: PlyrEvent;
-    | 'waiting'
+    canplay: PlyrEvent;
-    | 'emptied'
+    canplaythrough: PlyrEvent;
-    | 'cuechange'
+    stalled: PlyrEvent;
-    | 'error';
+    waiting: PlyrEvent;
-  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+    emptied: PlyrEvent;
    cuechange: PlyrEvent;
    error: PlyrEvent;
  };
  // For retrocompatibility, we keep Html5Event
  type Html5Event = keyof Plyr.Html5EventMap;
  type YoutubeEventMap = {
    statechange: PlyrStateChangeEvent;
    qualitychange: PlyrEvent;
    qualityrequested: PlyrEvent;
  };
  // For retrocompatibility, we keep YoutubeEvent
  type YoutubeEvent = keyof Plyr.YoutubeEventMap;
  type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap;
  interface FullscreenControl {
    /**
@@ -552,7 +557,7 @@ declare namespace Plyr {
  interface PreviewThumbnailsOptions {
    enabled?: boolean;
-    src?: string;
+    src?: string | string[];
  }
  interface SourceInfo {
@@ -623,6 +628,22 @@ declare namespace Plyr {
    readonly detail: { readonly plyr: Plyr };
  }
  enum YoutubeState {
    UNSTARTED = -1,
    ENDED = 0,
    PLAYING = 1,
    PAUSED = 2,
    BUFFERING = 3,
    CUED = 5,
  }
  interface PlyrStateChangeEvent extends CustomEvent {
    readonly detail: {
      readonly plyr: Plyr;
      readonly code: YoutubeState;
    };
  }
  interface Support {
    api: boolean;
    ui: boolean;
@@ -12,6 +12,7 @@ import { getProviderByUrl, providers, types } from './config/types';
 import Console from './console';
 import controls from './controls';
 import Fullscreen from './fullscreen';
 import html5 from './html5';
 import Listeners from './listeners';
 import media from './media';
 import Ads from './plugins/ads';
@@ -281,7 +282,7 @@ class Plyr {
    // Listen for events if debugging
    if (this.config.debug) {
-      on.call(this, this.elements.container, this.config.events.join(' '), event => {
+      on.call(this, this.elements.container, this.config.events.join(' '), (event) => {
        this.debug.log(`event: ${event.type}`);
      });
    }
@@ -308,7 +309,7 @@ class Plyr {
    // Autoplay if required
    if (this.isHTML5 && this.config.autoplay) {
-      setTimeout(() => silencePromise(this.play()), 10);
+      this.once('canplay', () => silencePromise(this.play()));
    }
    // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
@@ -1054,7 +1055,12 @@ class Plyr {
      const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
      // Close menu
-      if (hiding && is.array(this.config.controls) && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
+      if (
        hiding &&
        is.array(this.config.controls) &&
        this.config.controls.includes('settings') &&
        !is.empty(this.config.settings)
      ) {
        controls.toggleMenu.call(this, false);
      }
@@ -1140,6 +1146,9 @@ class Plyr {
        // Unbind listeners
        unbindListeners.call(this);
        // Cancel current network requests
        html5.cancelRequests.call(this);
        // Replace the container with the original element provided
        replaceElement(this.elements.original, this.elements.container);
@@ -1248,7 +1257,7 @@ class Plyr {
      return null;
    }
-    return targets.map(t => new Plyr(t, options));
+    return targets.map((t) => new Plyr(t, options));
  }
 }
@@ -20,7 +20,7 @@ const source = {
        src: attributes,
      });
    } else if (is.array(attributes)) {
-      attributes.forEach(attribute => {
+      attributes.forEach((attribute) => {
        insertElement(type, this.media, attribute);
      });
    }
@@ -135,7 +135,7 @@ const ui = {
    }
    // If there's a play button, set label
-    Array.from(this.elements.buttons.play || []).forEach(button => {
+    Array.from(this.elements.buttons.play || []).forEach((button) => {
      button.setAttribute('aria-label', label);
    });
@@ -172,13 +172,16 @@ const ui = {
    // Set property synchronously to respect the call order
    this.media.setAttribute('data-poster', poster);
    // Show the poster
    this.elements.poster.removeAttribute('hidden');
    // Wait until ui is ready
    return (
      ready
        .call(this)
        // Load image
        .then(() => loadImage(poster))
-        .catch(err => {
+        .catch((err) => {
          // Hide poster on error unless it's been set by another call
          if (poster === this.poster) {
            ui.togglePoster.call(this, false);
@@ -214,7 +217,7 @@ const ui = {
    toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
    // Set state
-    Array.from(this.elements.buttons.play || []).forEach(target => {
+    Array.from(this.elements.buttons.play || []).forEach((target) => {
      Object.assign(target, { pressed: this.playing });
      target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
    });
@@ -270,8 +273,8 @@ const ui = {
    // Loop through values (as they are the keys when the object is spread 🤔)
    Object.values({ ...this.media.style })
      // We're only fussed about Plyr specific properties
-      .filter(key => !is.empty(key) && key.startsWith('--plyr'))
+      .filter((key) => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
-      .forEach(key => {
+      .forEach((key) => {
        // Set on the container
        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
@@ -14,7 +14,7 @@ export const transitionEndEvent = (() => {
    transition: 'transitionend',
  };
-  const type = Object.keys(events).find(event => element.style[event] !== undefined);
+  const type = Object.keys(events).find((event) => element.style[event] !== undefined);
  return is.string(type) ? events[type] : false;
 })();
@@ -138,7 +138,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
  const attributes = {};
  const existing = extend({}, existingAttributes);
-  sel.split(',').forEach(s => {
+  sel.split(',').forEach((s) => {
    // Remove whitespace
    const selector = s.trim();
    const className = selector.replace('.', '');
@@ -198,7 +198,7 @@ export function toggleHidden(element, hidden) {
 // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 export function toggleClass(element, className, force) {
  if (is.nodeList(element)) {
-    return Array.from(element).map(e => toggleClass(e, className, force));
+    return Array.from(element).map((e) => toggleClass(e, className, force));
  }
  if (is.element(element)) {
@@ -50,7 +50,7 @@ export function toggleListener(element, event, callback, toggle = false, passive
  }
  // If a single node is passed, bind the event listener
-  events.forEach(type => {
+  events.forEach((type) => {
    if (this && this.eventListeners && toggle) {
      // Cache event listener
      this.eventListeners.push({ element, type, callback, options });
@@ -100,7 +100,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
 // Unbind all cached event listeners
 export function unbindListeners() {
  if (this && this.eventListeners) {
-    this.eventListeners.forEach(item => {
+    this.eventListeners.forEach((item) => {
      const { element, type, callback, options } = item;
      element.removeEventListener(type, callback, options);
    });
@@ -111,7 +111,7 @@ export function unbindListeners() {
 // Run method when / if player is ready
 export function ready() {
-  return new Promise(resolve =>
+  return new Promise((resolve) =>
    this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
  ).then(() => {});
 }
@@ -2,31 +2,31 @@
 // Type checking utils
 // ==========================================================================
-const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null);
+const getConstructor = (input) => (input !== null && typeof input !== 'undefined' ? input.constructor : null);
 const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor);
-const isNullOrUndefined = input => input === null || typeof input === 'undefined';
+const isNullOrUndefined = (input) => input === null || typeof input === 'undefined';
-const isObject = input => getConstructor(input) === Object;
+const isObject = (input) => getConstructor(input) === Object;
-const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
+const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
-const isString = input => getConstructor(input) === String;
+const isString = (input) => getConstructor(input) === String;
-const isBoolean = input => getConstructor(input) === Boolean;
+const isBoolean = (input) => getConstructor(input) === Boolean;
-const isFunction = input => getConstructor(input) === Function;
+const isFunction = (input) => getConstructor(input) === Function;
-const isArray = input => Array.isArray(input);
+const isArray = (input) => Array.isArray(input);
-const isWeakMap = input => instanceOf(input, WeakMap);
+const isWeakMap = (input) => instanceOf(input, WeakMap);
-const isNodeList = input => instanceOf(input, NodeList);
+const isNodeList = (input) => instanceOf(input, NodeList);
-const isElement = input => instanceOf(input, Element);
+const isElement = (input) => instanceOf(input, Element);
-const isTextNode = input => getConstructor(input) === Text;
+const isTextNode = (input) => getConstructor(input) === Text;
-const isEvent = input => instanceOf(input, Event);
+const isEvent = (input) => instanceOf(input, Event);
-const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
+const isKeyboardEvent = (input) => instanceOf(input, KeyboardEvent);
-const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isCue = (input) => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isTrack = (input) => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
-const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
+const isPromise = (input) => instanceOf(input, Promise) && isFunction(input.then);
-const isEmpty = input =>
+const isEmpty = (input) =>
  isNullOrUndefined(input) ||
  ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
  (isObject(input) && !Object.keys(input).length);
-const isUrl = input => {
+const isUrl = (input) => {
  // Accept a URL object
  if (instanceOf(input, window.URL)) {
    return true;
@@ -54,7 +54,7 @@ export default function loadSprite(url, id) {
    // Get the sprite
    fetch(url)
-      .then(result => {
+      .then((result) => {
        if (is.empty(result)) {
          return;
        }
@@ -26,7 +26,7 @@ export function extend(target = {}, ...sources) {
    return target;
  }
-  Object.keys(source).forEach(key => {
+  Object.keys(source).forEach((key) => {
    if (is.object(source[key])) {
      if (!Object.keys(target).includes(key)) {
        Object.assign(target, { [key]: {} });
@@ -33,7 +33,7 @@ export const replaceAll = (input = '', find = '', replace = '') =>
 // Convert to title case
 export const toTitleCase = (input = '') =>
-  input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
+  input.toString().replace(/\w\S*/g, (text) => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
 // Convert string to pascalCase
 export function toPascalCase(input = '') {
@@ -27,7 +27,7 @@ export function reduceAspectRatio(ratio) {
 }
 export function getAspectRatio(input) {
-  const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
+  const parse = (ratio) => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
  // Try provided ratio
  let ratio = parse(input);
@@ -68,7 +68,11 @@ export function setAspectRatio(input) {
    const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
    const offset = (height - padding) / (height / 50);
-    this.media.style.transform = `translateY(-${offset}%)`;
+    if (this.fullscreen.active) {
      wrapper.style.paddingBottom = null;
    } else {
      this.media.style.transform = `translateY(-${offset}%)`;
    }
  } else if (this.isHTML5) {
    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
  }
@@ -5,9 +5,9 @@
 import is from './is';
 // Time helpers
-export const getHours = value => Math.trunc((value / 60 / 60) % 60, 10);
+export const getHours = (value) => Math.trunc((value / 60 / 60) % 60, 10);
-export const getMinutes = value => Math.trunc((value / 60) % 60, 10);
+export const getMinutes = (value) => Math.trunc((value / 60) % 60, 10);
-export const getSeconds = value => Math.trunc(value % 60, 10);
+export const getSeconds = (value) => Math.trunc(value % 60, 10);
 // Format time to UI friendly string
 export function formatTime(time = 0, displayHours = false, inverted = false) {
@@ -17,7 +17,7 @@ export function formatTime(time = 0, displayHours = false, inverted = false) {
  }
  // Format time component to add leading zero
-  const format = value => `0${value}`.slice(-2);
+  const format = (value) => `0${value}`.slice(-2);
  // Breakdown to hours, mins, secs
  let hours = getHours(time);
  const mins = getMinutes(time);
@@ -12,7 +12,6 @@
  font-family: $plyr-font-family;
  font-variant-numeric: tabular-nums; // Force monosace-esque number widths
  font-weight: $plyr-font-weight-regular;
  height: 100%;
  line-height: $plyr-line-height;
  max-width: 100%;
  min-width: 200px;
@@ -3,7 +3,6 @@
 // --------------------------------------------------------------
 .plyr--full-ui input[type='range'] {
  // WebKit
  -webkit-appearance: none; /* stylelint-disable-line */
  background: transparent;
  border: 0;
@@ -13,6 +12,7 @@
  display: block;
  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
  margin: 0;
  min-width: 0;
  padding: 0;
  transition: box-shadow 0.3s ease;
  width: 100%;
@@ -14,7 +14,7 @@
    margin-right: $plyr-control-spacing;
  }
-  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
+  @media (max-width: calc(#{$plyr-bp-md} - 1px)) {
    display: none;
  }
 }
@@ -30,6 +30,7 @@ const plumber = require('gulp-plumber');
 const size = require('gulp-size');
 const sourcemaps = require('gulp-sourcemaps');
 const browserSync = require('browser-sync').create();
 const gulpIf = require('gulp-if');
 // Configs
 const build = require('../build.json');
 // Info from package
@@ -74,8 +75,8 @@ const tasks = {
 const sizeOptions = { showFiles: true, gzip: true };
 // Clean out /dist
-gulp.task('clean', done => {
+gulp.task('clean', (done) => {
-  const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
+  const dirs = [paths.plyr.output, paths.demo.output].map((dir) => path.join(dir, '**/*'));
  // Don't delete the mp4
  dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
@@ -89,7 +90,7 @@ gulp.task('clean', done => {
 Object.entries(build.js).forEach(([filename, entry]) => {
  const { dist, formats, namespace, polyfill, src } = entry;
-  formats.forEach(format => {
+  formats.forEach((format) => {
    const name = `js:${filename}:${format}`;
    const extension = format === 'es' ? 'mjs' : 'js';
    tasks.js.push(name);
@@ -128,7 +129,7 @@ Object.entries(build.js).forEach(([filename, entry]) => {
            },
          ),
        )
-        .pipe(header('typeof navigator === "object" && ')) // "Support" SSR (#935)
+        .pipe(gulpIf(() => extension !== 'mjs', header('typeof navigator === "object" && '))) // "Support" SSR (#935)
        .pipe(
          rename({
            extname: `.${extension}`,
@@ -27,7 +27,7 @@ const { version } = pkg;
 const minSuffix = '.min';
 // Get AWS config
-Object.values(deploy).forEach(target => {
+Object.values(deploy).forEach((target) => {
  Object.assign(target, {
    publisher: publish.create({
      region: target.region,
@@ -102,7 +102,7 @@ const localPath = new RegExp('(../)?dist/', 'gi');
 const versionPath = `https://${deploy.cdn.domain}/${version}/`;
 const cdnpath = new RegExp(`${deploy.cdn.domain}/${regex}/`, 'gi');
-const renameFile = rename(p => {
+const renameFile = rename((p) => {
  p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
  p.dirname = p.dirname.replace('.', version); // eslint-disable-line
 });
@@ -120,7 +120,7 @@ const canDeploy = () => {
  return true;
 };
-gulp.task('version', done => {
+gulp.task('version', (done) => {
  if (!canDeploy()) {
    done();
    return null;
@@ -135,7 +135,7 @@ gulp.task('version', done => {
  return gulp
    .src(
-      files.map(file => path.join(root, `src/js/${file}`)),
+      files.map((file) => path.join(root, `src/js/${file}`)),
      { base: '.' },
    )
    .pipe(replace(semver, `v${version}`))
@@ -144,7 +144,7 @@ gulp.task('version', done => {
 });
 // Publish version to CDN bucket
-gulp.task('cdn', done => {
+gulp.task('cdn', (done) => {
  if (!canDeploy()) {
    done();
    return null;
@@ -198,7 +198,7 @@ gulp.task('purge', () => {
    .on('end', () => {
      const purge = new FastlyPurge(fastly.token);
-      list.forEach(url => {
+      list.forEach((url) => {
        log(`Purging ${ansi.cyan(url)}...`);
        purge.url(url, (error, result) => {
@@ -213,7 +213,7 @@ gulp.task('purge', () => {
 });
 // Publish to demo bucket
-gulp.task('demo', done => {
+gulp.task('demo', (done) => {
  if (!canDeploy()) {
    done();
    return null;
@@ -248,7 +248,7 @@ gulp.task('demo', done => {
    .src(pages)
    .pipe(replace(localPath, versionPath))
    .pipe(
-      rename(p => {
+      rename((p) => {
        if (options.demo.uploadPath) {
          // eslint-disable-next-line no-param-reassign
          p.dirname += options.demo.uploadPath;