v3.6.8

- Fix: remove regression caused by optional chaining and nullish coalescing in check for `window.CSS` check for aspect-ratio (fixes #2174)

.eslintrc

@@ -1,30 +1,18 @@
 {
-    "parser": "babel-eslint",
+  "parser": "babel-eslint",
-    "extends": ["airbnb-base", "prettier"],
+  "extends": ["@sampotts/eslint-config/es6"],
-    "plugins": ["simple-import-sort", "import"],
+  "env": {
-    "env": {
+    "browser": true,
-        "browser": true,
+    "es6": true
-        "es6": true
+  },
-    },
+  "globals": {
-    "globals": {
+    "Plyr": false,
-        "Plyr": false,
+    "jQuery": false
-        "jQuery": false
+  },
-    },
+  "rules": {
-    "rules": {
+    "import/no-cycle": "warn"
-        "import/no-cycle": "warn",
+  },
-        "padding-line-between-statements": [
+  "parserOptions": {
-            "error",
+    "sourceType": "module"
-            {
+  }
-                "blankLine": "never",
-                "prev": ["singleline-const", "singleline-let", "singleline-var"],
-                "next": ["singleline-const", "singleline-let", "singleline-var"]
-            }
-        ],
-        "sort-imports": "off",
-        "import/order": "off",
-        "simple-import-sort/sort": "error"
-    },
-    "parserOptions": {
-        "sourceType": "module"
-    }
 }

.github/pull_request_template.md

@@ -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)

.gitignore

@@ -2,8 +2,8 @@ node_modules
 .DS_Store
 credentials.json
 *.mp4
-!dist/blank.mp4
 npm-debug.log
 yarn-error.log
 *.webm
 .idea/
+dist/

.npmignore

@@ -7,6 +7,6 @@ credentials.json
 deploy.json
 yarn.lock
 package-lock.json
-*.mp4
 *.webm
+*.mp4
 !dist/blank.mp4

.nvmrc

@@ -1 +1 @@
-v13.8.0
+14

.travis.yml

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

.travis/omit-dist.sh

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

.travis/prevent-base-master.sh

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

CHANGELOG.md

@@ -1,3 +1,54 @@
+### v3.6.8
+
+- Typings: add FullscreenOptions.container to typing files (thanks @MeguminSama!)
+- Fix: added iPadOS detection to isIos util (thanks @Benny739!)
+- Fix: issues with Vimeo fullscreen
+
+### v3.6.7
+
+- Fix: remove regression caused by optional chaining and nullish coalescing in check for `window.CSS` check for aspect-ratio (fixes #2174)
+
+### v3.6.6
+
+- Improvements to how aspect ratio is handled. Use `aspect-ratio` CSS property instead of the legacy method (still used as fallback). Also automatically determined aspect ratios are rounded to the nearast standard ratio. This fixes issues with the YouTube embeds showing a 1-2px black bar.
+- Hide the YouTube poster image container when paused so that the controls underneath can be used.
+
+### v3.6.5
+
+- Migrate color formatting to colorette (thanks @jorgebucaran)
+- Fix: issue with IE detection
+- Fix: missing styles for embeds
+- Fix: regression regarding poster image
+- Add all required props to vimeo iframe allow attribute - fixes #2151 (thanks @didrip)
+
+### 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)

CONTRIBUTING.md

@@ -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.
+- install the dependencies with `yarn install` in root directory and "demo" directory.
-- run `gulp` to the start the server.
+- 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.

README.md

@@ -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.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.6.8/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.2/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/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.2/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.6.8/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,11 @@ 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)
+- [CFDA Runway360](https://runway360.cfda.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 😎
 

demo/package.json

@@ -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"
   }
 }

demo/src/js/demo.js

@@ -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);
       }

demo/src/js/tab-focus.js

@@ -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;
   }

demo/src/sass/components/players.scss

@@ -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;
 

demo/src/sass/settings/cosmetic.scss

@@ -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);

demo/src/sass/settings/layout.scss

@@ -2,4 +2,4 @@
 // Layout
 // ==========================================================================
 
-$container-max-width: 1260px;
+$container-max-width: 1240px;

demo/yarn.lock

@@ -2,56 +2,56 @@
 # yarn lockfile v1
 
 
-"@sentry/browser@^5.15.5":
+"@sentry/browser@^5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.15.5.tgz#d9a51f1388581067b50d30ed9b1aed2cbb333a36"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.22.3.tgz#7a64bd1cf01bf393741a3e4bf35f82aa927f5b4e"
-  integrity sha512-rqDvjk/EvogfdbZ4TiEpxM/lwpPKmq23z9YKEO4q81+1SwJNua53H60dOk9HpRU8nOJ1g84TMKT2Ov8H7sqDWA==
+  integrity sha512-2TzE/CoBa5ZkvxJizDdi1Iz1ldmXSJpFQ1mL07PIXBjCt0Wxf+WOuFSj5IP4L40XHfJE5gU8wEvSH0VDR8nXtA==
   dependencies:
-    "@sentry/core" "5.15.5"
+    "@sentry/core" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
     tslib "^1.9.3"
 
-"@sentry/core@5.15.5":
+"@sentry/core@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.15.5.tgz#40ea79bff5272d3fbbeeb4a98cdc59e1adbd2c92"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.22.3.tgz#030f435f2b518f282ba8bd954dac90cd70888bd7"
-  integrity sha512-enxBLv5eibBMqcWyr+vApqeix8uqkfn0iGsD3piKvoMXCgKsrfMwlb/qo9Ox0lKr71qIlZVt+9/A2vZohdgnlg==
+  integrity sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==
   dependencies:
-    "@sentry/hub" "5.15.5"
+    "@sentry/hub" "5.22.3"
-    "@sentry/minimal" "5.15.5"
+    "@sentry/minimal" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
     tslib "^1.9.3"
 
-"@sentry/hub@5.15.5":
+"@sentry/hub@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.15.5.tgz#f5abbcdbe656a70e2ff02c02a5a4cffa0f125935"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.22.3.tgz#08309a70d2ea8d5e313d05840c1711f34f2fffe5"
-  integrity sha512-zX9o49PcNIVMA4BZHe//GkbQ4Jx+nVofqU/Il32/IbwKhcpPlhGX3c1sOVQo4uag3cqd/JuQsk+DML9TKkN0Lw==
+  integrity sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==
   dependencies:
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
-    "@sentry/utils" "5.15.5"
+    "@sentry/utils" "5.22.3"
     tslib "^1.9.3"
 
-"@sentry/minimal@5.15.5":
+"@sentry/minimal@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.15.5.tgz#a0e4e071f01d9c4d808094ae7203f6c4cca9348a"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.22.3.tgz#706e4029ae5494123d3875c658ba8911aa5cc440"
-  integrity sha512-zQkkJ1l9AjmU/Us5IrOTzu7bic4sTPKCatptXvLSTfyKW7N6K9MPIIFeSpZf9o1yM2sRYdK7GV08wS2eCT3JYw==
+  integrity sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==
   dependencies:
-    "@sentry/hub" "5.15.5"
+    "@sentry/hub" "5.22.3"
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
     tslib "^1.9.3"
 
