chore: removed dist directories from git

Merge pull request #2093 from sampotts/develop
Develop
2021-01-30 00:06:48 +11:00 · 2021-01-29 23:54:46 +11:00 · 2021-01-29 23:43:10 +11:00 · 2021-01-29 23:40:34 +11:00 · 2021-01-29 23:28:02 +11:00 · 2021-01-29 23:18:47 +11:00
76 changed files with 3205 additions and 81391 deletions
@@ -1,30 +1,18 @@
 {
-    "parser": "babel-eslint",
-    "extends": ["airbnb-base", "prettier"],
-    "plugins": ["simple-import-sort", "import"],
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "globals": {
-        "Plyr": false,
-        "jQuery": false
-    },
-    "rules": {
-        "import/no-cycle": "warn",
-        "padding-line-between-statements": [
-            "error",
-            {
-                "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"
-    }
+  "parser": "babel-eslint",
+  "extends": ["@sampotts/eslint-config/es6"],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "globals": {
+    "Plyr": false,
+    "jQuery": false
+  },
+  "rules": {
+    "import/no-cycle": "warn"
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  }
 }
@@ -1,8 +1,3 @@
 ### Link to related issue (if applicable)

 ### Summary of proposed changes
-
-### Checklist
- [ ] Use `develop` as the base branch
- [ ] Exclude the gulp build (`/dist` changes) from the PR
- [ ] Test on [supported browsers](https://github.com/sampotts/plyr#browser-support)
@@ -2,8 +2,8 @@ node_modules
 .DS_Store
 credentials.json
 *.mp4
-!dist/blank.mp4
 npm-debug.log
 yarn-error.log
 *.webm
 .idea/
+dist/
@@ -7,6 +7,6 @@ credentials.json
 deploy.json
 yarn.lock
 package-lock.json
-*.mp4
 *.webm
+*.mp4
 !dist/blank.mp4
@@ -1 +1 @@
-v13.8.0
+v12.8
@@ -2,7 +2,5 @@ language: node_js
 node_js: lts/*

 script:
- bash .travis/prevent-base-master.sh
- bash .travis/omit-dist.sh
 - npm run lint
 - npm run build
@@ -1,5 +0,0 @@
-#!/bin/bash
-if [ $TRAVIS_BRANCH == "develop" ] && $(git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qE "^(demo/)?dist/"); then
-	echo 'Build output ("dist" and "demo/dist") not permitted in develop' >&2
-	exit 1
-fi
@@ -1,5 +0,0 @@
-#!/bin/bash
-if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ $TRAVIS_BRANCH == "master" ] && $(git diff --name-only $TRAVIS_COMMIT_RANGE | grep -q "^src/"); then
-	echo 'The base branch for pull requests must be "develop"' >&2
-	exit 1
-fi
@@ -1,4 +1,38 @@
-## v3.6.1
+### v3.6.4
+
+- Remove unnecessary calc from media query (thanks @naomiaz)
+- Enhance types (thanks @lunika)
+- Fix: Object.values for the providers must be used (thanks @syteknet-core)
+- Fix: Improve support inside iframes (thanks @ajgagnon)
+- Added --plyr-video-background for having control over the background of a video with alpha channel (webm) or a poster image with alpha channel (thanks @nepomuc)
+- Fix issue with not entering iosfullscreen of vimeo videos with playsinline=true (thanks @lordon and @Frosch)
+- fix: use new syntax for iframe allow attribute
+- chore: package updates
+- chore: add @babel/plugin-proposal-class-properties
+- fix: use bound arrow functions in classes
+
+### 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)
+- Fixes for custom controls as element (thanks @taylorchu)
+- Added missing TypeScript interface for preview thumbnail options (thanks @taylorchu)
+
+### v3.6.1

 - Safari bug fix

@@ -36,8 +36,8 @@ Please follow the instructions in our issue templates. Don't use github issues t
 You can use Gitpod (a free online VS Code-like IDE) for contributing. With a single click it will launch a workspace and automatically:

 - clone the plyr repo.
- install the dependencies.
- run `gulp` to the start the server.
+- install the dependencies with `yarn install` in root directory and "demo" directory.
+- run `gulp` in root directory to start the dev server.

 So that you can start straight away.

@@ -49,6 +49,6 @@ So that you can start straight away.

 - If your modifications changes the documented behavior or add new features, document these changes in [README.md](README.md).

- When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
+- When finished, push the changes to your GitHub repository and send a pull request. Describe what your PR does.

 - If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.
@@ -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

@@ -134,13 +134,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.

 ```html
-<script src="https://cdn.plyr.io/3.6.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.6.4/plyr.js"></script>
 ```

 ...or...

 ```html
-<script src="https://cdn.plyr.io/3.6.1/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.6.4/plyr.polyfilled.js"></script>
 ```

 ## CSS
@@ -154,13 +154,13 @@ Include the `plyr.css` stylsheet into your `<head>`.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.6.1/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />
 ```

 ## SVG Sprite

 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.4/plyr.svg`.

 # Ads

@@ -185,6 +185,7 @@ Here's a list of the properties and what they are used for:
 | Name                                           | Description                                                                                             | Default / Fallback                                                    |
 | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
 | `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff`    |
+| `--plyr-video-background`                      | The background color of video and poster wrappers for using alpha channel videos and poster images.     | `rgba(0, 0, 0, 1)`    |
 | `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
 | `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
 | `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
@@ -268,7 +269,7 @@ You can set them in your CSS for all players:
 ```html
 <video class="player" style="--plyr-color-main: #1ac266;">
    ...
-</vieo>
+</video>
 ```

 ### SASS
@@ -790,6 +791,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

@@ -833,6 +835,10 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 - [Oscar Radio](http://oscar-radio.xyz/)
 - [Sparkk TV](https://www.sparkktv.com/)
 - [@halfhalftravel](https://www.halfhalftravel.com/)
+- [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":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.5.tgz#d9a51f1388581067b50d30ed9b1aed2cbb333a36"
-  integrity sha512-rqDvjk/EvogfdbZ4TiEpxM/lwpPKmq23z9YKEO4q81+1SwJNua53H60dOk9HpRU8nOJ1g84TMKT2Ov8H7sqDWA==
+"@sentry/browser@^5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.3.tgz#7a64bd1cf01bf393741a3e4bf35f82aa927f5b4e"
+  integrity sha512-2TzE/CoBa5ZkvxJizDdi1Iz1ldmXSJpFQ1mL07PIXBjCt0Wxf+WOuFSj5IP4L40XHfJE5gU8wEvSH0VDR8nXtA==
  dependencies:
-    "@sentry/core" "5.15.5"
-    "@sentry/types" "5.15.5"
-    "@sentry/utils" "5.15.5"
+    "@sentry/core" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"

-"@sentry/core@5.15.5":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.5.tgz#40ea79bff5272d3fbbeeb4a98cdc59e1adbd2c92"
-  integrity sha512-enxBLv5eibBMqcWyr+vApqeix8uqkfn0iGsD3piKvoMXCgKsrfMwlb/qo9Ox0lKr71qIlZVt+9/A2vZohdgnlg==
+"@sentry/core@5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.3.tgz#030f435f2b518f282ba8bd954dac90cd70888bd7"
+  integrity sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==
  dependencies:
-    "@sentry/hub" "5.15.5"
-    "@sentry/minimal" "5.15.5"
-    "@sentry/types" "5.15.5"
-    "@sentry/utils" "5.15.5"
+    "@sentry/hub" "5.22.3"
+    "@sentry/minimal" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"

-"@sentry/hub@5.15.5":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.5.tgz#f5abbcdbe656a70e2ff02c02a5a4cffa0f125935"
-  integrity sha512-zX9o49PcNIVMA4BZHe//GkbQ4Jx+nVofqU/Il32/IbwKhcpPlhGX3c1sOVQo4uag3cqd/JuQsk+DML9TKkN0Lw==
+"@sentry/hub@5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.3.tgz#08309a70d2ea8d5e313d05840c1711f34f2fffe5"
+  integrity sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==
  dependencies:
-    "@sentry/types" "5.15.5"
-    "@sentry/utils" "5.15.5"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
    tslib "^1.9.3"

-"@sentry/minimal@5.15.5":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.5.tgz#a0e4e071f01d9c4d808094ae7203f6c4cca9348a"
-  integrity sha512-zQkkJ1l9AjmU/Us5IrOTzu7bic4sTPKCatptXvLSTfyKW7N6K9MPIIFeSpZf9o1yM2sRYdK7GV08wS2eCT3JYw==
+"@sentry/minimal@5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.3.tgz#706e4029ae5494123d3875c658ba8911aa5cc440"
+  integrity sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==
  dependencies:
-    "@sentry/hub" "5.15.5"
-    "@sentry/types" "5.15.5"
+    "@sentry/hub" "5.22.3"
+    "@sentry/types" "5.22.3"
    tslib "^1.9.3"

-"@sentry/types@5.15.5":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.5.tgz#16c97e464cf09bbd1d2e8ce90d130e781709076e"
-  integrity sha512-F9A5W7ucgQLJUG4LXw1ZIy4iLevrYZzbeZ7GJ09aMlmXH9PqGThm1t5LSZlVpZvUfQ2rYA8NU6BdKJSt7B5LPw==
+"@sentry/types@5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.3.tgz#d1d547b30ee8bd7771fa893af74c4f3d71f0fd18"
+  integrity sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==

-"@sentry/utils@5.15.5":
-  version "5.15.5"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.5.tgz#dec1d4c79037c4da08b386f5d34409234dcbfb15"
-  integrity sha512-Nl9gl/MGnzSkuKeo3QaefoD/OJrFLB8HmwQ7HUbTXb6E7yyEzNKAQMHXGkwNAjbdYyYbd42iABP6Y5F/h39NtA==
+"@sentry/utils@5.22.3":
+  version "5.22.3"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.3.tgz#e3bda3e789239eb16d436f768daa12829f33d18f"
+  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:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
-  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==
+url-polyfill@^1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.10.tgz#fd5bbcf66c9491fa682b0cb6d6a855e1643a9281"
+  integrity sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A==
@@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "3.6.1",
+  "version": "3.6.4",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "https://plyr.io",
  "author": "Sam Potts <sam@potts.es>",
@@ -35,66 +35,67 @@
    "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",
-    "aws-sdk": "^2.661.0",
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
+    "autoprefixer": "^10.0.2",
+    "aws-sdk": "^2.814.0",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
-    "del": "^5.1.0",
-    "eslint": "^6.8.0",
-    "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.2",
+    "browser-sync": "^2.26.13",
+    "del": "^6.0.0",
+    "eslint": "^7.3.1",
    "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": "^2.0.0",
+    "postcss": "^8.1.7",
    "postcss-clean": "^1.1.0",
-    "postcss-custom-properties": "^9.1.1",
-    "prettier-eslint": "^9.0.1",
+    "postcss-custom-properties": "^10.0.0",
+    "prettier-eslint": "^12.0.0",
    "prettier-stylelint": "^0.4.2",
-    "remark-cli": "^8.0.0",
-    "remark-validate-links": "^10.0.0",
-    "rollup": "^2.7.2",
+    "remark-cli": "^9.0.0",
+    "remark-validate-links": "^10.0.2",
+    "rollup": "^2.35.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-config-prettier": "^8.0.1",
+    "stylelint": "^13.8.0",
+    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-sass-guidelines": "^7.0.0",
-    "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.17.1",
+    "stylelint-config-sass-guidelines": "^7.1.0",
+    "stylelint-order": "^4.1.0",
+    "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.8.1",
    "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))
-        .forEach(track => {
+        .filter((track) => !meta.get(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 => ['captions', 'subtitles'].includes(track.kind));
+      .filter((track) => !this.isHTML5 || update || this.captions.meta.has(track))
+      .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 => {
-      track = sorted.find(t => t.language === language);
+    languages.every((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) {
@@ -61,7 +61,7 @@ const defaults = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.6.1/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.6.4/plyr.svg',

  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -200,7 +200,7 @@ const defaults = {
    vimeo: {
      sdk: 'https://player.vimeo.com/api/player.js',
      iframe: 'https://player.vimeo.com/video/{0}?{1}',
-      api: 'https://vimeo.com/api/v2/video/{0}.json',
+      api: 'https://vimeo.com/api/oembed.json?url={0}',
    },
    youtube: {
      sdk: 'https://www.youtube.com/iframe_api',
@@ -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"]'))
-            .forEach(node => node.setAttribute('aria-checked', 'false'));
+            .filter((node) => matches(node, '[role="menuitemradio"]'))
+            .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;
@@ -1263,7 +1263,7 @@ const controls = {
    this.elements.controls = null;

    // Larger overlaid play button
-    if (this.config.controls.includes('play-large')) {
+    if (is.array(this.config.controls) && this.config.controls.includes('play-large')) {
      this.elements.container.appendChild(createButton.call(this, 'play-large'));
    }

@@ -1275,7 +1275,7 @@ const controls = {
    const defaultAttributes = { class: 'plyr__controls__item' };

    // Loop through controls in order
-    dedupe(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]) => {
@@ -1675,8 +1675,6 @@ const controls = {
    if (update) {
      if (is.string(this.config.controls)) {
        container = replace(container);
-      } else if (is.element(container)) {
-        container.innerHTML = replace(container.innerHTML);
      }
    }

@@ -1704,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,
@@ -1720,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)
-              .filter(Boolean)
-              .forEach(addProperty);
+            Array.from(button).filter(Boolean).forEach(addProperty);
          } else {
            addProperty(button);
          }
@@ -1742,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,20 +43,22 @@ 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();
+
+    // this.toggle = this.toggle.bind(this);
  }

  // Determine if native supported
@@ -85,7 +87,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;
@@ -134,7 +136,7 @@ class Fullscreen {
      : this.player.elements.fullscreen || this.player.elements.container;
  }

-  onChange() {
+  onChange = () => {
    if (!this.enabled) {
      return;
    }
@@ -145,11 +147,13 @@ 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) {
+  toggleFallback = (toggle = false) => {
    // Store or restore scroll position
    if (toggle) {
      this.scrollPosition = {
@@ -189,17 +193,17 @@ class Fullscreen {
      } else if (this.cleanupViewport) {
        viewport.content = viewport.content
          .split(',')
-          .filter(part => part.trim() !== property)
+          .filter((part) => part.trim() !== property)
          .join(',');
      }
    }

    // Toggle button and fire events
    this.onChange();
-  }
+  };

  // Trap focus inside container
-  trapFocus(event) {
+  trapFocus = (event) => {
    // Bail if iOS, not active, not the tab key
    if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
      return;
@@ -220,10 +224,10 @@ class Fullscreen {
      last.focus();
      event.preventDefault();
    }
-  }
+  };

  // Update UI
-  update() {
+  update = () => {
    if (this.enabled) {
      let mode;

@@ -242,17 +246,21 @@ class Fullscreen {

    // Add styling hook to show button
    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
-  }
+  };

  // Make an element fullscreen
-  enter() {
+  enter = () => {
    if (!this.enabled) {
      return;
    }

    // iOS native fullscreen doesn't need the request step
    if (browser.isIos && this.player.config.fullscreen.iosNative) {
-      this.target.webkitEnterFullscreen();
+      if (this.player.isVimeo) {
+        this.player.embed.requestFullscreen();
+      } else {
+        this.target.webkitEnterFullscreen();
+      }
    } else if (!Fullscreen.native || this.forceFallback) {
      this.toggleFallback(true);
    } else if (!this.prefix) {
@@ -260,10 +268,10 @@ class Fullscreen {
    } else if (!is.empty(this.prefix)) {
      this.target[`${this.prefix}Request${this.property}`]();
    }
-  }
+  };

  // Bail from fullscreen
-  exit() {
+  exit = () => {
    if (!this.enabled) {
      return;
    }
@@ -280,16 +288,16 @@ class Fullscreen {
      const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
      document[`${this.prefix}${action}${this.property}`]();
    }
-  }
+  };

  // Toggle state
-  toggle() {
+  toggle = () => {
    if (!this.active) {
      this.enter();
    } else {
      this.exit();
    }
-  }
+  };
 }

 export default Fullscreen;
@@ -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) {
@@ -183,7 +183,7 @@ class Listeners {
  }

  // Device is touch enabled
-  firstTouch() {
+  firstTouch = () => {
    const { player } = this;
    const { elements } = player;

@@ -191,9 +191,9 @@ class Listeners {

    // Add touch class
    toggleClass(elements.container, player.config.classNames.isTouch, true);
-  }
+  };

-  setTabFocus(event) {
+  setTabFocus = (event) => {
    const { player } = this;
    const { elements } = player;

@@ -241,10 +241,10 @@ class Listeners {
        toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
      }, 10);
    }
-  }
+  };

  // Global window & document listeners
-  global(toggle = true) {
+  global = (toggle = true) => {
    const { player } = this;

    // Keyboard shortcuts
@@ -260,10 +260,10 @@ class Listeners {

    // Tab focus detection
    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
-  }
+  };

  // Container listeners
-  container() {
+  container = () => {
    const { player } = this;
    const { config, elements, timers } = player;

@@ -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) {
@@ -365,18 +370,18 @@ class Listeners {
        }
      }
    });
-  }
+  };

  // Listen for media events
-  media() {
+  media = () => {
    const { player } = this;
    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
@@ -509,10 +514,10 @@ class Listeners {

      triggerEvent.call(player, elements.container, event.type, true, detail);
    });
-  }
+  };

  // Run default and custom handlers
-  proxy(event, defaultHandler, customHandlerKey) {
+  proxy = (event, defaultHandler, customHandlerKey) => {
    const { player } = this;
    const customHandler = player.config.listeners[customHandlerKey];
    const hasCustomHandler = is.function(customHandler);
@@ -527,10 +532,10 @@ class Listeners {
    if (returned !== false && is.function(defaultHandler)) {
      defaultHandler.call(player, event);
    }
-  }
+  };

  // Trigger custom and default handlers
-  bind(element, type, defaultHandler, customHandlerKey, passive = true) {
+  bind = (element, type, defaultHandler, customHandlerKey, passive = true) => {
    const { player } = this;
    const customHandler = player.config.listeners[customHandlerKey];
    const hasCustomHandler = is.function(customHandler);
@@ -539,13 +544,13 @@ class Listeners {
      player,
      element,
      type,
-      event => this.proxy(event, defaultHandler, customHandlerKey),
+      (event) => this.proxy(event, defaultHandler, customHandlerKey),
      passive && !hasCustomHandler,
    );
-  }
+  };

  // Listen for control events
-  controls() {
+  controls = () => {
    const { player } = this;
    const { elements } = player;
    // IE doesn't support input event, so we fallback to change
@@ -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 => {
-        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {
+        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))
-        .forEach(child => {
-          this.bind(child, 'mouseenter mouseleave', event => {
+        .filter((c) => !c.contains(elements.container))
+        .forEach((child) => {
+          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);

@@ -882,7 +905,7 @@ class Listeners {
      'volume',
      false,
    );
-  }
+  };
 }

 export default Listeners;
@@ -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();
@@ -77,7 +77,7 @@ class Ads {
  /**
   * Load the IMA SDK
   */
-  load() {
+  load = () => {
    if (!this.enabled) {
      return;
    }
@@ -95,12 +95,12 @@ class Ads {
    } else {
      this.ready();
    }
-  }
+  };

  /**
   * Get the ads instance ready
   */
-  ready() {
+  ready = () => {
    // Double check we're enabled
    if (!this.enabled) {
      destroy(this);
@@ -120,7 +120,7 @@ class Ads {

    // Setup the IMA SDK
    this.setupIMA();
-  }
+  };

  // Build the tag URL
  get tagUrl() {
@@ -153,7 +153,7 @@ class Ads {
   * properly place mid-rolls. After we create the ad display container, we initialize it. On
   * mobile devices, this initialization is done as the result of a user action.
   */
-  setupIMA() {
+  setupIMA = () => {
    // Create the container for our advertisements
    this.elements.container = createElement('div', {
      class: this.player.config.classNames.ads,
@@ -179,19 +179,19 @@ 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();
-  }
+  };

  /**
   * Request advertisements
   */
-  requestAds() {
+  requestAds = () => {
    const { container } = this.player.elements;

    try {
@@ -216,13 +216,13 @@ class Ads {
    } catch (e) {
      this.onAdError(e);
    }
-  }
+  };

  /**
   * Update the ad countdown
   * @param {Boolean} start
   */
-  pollCountdown(start = false) {
+  pollCountdown = (start = false) => {
    if (!start) {
      clearInterval(this.countdownTimer);
      this.elements.container.removeAttribute('data-badge-text');
@@ -236,13 +236,13 @@ class Ads {
    };

    this.countdownTimer = setInterval(update, 100);
-  }
+  };

  /**
   * This method is called whenever the ads are ready inside the AdDisplayContainer
   * @param {Event} adsManagerLoadedEvent
   */
-  onAdsManagerLoaded(event) {
+  onAdsManagerLoaded = (event) => {
    // Load could occur after a source change (race condition)
    if (!this.enabled) {
      return;
@@ -264,21 +264,21 @@ 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 => {
-      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+    Object.keys(google.ima.AdEvent.Type).forEach((type) => {
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], (e) => this.onAdEvent(e));
    });

    // Resolve our adsManager
    this.trigger('loaded');
-  }
+  };

-  addCuePoints() {
+  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;

@@ -294,7 +294,7 @@ class Ads {
        }
      });
    }
-  }
+  };

  /**
   * This is where all the event handling takes place. Retrieve the ad from the event. Some
@@ -302,7 +302,7 @@ class Ads {
   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
   * @param {Event} event
   */
-  onAdEvent(event) {
+  onAdEvent = (event) => {
    const { container } = this.player.elements;
    // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
    // don't have ad object associated
@@ -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()}`);
    };

@@ -410,23 +410,23 @@ class Ads {
      default:
        break;
    }
-  }
+  };

  /**
   * Any ad error handling comes through here
   * @param {Event} event
   */
-  onAdError(event) {
+  onAdError = (event) => {
    this.cancel();
    this.player.debug.warn('Ads error', event);
-  }
+  };

  /**
   * Setup hooks for Plyr and window events. This ensures
   * the mid- and post-roll launch at the correct time. And
   * resize the advertisement when the player resizes
   */
-  listeners() {
+  listeners = () => {
    const { container } = this.player.elements;
    let time;

@@ -464,12 +464,12 @@ class Ads {
        this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
      }
    });
-  }
+  };

  /**
   * Initialize the adsManager and start playing advertisements
   */
-  play() {
+  play = () => {
    const { container } = this.player.elements;

    if (!this.managerPromise) {
@@ -503,12 +503,12 @@ class Ads {
        }
      })
      .catch(() => {});
-  }
+  };

  /**
   * Resume our video
   */
-  resumeContent() {
+  resumeContent = () => {
    // Hide the advertisement container
    this.elements.container.style.zIndex = '';

@@ -517,12 +517,12 @@ class Ads {

    // Play video
    silencePromise(this.player.media.play());
-  }
+  };

  /**
   * Pause our video
   */
-  pauseContent() {
+  pauseContent = () => {
    // Show the advertisement container
    this.elements.container.style.zIndex = 3;

@@ -531,7 +531,7 @@ class Ads {

    // Pause our video.
    this.player.media.pause();
-  }
+  };

  /**
   * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
@@ -539,7 +539,7 @@ class Ads {
   * video requests. https://developers.google.com/interactive-
   * media-ads/docs/sdks/android/faq#8
   */
-  cancel() {
+  cancel = () => {
    // Pause our video
    if (this.initialized) {
      this.resumeContent();
@@ -550,12 +550,12 @@ class Ads {

    // Re-create our adsManager
    this.loadAds();
-  }
+  };

  /**
   * Re-create our adsManager
   */
-  loadAds() {
+  loadAds = () => {
    // Tell our adsManager to go bye bye
    this.managerPromise
      .then(() => {
@@ -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);
        });
@@ -576,23 +576,23 @@ class Ads {
        this.requestAds();
      })
      .catch(() => {});
-  }
+  };

  /**
   * Handles callbacks after an ad event was invoked
   * @param {String} event - Event type
   */
-  trigger(event, ...args) {
+  trigger = (event, ...args) => {
    const handlers = this.events[event];

    if (is.array(handlers)) {
-      handlers.forEach(handler => {
+      handlers.forEach((handler) => {
        if (is.function(handler)) {
          handler.apply(this, args);
        }
      });
    }
-  }
+  };

  /**
   * Add event listeners
@@ -600,7 +600,7 @@ class Ads {
   * @param {Function} callback - Callback for when event occurs
   * @return {Ads}
   */
-  on(event, callback) {
+  on = (event, callback) => {
    if (!is.array(this.events[event])) {
      this.events[event] = [];
    }
@@ -608,7 +608,7 @@ class Ads {
    this.events[event].push(callback);

    return this;
-  }
+  };

  /**
   * Setup a safety timer for when the ad network doesn't respond for whatever reason.
@@ -618,27 +618,27 @@ class Ads {
   * @param {Number} time
   * @param {String} from
   */
-  startSafetyTimer(time, from) {
+  startSafetyTimer = (time, from) => {
    this.player.debug.log(`Safety timer invoked from: ${from}`);

    this.safetyTimer = setTimeout(() => {
      this.cancel();
      this.clearSafetyTimer('startSafetyTimer()');
    }, time);
-  }
+  };

  /**
   * Clear our safety timer(s)
   * @param {String} from
   */
-  clearSafetyTimer(from) {
+  clearSafetyTimer = (from) => {
    if (!is.nullOrUndefined(this.safetyTimer)) {
      this.player.debug.log(`Safety timer cleared from: ${from}`);

      clearTimeout(this.safetyTimer);
      this.safetyTimer = null;
    }
-  }
+  };
 }

 export default Ads;
@@ -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(
@@ -103,7 +103,7 @@ class PreviewThumbnails {
    return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
  }

-  load() {
+  load = () => {
    // Toggle the regular seek tooltip
    if (this.player.elements.display.seekTooltip) {
      this.player.elements.display.seekTooltip.hidden = this.enabled;
@@ -126,11 +126,11 @@ class PreviewThumbnails {

      this.loaded = true;
    });
-  }
+  };

  // Download VTT files and parse them
-  getThumbnails() {
-    return new Promise(resolve => {
+  getThumbnails = () => {
+    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,17 +159,17 @@ 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);
      }
    });
-  }
+  };

  // Process individual VTT file
-  getThumbnail(url) {
-    return new Promise(resolve => {
-      fetch(url).then(response => {
+  getThumbnail = (url) => {
+    return new Promise((resolve) => {
+      fetch(url).then((response) => {
        const thumbnail = {
          frames: parseVtt(response),
          height: null,
@@ -202,9 +202,9 @@ class PreviewThumbnails {
        tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
      });
    });
-  }
+  };

-  startMove(event) {
+  startMove = (event) => {
    if (!this.loaded) {
      return;
    }
@@ -245,13 +245,13 @@ class PreviewThumbnails {

    // Download and show image
    this.showImageAtCurrentTime();
-  }
+  };

-  endMove() {
+  endMove = () => {
    this.toggleThumbContainer(false, true);
-  }
+  };

-  startScrubbing(event) {
+  startScrubbing = (event) => {
    // Only act on left mouse button (0), or touch device (event.button does not exist or is false)
    if (is.nullOrUndefined(event.button) || event.button === false || event.button === 0) {
      this.mouseDown = true;
@@ -265,9 +265,9 @@ class PreviewThumbnails {
        this.showImageAtCurrentTime();
      }
    }
-  }
+  };

-  endScrubbing() {
+  endScrubbing = () => {
    this.mouseDown = false;

    // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
@@ -283,12 +283,12 @@ class PreviewThumbnails {
        }
      });
    }
-  }
+  };

  /**
   * Setup hooks for Plyr and window events
   */
-  listeners() {
+  listeners = () => {
    // Hide thumbnail preview - on mouse click, mouse leave (in listeners.js for now), and video play/seek. All four are required, e.g., for buffering
    this.player.on('play', () => {
      this.toggleThumbContainer(false, true);
@@ -301,12 +301,12 @@ class PreviewThumbnails {
    this.player.on('timeupdate', () => {
      this.lastTime = this.player.media.currentTime;
    });
-  }
+  };

  /**
   * Create HTML elements for image containers
   */
-  render() {
+  render = () => {
    // Create HTML element: plyr__preview-thumbnail-container
    this.elements.thumb.container = createElement('div', {
      class: this.player.config.classNames.previewThumbnails.thumbContainer,
@@ -339,18 +339,18 @@ class PreviewThumbnails {
    });

    this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
-  }
+  };

-  destroy() {
+  destroy = () => {
    if (this.elements.thumb.container) {
      this.elements.thumb.container.remove();
    }
    if (this.elements.scrubbing.container) {
      this.elements.scrubbing.container.remove();
    }
-  }
+  };

-  showImageAtCurrentTime() {
+  showImageAtCurrentTime = () => {
    if (this.mouseDown) {
      this.setScrubbingContainerSize();
    } else {
@@ -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;
@@ -387,10 +387,10 @@ class PreviewThumbnails {
      this.showingThumb = thumbNum;
      this.loadImage(qualityIndex);
    }
-  }
+  };

  // Show the image that's currently specified in this.showingThumb
-  loadImage(qualityIndex = 0) {
+  loadImage = (qualityIndex = 0) => {
    const thumbNum = this.showingThumb;
    const thumbnail = this.thumbnails[qualityIndex];
    const { urlPrefix } = thumbnail;
@@ -426,9 +426,9 @@ class PreviewThumbnails {
      this.currentImageElement.dataset.index = thumbNum;
      this.removeOldImages(this.currentImageElement);
    }
-  }
+  };

-  showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) {
+  showImage = (previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) => {
    this.player.debug.log(
      `Showing thumb: ${thumbFilename}. num: ${thumbNum}. qual: ${qualityIndex}. newimg: ${newImage}`,
    );
@@ -449,12 +449,12 @@ class PreviewThumbnails {
    this.preloadNearby(thumbNum, true)
      .then(this.preloadNearby(thumbNum, false))
      .then(this.getHigherQuality(qualityIndex, previewImage, frame, thumbFilename));
-  }
+  };

  // Remove all preview images that aren't the designated current image
-  removeOldImages(currentImage) {
+  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;
      }
@@ -476,12 +476,12 @@ class PreviewThumbnails {
        }, removeDelay);
      }
    });
-  }
+  };

  // 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 => {
+  preloadNearby = (thumbNum, forward = true) => {
+    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) {
@@ -527,10 +527,10 @@ class PreviewThumbnails {
        }
      }, 300);
    });
-  }
+  };

  // If user has been hovering current image for half a second, look for a higher quality one
-  getHigherQuality(currentQualityIndex, previewImage, frame, thumbFilename) {
+  getHigherQuality = (currentQualityIndex, previewImage, frame, thumbFilename) => {
    if (currentQualityIndex < this.thumbnails.length - 1) {
      // Only use the higher quality version if it's going to look any better - if the current thumb is of a lower pixel density than the thumbnail container
      let previewImageHeight = previewImage.naturalHeight;
@@ -550,7 +550,7 @@ class PreviewThumbnails {
        }, 300);
      }
    }
-  }
+  };

  get currentImageContainer() {
    if (this.mouseDown) {
@@ -605,7 +605,7 @@ class PreviewThumbnails {
    }
  }

-  toggleThumbContainer(toggle = false, clearShowing = false) {
+  toggleThumbContainer = (toggle = false, clearShowing = false) => {
    const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
    this.elements.thumb.container.classList.toggle(className, toggle);

@@ -613,9 +613,9 @@ class PreviewThumbnails {
      this.showingThumb = null;
      this.showingThumbFilename = null;
    }
-  }
+  };

-  toggleScrubbingContainer(toggle = false) {
+  toggleScrubbingContainer = (toggle = false) => {
    const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
    this.elements.scrubbing.container.classList.toggle(className, toggle);

@@ -623,17 +623,17 @@ class PreviewThumbnails {
      this.showingThumb = null;
      this.showingThumbFilename = null;
    }
-  }
+  };

-  determineContainerAutoSizing() {
+  determineContainerAutoSizing = () => {
    if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
      // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
      this.sizeSpecifiedInCSS = true;
    }
-  }
+  };

  // Set the size to be about a quarter of the size of video. Unless option dynamicSize === false, in which case it needs to be set in CSS
-  setThumbContainerSizeAndPos() {
+  setThumbContainerSizeAndPos = () => {
    if (!this.sizeSpecifiedInCSS) {
      const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
      this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
@@ -653,9 +653,9 @@ class PreviewThumbnails {
    }

    this.setThumbContainerPos();
-  }
+  };

-  setThumbContainerPos() {
+  setThumbContainerPos = () => {
    const seekbarRect = this.player.elements.progress.getBoundingClientRect();
    const plyrRect = this.player.elements.container.getBoundingClientRect();
    const { container } = this.elements.thumb;
@@ -674,20 +674,20 @@ class PreviewThumbnails {
    }

    container.style.left = `${previewPos}px`;
-  }
+  };

  // Can't use 100% width, in case the video is a different aspect ratio to the video container
-  setScrubbingContainerSize() {
+  setScrubbingContainerSize = () => {
    const { width, height } = fitRatio(this.thumbAspectRatio, {
      width: this.player.media.clientWidth,
      height: this.player.media.clientHeight,
    });
    this.elements.scrubbing.container.style.width = `${width}px`;
    this.elements.scrubbing.container.style.height = `${height}px`;
-  }
+  };

  // Sprites need to be offset to the correct location
-  setImageSizeAndOffset(previewImage, frame) {
+  setImageSizeAndOffset = (previewImage, frame) => {
    if (!this.usingSprites) {
      return;
    }
@@ -703,7 +703,7 @@ class PreviewThumbnails {
    previewImage.style.left = `-${frame.x * multiplier}px`;
    // eslint-disable-next-line no-param-reassign
    previewImage.style.top = `-${frame.y * multiplier}px`;
-  }
+  };
 }

 export default PreviewThumbnails;
@@ -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 {
@@ -104,7 +104,7 @@ const vimeo = {
    const src = format(player.config.urls.vimeo.iframe, id, params);
    iframe.setAttribute('src', src);
    iframe.setAttribute('allowfullscreen', '');
-    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
+    iframe.setAttribute('allow', ['autoplay', 'fullscreen', 'picture-in-picture'].join('; '));

    // Set the referrer policy if required
    if (!is.empty(referrerPolicy)) {
@@ -112,31 +112,29 @@ const vimeo = {
    }

    // Inject the package
-    const { poster } = player;
-    if (premium) {
-      iframe.setAttribute('data-poster', poster);
+    if (premium || !config.customControls) {
+      iframe.setAttribute('data-poster', player.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, id), 'json').then(response => {
-      if (is.empty(response)) {
-        return;
-      }
+    if (!config.customControls) {
+      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
+        if (is.empty(response) || !response.thumbnail_url) {
+          return;
+        }

-      // Get the URL for thumbnail
-      const url = new URL(response[0].thumbnail_large);
-
-      // Get original image
-      url.pathname = `${url.pathname.split('_')[0]}.jpg`;
-
-      // Set and show poster
-      ui.setPoster.call(player, url.href).catch(() => {});
-    });
+        // Set and show poster
+        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
+      });
+    }

    // Setup instance
    // https://github.com/vimeo/player.js
@@ -269,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);
      });

@@ -291,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');
@@ -366,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');

@@ -383,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');
@@ -401,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
-    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+    // Only load the poster when using custom controls
+    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)
-    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-      .then(image => ui.setPoster.call(player, image.src))
-      .then(src => {
-        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-        if (!src.includes('maxres')) {
-          player.elements.poster.style.backgroundSize = 'cover';
-        }
-      })
-      .catch(() => {});
-
-    const config = player.config.youtube;
+      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+      loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
+        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+        .then((image) => ui.setPoster.call(player, image.src))
+        .then((src) => {
+          // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+          if (!src.includes('maxres')) {
+            player.elements.poster.style.backgroundSize = 'cover';
+          }
+        })
+        .catch(() => {});
+    }

    // 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
-          hl: player.config.hl, // iframe interface language
-          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
-          disablekb: 1, // Disable keyboard as we handle it
-          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Autoplay
+          autoplay: player.config.autoplay ? 1 : 0,
+          // iframe interface language
+          hl: player.config.hl,
+          // 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);
@@ -138,10 +138,15 @@ declare class Plyr {
   */
  ratio?: string;

+  /**
+   * Access Elements cache
+   */
+  elements: Plyr.Elements;
+
  /**
   * Returns the current video Provider
   */
-  readonly provider: 'html5' | 'vimeo' | 'youtube';
+  readonly provider: Plyr.Provider;

  /**
   * Returns the native API for Vimeo or Youtube players
@@ -214,26 +219,17 @@ declare class Plyr {
  /**
   * Add an event listener for the specified event.
   */
-  on(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  on<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;

  /**
   * Add an event listener for the specified event once.
   */
-  once(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  once<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;

  /**
   * Remove an event listener for the specified event.
   */
-  off(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  off<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;

  /**
   * Check support for a mime type.
@@ -249,37 +245,51 @@ declare class Plyr {
 declare namespace Plyr {
  type MediaType = 'audio' | 'video';
  type Provider = 'html5' | 'youtube' | 'vimeo';
-  type StandardEvent =
-    | 'progress'
-    | 'playing'
-    | 'play'
-    | 'pause'
-    | 'timeupdate'
-    | 'volumechange'
-    | 'seeking'
-    | 'seeked'
-    | 'ratechange'
-    | 'ended'
-    | 'enterfullscreen'
-    | 'exitfullscreen'
-    | 'captionsenabled'
-    | 'captionsdisabled'
-    | 'languagechange'
-    | 'controlshidden'
-    | 'controlsshown'
-    | 'ready';
-  type Html5Event =
-    | 'loadstart'
-    | 'loadeddata'
-    | 'loadedmetadata'
-    | 'canplay'
-    | 'canplaythrough'
-    | 'stalled'
-    | 'waiting'
-    | 'emptied'
-    | 'cuechange'
-    | 'error';
-  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+  type StandardEventMap = {
+    progress: PlyrEvent;
+    playing: PlyrEvent;
+    play: PlyrEvent;
+    pause: PlyrEvent;
+    timeupdate: PlyrEvent;
+    volumechange: PlyrEvent;
+    seeking: PlyrEvent;
+    seeked: PlyrEvent;
+    ratechange: PlyrEvent;
+    ended: PlyrEvent;
+    enterfullscreen: PlyrEvent;
+    exitfullscreen: PlyrEvent;
+    captionsenabled: PlyrEvent;
+    captionsdisabled: PlyrEvent;
+    languagechange: PlyrEvent;
+    controlshidden: PlyrEvent;
+    controlsshown: PlyrEvent;
+    ready: PlyrEvent;
+  };
+  // For retrocompatibility, we keep StandadEvent
+  type StandadEvent = keyof Plyr.StandardEventMap;
+  type Html5EventMap = {
+    loadstart: PlyrEvent;
+    loadeddata: PlyrEvent;
+    loadedmetadata: PlyrEvent;
+    canplay: PlyrEvent;
+    canplaythrough: PlyrEvent;
+    stalled: PlyrEvent;
+    waiting: PlyrEvent;
+    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 {
    /**
@@ -357,7 +367,7 @@ declare namespace Plyr {
    /**
     * Specify a URL or path to a blank video file used to properly cancel network requests.
     */
-    blankUrl?: string;
+    blankVideo?: string;

    /**
     * Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers.
@@ -496,10 +506,17 @@ declare namespace Plyr {
     * Youtube Player Options.
     */
    youtube?: object;
+
+    /**
+     * Preview Thumbnails Options.
+     */
+    previewThumbnails?: PreviewThumbnailsOptions;
  }

  interface QualityOptions {
    default: number;
+    forced?: boolean;
+    onChange?: (quality: number) => void;
    options: number[];
  }

@@ -529,7 +546,7 @@ declare namespace Plyr {

  interface FullScreenOptions {
    enabled?: boolean;
-    fallback?: boolean;
+    fallback?: boolean | 'force';
    allowAudio?: boolean;
    iosNative?: boolean;
  }
@@ -545,6 +562,32 @@ declare namespace Plyr {
    key?: string;
  }

+  interface PreviewThumbnailsOptions {
+    enabled?: boolean;
+    src?: string | string[];
+  }
+
+  export interface Elements {
+    buttons: {
+      airplay?: HTMLButtonElement;
+      captions?: HTMLButtonElement;
+      download?: HTMLButtonElement;
+      fastForward?: HTMLButtonElement;
+      fullscreen?: HTMLButtonElement;
+      mute?: HTMLButtonElement;
+      pip?: HTMLButtonElement;
+      play?: HTMLButtonElement | HTMLButtonElement[];
+      restart?: HTMLButtonElement;
+      rewind?: HTMLButtonElement;
+      settings?: HTMLButtonElement;
+    };
+    captions: HTMLElement | null;
+    container: HTMLElement | null;
+    controls: HTMLElement | null;
+    fullscreen: HTMLElement | null;
+    wrapper: HTMLElement | null;
+  }
+
  interface SourceInfo {
    /**
     * Note: YouTube and Vimeo are currently not supported as audio sources.
@@ -613,6 +656,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;
@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.6.1
+// plyr.js v3.6.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -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';
@@ -205,7 +206,7 @@ class Plyr {
        }

        // Unsupported or missing provider
-        if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
+        if (is.empty(this.provider) || !Object.values(providers).includes(this.provider)) {
          this.debug.error('Setup failed: Invalid provider');
          return;
        }
@@ -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
@@ -354,7 +355,7 @@ class Plyr {
  /**
   * Play the media, or play the advertisement (if they are not blocked)
   */
-  play() {
+  play = () => {
    if (!is.function(this.media.play)) {
      return null;
    }
@@ -366,18 +367,18 @@ class Plyr {

    // Return the promise (for HTML5)
    return this.media.play();
-  }
+  };

  /**
   * Pause the media
   */
-  pause() {
+  pause = () => {
    if (!this.playing || !is.function(this.media.pause)) {
      return null;
    }

    return this.media.pause();
-  }
+  };

  /**
   * Get playing state
@@ -411,7 +412,7 @@ class Plyr {
   * Toggle playback based on current status
   * @param {Boolean} input
   */
-  togglePlay(input) {
+  togglePlay = (input) => {
    // Toggle based on current state if nothing passed
    const toggle = is.boolean(input) ? input : !this.playing;

@@ -420,42 +421,42 @@ class Plyr {
    }

    return this.pause();
-  }
+  };

  /**
   * Stop playback
   */
-  stop() {
+  stop = () => {
    if (this.isHTML5) {
      this.pause();
      this.restart();
    } else if (is.function(this.media.stop)) {
      this.media.stop();
    }
-  }
+  };

  /**
   * Restart playback
   */
-  restart() {
+  restart = () => {
    this.currentTime = 0;
-  }
+  };

  /**
   * Rewind
   * @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
   */
-  rewind(seekTime) {
+  rewind = (seekTime) => {
    this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;
-  }
+  };

  /**
   * Fast forward
   * @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
   */
-  forward(seekTime) {
+  forward = (seekTime) => {
    this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;
-  }
+  };

  /**
   * Seek to a time
@@ -581,18 +582,18 @@ class Plyr {
   * Increase volume
   * @param {Boolean} step - How much to decrease by (between 0 and 1)
   */
-  increaseVolume(step) {
+  increaseVolume = (step) => {
    const volume = this.media.muted ? 0 : this.volume;
    this.volume = volume + (is.number(step) ? step : 0);
-  }
+  };

  /**
   * Decrease volume
   * @param {Boolean} step - How much to decrease by (between 0 and 1)
   */
-  decreaseVolume(step) {
+  decreaseVolume = (step) => {
    this.increaseVolume(-step);
-  }
+  };

  /**
   * Set muted state
@@ -1032,18 +1033,18 @@ class Plyr {
   * Trigger the airplay dialog
   * TODO: update player with state, support, enabled
   */
-  airplay() {
+  airplay = () => {
    // Show dialog if supported
    if (support.airplay) {
      this.media.webkitShowPlaybackTargetPicker();
    }
-  }
+  };

  /**
   * Toggle the player controls
   * @param {Boolean} [toggle] - Whether to show the controls
   */
-  toggleControls(toggle) {
+  toggleControls = (toggle) => {
    // Don't toggle if missing UI support or if it's audio
    if (this.supported.ui && !this.isAudio) {
      // Get state before change
@@ -1054,7 +1055,12 @@ class Plyr {
      const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);

      // Close menu
-      if (hiding && 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);
      }

@@ -1068,34 +1074,34 @@ class Plyr {
    }

    return false;
-  }
+  };

  /**
   * Add event listeners
   * @param {String} event - Event type
   * @param {Function} callback - Callback for when event occurs
   */
-  on(event, callback) {
+  on = (event, callback) => {
    on.call(this, this.elements.container, event, callback);
-  }
+  };

  /**
   * Add event listeners once
   * @param {String} event - Event type
   * @param {Function} callback - Callback for when event occurs
   */
-  once(event, callback) {
+  once = (event, callback) => {
    once.call(this, this.elements.container, event, callback);
-  }
+  };

  /**
   * Remove event listeners
   * @param {String} event - Event type
   * @param {Function} callback - Callback for when event occurs
   */
-  off(event, callback) {
+  off = (event, callback) => {
    off(this.elements.container, event, callback);
-  }
+  };

  /**
   * Destroy an instance
@@ -1104,7 +1110,7 @@ class Plyr {
   * @param {Function} callback - Callback for when destroy is complete
   * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
   */
-  destroy(callback, soft = false) {
+  destroy = (callback, soft = false) => {
    if (!this.ready) {
      return;
    }
@@ -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);

@@ -1199,15 +1208,13 @@ class Plyr {
      // Vimeo does not always return
      setTimeout(done, 200);
    }
-  }
+  };

  /**
   * Check for support for a mime type (HTML5 only)
   * @param {String} type - Mime type
   */
-  supports(type) {
-    return support.mime.call(this, type);
-  }
+  supports = (type) => support.mime.call(this, type);

  /**
   * Check for support
@@ -1248,7 +1255,7 @@ class Plyr {
      return null;
    }

-    return targets.map(t => new Plyr(t, options));
+    return targets.map((t) => new Plyr(t, options));
  }
 }

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.6.1
+// plyr.js v3.6.4
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -20,7 +20,7 @@ const source = {
        src: attributes,
      });
    } else if (is.array(attributes)) {
-      attributes.forEach(attribute => {
+      attributes.forEach((attribute) => {
        insertElement(type, this.media, attribute);
      });
    }
@@ -31,7 +31,7 @@ class Storage {
    }
  }

-  get(key) {
+  get = (key) => {
    if (!Storage.supported || !this.enabled) {
      return null;
    }
@@ -45,9 +45,9 @@ class Storage {
    const json = JSON.parse(store);

    return is.string(key) && key.length ? json[key] : json;
-  }
+  };

-  set(object) {
+  set = (object) => {
    // Bail if we don't have localStorage support or it's disabled
    if (!Storage.supported || !this.enabled) {
      return;
@@ -71,7 +71,7 @@ class Storage {

    // Update storage
    window.localStorage.setItem(this.key, JSON.stringify(storage));
-  }
+  };
 }

 export default Storage;
@@ -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'))
-      .forEach(key => {
+      .filter((key) => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
+      .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,37 @@
 // 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 isObject = input => getConstructor(input) === Object;
-const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
-const isString = input => getConstructor(input) === String;
-const isBoolean = input => getConstructor(input) === Boolean;
-const isFunction = input => getConstructor(input) === Function;
-const isArray = input => Array.isArray(input);
-const isWeakMap = input => instanceOf(input, WeakMap);
-const isNodeList = input => instanceOf(input, NodeList);
-const isElement = input => instanceOf(input, Element);
-const isTextNode = input => getConstructor(input) === Text;
-const isEvent = input => instanceOf(input, Event);
-const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
-const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
-const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
+const isNullOrUndefined = (input) => input === null || typeof input === 'undefined';
+const isObject = (input) => getConstructor(input) === Object;
+const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
+const isString = (input) => getConstructor(input) === String;
+const isBoolean = (input) => getConstructor(input) === Boolean;
+const isFunction = (input) => getConstructor(input) === Function;
+const isArray = (input) => Array.isArray(input);
+const isWeakMap = (input) => instanceOf(input, WeakMap);
+const isNodeList = (input) => instanceOf(input, NodeList);
+const isTextNode = (input) => getConstructor(input) === Text;
+const isEvent = (input) => instanceOf(input, Event);
+const isKeyboardEvent = (input) => instanceOf(input, KeyboardEvent);
+const isCue = (input) => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isTrack = (input) => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isPromise = (input) => instanceOf(input, Promise) && isFunction(input.then);

-const isEmpty = input =>
+const isElement = (input) =>
+  input !== null &&
+  typeof input === 'object' &&
+  input.nodeType === 1 &&
+  typeof input.style === 'object' &&
+  typeof input.ownerDocument === 'object';
+
+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 getMinutes = value => Math.trunc((value / 60) % 60, 10);
-export const getSeconds = value => Math.trunc(value % 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 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,7 @@
 // --------------------------------------------------------------

 .plyr__poster {
-  background-color: #000;
+  background-color: var(--plyr-video-background, $plyr-video-background);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
@@ -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: ($plyr-bp-md - 1px)) {
    display: none;
  }
 }
@@ -3,6 +3,7 @@
 // ==========================================================================

 $plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
+$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default;

 // Grayscale
 $plyr-color-gray-900: hsl(216, 15%, 16%) !default;
@@ -4,7 +4,8 @@

 $plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
 $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
-$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
+$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
+$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
 $plyr-control-radius: var(--plyr-control-radius, 3px) !default;

 $plyr-control-toggle-checked-background: var(
@@ -4,7 +4,8 @@

 $plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
 $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
-$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
+$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
 $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
 $plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
 $plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
@@ -4,7 +4,7 @@

 // Container
 .plyr--video {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
  overflow: hidden;

  &.plyr--menu-open {
@@ -13,7 +13,7 @@
 }

 .plyr__video-wrapper {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
  height: 100%;
  margin: auto;
  overflow: hidden;
@@ -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 => {
-  const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
+gulp.task('clean', (done) => {
+  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);
@@ -117,6 +118,7 @@ Object.entries(build.js).forEach(([filename, entry]) => {
                      },
                    ],
                  ],
+                  plugins: ['@babel/plugin-proposal-class-properties'],
                  babelrc: false,
                  exclude: [/\/core-js\//],
                }),
@@ -128,7 +130,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;