-"@sentry/types@5.15.5":
+"@sentry/types@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.15.5.tgz#16c97e464cf09bbd1d2e8ce90d130e781709076e"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.22.3.tgz#d1d547b30ee8bd7771fa893af74c4f3d71f0fd18"
-  integrity sha512-F9A5W7ucgQLJUG4LXw1ZIy4iLevrYZzbeZ7GJ09aMlmXH9PqGThm1t5LSZlVpZvUfQ2rYA8NU6BdKJSt7B5LPw==
+  integrity sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==
 
-"@sentry/utils@5.15.5":
+"@sentry/utils@5.22.3":
-  version "5.15.5"
+  version "5.22.3"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.15.5.tgz#dec1d4c79037c4da08b386f5d34409234dcbfb15"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.22.3.tgz#e3bda3e789239eb16d436f768daa12829f33d18f"
-  integrity sha512-Nl9gl/MGnzSkuKeo3QaefoD/OJrFLB8HmwQ7HUbTXb6E7yyEzNKAQMHXGkwNAjbdYyYbd42iABP6Y5F/h39NtA==
+  integrity sha512-AHNryXMBvIkIE+GQxTlmhBXD0Ksh+5w1SwM5qi6AttH+1qjWLvV6WB4+4pvVvEoS8t5F+WaVUZPQLmCCWp6zKw==
   dependencies:
-    "@sentry/types" "5.15.5"
+    "@sentry/types" "5.22.3"
     tslib "^1.9.3"
 
 core-js@^3.6.5:
@@ -74,7 +74,7 @@ tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
-url-polyfill@^1.1.8:
+url-polyfill@^1.1.10:
-  version "1.1.8"
+  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.8.tgz#21eb58ad61192f52b77dcac8ab5293ae7bc67060"
+  resolved "https://registry.yarnpkg.com/url-polyfill/-/url-polyfill-1.1.10.tgz#fd5bbcf66c9491fa682b0cb6d6a855e1643a9281"
-  integrity sha512-Ey61F4FEqhcu1vHSOMmjl0Vd/RPRLEjMj402qszD/dhMBrVfoUsnIj8KSZo2yj+eIlxJGKFdnm6ES+7UzMgZ3Q==
+  integrity sha512-vSaPpaRgBrf41+Uky1myiSh6gpcbw8FpwHYnEy0abxndojOBnIs+yh/49gKYFLtUMP9qoNWjn6j9aUVy23Ie2A==

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "3.6.2",
+  "version": "3.6.8",
   "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,65 @@
     "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": {
-    "ansi-colors": "^4.1.1",
+    "@sampotts/eslint-config": "1.1.7",
-    "autoprefixer": "^9.7.6",
+    "autoprefixer": "^10.2.5",
-    "aws-sdk": "^2.668.0",
+    "aws-sdk": "^2.888.0",
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
+    "browser-sync": "^2.26.14",
-    "del": "^5.1.0",
+    "colorette": "1.2.2",
-    "eslint": "^6.8.0",
+    "cssnano": "^5.0.1",
-    "eslint-config-airbnb-base": "^14.1.0",
+    "del": "^6.0.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^7.23.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
     "fancy-log": "^1.3.3",
-    "fastly-purge": "^1.0.1",
     "git-branch": "^2.0.1",
     "gulp": "^4.0.2",
-    "gulp-awspublish": "^4.1.1",
+    "gulp-awspublish": "^4.1.2",
     "gulp-better-rollup": "^4.0.1",
     "gulp-filter": "^6.0.0",
     "gulp-header": "^2.0.9",
     "gulp-hub": "^4.2.0",
+    "gulp-if": "^3.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-open": "^3.0.1",
     "gulp-plumber": "^1.2.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
     "gulp-sass": "^4.1.0",
     "gulp-size": "^3.0.0",
-    "gulp-sourcemaps": "^2.6.5",
+    "gulp-sourcemaps": "^3.0.0",
     "gulp-svgstore": "^7.0.1",
-    "gulp-terser": "^1.2.0",
+    "gulp-terser": "^2.0.1",
-    "postcss-clean": "^1.1.0",
+    "postcss": "^8.2.10",
-    "postcss-custom-properties": "^9.1.1",
+    "postcss-custom-properties": "^11.0.0",
-    "prettier-eslint": "^9.0.1",
+    "prettier-eslint": "^12.0.0",
     "prettier-stylelint": "^0.4.2",
-    "remark-cli": "^8.0.0",
+    "remark-cli": "^9.0.0",
-    "remark-validate-links": "^10.0.0",
+    "remark-validate-links": "^10.0.4",
-    "rollup": "^2.7.6",
+    "rollup": "^2.45.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.12.0",
-    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-recommended": "^4.0.0",
-    "stylelint-config-sass-guidelines": "^7.0.0",
+    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-order": "^4.0.0",
+    "stylelint-order": "^4.1.0",
-    "stylelint-scss": "^3.17.1",
+    "stylelint-scss": "^3.19.0",
-    "stylelint-selector-bem-pattern": "^2.1.0",
+    "stylelint-selector-bem-pattern": "^2.1.0"
-    "through2": "^3.0.1"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
+    "core-js": "^3.10.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"
   }
 }

src/js/captions.js

@@ -56,7 +56,7 @@ const captions = {
     if (browser.isIE && window.URL) {
       const elements = this.media.querySelectorAll('track');
 
-      Array.from(elements).forEach(track => {
+      Array.from(elements).forEach((track) => {
         const src = track.getAttribute('src');
         const url = parseUrl(src);
 
@@ -66,7 +66,7 @@ const captions = {
           ['http:', 'https:'].includes(url.protocol)
         ) {
           fetch(src, 'blob')
-            .then(blob => {
+            .then((blob) => {
               track.setAttribute('src', window.URL.createObjectURL(blob));
             })
             .catch(() => {
@@ -84,7 +84,7 @@ const captions = {
     // * toggled:   The real captions state
 
     const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
-    const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
+    const languages = dedupe(browserLanguages.map((language) => language.split('-')[0]));
     let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
 
     // Use first browser language when language is 'auto'
@@ -119,13 +119,13 @@ const captions = {
     const tracks = captions.getTracks.call(this, true);
     // Get the wanted language
     const { active, language, meta, currentTrackNode } = this.captions;
-    const languageExists = Boolean(tracks.find(track => track.language === language));
+    const languageExists = Boolean(tracks.find((track) => track.language === language));
 
     // Handle tracks (add event listener and "pseudo"-default)
     if (this.isHTML5 && this.isVideo) {
       tracks
-        .filter(track => !meta.get(track))
+        .filter((track) => !meta.get(track))
-        .forEach(track => {
+        .forEach((track) => {
           this.debug.log('Track added', track);
 
           // Attempt to store if the original dom element was "default"
@@ -309,19 +309,19 @@ const captions = {
     // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
     // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
     return tracks
-      .filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
+      .filter((track) => !this.isHTML5 || update || this.captions.meta.has(track))
-      .filter(track => ['captions', 'subtitles'].includes(track.kind));
+      .filter((track) => ['captions', 'subtitles'].includes(track.kind));
   },
 
   // Match tracks based on languages and get the first
   findTrack(languages, force = false) {
     const tracks = captions.getTracks.call(this);
-    const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
+    const sortIsDefault = (track) => Number((this.captions.meta.get(track) || {}).default);
     const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
     let track;
 
-    languages.every(language => {
+    languages.every((language) => {
-      track = sorted.find(t => t.language === language);
+      track = sorted.find((t) => t.language === language);
       return !track; // Break iteration if there is a match
     });
 
@@ -383,12 +383,12 @@ const captions = {
       const track = captions.getCurrentTrack.call(this);
 
       cues = Array.from((track || {}).activeCues || [])
-        .map(cue => cue.getCueAsHTML())
+        .map((cue) => cue.getCueAsHTML())
         .map(getHTML);
     }
 
     // Set new caption text
-    const content = cues.map(cueText => cueText.trim()).join('\n');
+    const content = cues.map((cueText) => cueText.trim()).join('\n');
     const changed = content !== this.elements.captions.innerHTML;
 
     if (changed) {

src/js/config/defaults.js

@@ -61,7 +61,7 @@ const defaults = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.6.2/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.6.8/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
   },
 };
 

src/js/controls.js

@@ -179,7 +179,7 @@ const controls = {
       iconPressed: null,
     };
 
-    ['element', 'icon', 'label'].forEach(key => {
+    ['element', 'icon', 'label'].forEach((key) => {
       if (Object.keys(attributes).includes(key)) {
         props[key] = attributes[key];
         delete attributes[key];
@@ -193,7 +193,7 @@ const controls = {
 
     // Set class name
     if (Object.keys(attributes).includes('class')) {
-      if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
+      if (!attributes.class.split(' ').some((c) => c === this.config.classNames.control)) {
         extend(attributes, {
           class: `${attributes.class} ${this.config.classNames.control}`,
         });
@@ -401,7 +401,7 @@ const controls = {
       this,
       menuItem,
       'keydown keyup',
-      event => {
+      (event) => {
         // We only care about space and ⬆️ ⬇️️ ➡️
         if (![32, 38, 39, 40].includes(event.which)) {
           return;
@@ -448,7 +448,7 @@ const controls = {
 
     // Enter will fire a `click` event but we still need to manage focus
     // So we bind to keyup which fires after and set focus here
-    on.call(this, menuItem, 'keyup', event => {
+    on.call(this, menuItem, 'keyup', (event) => {
       if (event.which !== 13) {
         return;
       }
@@ -493,8 +493,8 @@ const controls = {
         // Ensure exclusivity
         if (check) {
           Array.from(menuItem.parentNode.children)
-            .filter(node => matches(node, '[role="menuitemradio"]'))
+            .filter((node) => matches(node, '[role="menuitemradio"]'))
-            .forEach(node => node.setAttribute('aria-checked', 'false'));
+            .forEach((node) => node.setAttribute('aria-checked', 'false'));
         }
 
         menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
@@ -504,7 +504,7 @@ const controls = {
     this.listeners.bind(
       menuItem,
       'click keyup',
-      event => {
+      (event) => {
         if (is.keyboardEvent(event) && event.which !== 32) {
           return;
         }
@@ -698,7 +698,7 @@ const controls = {
     }
 
     const visible = `${this.config.classNames.tooltip}--visible`;
-    const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
+    const toggle = (show) => toggleClass(this.elements.display.seekTooltip, visible, show);
 
     // Hide on touch
     if (this.touch) {
@@ -894,7 +894,7 @@ const controls = {
 
     // Set options if passed and filter based on uniqueness and config
     if (is.array(options)) {
-      this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));
+      this.options.quality = dedupe(options).filter((quality) => this.config.quality.options.includes(quality));
     }
 
     // Toggle the pane and tab
@@ -913,7 +913,7 @@ const controls = {
     }
 
     // Get the badge HTML for HD, 4K etc
-    const getBadge = quality => {
+    const getBadge = (quality) => {
       const label = i18n.get(`qualityBadge.${quality}`, this.config);
 
       if (!label.length) {
@@ -929,7 +929,7 @@ const controls = {
         const sorting = this.config.quality.options;
         return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
       })
-      .forEach(quality => {
+      .forEach((quality) => {
         controls.createMenuItem.call(this, {
           value: quality,
           list,
@@ -1052,7 +1052,7 @@ const controls = {
     const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
 
     // Filter out invalid speeds
-    this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
+    this.options.speed = this.options.speed.filter((o) => o >= this.minimumSpeed && o <= this.maximumSpeed);
 
     // Toggle the pane and tab
     const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
@@ -1070,7 +1070,7 @@ const controls = {
     }
 
     // Create items
-    this.options.speed.forEach(speed => {
+    this.options.speed.forEach((speed) => {
       controls.createMenuItem.call(this, {
         value: speed,
         list,
@@ -1085,7 +1085,7 @@ const controls = {
   // Check if we need to hide/show the settings menu
   checkMenu() {
     const { buttons } = this.elements.settings;
-    const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);
+    const visible = !is.empty(buttons) && Object.values(buttons).some((button) => !button.hidden);
 
     toggleHidden(this.elements.settings.menu, !visible);
   },
@@ -1099,7 +1099,7 @@ const controls = {
     let target = pane;
 
     if (!is.element(target)) {
-      target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
+      target = Object.values(this.elements.settings.panels).find((p) => !p.hidden);
     }
 
     const firstItem = target.querySelector('[role^="menuitem"]');
@@ -1191,7 +1191,7 @@ const controls = {
 
     // Hide all other panels
     const container = target.parentNode;
-    const current = Array.from(container.children).find(node => !node.hidden);
+    const current = Array.from(container.children).find((node) => !node.hidden);
 
     // If we can do fancy animations, we'll animate the height/width
     if (support.transitions && !support.reducedMotion) {
@@ -1203,7 +1203,7 @@ const controls = {
       const size = controls.getMenuSize.call(this, target);
 
       // Restore auto height/width
-      const restore = event => {
+      const restore = (event) => {
         // We're only bothered about height and width on the container
         if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
           return;
@@ -1275,7 +1275,7 @@ const controls = {
     const defaultAttributes = { class: 'plyr__controls__item' };
 
     // Loop through controls in order
-    dedupe(is.array(this.config.controls) ? this.config.controls: []).forEach(control => {
+    dedupe(is.array(this.config.controls) ? this.config.controls : []).forEach((control) => {
       // Restart button
       if (control === 'restart') {
         container.appendChild(createButton.call(this, 'restart', defaultAttributes));
@@ -1437,7 +1437,7 @@ const controls = {
         this.elements.settings.panels.home = home;
 
         // Build the menu items
-        this.config.settings.forEach(type => {
+        this.config.settings.forEach((type) => {
           // TODO: bundle this with the createMenuItem helper and bindings
           const menuItem = createElement(
             'button',
@@ -1510,7 +1510,7 @@ const controls = {
             this,
             pane,
             'keydown',
-            event => {
+            (event) => {
               // We only care about <-
               if (event.which !== 37) {
                 return;
@@ -1661,7 +1661,7 @@ const controls = {
     }
 
     // Replace props with their value
-    const replace = input => {
+    const replace = (input) => {
       let result = input;
 
       Object.entries(props).forEach(([key, value]) => {
@@ -1702,7 +1702,7 @@ const controls = {
 
     // Add pressed property to buttons
     if (!is.empty(this.elements.buttons)) {
-      const addProperty = button => {
+      const addProperty = (button) => {
         const className = this.config.classNames.controlPressed;
         Object.defineProperty(button, 'pressed', {
           enumerable: true,
@@ -1718,11 +1718,9 @@ const controls = {
       // Toggle classname when pressed property is set
       Object.values(this.elements.buttons)
         .filter(Boolean)
-        .forEach(button => {
+        .forEach((button) => {
           if (is.array(button) || is.nodeList(button)) {
-            Array.from(button)
+            Array.from(button).filter(Boolean).forEach(addProperty);
-              .filter(Boolean)
-              .forEach(addProperty);
           } else {
             addProperty(button);
           }
@@ -1740,7 +1738,7 @@ const controls = {
       const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;
       const labels = getElements.call(this, selector);
 
-      Array.from(labels).forEach(label => {
+      Array.from(labels).forEach((label) => {
         toggleClass(label, this.config.classNames.hidden, false);
         toggleClass(label, this.config.classNames.tooltip, true);
       });

src/js/fullscreen.js

@@ -5,7 +5,7 @@
 // ==========================================================================
 
 import browser from './utils/browser';
-import { closest,getElements, hasClass, toggleClass } from './utils/elements';
+import { closest, getElements, hasClass, toggleClass } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import is from './utils/is';
 import { silencePromise } from './utils/promise';
@@ -43,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;

src/js/html5.js

@@ -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) {

src/js/listeners.js

@@ -10,7 +10,7 @@ import { getElement, getElements, matches, toggleClass } from './utils/elements'
 import { off, on, once, toggleListener, triggerEvent } from './utils/events';
 import is from './utils/is';
 import { silencePromise } from './utils/promise';
-import { getAspectRatio, setAspectRatio } from './utils/style';
+import { getAspectRatio, getViewportSize, supportsCSS } from './utils/style';
 
 class Listeners {
   constructor(player) {
@@ -149,16 +149,16 @@ class Listeners {
           break;
 
         /* case 73:
-                    this.setLoop('start');
+          this.setLoop('start');
-                    break;
+          break;
 
-                case 76:
+        case 76:
-                    this.setLoop();
+          this.setLoop();
-                    break;
+          break;
 
-                case 79:
+        case 79:
-                    this.setLoop('end');
+          this.setLoop('end');
-                    break; */
+          break; */
 
         default:
           break;
@@ -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
@@ -305,39 +305,49 @@ class Listeners {
     );
 
     // Set a gutter for Vimeo
-    const setGutter = (ratio, padding, toggle) => {
+    const setGutter = () => {
       if (!player.isVimeo || player.config.vimeo.premium) {
         return;
       }
 
-      const target = player.elements.wrapper.firstChild;
+      const target = elements.wrapper;
-      const [, y] = ratio;
+      const { active } = player.fullscreen;
-      const [videoX, videoY] = getAspectRatio.call(player);
+      const [videoWidth, videoHeight] = getAspectRatio.call(player);
+      const useNativeAspectRatio = supportsCSS(`aspect-ratio: ${videoWidth} / ${videoHeight}`);
 
-      target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
+      // If not active, remove styles
-      target.style.margin = toggle ? '0 auto' : null;
+      if (!active) {
-    };
+        if (useNativeAspectRatio) {
-
+          target.style.width = null;
-    // Resize on fullscreen change
+          target.style.height = null;
-    const setPlayerSize = measure => {
+        } else {
-      // If we don't need to measure the viewport
+          target.style.maxWidth = null;
-      if (!measure) {
+          target.style.margin = null;
-        return setAspectRatio.call(player);
+        }
+        return;
       }
 
-      const rect = elements.container.getBoundingClientRect();
+      // Determine which dimension will overflow and constrain view
-      const { width, height } = rect;
+      const [viewportWidth, viewportHeight] = getViewportSize();
+      const overflow = viewportWidth / viewportHeight > videoWidth / videoHeight;
 
-      return setAspectRatio.call(player, `${width}:${height}`);
+      if (useNativeAspectRatio) {
+        target.style.width = overflow ? 'auto' : '100%';
+        target.style.height = overflow ? '100%' : 'auto';
+      } else {
+        target.style.maxWidth = overflow ? `${(viewportHeight / videoHeight) * videoWidth}px` : null;
+        target.style.margin = overflow ? '0 auto' : null;
+      }
     };
 
+    // Handle resizing
     const resized = () => {
       clearTimeout(timers.resized);
-      timers.resized = setTimeout(setPlayerSize, 50);
+      timers.resized = setTimeout(setGutter, 50);
     };
 
-    on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
+    on.call(player, elements.container, 'enterfullscreen exitfullscreen', (event) => {
-      const { target, usingNative } = player.fullscreen;
+      const { target } = player.fullscreen;
 
       // Ignore events not from target
       if (target !== elements.container) {
@@ -349,34 +359,25 @@ class Listeners {
         return;
       }
 
-      const isEnter = event.type === 'enterfullscreen';
-      // Set the player size when entering fullscreen to viewport size
-      const { padding, ratio } = setPlayerSize(isEnter);
-
       // Set Vimeo gutter
-      setGutter(ratio, padding, isEnter);
+      setGutter();
 
-      // If not using native browser fullscreen API, we need to check for resizes of viewport
+      // Watch for resizes
-      if (!usingNative) {
+      const method = event.type === 'enterfullscreen' ? on : off;
-        if (isEnter) {
+      method.call(player, window, 'resize', resized);
-          on.call(player, window, 'resize', resized);
-        } else {
-          off.call(player, window, 'resize', resized);
-        }
-      }
     });
-  }
+  };
 
   // 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 +394,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 +420,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 +460,7 @@ class Listeners {
         player,
         elements.wrapper,
         'contextmenu',
-        event => {
+        (event) => {
           event.preventDefault();
         },
         false,
@@ -485,7 +486,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 +500,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 +510,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 +528,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 +540,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 +554,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 +570,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 +643,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 +660,7 @@ class Listeners {
     this.bind(
       elements.buttons.settings,
       'keyup',
-      event => {
+      (event) => {
         const code = event.which;
 
         // We only care about space and return
@@ -669,21 +688,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 +734,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 +758,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 +782,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 +790,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 +800,8 @@ class Listeners {
 
     // Polyfill for lower fill in <input type="range"> for webkit
     if (browser.isWebkit) {
-      Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {
-        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+        this.bind(element, 'input', (event) => controls.updateRangeFill.call(player, event.target));
       });
     }
 
@@ -805,30 +824,30 @@ class Listeners {
     this.bind(
       elements.inputs.volume,
       inputEvent,
-      event => {
+      (event) => {
         player.volume = event.target.value;
       },
       'volume',
     );
 
     // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mouseenter mouseleave', event => {
+    this.bind(elements.controls, 'mouseenter mouseleave', (event) => {
       elements.controls.hover = !player.touch && event.type === 'mouseenter';
     });
 
     // Also update controls.hover state for any non-player children of fullscreen element (as above)
     if (elements.fullscreen) {
       Array.from(elements.fullscreen.children)
-        .filter(c => !c.contains(elements.container))
+        .filter((c) => !c.contains(elements.container))
-        .forEach(child => {
+        .forEach((child) => {
-          this.bind(child, 'mouseenter mouseleave', event => {
+          this.bind(child, 'mouseenter mouseleave', (event) => {
             elements.controls.hover = !player.touch && event.type === 'mouseenter';
           });
         });
     }
 
     // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', (event) => {
       elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
     });
 
@@ -861,12 +880,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 +901,7 @@ class Listeners {
       'volume',
       false,
     );
-  }
+  };
 }
 
 export default Listeners;

src/js/plugins/ads.js

@@ -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 => {
+    Object.keys(google.ima.AdEvent.Type).forEach((type) => {
-      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], (e) => this.onAdEvent(e));
     });
 
     // Resolve our adsManager
     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;

src/js/plugins/preview-thumbnails.js

@@ -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() {
+  getThumbnails = () => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       const { src } = this.player.config.previewThumbnails;
 
       if (is.empty(src)) {
@@ -149,7 +149,7 @@ class PreviewThumbnails {
 
       // Via callback()
       if (is.function(src)) {
-        src(thumbnails => {
+        src((thumbnails) => {
           this.thumbnails = thumbnails;
           sortAndResolve();
         });
@@ -159,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) {
+  getThumbnail = (url) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
-      fetch(url).then(response => {
+      fetch(url).then((response) => {
         const thumbnail = {
           frames: parseVtt(response),
           height: null,
@@ -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) {
+  preloadNearby = (thumbNum, forward = true) => {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       setTimeout(() => {
         const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;
 
@@ -496,7 +496,7 @@ class PreviewThumbnails {
 
           let foundOne = false;
 
-          thumbnailsClone.forEach(frame => {
+          thumbnailsClone.forEach((frame) => {
             const newThumbFilename = frame.text;
 
             if (newThumbFilename !== oldThumbFilename) {
@@ -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;

src/js/plugins/vimeo.js

@@ -11,7 +11,7 @@ import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
 import { format, stripHTML } from '../utils/strings';
-import { setAspectRatio } from '../utils/style';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
@@ -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,10 @@ 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', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '),
+    );
 
     // Set the referrer policy if required
     if (!is.empty(referrerPolicy)) {
@@ -112,31 +115,29 @@ const vimeo = {
     }
 
     // Inject the package
-    const { poster } = player;
+    if (premium || !config.customControls) {
-    if (premium) {
+      iframe.setAttribute('data-poster', player.poster);
-      iframe.setAttribute('data-poster', poster);
       player.media = replaceElement(iframe, player.media);
     } else {
-      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
+      const wrapper = createElement('div', {
+        class: player.config.classNames.embedContainer,
+        'data-poster': player.poster,
+      });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
     }
 
     // Get poster image
-    fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
+    if (!config.customControls) {
-      if (is.empty(response)) {
+      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
-        return;
+        if (is.empty(response) || !response.thumbnail_url) {
-      }
+          return;
+        }
 
-      // Get the URL for thumbnail
+        // Set and show poster
-      const url = new URL(response[0].thumbnail_large);
+        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
-
+      });
-      // Get original image
+    }
-      url.pathname = `${url.pathname.split('_')[0]}.jpg`;
-
-      // Set and show poster
-      ui.setPoster.call(player, url.href).catch(() => {});
-    });
 
     // Setup instance
     // https://github.com/vimeo/player.js
@@ -269,11 +270,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 +292,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];
+      player.embed.ratio = roundAspectRatio(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 +367,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 +384,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 +402,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);
+    }
   },
 };
 

src/js/plugins/youtube.js

@@ -11,7 +11,7 @@ import loadImage from '../utils/load-image';
 import loadScript from '../utils/load-script';
 import { extend } from '../utils/objects';
 import { format, generateId } from '../utils/strings';
-import { setAspectRatio } from '../utils/style';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
 
 // Parse YouTube ID from URL
 function parseId(url) {
@@ -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;
 
@@ -90,7 +90,7 @@ const youtube = {
           ui.setTitle.call(this);
 
           // Set aspect ratio
-          this.embed.ratio = [width, height];
+          this.embed.ratio = roundAspectRatio(width, height);
         }
 
         setAspectRatio.call(this);
@@ -104,6 +104,7 @@ const youtube = {
   // API ready
   ready() {
     const player = this;
+    const config = player.config.youtube;
     // Ignore already setup (race condition)
     const currentId = player.media && player.media.getAttribute('id');
     if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
@@ -121,43 +122,46 @@ const youtube = {
     // Replace the <iframe> with a <div> due to YouTube API issues
     const videoId = parseId(source);
     const id = generateId(player.provider);
-    // Get poster, if already set
-    const { poster } = player;
     // Replace media element
-    const container = createElement('div', { id, 'data-poster': poster });
+    const container = createElement('div', { id, 'data-poster': config.customControls ? player.poster : undefined });
     player.media = replaceElement(container, player.media);
 
-    // Id to poster wrapper
+    // Only load the poster when using custom controls
-    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+    if (config.customControls) {
+      const posterSrc = (s) => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
 
-    // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
-    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
+      loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-      .then(image => ui.setPoster.call(player, image.src))
+        .then((image) => ui.setPoster.call(player, image.src))
-      .then(src => {
+        .then((src) => {
-        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+          // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-        if (!src.includes('maxres')) {
+          if (!src.includes('maxres')) {
-          player.elements.poster.style.backgroundSize = 'cover';
+            player.elements.poster.style.backgroundSize = 'cover';
-        }
+          }
-      })
+        })
-      .catch(() => {});
+        .catch(() => {});
-
+    }
-    const config = player.config.youtube;
 
     // Setup instance
     // https://developers.google.com/youtube/iframe_api_reference
-    player.embed = new window.YT.Player(id, {
+    player.embed = new window.YT.Player(player.media, {
       videoId,
       host: getHost(config),
       playerVars: extend(
         {},
         {
-          autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+          // Autoplay
-          hl: player.config.hl, // iframe interface language
+          autoplay: player.config.autoplay ? 1 : 0,
-          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
+          // iframe interface language
-          disablekb: 1, // Disable keyboard as we handle it
+          hl: player.config.hl,
-          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Only show controls if not fully supported or opted out
+          controls: player.supported.ui && config.customControls ? 0 : 1,
+          // Disable keyboard as we handle it
+          disablekb: 1,
+          // Allow iOS inline playback
+          playsinline: !player.config.fullscreen.iosNative ? 1 : 0,
           // Captions are flaky on YouTube
           cc_load_policy: player.captions.active ? 1 : 0,
           cc_lang_pref: player.config.captions.language,
@@ -278,6 +282,7 @@ const youtube = {
               const toggle = is.boolean(input) ? input : muted;
               muted = toggle;
               instance[toggle ? 'mute' : 'unMute']();
+              instance.setVolume(volume * 100);
               triggerEvent.call(player, player.media, 'volumechange');
             },
           });
@@ -299,10 +304,10 @@ const youtube = {
           // Get available speeds
           const speeds = instance.getAvailablePlaybackRates();
           // Filter based on config
-          player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
+          player.options.speed = speeds.filter((s) => player.config.speed.options.includes(s));
 
           // Set the tabindex to avoid focus entering iframe
-          if (player.supported.ui) {
+          if (player.supported.ui && config.customControls) {
             player.media.setAttribute('tabindex', -1);
           }
 
@@ -335,7 +340,9 @@ const youtube = {
           }, 200);
 
           // Rebuild UI
-          setTimeout(() => ui.build.call(player), 50);
+          if (config.customControls) {
+            setTimeout(() => ui.build.call(player), 50);
+          }
         },
         onStateChange(event) {
           // Get the instance
@@ -386,7 +393,7 @@ const youtube = {
 
             case 1:
               // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
-              if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
+              if (config.customControls && !player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
                 player.media.pause();
               } else {
                 assurePlaybackState.call(player, true);

src/js/plyr.d.ts

@@ -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(
+  on<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
 
   /**
    * Add an event listener for the specified event once.
    */
-  once(
+  once<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
 
   /**
    * Remove an event listener for the specified event.
    */
-  off(
+  off<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
 
   /**
    * Check support for a mime type.
@@ -249,37 +245,51 @@ declare class Plyr {
 declare namespace Plyr {
   type MediaType = 'audio' | 'video';
   type Provider = 'html5' | 'youtube' | 'vimeo';
-  type StandardEvent =
+  type StandardEventMap = {
-    | 'progress'
+    progress: PlyrEvent;
-    | 'playing'
+    playing: PlyrEvent;
-    | 'play'
+    play: PlyrEvent;
-    | 'pause'
+    pause: PlyrEvent;
-    | 'timeupdate'
+    timeupdate: PlyrEvent;
-    | 'volumechange'
+    volumechange: PlyrEvent;
-    | 'seeking'
+    seeking: PlyrEvent;
-    | 'seeked'
+    seeked: PlyrEvent;
-    | 'ratechange'
+    ratechange: PlyrEvent;
-    | 'ended'
+    ended: PlyrEvent;
-    | 'enterfullscreen'
+    enterfullscreen: PlyrEvent;
-    | 'exitfullscreen'
+    exitfullscreen: PlyrEvent;
-    | 'captionsenabled'
+    captionsenabled: PlyrEvent;
-    | 'captionsdisabled'
+    captionsdisabled: PlyrEvent;
-    | 'languagechange'
+    languagechange: PlyrEvent;
-    | 'controlshidden'
+    controlshidden: PlyrEvent;
-    | 'controlsshown'
+    controlsshown: PlyrEvent;
-    | 'ready';
+    ready: PlyrEvent;
-  type Html5Event =
+  };
-    | 'loadstart'
+  // For retrocompatibility, we keep StandadEvent
-    | 'loadeddata'
+  type StandadEvent = keyof Plyr.StandardEventMap;
-    | 'loadedmetadata'
+  type Html5EventMap = {
-    | 'canplay'
+    loadstart: PlyrEvent;
-    | 'canplaythrough'
+    loadeddata: PlyrEvent;
-    | 'stalled'
+    loadedmetadata: PlyrEvent;
-    | 'waiting'
+    canplay: PlyrEvent;
-    | 'emptied'
+    canplaythrough: PlyrEvent;
-    | 'cuechange'
+    stalled: PlyrEvent;
-    | 'error';
+    waiting: PlyrEvent;
-  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+    emptied: PlyrEvent;
+    cuechange: PlyrEvent;
+    error: PlyrEvent;
+  };
+  // For retrocompatibility, we keep Html5Event
+  type Html5Event = keyof Plyr.Html5EventMap;
+  type YoutubeEventMap = {
+    statechange: PlyrStateChangeEvent;
+    qualitychange: PlyrEvent;
+    qualityrequested: PlyrEvent;
+  };
+  // For retrocompatibility, we keep YoutubeEvent
+  type YoutubeEvent = keyof Plyr.YoutubeEventMap;
+
+  type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap;
 
   interface FullscreenControl {
     /**
@@ -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.
@@ -505,6 +515,8 @@ declare namespace Plyr {
 
   interface QualityOptions {
     default: number;
+    forced?: boolean;
+    onChange?: (quality: number) => void;
     options: number[];
   }
 
@@ -534,9 +546,10 @@ declare namespace Plyr {
 
   interface FullScreenOptions {
     enabled?: boolean;
-    fallback?: boolean;
+    fallback?: boolean | 'force';
     allowAudio?: boolean;
     iosNative?: boolean;
+    container?: string;
   }
 
   interface CaptionOptions {
@@ -552,7 +565,28 @@ declare namespace Plyr {
 
   interface PreviewThumbnailsOptions {
     enabled?: boolean;
-    src?: string;
+    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 {
@@ -623,6 +657,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;

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.6.2
+// plyr.js v3.6.8
 // 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';
@@ -28,7 +29,7 @@ import loadSprite from './utils/load-sprite';
 import { clamp } from './utils/numbers';
 import { cloneDeep, extend } from './utils/objects';
 import { silencePromise } from './utils/promise';
-import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateRatio } from './utils/style';
+import { getAspectRatio, reduceAspectRatio, setAspectRatio, validateAspectRatio } from './utils/style';
 import { parseUrl } from './utils/urls';
 
 // Private properties
@@ -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
@@ -915,12 +916,12 @@ class Plyr {
       return;
     }
 
-    if (!is.string(input) || !validateRatio(input)) {
+    if (!is.string(input) || !validateAspectRatio(input)) {
       this.debug.error(`Invalid aspect ratio specified (${input})`);
       return;
     }
 
-    this.config.ratio = input;
+    this.config.ratio = reduceAspectRatio(input);
 
     setAspectRatio.call(this);
   }
@@ -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 && is.array(this.config.controls) && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
+      if (
+        hiding &&
+        is.array(this.config.controls) &&
+        this.config.controls.includes('settings') &&
+        !is.empty(this.config.settings)
+      ) {
         controls.toggleMenu.call(this, false);
       }
 
@@ -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) {
+  supports = (type) => support.mime.call(this, type);
-    return 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));
   }
 }
 

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.6.2
+// plyr.js v3.6.8
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/source.js

@@ -20,7 +20,7 @@ const source = {
         src: attributes,
       });
     } else if (is.array(attributes)) {
-      attributes.forEach(attribute => {
+      attributes.forEach((attribute) => {
         insertElement(type, this.media, attribute);
       });
     }

src/js/storage.js

@@ -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;

src/js/ui.js

@@ -135,7 +135,7 @@ const ui = {
     }
 
     // If there's a play button, set label
-    Array.from(this.elements.buttons.play || []).forEach(button => {
+    Array.from(this.elements.buttons.play || []).forEach((button) => {
       button.setAttribute('aria-label', label);
     });
 
@@ -172,13 +172,16 @@ const ui = {
     // Set property synchronously to respect the call order
     this.media.setAttribute('data-poster', poster);
 
+    // Show the poster
+    this.elements.poster.removeAttribute('hidden');
+
     // Wait until ui is ready
     return (
       ready
         .call(this)
         // Load image
         .then(() => loadImage(poster))
-        .catch(err => {
+        .catch((err) => {
           // Hide poster on error unless it's been set by another call
           if (poster === this.poster) {
             ui.togglePoster.call(this, false);
@@ -214,7 +217,7 @@ const ui = {
     toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
     // Set state
-    Array.from(this.elements.buttons.play || []).forEach(target => {
+    Array.from(this.elements.buttons.play || []).forEach((target) => {
       Object.assign(target, { pressed: this.playing });
       target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
     });
@@ -270,8 +273,8 @@ const ui = {
     // Loop through values (as they are the keys when the object is spread 🤔)
     Object.values({ ...this.media.style })
       // We're only fussed about Plyr specific properties
-      .filter(key => !is.empty(key) && key.startsWith('--plyr'))
+      .filter((key) => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
-      .forEach(key => {
+      .forEach((key) => {
         // Set on the container
         this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
 

src/js/utils/animation.js

@@ -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;
 })();

src/js/utils/browser.js

@@ -4,11 +4,13 @@
 // ==========================================================================
 
 const browser = {
-  isIE: /* @cc_on!@ */ false || !!document.documentMode,
+  isIE: Boolean(window.document.documentMode),
   isEdge: window.navigator.userAgent.includes('Edge'),
   isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
   isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
-  isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),
+  isIos:
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) ||
+    /(iPad|iPhone|iPod)/gi.test(navigator.platform),
 };
 
 export default browser;

src/js/utils/elements.js

@@ -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)) {

src/js/utils/events.js

@@ -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(() => {});
 }

src/js/utils/is.js

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

src/js/utils/load-sprite.js

@@ -54,7 +54,7 @@ export default function loadSprite(url, id) {
 
     // Get the sprite
     fetch(url)
-      .then(result => {
+      .then((result) => {
         if (is.empty(result)) {
           return;
         }

src/js/utils/objects.js

@@ -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]: {} });

src/js/utils/strings.js

@@ -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 = '') {

src/js/utils/style.js

@@ -2,9 +2,39 @@
 // Style utils
 // ==========================================================================
 
+import { closest } from './arrays';
 import is from './is';
 
-export function validateRatio(input) {
+// Check support for a CSS declaration
+export function supportsCSS(declaration) {
+  if (!window || !window.CSS) {
+    return false;
+  }
+
+  return window.CSS.supports(declaration);
+}
+
+// Standard/common aspect ratios
+const standardRatios = [
+  [1, 1],
+  [4, 3],
+  [3, 4],
+  [5, 4],
+  [4, 5],
+  [3, 2],
+  [2, 3],
+  [16, 10],
+  [10, 16],
+  [16, 9],
+  [9, 16],
+  [21, 9],
+  [9, 21],
+  [32, 9],
+  [9, 32],
+].reduce((out, [x, y]) => ({ ...out, [x / y]: [x, y] }), {});
+
+// Validate an aspect ratio
+export function validateAspectRatio(input) {
   if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
     return false;
   }
@@ -14,6 +44,7 @@ export function validateRatio(input) {
   return ratio.map(Number).every(is.number);
 }
 
+// Reduce an aspect ratio to it's lowest form
 export function reduceAspectRatio(ratio) {
   if (!is.array(ratio) || !ratio.every(is.number)) {
     return null;
@@ -26,8 +57,9 @@ export function reduceAspectRatio(ratio) {
   return [width / divider, height / divider];
 }
 
+// Calculate an aspect ratio
 export function getAspectRatio(input) {
-  const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
+  const parse = (ratio) => (validateAspectRatio(ratio) ? ratio.split(':').map(Number) : null);
   // Try provided ratio
   let ratio = parse(input);
 
@@ -44,10 +76,10 @@ export function getAspectRatio(input) {
   // Get from HTML5 video
   if (ratio === null && this.isHTML5) {
     const { videoWidth, videoHeight } = this.media;
-    ratio = reduceAspectRatio([videoWidth, videoHeight]);
+    ratio = [videoWidth, videoHeight];
   }
 
-  return ratio;
+  return reduceAspectRatio(ratio);
 }
 
 // Set aspect ratio for responsive container
@@ -58,22 +90,56 @@ export function setAspectRatio(input) {
 
   const { wrapper } = this.elements;
   const ratio = getAspectRatio.call(this, input);
-  const [w, h] = is.array(ratio) ? ratio : [0, 0];
-  const padding = (100 / w) * h;
 
-  wrapper.style.paddingBottom = `${padding}%`;
+  if (!is.array(ratio)) {
+    return {};
+  }
+
+  const [x, y] = reduceAspectRatio(ratio);
+  const useNative = supportsCSS(`aspect-ratio: ${x}/${y}`);
+  const padding = (100 / x) * y;
+
+  if (useNative) {
+    wrapper.style.aspectRatio = `${x}/${y}`;
+  } else {
+    wrapper.style.paddingBottom = `${padding}%`;
+  }
 
   // For Vimeo we have an extra <div> to hide the standard controls and UI
   if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
     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);
+    wrapper.classList.add(this.config.classNames.videoFixedRatio);
   }
 
   return { padding, ratio };
 }
 
-export default { setAspectRatio };
+// Round an aspect ratio to closest standard ratio
+export function roundAspectRatio(x, y, tolerance = 0.05) {
+  const ratio = x / y;
+  const closestRatio = closest(Object.keys(standardRatios), ratio);
+
+  // Check match is within tolerance
+  if (Math.abs(closestRatio - ratio) <= tolerance) {
+    return standardRatios[closestRatio];
+  }
+
+  // No match
+  return [x, y];
+}
+
+// Get the size of the viewport
+// https://stackoverflow.com/questions/1248081/how-to-get-the-browser-viewport-dimensions
+export function getViewportSize() {
+  const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+  const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+  return [width, height];
+}

src/js/utils/time.js

@@ -5,9 +5,9 @@
 import is from './is';
 
 // Time helpers
-export const getHours = value => Math.trunc((value / 60 / 60) % 60, 10);
+export const getHours = (value) => Math.trunc((value / 60 / 60) % 60, 10);
-export const getMinutes = value => Math.trunc((value / 60) % 60, 10);
+export const getMinutes = (value) => Math.trunc((value / 60) % 60, 10);
-export const getSeconds = value => Math.trunc(value % 60, 10);
+export const getSeconds = (value) => Math.trunc(value % 60, 10);
 
 // Format time to UI friendly string
 export function formatTime(time = 0, displayHours = false, inverted = false) {
@@ -17,7 +17,7 @@ export function formatTime(time = 0, displayHours = false, inverted = false) {
   }
 
   // Format time component to add leading zero
-  const format = value => `0${value}`.slice(-2);
+  const format = (value) => `0${value}`.slice(-2);
   // Breakdown to hours, mins, secs
   let hours = getHours(time);
   const mins = getMinutes(time);

src/sass/base.scss

@@ -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;

src/sass/components/poster.scss

@@ -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;
@@ -20,3 +20,8 @@
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
   opacity: 1;
 }
+
+// Allow interaction with YouTube controls while paused
+.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
+  display: none;
+}

src/sass/components/sliders.scss

@@ -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%;

src/sass/components/times.scss

@@ -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;
   }
 }

src/sass/lib/mixins.scss

@@ -59,17 +59,6 @@
     height: 100%;
   }
 
-  .plyr__video-wrapper {
-    height: 100%;
-    position: static;
-  }
-
-  // Vimeo requires some different styling
-  &.plyr--vimeo .plyr__video-wrapper {
-    height: 0;
-    position: relative;
-  }
-
   // Display correct icon
   .plyr__control .icon--exit-fullscreen {
     display: block;

src/sass/settings/colors.scss

@@ -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;

src/sass/types/video.scss

@@ -4,7 +4,7 @@
 
 // Container
 .plyr--video {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
   overflow: hidden;
 
   &.plyr--menu-open {
@@ -13,8 +13,7 @@
 }
 
 .plyr__video-wrapper {
-  background: #000;
+  background: var(--plyr-video-background, $plyr-video-background);
-  height: 100%;
   margin: auto;
   overflow: hidden;
   position: relative;
@@ -26,29 +25,32 @@ $embed-padding: ((100 / 16) * 9);
 
 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
-  height: 0;
+  @supports not (aspect-ratio: 16 / 9) {
-  padding-bottom: to-percentage($embed-padding);
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+    position: relative;
+  }
+
+  aspect-ratio: 16 / 9;
 }
 
 .plyr__video-embed iframe,
 .plyr__video-wrapper--fixed-ratio video {
   border: 0;
+  height: 100%;
   left: 0;
   position: absolute;
   top: 0;
+  width: 100%;
 }
 
-// If the full custom UI is supported
+// For Vimeo, if the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
+.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
   $height: 240;
   $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
+  padding-bottom: to-percentage($height);
-  // Only used for Vimeo
+  position: relative;
-  > .plyr__video-embed__container {
+  transform: translateY(-$offset);
-    padding-bottom: to-percentage($height);
-    position: relative;
-    transform: translateY(-$offset);
-  }
 }
 
 // Controls container

tasks/build.js

@@ -16,7 +16,7 @@ const resolve = require('rollup-plugin-node-resolve');
 const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
-const clean = require('postcss-clean');
+const cssnano = require('cssnano');
 const customprops = require('postcss-custom-properties');
 // Images
 const svgstore = require('gulp-svgstore');
@@ -30,6 +30,7 @@ const plumber = require('gulp-plumber');
 const size = require('gulp-size');
 const sourcemaps = require('gulp-sourcemaps');
 const browserSync = require('browser-sync').create();
+const gulpIf = require('gulp-if');
 // Configs
 const build = require('../build.json');
 // Info from package
@@ -74,8 +75,8 @@ const tasks = {
 const sizeOptions = { showFiles: true, gzip: true };
 
 // Clean out /dist
-gulp.task('clean', done => {
+gulp.task('clean', (done) => {
-  const dirs = [paths.plyr.output, paths.demo.output].map(dir => path.join(dir, '**/*'));
+  const dirs = [paths.plyr.output, paths.demo.output].map((dir) => path.join(dir, '**/*'));
 
   // Don't delete the mp4
   dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
@@ -89,7 +90,7 @@ gulp.task('clean', done => {
 Object.entries(build.js).forEach(([filename, entry]) => {
   const { dist, formats, namespace, polyfill, src } = entry;
 
-  formats.forEach(format => {
+  formats.forEach((format) => {
     const name = `js:${filename}:${format}`;
     const extension = format === 'es' ? 'mjs' : 'js';
     tasks.js.push(name);
@@ -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}`,
@@ -156,7 +158,15 @@ Object.entries(build.css).forEach(([filename, entry]) => {
       .src(src)
       .pipe(plumber())
       .pipe(sass())
-      .pipe(postcss([customprops(), autoprefixer(), clean()]))
+      .pipe(
+        postcss([
+          customprops(),
+          autoprefixer(),
+          cssnano({
+            preset: 'default',
+          }),
+        ]),
+      )
       .pipe(size(sizeOptions))
       .pipe(gulp.dest(dist)),
   );

tasks/deploy.js

@@ -10,15 +10,13 @@ const gulp = require('gulp');
 const gitbranch = require('git-branch');
 const rename = require('gulp-rename');
 const replace = require('gulp-replace');
-const ansi = require('ansi-colors');
+const { green, cyan, bold } = require('colorette');
 const log = require('fancy-log');
 const open = require('gulp-open');
 const size = require('gulp-size');
-const through = require('through2');
 // Deployment
 const aws = require('aws-sdk');
 const publish = require('gulp-awspublish');
-const FastlyPurge = require('fastly-purge');
 // Configs
 const pkg = require('../package.json');
 const deploy = require('../deploy.json');
@@ -27,7 +25,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,
@@ -53,14 +51,6 @@ const paths = {
   ],
 };
 
-// Get credentials
-let credentials = {};
-try {
-  credentials = require('../credentials.json'); //eslint-disable-line
-} catch (e) {
-  // Do nothing
-}
-
 // Get branch info
 const branch = {
   current: gitbranch.sync(),
@@ -102,7 +92,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 +110,7 @@ const canDeploy = () => {
   return true;
 };
 
-gulp.task('version', done => {
+gulp.task('version', (done) => {
   if (!canDeploy()) {
     done();
     return null;
@@ -128,14 +118,14 @@ gulp.task('version', done => {
 
   const { domain } = deploy.cdn;
 
-  log(`Updating version in files to ${ansi.green.bold(version)}...`);
+  log(`Updating version in files to ${green(bold(version))}...`);
 
   // Replace versioned URLs in source
   const files = ['plyr.js', 'plyr.polyfilled.js', 'config/defaults.js'];
 
   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 +134,7 @@ gulp.task('version', done => {
 });
 
 // Publish version to CDN bucket
-gulp.task('cdn', done => {
+gulp.task('cdn', (done) => {
   if (!canDeploy()) {
     done();
     return null;
@@ -156,7 +146,7 @@ gulp.task('cdn', done => {
     throw new Error('No publisher instance. Check AWS configuration.');
   }
 
-  log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
+  log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);
 
   // Upload to CDN
   return (
@@ -177,43 +167,8 @@ gulp.task('cdn', done => {
   );
 });
 
-// Purge the fastly cache incase any 403/404 are cached
-gulp.task('purge', () => {
-  if (!Object.keys(credentials).includes('fastly')) {
-    throw new Error('Fastly credentials required to purge cache.');
-  }
-
-  const { fastly } = credentials;
-  const list = [];
-
-  return gulp
-    .src(paths.upload)
-    .pipe(
-      through.obj((file, enc, cb) => {
-        const filename = file.path.split('/').pop();
-        list.push(`${versionPath}${filename.replace(minSuffix, '')}`);
-        cb(null);
-      }),
-    )
-    .on('end', () => {
-      const purge = new FastlyPurge(fastly.token);
-
-      list.forEach(url => {
-        log(`Purging ${ansi.cyan(url)}...`);
-
-        purge.url(url, (error, result) => {
-          if (error) {
-            log.error(error);
-          } else if (result) {
-            log(result);
-          }
-        });
-      });
-    });
-});
-
 // Publish to demo bucket
-gulp.task('demo', done => {
+gulp.task('demo', (done) => {
   if (!canDeploy()) {
     done();
     return null;
@@ -226,7 +181,7 @@ gulp.task('demo', done => {
     throw new Error('No publisher instance. Check AWS configuration.');
   }
 
-  log(`Uploading ${ansi.green.bold(pkg.version)} to ${ansi.cyan(domain)}...`);
+  log(`Uploading ${green(bold(pkg.version))} to ${cyan(domain)}...`);
 
   // Replace versioned files in README.md
   gulp
@@ -248,7 +203,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;
@@ -271,4 +226,4 @@ gulp.task('open', () => {
 });
 
 // Do everything
-gulp.task('deploy', gulp.series('cdn', 'demo', 'purge', 'open'));
+gulp.task('deploy', gulp.series('cdn', 'demo', 'open'));