chore(deps-dev): bump word-wrap from 1.2.3 to 1.2.4

Bumps [word-wrap](https://github.com/jonschlinkert/word-wrap) from 1.2.3 to 1.2.4.
- [Release notes](https://github.com/jonschlinkert/word-wrap/releases)
- [Commits](https://github.com/jonschlinkert/word-wrap/compare/1.2.3...1.2.4)

---
updated-dependencies:
- dependency-name: word-wrap
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc

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

.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/

.node-version

@@ -0,0 +1 @@
+19.7.0

.npmignore

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

.nvmrc

@@ -1 +0,0 @@
-v13.8.0

.stylelintrc.json

@@ -1,6 +1,7 @@
 {
-  "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"],
-  "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"],
+  "plugins": ["stylelint-selector-bem-pattern"],
+  "extends": ["stylelint-config-sass-guidelines", "stylelint-config-prettier"],
+  "customSyntax": "postcss-scss",
   "rules": {
     "selector-class-pattern": null,
     "selector-no-qualifying-type": [
@@ -9,10 +10,7 @@
         "ignore": ["attribute", "class"]
       }
     ],
-    "string-no-newline": null,
-    "indentation": 2,
-    "string-quotes": "single",
-    "max-nesting-depth": 2,
+    "max-nesting-depth": 4,
     "plugin/selector-bem-pattern": {
       "preset": "bem",
       "componentName": "(([a-z0-9]+(?!-$)-?)+)",

.travis.yml

@@ -1,8 +0,0 @@
-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,150 @@
+# Changelog
+
+### v3.7.8
+
+- Feat: Minor demo style tweaks
+- Fix: Minor style fixes related to backgrounds and border radii (🚨 Requires a SCSS/CSS update 🚨)
+
+### v3.7.7
+
+- Fix (Accessibility): Don’t set tabindex on parent container
+- Fix (Accessibility): Add `role="timer"` to time elements
+- Fix (Accessibility): Leverage native `:focus-visible` in CSS, instead of a custom solution (🚨 Requires a SCSS/CSS update 🚨)
+
+### v3.7.6
+
+- Fix: Revert postinstall script
+
+### v3.7.5
+
+- Fix: Replace `pnpm` with `npm` in scripts to fix build issues
+
+### v3.7.4
+
+- Fix: Fixed event key with space (thanks @royeden!)
+- Fix: Changing Vimeo function call from `setVolume` to `setMuted` to fix iOS issue (issue #2624) (thanks @HandreMelo and Andre Fernandes Cristofolini Melo!)
+- Fix: Call preview-thumbnails listeners() function on load (thanks @mogzol!)
+- Fix: Fullscreen improvements for iOS & iPadOS
+- Feat: Remove need for iOS-specific styling (please update [volume.scss](https://github.com/sampotts/plyr/blob/master/src/sass/components/volume.scss))
+
+### v3.7.3
+
+- Fix: force nowrap in progress tooltips (related: #2549) (thanks @raad-altaie!)
+- Feat(i18n): Make captions autodetect text direction (#2540) (thanks @ebraminio!)
+- Fix: fixed menu border radius bug (#2548) (thanks @raad-altaie!)
+- Chore: navigator.platform is deprecated (#2530) (thanks @stamat!)
+- Feat: Added configurable property to elements for re-use (#2489) (thanks @NoirHusky!)
+- Docs: Replace example video ID with one that still works (#2518) (thanks @luvejo!)
+- Fix: Improve accessibility on control buttons with aria-pressed (#2523) (thanks @emilkarl!)
+- Fix: Fix for calc() in newer Dart Sass versions (#2519) (thanks @ckhicks!)
+- Fix: simplify logic for isFunction assertion method
+- Chore: update types to include string for controls
+- Chore: upgrade packages
+- Chore: use `.node-version` instead of `.nvmrc`
+
+### v3.7.2
+
+- Fix: Add `@babel/plugin-proposal-optional-chaining` to transform optional chaining in build output
+
+### v3.7.1
+
+- Feat: Minor styling improvements to the preview thumbnails (🚨 Requires a SCSS/CSS update 🚨)
+- Fix: Fix invalid CSS @charset rule in Sass files (thanks @Hashen110!)
+- Chore: Replace deprecated KeyboardEvent `keyCode` references to use `key` instead (thanks @Hashen110!)
+- Various other code clean up and typo fixes (thanks @Hashen110!)
+
+## v3.7.0
+
+- Feat: Add markers support (🚨 Requires a SCSS/CSS update 🚨) (thanks @ForeverSc and @fengshuo!)
+- Feat: Add support for MediaMetadata (thanks @Hashen110!)
+- Fix: Pass this context to captions.setup (fixes #2352) (thanks @WilliamMHerring, @willherring and @zenyr!)
+- Fix: Modify vimeo parseHash to use non-named capture groups (fixes #2396) (thanks @fekle!)
+- Fix: Replace deprecated String.prototype.substr() (thanks @CommanderRoot!)
+- Docs: Update speed option default to match the source (thanks @ozgurg!)
+- Docs: SASS → Sass (thanks @toastal!)
+
+### v3.6.12
+
+- Fix: remove division logic from ads.scss (fixes #2370)
+
+### v3.6.11
+
+- Fix: Replace `list.slash` added in 3.6.10 with `calc`
+- Chore: Package upgrades
+- Chore: Sass clean up
+- Chore: Improvements to style linting
+
+### v3.6.10
+
+- Fix: Use `list.slash` instead of deprecated syntax
+- Chore: Clean up demo
+
+### v3.6.9
+
+- Fix: Sass issue with division (thanks @ROL4ND909 and @le0pard)
+- Fix: Captions when switching sources (thanks @zexingguo)
+- Fix: Icons loading within iframes (thanks @ajgagnon)
+- Chore: Update TypeScript types (thanks @Jackie1210 and @AntLevin)
+- Fix: iOS fullscreen centering (thanks @hemratna)
+- Feat: Added getter and setter for preview thumbnails (thanks @Benny739)
+- Fix: Change fullscreen element to player rootnode (thanks @Walter van den Houten)
+- Fix: Fixed errors when Plyr instance is destroyed before constructor setTimeout() functions execute (thanks @emilis-ideait)
+- Fix: Invalid CSS selector syntax (thanks @BjornBrandewallNaviga)
+- Fix: Video height issues
+- Feat: Improve support for Vimeo private videos (thanks @Frosch)
+- Fix: YouTube duration issues (thanks @liesahead)
+
+### 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 network 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)
@@ -40,7 +187,7 @@
 ### v3.5.8
 
 - Added `flex-direction` property to fix some issues introduced in v3.5.7 when using custom CSS
-- Cleaned up the organisation of some of the SCSS files (should not effect CSS output)
+- Cleaned up the organization of some of the SCSS files (should not effect CSS output)
 - Added `referrerPolicy` option for Vimeo to prevent an issue present in the demo site
 - Remove all Vimeo controls for Pro & Premium accounts
 - Improve thumbnail size calculations when size is set per css (thanks @ydylla)
@@ -55,7 +202,7 @@
 - Accessibility tweak for the play button (thanks @lunika)
 - Fix for ads configuration (thanks @SoftCreatR)
 - Fix handling listener return value (thanks @taion)
-- Added localisation key for PIP (picture-in-picture) (thanks @lmislm)
+- Added localization key for PIP (picture-in-picture) (thanks @lmislm)
 - Preserve viewBox attribute in SVG sprite symbols (thanks @bseib)
 - Fix being unable to unmute autoplayed video on iOS (thanks @sumanbh)
 - Fixed Plyr container not resizing responsively (thanks @shravan2x)
@@ -89,7 +236,7 @@ _Note:_ This update contains CSS changes.
 ### v3.5.4
 
 - Added: Set download URL via new setter
-- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default SASS
+- Improvement: The order of the `controls` option now effects the order in the DOM - i.e. you can re-order the controls - Note: this may break any custom CSS you have setup. Please see the changes in the PR to the default Sass
 - Fixed issue with empty controls and preview thumbs
 - Fixed issue with setGutter call (from Sentry)
 - Fixed issue with initial selected speed not working
@@ -452,7 +599,7 @@ This is a massive release. A _mostly_ complete rewrite in ES6. What started out
 
 ### Other stuff
 
-- Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use. It may come back if we work out an automated way to convert the SASS
+- Now using Sass exclusively. Sorry, LESS folk it just made sense to maintain one method as Sass is what the cool kids use. It may come back if we work out an automated way to convert the Sass
 - Moved to ES6. All the rage these days. You'll need to look at polyfills. The demo uses [polyfill.io](https://polyfill.io)
 - Added basic looping support
 - Added an aspect ratio option for those that can't leave the 90s and want 4:3
@@ -512,10 +659,10 @@ Because we're using the fancy new ES6 syntax, you will need to polyfill for vint
 
 - Vimeo controls fix (fixes #697)
 - SVG4everybody compatibility fix
-- Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703)
-- Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649)
-- Target is null bug fix (https://github.com/sampotts/plyr/pull/617)
-- fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700)
+- Allow Plyr.setup event listeners to be set up as separate event listeners (<https://github.com/sampotts/plyr/pull/703>)
+- Added title to the layer html template (for custom controls) (<https://github.com/sampotts/plyr/pull/649>)
+- Target is null bug fix (<https://github.com/sampotts/plyr/pull/617>)
+- fix #684 memory leaks issues after destroy (<https://github.com/sampotts/plyr/pull/700>)
 
 ### v2.0.16
 
@@ -535,8 +682,8 @@ Because we're using the fancy new ES6 syntax, you will need to polyfill for vint
 
 ### v2.0.12
 
-- Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504)
-- Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468)
+- Ability to set custom `blankUrl` for source changes (<https://github.com/sampotts/plyr/pull/504>)
+- Ability to set caption button listener (<https://github.com/sampotts/plyr/pull/468>)
 
 ### v2.0.11
 
@@ -685,7 +832,7 @@ And some other changes and bug fixes:
 
 ## v1.7.0
 
-- SASS cleanup (fixes #265)
+- Sass cleanup (fixes #265)
 - Docs tidy up to help quick start (fixes #253)
 - Fix for issues with data attribute options passing (fixes #257)
 - **_(Important)_** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal)
@@ -807,7 +954,7 @@ And some other changes and bug fixes:
 ### v1.5.18
 
 - Added 'ready' event for initial setup complete or source change occurs
-- Fixed SASS stylesheet references to transparentize
+- Fixed Sass stylesheet references to transparentize
 - Added default font stack to controls
 - Docs fixes inc controls HTML (fixes #180)
 
@@ -844,7 +991,7 @@ And some other changes and bug fixes:
 
 - iOS embed bug fixes (fixes #166)
 - Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)
-- SASS bug fix for default values (fixes #158)
+- Sass bug fix for default values (fixes #158)
 
 ### v1.5.9
 
@@ -866,7 +1013,7 @@ And some other changes and bug fixes:
 ### v1.5.6
 
 - Seek tooltip (option for tooltips changed, please check docs)
-- SASS compile error fixes (fixes #148)
+- Sass compile error fixes (fixes #148)
 - Fullscreen fixes for controls not always hiding/showing (fixes #149)
 - Screen reader icon fixes (title was being read twice due to the tooltip/hidden label)
 
@@ -943,7 +1090,7 @@ And some other changes and bug fixes:
 
 ### v1.2.6
 
-- SASS updates and fixes (cheers @ChristianPV)
+- Sass updates and fixes (cheers @ChristianPV)
 
 ### v1.2.5
 
@@ -1058,7 +1205,7 @@ And some other changes and bug fixes:
 
 ### v1.0.26
 
-- Fixes for SASS (cheers @brunowego)
+- Fixes for Sass (cheers @brunowego)
 - Indentation reset to 4 spaces
 
 ### v1.0.25
@@ -1103,7 +1250,7 @@ And some other changes and bug fixes:
 
 ### v1.0.17
 
-- SASS support added (thanks to @brunowego)
+- Sass support added (thanks to @brunowego)
 - Docs completely separated to avoid any confusion
 - New gulp tasks (will add more documentation for this)
 

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.
-- run `gulp` to the start the server.
+- install the dependencies with `yarn install` in root directory and "demo" directory.
+- run `gulp` in root directory to start the dev server.
 
 So that you can start straight away.
 
@@ -49,6 +49,6 @@ So that you can start straight away.
 
 - If your modifications changes the documented behavior or add new features, document these changes in [README.md](README.md).
 
-- When finished, push the changes to your GitHub repository and send a pull request to **develop**. Describe what your PR does.
+- When finished, push the changes to your GitHub repository and send a pull request. Describe what your PR does.
 
 - If the Travis build fails, or if you get a code review with change requests, you can fix these by pushing new or rebased commits to the branch.

CONTROLS.md

@@ -2,11 +2,11 @@
 
 This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. You can pass the following to the `controls` option:
 
--   `Array` of options (this builds the default controls based on your choices)
--   `Element` with the controls
--   `String` containing the desired HTML
--   `false` (or empty string or array) to disable all controls
--   `Function` that will be executed and should return one of the above
+- `Array` of options (this builds the default controls based on your choices)
+- `Element` with the controls
+- `String` containing the desired HTML
+- `false` (or empty string or array) to disable all controls
+- `Function` that will be executed and should return one of the above
 
 ## Using default controls
 
@@ -14,28 +14,28 @@ If you want to use the standard controls as they are, you don't need to pass any
 
 ```javascript
 controls: [
-    'play-large', // The large play button in the center
-    'restart', // Restart playback
-    'rewind', // Rewind by the seek time (default 10 seconds)
-    'play', // Play/pause playback
-    'fast-forward', // Fast forward by the seek time (default 10 seconds)
-    'progress', // The progress bar and scrubber for playback and buffering
-    'current-time', // The current time of playback
-    'duration', // The full duration of the media
-    'mute', // Toggle mute
-    'volume', // Volume control
-    'captions', // Toggle captions
-    'settings', // Settings menu
-    'pip', // Picture-in-picture (currently Safari only)
-    'airplay', // Airplay (currently Safari only)
-    'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
-    'fullscreen', // Toggle fullscreen
+  'play-large', // The large play button in the center
+  'restart', // Restart playback
+  'rewind', // Rewind by the seek time (default 10 seconds)
+  'play', // Play/pause playback
+  'fast-forward', // Fast forward by the seek time (default 10 seconds)
+  'progress', // The progress bar and scrubber for playback and buffering
+  'current-time', // The current time of playback
+  'duration', // The full duration of the media
+  'mute', // Toggle mute
+  'volume', // Volume control
+  'captions', // Toggle captions
+  'settings', // Settings menu
+  'pip', // Picture-in-picture (currently Safari only)
+  'airplay', // Airplay (currently Safari only)
+  'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
+  'fullscreen', // Toggle fullscreen
 ];
 ```
 
 ### Internationalization using default controls
 
-You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls.
+You can provide an `i18n` object as one of your options when initializing the plugin which we be used when rendering the controls.
 
 #### Example
 
@@ -84,14 +84,14 @@ The classes and data attributes used in your template should match the `selector
 
 You need to add several placeholders to your HTML template that are replaced when rendering:
 
--   `{id}` - the dynamically generated ID for the player (for form controls)
--   `{seektime}` - the seek time specified in options for fast forward and rewind
--   `{title}` - the title of your media, if specified
+- `{id}` - the dynamically generated ID for the player (for form controls)
+- `{seektime}` - the seek time specified in options for fast forward and rewind
+- `{title}` - the title of your media, if specified
 
 ### Limitations
 
--   Currently the settings menus are not supported with custom controls HTML
--   AirPlay and PiP buttons can be added but you will have to manage feature detection
+- Currently the settings menus are not supported with custom controls HTML
+- AirPlay and PiP buttons can be added but you will have to manage feature detection
 
 ### Example
 

README.md

@@ -1,10 +1,13 @@
+| 🎉  | [Plyr is merging into Vidstack](https://github.com/sampotts/plyr/issues/2408) | 🎉  |
+| :-: | :---------------------------------------------------------------------------: | :-- |
+
 Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports [_modern_](#browser-support) browsers.
 
 [Checkout the demo](https://plyr.io) - [Donate](#donate) - [Slack](https://bit.ly/plyr--chat)
 
 [![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/sampotts/plyr) [![Financial Contributors on Open Collective](https://opencollective.com/plyr/all/badge.svg?label=financial+contributors)](https://opencollective.com/plyr)
 
-[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
+[![Screenshot of Plyr](https://cdn.plyr.io/static/screenshot.webp)](https://plyr.io)
 
 # Features
 
@@ -27,11 +30,11 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
 - 🌎 **i18n support** - support for internationalization of controls
 - 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
 - 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
-- 💁‍♀️ **SASS** - to include in your build processes
+- 💁‍♀️ **Sass** - to include in your build processes
 
-### Demos
+## 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
 
@@ -114,7 +117,7 @@ Or the `<div>` non progressively enhanced method:
 
 You can use Plyr as an ES6 module as follows:
 
-```javascript
+```js
 import Plyr from 'plyr';
 
 const player = new Plyr('#player');
@@ -129,38 +132,46 @@ Alternatively you can include the `plyr.js` script before the closing `</body>`
 </script>
 ```
 
-See [initialising](#initialising) for more information on advanced setups.
+See [initialising](#initializing) 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.
+You can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately 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.7.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.7.8/plyr.polyfilled.js"></script>
 ```
 
 ## CSS
 
-Include the `plyr.css` stylsheet into your `<head>`.
+Include the `plyr.css` stylesheet into your `<head>`.
 
 ```html
 <link rel="stylesheet" href="path/to/plyr.css" />
 ```
 
-If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
+If you want to use our CDN (provided by [Cloudflare](https://www.cloudflare.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.7.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`.
+The SVG sprite is loaded automatically from our CDN (provided by [Cloudflare](https://www.cloudflare.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.7.8/plyr.svg`.
+
+### Self hosting
+
+If you don't want to create a build system to include Plyr as an npm module, you can use the pre-built files. You have a few options:
+
+- Download the files from the CDN links above, they're already minified.
+- Download the files from [unpkg](https://unpkg.com/browse/plyr/dist/) or similar services.
+- Build the project yourself using `npm i && npm run build`, which installs the dependencies and spits out a build to `dist`.
 
 # Ads
 
@@ -184,42 +195,42 @@ 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-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`    |
+| `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://place-hold.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-focus-visible-color`                   | The color used for the focus styles when an element is `:focus-visible` (keyboard focused).             | `--plyr-color-main`                                                   |
+| `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |
+| `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-badge-border-radius`                   | The border radius used for badges.                                                                      | `2px`                                                                 |
-| `--plyr-tab-focus-color`                       | The color used to highlight tab (keyboard) focus.                                                       | `--plyr-color-main`                                                   |
 | `--plyr-captions-background`                   | The color for the background of captions.                                                               | `rgba(0, 0, 0, 0.8)`                                                  |
-| `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-captions-text-color`                   | The color used for the captions text.                                                                   | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-control-icon-size`                     | The size of the icons used in the controls.                                                             | `18px`                                                                |
 | `--plyr-control-spacing`                       | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`).                      | `10px`                                                                |
 | `--plyr-control-padding`                       | The padding inside controls.                                                                            | `--plyr-control-spacing * 0.7` (`7px`)                                |
 | `--plyr-control-radius`                        | The border radius used on controls.                                                                     | `3px`                                                                 |
 | `--plyr-control-toggle-checked-background`     | The background color used for checked menu items.                                                       | `--plyr-color-main`                                                   |
 | `--plyr-video-controls-background`             | The background for the video controls.                                                                  | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))`              |
-| `--plyr-video-control-color`                   | The text/icon color for video controls.                                                                 | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
-| `--plyr-video-control-color-hover`             | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-video-control-color`                   | The text/icon color for video controls.                                                                 | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
+| `--plyr-video-control-color-hover`             | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-video-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
-| `--plyr-audio-controls-background`             | The background for the audio controls.                                                                  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
-| `--plyr-audio-control-color`                   | The text/icon color for audio controls.                                                                 | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
-| `--plyr-audio-control-color-hover`             | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-audio-controls-background`             | The background for the audio controls.                                                                  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
+| `--plyr-audio-control-color`                   | The text/icon color for audio controls.                                                                 | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |
+| `--plyr-audio-control-color-hover`             | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent).  | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-audio-control-background-hover`        | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main`                                                   |
 | `--plyr-menu-background`                       | The background color for menus.                                                                         | `rgba(255, 255, 255, 0.9)`                                            |
-| `--plyr-menu-color`                            | The text/icon color for menu items.                                                                     | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-menu-color`                            | The text/icon color for menu items.                                                                     | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |
 | `--plyr-menu-shadow`                           | The shadow used on menus.                                                                               | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
 | `--plyr-menu-radius`                           | The border radius on the menu.                                                                          | `4px`                                                                 |
 | `--plyr-menu-arrow-size`                       | The size of the arrow on the bottom of the menu.                                                        | `6px`                                                                 |
-| `--plyr-menu-item-arrow-color`                 | The color of the arrows in the menu.                                                                    | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197`    |
+| `--plyr-menu-item-arrow-color`                 | The color of the arrows in the menu.                                                                    | ![#728197](https://place-hold.it/15/728197/000000?text=+) `#728197`   |
 | `--plyr-menu-item-arrow-size`                  | The size of the arrows in the menu.                                                                     | `4px`                                                                 |
-| `--plyr-menu-border-color`                     | The border color for the bottom of the back button in the top of the sub menu pages.                    | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5`    |
-| `--plyr-menu-border-shadow-color`              | The shadow below the border of the back button in the top of the sub menu pages.                        | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-menu-border-color`                     | The border color for the bottom of the back button in the top of the sub menu pages.                    | ![#dcdfe5](https://place-hold.it/15/dcdfe5/000000?text=+) `#dcdfe5`   |
+| `--plyr-menu-border-shadow-color`              | The shadow below the border of the back button in the top of the sub menu pages.                        | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-progress-loading-size`                 | The size of the stripes in the loading state in the scrubber.                                           | `25px`                                                                |
 | `--plyr-progress-loading-background`           | The background color on the loading state in the scrubber.                                              | `rgba(35, 40, 47, 0.6)`                                               |
 | `--plyr-video-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for video.                                     | `rgba(255, 255, 255, 0.25)`                                           |
 | `--plyr-audio-progress-buffered-background`    | The fill color for the buffer indication in the scrubber for audio.                                     | `rgba(193, 200, 209, 0.6)`                                            |
 | `--plyr-range-thumb-height`                    | The height of the scrubber handle/thumb.                                                                | `13px`                                                                |
-| `--plyr-range-thumb-background`                | The background of the scrubber handle/thumb.                                                            | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--plyr-range-thumb-background`                | The background of the scrubber handle/thumb.                                                            | ![#ffffff](https://place-hold.it/15/ffffff/000000?text=+) `#ffffff`   |
 | `--plyr-range-thumb-shadow`                    | The shadow of the scrubber handle/thumb.                                                                | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |
 | `--plyr-range-thumb-active-shadow-width`       | The width of the shadow when the scrubber handle/thumb is `:active` (pressed).                          | `3px`                                                                 |
 | `--plyr-range-track-height`                    | The height of the scrubber/progress track.                                                              | `5px`                                                                 |
@@ -229,7 +240,7 @@ Here's a list of the properties and what they are used for:
 | `--plyr-audio-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
 | `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed).                    | `rgba(215, 26, 18, 0.1)`                                              |
 | `--plyr-tooltip-background`                    | The background color for tooltips.                                                                      | `rgba(255, 255, 255, 0.9)`                                            |
-| `--plyr-tooltip-color`                         | The text color for tooltips.                                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-tooltip-color`                         | The text color for tooltips.                                                                            | ![#4a5464](https://place-hold.it/15/4a5464/000000?text=+) `#4a5464`   |
 | `--plyr-tooltip-padding`                       | The padding for tooltips.                                                                               | `calc(var(--plyr-control-spacing) / 2))`                              |
 | `--plyr-tooltip-arrow-size`                    | The size of the arrow under tooltips.                                                                   | `4px`                                                                 |
 | `--plyr-tooltip-radius`                        | The border radius on tooltips.                                                                          | `3px`                                                                 |
@@ -266,14 +277,12 @@ You can set them in your CSS for all players:
 ...or in your HTML:
 
 ```html
-<video class="player" style="--plyr-color-main: #1ac266;">
-    ...
-</vieo>
+<video class="player" style="--plyr-color-main: #1ac266;">...</video>
 ```
 
-### SASS
+### Sass
 
-You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The SASS requires you to
+You can use `plyr.scss` file included in `/src/sass` as part of your build and change variables to suit your design. The Sass requires you to
 use [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) (you should be already!) as all declarations use the W3C definitions.
 
 The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS
@@ -308,7 +317,7 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
 
 ## JavaScript
 
-### Initialising
+### Initializing
 
 You can specify a range of arguments for the constructor to use:
 
@@ -322,17 +331,17 @@ _Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element
 
 Passing a CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector):
 
-```javascript
+```js
 const player = new Plyr('#player');
 ```
 
 Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):
 
-```javascript
+```js
 const player = new Plyr(document.getElementById('player'));
 ```
 
-```javascript
+```js
 const player = new Plyr(document.querySelector('.js-player'));
 ```
 
@@ -342,13 +351,13 @@ The HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<
 
 You have two choices here. You can either use a simple array loop to map the constructor:
 
-```javascript
-const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
+```js
+const players = Array.from(document.querySelectorAll('.js-player')).map((p) => new Plyr(p));
 ```
 
 ...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement), or a [JQuery](https://jquery.com) object:
 
-```javascript
+```js
 const players = Plyr.setup('.js-player');
 ```
 
@@ -358,7 +367,7 @@ Both options will also return an array of instances in the order of they were in
 
 The second argument for the constructor is the [options](#options) object:
 
-```javascript
+```js
 const player = new Plyr('#player', {
   title: 'Example Title',
 });
@@ -372,52 +381,60 @@ Options can be passed as an object to the constructor as above or as JSON in `da
 
 Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
 
-| Option               | Type                       | Default                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                             |
-| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `enabled`            | Boolean                    | `true`                                                                                                                         | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.                                                                                                                                                                                                                                           |
-| `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                                                            |
-| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [CONTROLS.md](CONTROLS.md) for more info on how the html needs to be structured.                                  |
-| `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If the default controls are used, you can specify which settings to show in the menu                                                                                                                                                                                                                                                                                                                    |
-| `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                  | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                                                         |
-| `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                                                   |
-| `iconUrl`            | String                     | `null`                                                                                                                         | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                                                     |
-| `iconPrefix`         | String                     | `plyr`                                                                                                                         | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.                                                                                                                                                                  |
-| `blankVideo`         | String                     | `https://cdn.plyr.io/static/blank.mp4`                                                                                         | Specify a URL or path to a blank video file used to properly cancel network requests.                                                                                                                                                                                                                                                                                                                   |
-| `autoplay`&sup2;     | Boolean                    | `false`                                                                                                                        | Autoplay the media on load. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                         |
-| `autopause`&sup1;    | Boolean                    | `true`                                                                                                                         | Only allow one player playing at once.                                                                                                                                                                                                                                                                                                                                                                  |
-| `seekTime`           | Number                     | `10`                                                                                                                           | The time, in seconds, to seek when a user hits fast forward or rewind.                                                                                                                                                                                                                                                                                                                                  |
-| `volume`             | Number                     | `1`                                                                                                                            | A number, between 0 and 1, representing the initial volume of the player.                                                                                                                                                                                                                                                                                                                               |
-| `muted`              | Boolean                    | `false`                                                                                                                        | Whether to start playback muted. If the `muted` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                       |
-| `clickToPlay`        | Boolean                    | `true`                                                                                                                         | Click (or tap) of the video container will toggle play/pause.                                                                                                                                                                                                                                                                                                                                           |
-| `disableContextMenu` | Boolean                    | `true`                                                                                                                         | Disable right click menu on video to <em>help</em> as very primitive obfuscation to prevent downloads of content.                                                                                                                                                                                                                                                                                       |
-| `hideControls`       | Boolean                    | `true`                                                                                                                         | Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.                                                                                                                              |
-| `resetOnEnd`         | Boolean                    | false                                                                                                                          | Reset the playback to the start once playback is complete.                                                                                                                                                                                                                                                                                                                                              |
-| `keyboard`           | Object                     | `{ focused: true, global: false }`                                                                                             | Enable [keyboard shortcuts](#shortcuts) for focused players only or globally                                                                                                                                                                                                                                                                                                                            |
-| `tooltips`           | Object                     | `{ controls: false, seek: true }`                                                                                              | `controls`: Display control labels as tooltips on `:hover` & `:focus` (by default, the labels are screen reader only). `seek`: Display a seek tooltip to indicate on click where the media would seek to.                                                                                                                                                                                               |
-| `duration`           | Number                     | `null`                                                                                                                         | Specify a custom duration for media.                                                                                                                                                                                                                                                                                                                                                                    |
-| `displayDuration`    | Boolean                    | `true`                                                                                                                         | Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the `preload` attribute is not set to `none` (or is not set at all) and you choose not to display the duration (see `controls` option).                                                                                                                               |
-| `invertTime`         | Boolean                    | `true`                                                                                                                         | Display the current time as a countdown rather than an incremental counter.                                                                                                                                                                                                                                                                                                                             |
-| `toggleInvert`       | Boolean                    | `true`                                                                                                                         | Allow users to click to toggle the above.                                                                                                                                                                                                                                                                                                                                                               |
-| `listeners`          | Object                     | `null`                                                                                                                         | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire.                                                                                                                                                              |
-| `captions`           | Object                     | `{ active: false, language: 'auto', update: false }`                                                                           | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in unselectable language options).                                                                                        |
-| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false, container: null }`                                                         | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls). `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored.     |
-| `ratio`              | String                     | `null`                                                                                                                         | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.                                                                                                         |
-| `storage`            | Object                     | `{ enabled: true, key: 'plyr' }`                                                                                               | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use.                                                                                                                                                                                                                                                                                                               |
-| `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] }`                                                                 | `selected`: The default speed for playback. `options`: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.                                                                                                                                                                     |
-| `quality`            | Object                     | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }`                                           | `default` is the default quality level (if it exists in your sources). `options` are the options to display. This is used to filter the available sources.                                                                                                                                                                                                                                              |
-| `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                                                          |
-| `ads`                | Object                     | `{ enabled: false, publisherId: '', tagUrl: '' }`                                                                              | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. `tagUrl` is a URL for a custom VAST tag if you're not using Vi.                                                                                                                                                                                   |
-| `urls`               | Object                     | See source.                                                                                                                    | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.                                                                                                                                                                                                                                                                           |
-| `vimeo`              | Object                     | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }`                                            | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline`                                                                                                                                                                                                   |
-| `youtube`            | Object                     | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }`                                               | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer` |
-| `previewThumbnails`  | Object                     | `{ enabled: false, src: '' }`                                                                                                  | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below.                                                                                                                            |
+| Option               | Type                       | Default                                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `enabled`            | Boolean                    | `true`                                                                                                                         | Completely disable Plyr. This would allow you to do a User Agent check or similar to programmatically enable or disable Plyr for a certain UA. Example below.                                                                                                                                                                                                                                                                           |
+| `debug`              | Boolean                    | `false`                                                                                                                        | Display debugging information in the console                                                                                                                                                                                                                                                                                                                                                                                            |
+| `controls`           | Array, Function or Element | `['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']` | If a function is passed, it is assumed your method will return either an element or HTML string for the controls. Three arguments will be passed to your function; `id` (the unique id for the player), `seektime` (the seektime step in seconds), and `title` (the media title). See [CONTROLS.md](CONTROLS.md) for more info on how the html needs to be structured.                                                                  |
+| `settings`           | Array                      | `['captions', 'quality', 'speed', 'loop']`                                                                                     | If the default controls are used, you can specify which settings to show in the menu                                                                                                                                                                                                                                                                                                                                                    |
+| `i18n`               | Object                     | See [defaults.js](/src/js/config/defaults.js)                                                                                  | Used for internationalization (i18n) of the text within the UI.                                                                                                                                                                                                                                                                                                                                                                         |
+| `loadSprite`         | Boolean                    | `true`                                                                                                                         | Load the SVG sprite specified as the `iconUrl` option (if a URL). If `false`, it is assumed you are handling sprite loading yourself.                                                                                                                                                                                                                                                                                                   |
+| `iconUrl`            | String                     | `null`                                                                                                                         | Specify a URL or path to the SVG sprite. See the [SVG section](#svg) for more info.                                                                                                                                                                                                                                                                                                                                                     |
+| `iconPrefix`         | String                     | `plyr`                                                                                                                         | Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG sprite but with the default controls. Most people can ignore this option.                                                                                                                                                                                                  |
+| `blankVideo`         | String                     | `https://cdn.plyr.io/static/blank.mp4`                                                                                         | Specify a URL or path to a blank video file used to properly cancel network requests.                                                                                                                                                                                                                                                                                                                                                   |
+| `autoplay`&sup2;     | Boolean                    | `false`                                                                                                                        | Autoplay the media on load. If the `autoplay` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                                                         |
+| `autopause`&sup1;    | Boolean                    | `true`                                                                                                                         | Only allow one player playing at once.                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `playsinline`&sup3;  | Boolean                    | `true`                                                                                                                         | Allow inline playback on iOS. Note this has no effect on iPadOS.                                                                                                                                                                                                                                                                                                                                                                        |
+| `seekTime`           | Number                     | `10`                                                                                                                           | The time, in seconds, to seek when a user hits fast forward or rewind.                                                                                                                                                                                                                                                                                                                                                                  |
+| `volume`             | Number                     | `1`                                                                                                                            | A number, between 0 and 1, representing the initial volume of the player.                                                                                                                                                                                                                                                                                                                                                               |
+| `muted`              | Boolean                    | `false`                                                                                                                        | Whether to start playback muted. If the `muted` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true.                                                                                                                                                                                                                                                                                       |
+| `clickToPlay`        | Boolean                    | `true`                                                                                                                         | Click (or tap) of the video container will toggle play/pause.                                                                                                                                                                                                                                                                                                                                                                           |
+| `disableContextMenu` | Boolean                    | `true`                                                                                                                         | Disable right click menu on video to <em>help</em> as very primitive obfuscation to prevent downloads of content.                                                                                                                                                                                                                                                                                                                       |
+| `hideControls`       | Boolean                    | `true`                                                                                                                         | Hide video controls automatically after 2s of no mouse or focus movement, on control element blur (tab out), on playback start or entering fullscreen. As soon as the mouse is moved, a control element is focused or playback is paused, the controls reappear instantly.                                                                                                                                                              |
+| `resetOnEnd`         | Boolean                    | false                                                                                                                          | Reset the playback to the start once playback is complete.                                                                                                                                                                                                                                                                                                                                                                              |
+| `keyboard`           | Object                     | `{ focused: true, global: false }`                                                                                             | Enable [keyboard shortcuts](#shortcuts) for focused players only or globally                                                                                                                                                                                                                                                                                                                                                            |
+| `tooltips`           | Object                     | `{ controls: false, seek: true }`                                                                                              | `controls`: Display control labels as tooltips on `:hover` & `:focus` (by default, the labels are screen reader only). `seek`: Display a seek tooltip to indicate on click where the media would seek to.                                                                                                                                                                                                                               |
+| `duration`           | Number                     | `null`                                                                                                                         | Specify a custom duration for media.                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `displayDuration`    | Boolean                    | `true`                                                                                                                         | Displays the duration of the media on the "metadataloaded" event (on startup) in the current time display. This will only work if the `preload` attribute is not set to `none` (or is not set at all) and you choose not to display the duration (see `controls` option).                                                                                                                                                               |
+| `invertTime`         | Boolean                    | `true`                                                                                                                         | Display the current time as a countdown rather than an incremental counter.                                                                                                                                                                                                                                                                                                                                                             |
+| `toggleInvert`       | Boolean                    | `true`                                                                                                                         | Allow users to click to toggle the above.                                                                                                                                                                                                                                                                                                                                                                                               |
+| `listeners`          | Object                     | `null`                                                                                                                         | Allows binding of event listeners to the controls before the default handlers. See the `defaults.js` for available listeners. If your handler prevents default on the event (`event.preventDefault()`), the default handler will not fire.                                                                                                                                                                                              |
+| `captions`           | Object                     | `{ active: false, language: 'auto', update: false }`                                                                           | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available). 'auto' uses the browser language. `update`: Listen to changes to tracks and update menu. This is needed for some streaming libraries, but can result in non-selectable language options).                                                                                                                      |
+| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false, container: null }`                                                         | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution (`true`/`false`/`'force'`). `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls) - note this has no effect on iPadOS. `container`: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored. |
+| `ratio`              | String                     | `null`                                                                                                                         | Force an aspect ratio for all videos. The format is `'w:h'` - e.g. `'16:9'` or `'4:3'`. If this is not specified then the default for HTML5 and Vimeo is to use the native resolution of the video. As dimensions are not available from YouTube via SDK, 16:9 is forced as a sensible default.                                                                                                                                         |
+| `storage`            | Object                     | `{ enabled: true, key: 'plyr' }`                                                                                               | `enabled`: Allow use of local storage to store user settings. `key`: The key name to use.                                                                                                                                                                                                                                                                                                                                               |
+| `speed`              | Object                     | `{ selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4] }`                                                              | `selected`: The default speed for playback. `options`: The speed options to display in the UI. YouTube and Vimeo will ignore any options outside of the 0.5-2 range, so options outside of this range will be hidden automatically.                                                                                                                                                                                                     |
+| `quality`            | Object                     | `{ default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }`                                           | `default` is the default quality level (if it exists in your sources). `options` are the options to display. This is used to filter the available sources.                                                                                                                                                                                                                                                                              |
+| `loop`               | Object                     | `{ active: false }`                                                                                                            | `active`: Whether to loop the current video. If the `loop` attribute is present on a `<video>` or `<audio>` element, this will be automatically set to true This is an object to support future functionality.                                                                                                                                                                                                                          |
+| `ads`                | Object                     | `{ enabled: false, publisherId: '', tagUrl: '' }`                                                                              | `enabled`: Whether to enable advertisements. `publisherId`: Your unique [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) publisher ID. `tagUrl` is a URL for a custom VAST tag if you're not using Vi.                                                                                                                                                                                                                   |
+| `urls`               | Object                     | See source.                                                                                                                    | If you wish to override any API URLs then you can do so here. You can also set a custom download URL for the download button.                                                                                                                                                                                                                                                                                                           |
+| `vimeo`              | Object                     | `{ byline: false, portrait: false, title: false, speed: true, transparent: false }`                                            | See [Vimeo embed options](https://github.com/vimeo/player.js/#embed-options). Some are set automatically based on other config options, namely: `loop`, `autoplay`, `muted`, `gesture`, `playsinline`                                                                                                                                                                                                                                   |
+| `youtube`            | Object                     | `{ noCookie: false, rel: 0, showinfo: 0, iv_load_policy: 3, modestbranding: 1 }`                                               | See [YouTube embed options](https://developers.google.com/youtube/player_parameters#Parameters). The only custom option is `noCookie` to use an alternative to YouTube that doesn't use cookies (useful for GDPR, etc). Some are set automatically based on other config options, namely: `autoplay`, `hl`, `controls`, `disablekb`, `playsinline`, `cc_load_policy`, `cc_lang_pref`, `widget_referrer`                                 |
+| `previewThumbnails`  | Object                     | `{ enabled: false, src: '' }`                                                                                                  | `enabled`: Whether to enable the preview thumbnails (they must be generated by you). `src` must be either a string or an array of strings representing URLs for the VTT files containing the image URL(s). Learn more about [preview thumbnails](#preview-thumbnails) below.                                                                                                                                                            |
+| `mediaMetadata`      | Object                     | `{ title: '', artist: '', album: '', artwork: [] }`                                                                            | The [MediaMetadata](https://developer.mozilla.org/en-US/docs/Web/API/MediaMetadata) interface of the Media Session API allows a web page to provide rich media metadata for display in a platform UI.                                                                                                                                                                                                                                   |
+| `markers`            | Object                     | `{ enabled: false, points: [] }`                                                                                               | `enabled`: Whether to enable markers. `points` is an array of `{ time: number; label: string; }` objects where `time` represents the marker position in seconds and `label` is the HTML string to be displayed.                                                                                                                                                                                                                         |
 
-1.  Vimeo only
-2.  Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:
+1. Vimeo only
+2. Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:
 
-- https://webkit.org/blog/6784/new-video-policies-for-ios/
-- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
-- https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
+- <https://webkit.org/blog/6784/new-video-policies-for-ios/>
+- <https://developers.google.com/web/updates/2017/09/autoplay-policy-changes>
+- <https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/>
+
+3. YouTube does not support programatically toggling the native fullscreen player via it's API. This means on iOS you have two options, neither being perfect:
+
+- Use the fallback/faux fullscreen option which covers the whole viewport (this is the default)
+- Set `playsinline` to `false` and/or `fullscreen.iosNative` to `true` - either option hides the fullscreen toggle in the UI (because of the above API issue) and means iOS will play the video in it's native player.
 
 # API
 
@@ -427,7 +444,7 @@ There are methods, setters and getters on a Plyr object.
 
 The easiest way to access the Plyr object is to set the return value from your call to the constructor to a variable. For example:
 
-```javascript
+```js
 const player = new Plyr('#player', {
   /* options */
 });
@@ -435,8 +452,8 @@ const player = new Plyr('#player', {
 
 You can also access the object through any events:
 
-```javascript
-element.addEventListener('ready', event => {
+```js
+element.addEventListener('ready', (event) => {
   const player = event.detail.plyr;
 });
 ```
@@ -445,48 +462,49 @@ element.addEventListener('ready', event => {
 
 Example method use:
 
-```javascript
+```js
 player.play(); // Start playback
 player.fullscreen.enter(); // Enter fullscreen
 ```
 
-| Method                     | Parameters       | Description                                                                                                |
-| -------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
-| `play()`&sup1;             | -                | Start playback.                                                                                            |
-| `pause()`                  | -                | Pause playback.                                                                                            |
-| `togglePlay(toggle)`&sup1; | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
-| `stop()`                   | -                | Stop playback and reset to start.                                                                          |
-| `restart()`                | -                | Restart playback.                                                                                          |
-| `rewind(seekTime)`         | Number           | Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used. |
-| `forward(seekTime)`        | Number           | Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.    |
-| `increaseVolume(step)`     | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
-| `decreaseVolume(step)`     | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
-| `toggleCaptions(toggle)`   | Boolean          | Toggle captions display. If no parameter is passed, it will toggle based on current status.                |
-| `fullscreen.enter()`       | -                | Enter fullscreen. If fullscreen is not supported, a fallback "full window/viewport" is used instead.       |
-| `fullscreen.exit()`        | -                | Exit fullscreen.                                                                                           |
-| `fullscreen.toggle()`      | -                | Toggle fullscreen.                                                                                         |
-| `airplay()`                | -                | Trigger the airplay dialog on supported devices.                                                           |
-| `toggleControls(toggle)`   | Boolean          | Toggle the controls (video only). Takes optional truthy value to force it on/off.                          |
-| `on(event, function)`      | String, Function | Add an event listener for the specified event.                                                             |
-| `once(event, function)`    | String, Function | Add an event listener for the specified event once.                                                        |
-| `off(event, function)`     | String, Function | Remove an event listener for the specified event.                                                          |
-| `supports(type)`           | String           | Check support for a mime type.                                                                             |
-| `destroy()`                | -                | Destroy the instance and garbage collect any elements.                                                     |
+| Method                                                   | Parameters       | Description                                                                                                |
+| -------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
+| `play()`&sup1;                                           | -                | Start playback.                                                                                            |
+| `pause()`                                                | -                | Pause playback.                                                                                            |
+| `togglePlay(toggle)`&sup1;                               | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
+| `stop()`                                                 | -                | Stop playback and reset to start.                                                                          |
+| `restart()`                                              | -                | Restart playback.                                                                                          |
+| `rewind(seekTime)`                                       | Number           | Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used. |
+| `forward(seekTime)`                                      | Number           | Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.    |
+| `increaseVolume(step)`                                   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
+| `decreaseVolume(step)`                                   | Number           | Increase volume by the specified step. If no parameter is passed, the default step will be used.           |
+| `toggleCaptions(toggle)`                                 | Boolean          | Toggle captions display. If no parameter is passed, it will toggle based on current status.                |
+| `fullscreen.enter()`                                     | -                | Enter fullscreen. If fullscreen is not supported, a fallback "full window/viewport" is used instead.       |
+| `fullscreen.exit()`                                      | -                | Exit fullscreen.                                                                                           |
+| `fullscreen.toggle()`                                    | -                | Toggle fullscreen.                                                                                         |
+| `airplay()`                                              | -                | Trigger the airplay dialog on supported devices.                                                           |
+| `setPreviewThumbnails(source: PreviewThumbnailsOptions)` | -                | Sets the preview thumbnails for the current source.                                                        |
+| `toggleControls(toggle)`                                 | Boolean          | Toggle the controls (video only). Takes optional truthy value to force it on/off.                          |
+| `on(event, function)`                                    | String, Function | Add an event listener for the specified event.                                                             |
+| `once(event, function)`                                  | String, Function | Add an event listener for the specified event once.                                                        |
+| `off(event, function)`                                   | String, Function | Remove an event listener for the specified event.                                                          |
+| `supports(type)`                                         | String           | Check support for a mime type.                                                                             |
+| `destroy()`                                              | -                | Destroy the instance and garbage collect any elements.                                                     |
 
-1.  For HTML5 players, `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for most browsers - e.g. Chrome, Firefox, Opera, Safari and Edge [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
+1. For HTML5 players, `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) for most browsers - e.g. Chrome, Firefox, Opera, Safari and Edge [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
 
 ## Getters and Setters
 
 Example setters:
 
-```javascript
+```js
 player.volume = 0.5; // Sets volume at 50%
 player.currentTime = 10; // Seeks to 10 seconds
 ```
 
 Example getters:
 
-```javascript
+```js
 player.volume; // 0.5;
 player.currentTime; // 10
 player.fullscreen.active; // false;
@@ -512,6 +530,7 @@ player.fullscreen.active; // false;
 | `loop`               | ✓      | ✓      | Gets or sets the current loop state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                       |
 | `source`             | ✓      | ✓      | Gets or sets the current source for the player. The setter accepts an object. See [source setter](#the-source-setter) below for examples.                                                                                                                                                                                              |
 | `poster`             | ✓      | ✓      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                                                                                                                                                                               |
+| `previewThumbnails`  | ✓      | ✓      | Gets or sets the current preview thumbnail source for the player. The setter accepts a string                                                                                                                                                                                                                                          |
 | `autoplay`           | ✓      | ✓      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                           |
 | `currentTrack`       | ✓      | ✓      | Gets or sets the caption track by index. `-1` means the track is missing or captions is not active                                                                                                                                                                                                                                     |
 | `language`           | ✓      | ✓      | Gets or sets the preferred captions language for the player. The setter accepts an ISO two-letter language code. Support for the languages is dependent on the captions you include. If your captions don't have any language data, or if you have multiple tracks with the same language, you may want to use `currentTrack` instead. |
@@ -521,7 +540,7 @@ player.fullscreen.active; // false;
 | `ratio`              | ✓      | ✓      | Gets or sets the video aspect ratio. The setter accepts a string in the same format as the `ratio` option.                                                                                                                                                                                                                             |
 | `download`           | ✓      | ✓      | Gets or sets the URL for the download button. The setter accepts a string containing a valid absolute URL.                                                                                                                                                                                                                             |
 
-1.  HTML5 only
+1. HTML5 only
 
 ### The `.source` setter
 
@@ -529,7 +548,7 @@ This allows changing the player source and type on the fly.
 
 Video example:
 
-```javascript
+```js
 player.source = {
   type: 'video',
   title: 'Example title',
@@ -569,7 +588,7 @@ player.source = {
 
 Audio example:
 
-```javascript
+```js
 player.source = {
   type: 'audio',
   title: 'Example title',
@@ -588,7 +607,7 @@ player.source = {
 
 YouTube example:
 
-```javascript
+```js
 player.source = {
   type: 'video',
   sources: [
@@ -602,12 +621,12 @@ player.source = {
 
 Vimeo example
 
-```javascript
+```js
 player.source = {
   type: 'video',
   sources: [
     {
-      src: '143418951',
+      src: '76979871',
       provider: 'vimeo',
     },
   ],
@@ -625,7 +644,7 @@ _Note:_ `src` property for YouTube and Vimeo can either be the video ID or the w
 | `tracks`&sup1;            | String | An array of track objects. Each element in the array is mapped directly to a track element and any keys mapped directly to HTML attributes so as in the example above, it will render as `<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>` and similar for the French version. Booleans are converted to HTML5 value-less attributes. |
 | `previewThumbnails`&sup1; | Object | The same object like in the `previewThumbnails` constructor option. This means you can either change the thumbnails vtt via the `src` key or disable the thumbnails plugin for the next video by passing `{ enabled: false }`.                                                                                                                                                                                 |
 
-1.  HTML5 only
+1. HTML5 only
 
 # Events
 
@@ -633,8 +652,8 @@ You can listen for events on the target element you setup Plyr on (see example u
 reference to the instance, you can use the `on()` API method or `addEventListener()`. Access to the API can be obtained this way through the `event.detail.plyr`
 property. Here's an example:
 
-```javascript
-player.on('ready', event => {
+```js
+player.on('ready', (event) => {
   const instance = event.detail.plyr;
 });
 ```
@@ -743,9 +762,9 @@ Plyr supports the last 2 versions of most _modern_ browsers.
 | IE11          | ✓&sup3;         |
 | IE10          | ✓<sup>2,3</sup> |
 
-1.  Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.
-2.  Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)).
-3.  Polyfills required. See below.
+1. Mobile Safari on the iPhone forces the native player for `<video>` unless the `playsinline` attribute is present. Volume controls are also disabled as they are handled device wide.
+2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported. No native fullscreen support, fallback can be used (see [options](#options)).
+3. Polyfills required. See below.
 
 ## Polyfills
 
@@ -755,21 +774,20 @@ Plyr uses ES6 which isn't supported in all browsers quite yet. This means some f
 
 You can use the static method to check for support. For example
 
-```javascript
-const supported = Plyr.supported('video', 'html5', true);
+```js
+const supported = Plyr.supported('video', 'html5');
 ```
 
 The arguments are:
 
-- Media type (`audio` or `video`)
-- Provider (`html5`, `youtube` or `vimeo`)
-- Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
+- Media type (`'audio' | 'video'`)
+- Provider (`'html5' | 'youtube' | 'vimeo'`)
 
 ## Disable support programmatically
 
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
 
-```javascript
+```js
 {
   enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 }
@@ -781,15 +799,16 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
 
 Some awesome folks have made plugins for CMSs and Components for JavaScript frameworks:
 
-| Type      | Maintainer                                                                | Link                                                                                         |
-| --------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| WordPress | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik))            | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/)                   |
-| Angular   | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv))                     | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr)                   |
-| React     | Chintan Prajapati ([@chintan9](https://github.com/chintan9))              | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react)             |
-| Vue       | Gabe Dunn ([@redxtech](https://github.com/redxtech))                      | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr)                 |
-| 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)           |
+| Type        | Maintainer                                                                  | Link                                                                                         |
+| ----------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| WordPress   | Brandon Lavigne ([@drrobotnik](https://github.com/drrobotnik))              | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/)                   |
+| Angular     | Simon Bobrov ([@smnbbrv](https://github.com/smnbbrv))                       | [https://github.com/smnbbrv/ngx-plyr](https://github.com/smnbbrv/ngx-plyr)                   |
+| React       | Chintan Prajapati ([@chintan9](https://github.com/chintan9))                | [https://github.com/chintan9/plyr-react](https://github.com/chintan9/plyr-react)             |
+| Vue         | Gabe Dunn ([@redxtech](https://github.com/redxtech))                        | [https://github.com/redxtech/vue-plyr](https://github.com/redxtech/vue-plyr)                 |
+| 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/svelte-plyr](https://github.com/benwoodward/svelte-plyr)     |
 
 # Issues
 
@@ -833,6 +852,13 @@ 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/)
+- [NKLAV | Filmmaker](https://nklav.com)
+- [GDI.JS.ORG - Google Drive Index](https://gitlab.com/GoogleDriveIndex/Google-Drive-Index)
 
 If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
 
@@ -843,13 +869,8 @@ If you want to be added to the list, open a pull request. It'd be awesome to see
 
 # Thanks
 
-[![Fastly](https://cdn.plyr.io/static/fastly-logo.png)](https://www.fastly.com/)
-
-Massive thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
-
-[![Sentry](https://cdn.plyr.io/static/sentry-logo-black.svg)](https://sentry.io/)
-
-Massive thanks to [Sentry](https://sentry.io/) for providing the logging services for the demo site.
+- [Cloudflare](https://www.cloudflare.com/) and [Fastly](https://www.fastly.com/) for providing the CDN services.
+- [Sentry](https://sentry.io/) for error logging service on the demo website.
 
 ## Contributors
 

cspell.json

@@ -0,0 +1,36 @@
+{
+  "version": "0.2",
+  "ignorePaths": ["package.json", "dist/*", "demo/node_modules/*"],
+  "dictionaryDefinitions": [],
+  "dictionaries": ["en-gb", "softwareTerms", "html", "css", "typescript"],
+  "words": [
+    "autopause",
+    "autoplay",
+    "bote",
+    "cfda",
+    "classname",
+    "digbmx",
+    "fastly",
+    "fullscreen",
+    "gordita",
+    "loadjs",
+    "magazin",
+    "menuitemradio",
+    "noupe",
+    "otransitionend",
+    "playsinline",
+    "plyr",
+    "rutheneum",
+    "seektime",
+    "selz",
+    "sparkk",
+    "srclang",
+    "strol",
+    "stylelint",
+    "unmute",
+    "videospiele",
+    "xywh"
+  ],
+  "ignoreWords": [],
+  "import": []
+}

demo/index.html

@@ -66,53 +66,49 @@
         <h1>Pl<span>a</span>y<span>e</span>r</h1>
         <p>
           A simple, accessible and customisable media player for
-          <button type="button" class="faux-link" data-source="video">
+          <button type="button" class="link" data-source="video">
             <svg class="icon">
               <title>HTML5</title>
               <path
                 d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
-              ></path></svg
-            >Video</button
+              ></path>
+            </svg>
+            Video</button
           >,
-          <button type="button" class="faux-link" data-source="audio">
+          <button type="button" class="link" data-source="audio">
             <svg class="icon">
               <title>HTML5</title>
               <path
                 d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
-              ></path></svg
-            >Audio</button
+              ></path>
+            </svg>
+            Audio</button
           >,
-          <button type="button" class="faux-link" data-source="youtube">
+          <button type="button" class="link" data-source="youtube">
             <svg class="icon" role="presentation">
               <title>YouTube</title>
               <path
                 d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                    s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                     M6,11V5l5,3L6,11z"
-              ></path></svg
-            >YouTube
+              ></path>
+            </svg>
+            YouTube
           </button>
           and
-          <button type="button" class="faux-link" data-source="vimeo">
+          <button type="button" class="link" data-source="vimeo">
             <svg class="icon" role="presentation">
               <title>Vimeo</title>
               <path
                 d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                        C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                        c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
-              ></path></svg
-            >Vimeo
+              ></path>
+            </svg>
+            Vimeo
           </button>
         </p>
 
-        <p>
-          Premium video monetization from
-          <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
-            <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi" />
-            <span class="sr-only">ai.vi</span>
-          </a>
-        </p>
-
         <div class="call-to-action">
           <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr">
             <svg class="icon" role="presentation">
@@ -185,7 +181,10 @@
                   d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                 ></path>
               </svg>
-              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
+              <a
+                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
+                target="_blank"
+                class="link"
                 >View From A Blue Moon</a
               >
               &copy; Brainfarm
@@ -199,7 +198,7 @@
                   d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                 ></path>
               </svg>
-              <a href="http://www.kishibashi.com/" target="_blank"
+              <a href="http://www.kishibashi.com/" target="_blank" class="link"
                 >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
               >
               &copy; Kishi Bashi
@@ -223,7 +222,7 @@
           </li>
           <li class="plyr__cite plyr__cite--vimeo" hidden>
             <small>
-              <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+              <a href="https://vimeo.com/40648169" target="_blank" class="link">Toob “Wavaphon” Music Video</a>
               on&nbsp;
               <span class="color--vimeo">
                 <svg class="icon" role="presentation">
@@ -256,7 +255,7 @@
         <a
           href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
           target="_blank"
-          class="js-shr"
+          class="link js-shr"
           >tweet it</a
         >
         👍

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

@@ -4,7 +4,6 @@
 // Please see README.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
-import './tab-focus';
 import 'custom-event-polyfill';
 import 'url-polyfill';
 
@@ -13,16 +12,16 @@ import Shr from 'shr-buttons';
 
 import Plyr from '../../../src/js/plyr';
 import sources from './sources';
-import toggleClass from './toggle-class';
 
 (() => {
   const production = 'plyr.io';
+  const isProduction = window.location.host.includes(production);
 
   // Sentry for demo site (https://plyr.io) only
-  if (window.location.host === production) {
+  if (isProduction) {
     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}`)),
     });
   }
 
@@ -53,10 +52,10 @@ import toggleClass from './toggle-class';
       captions: {
         active: true,
       },
-      ads: {
-        enabled: window.location.host.includes(production),
+      /* ads: {
+        enabled: isProduction,
         publisherId: '918848828995742',
-      },
+      }, */
       previewThumbnails: {
         enabled: true,
         src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
@@ -65,6 +64,34 @@ import toggleClass from './toggle-class';
         // Prevent Vimeo blocking plyr.io demo site
         referrerPolicy: 'no-referrer',
       },
+      mediaMetadata: {
+        title: 'View From A Blue Moon',
+        album: 'Sports',
+        artist: 'Brainfarm',
+        artwork: [
+          {
+            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+            type: 'image/jpeg',
+          },
+        ],
+      },
+      markers: {
+        enabled: true,
+        points: [
+          {
+            time: 10,
+            label: 'first marker',
+          },
+          {
+            time: 40,
+            label: 'second marker',
+          },
+          {
+            time: 120,
+            label: '<strong>third</strong> marker',
+          },
+        ],
+      },
     });
 
     // Expose for tinkering in the console
@@ -79,13 +106,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) => button.parentElement.classList.toggle('active', false));
 
       // Set active on parent
-      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+      document.querySelector(`[data-source="${type}"]`).classList.toggle('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 +137,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 +150,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

@@ -1,31 +0,0 @@
-// Setup tab focus
-const container = document.getElementById('container');
-const tabClassName = 'tab-focus';
-
-// Remove class on blur
-document.addEventListener('focusout', event => {
-  if (!event.target.classList || container.contains(event.target)) {
-    return;
-  }
-
-  event.target.classList.remove(tabClassName);
-});
-
-// Add classname to tabbed elements
-document.addEventListener('keydown', event => {
-  if (event.keyCode !== 9) {
-    return;
-  }
-
-  // Delay the adding of classname until the focus has changed
-  // This event fires before the focusin event
-  setTimeout(() => {
-    const focused = document.activeElement;
-
-    if (!focused || !focused.classList || container.contains(focused)) {
-      return;
-    }
-
-    focused.classList.add(tabClassName);
-  }, 10);
-});

demo/src/js/toggle-class.js

@@ -1,5 +0,0 @@
-// Toggle class on an element
-const toggleClass = (element, className = '', toggle = false) =>
-  element && element.classList[toggle ? 'add' : 'remove'](className);
-
-export default toggleClass;

demo/src/sass/bundles/demo.scss

@@ -1,9 +1,11 @@
+@charset "UTF-8";
+
 // ==========================================================================
 // Plyr.io Demo Page
 // ==========================================================================
-@charset 'UTF-8';
 
 @import '../../../../src/sass/lib/css-vars';
+
 $css-vars-use-native: true;
 
 // Settings

demo/src/sass/bundles/error.scss

@@ -1,7 +1,8 @@
+@charset "UTF-8";
+
 // ==========================================================================
 // Plyr.io Error Page
 // ==========================================================================
-@charset 'UTF-8';
 
 // Settings
 @import '../settings/colors';

demo/src/sass/components/buttons.scss

@@ -7,8 +7,7 @@
 .button__count {
   align-items: center;
   border: 0;
-  border-radius: $border-radius-base;
-  box-shadow: 0 1px 1px rgba(#000, 0.1);
+  border-radius: $border-radius-medium;
   display: inline-flex;
   padding: ($spacing-base * 0.75);
   position: relative;
@@ -19,66 +18,72 @@
 
 // Buttons
 .button {
-  background: $color-button-background;
+  --shadow-color: 0deg 0% 20%;
+  align-items: center;
+  background-color: $color-button-background;
+  background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
+  border: 1px solid darken($color-button-background, 5);
+  box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
+    0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
   color: $color-button-text;
+  display: inline-flex;
   font-weight: $font-weight-bold;
+  gap: 0.25rem;
   padding-left: ($spacing-base * 1.25);
   padding-right: ($spacing-base * 1.25);
+  text-decoration: none;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
 
   &:hover,
   &:focus {
     background: $color-button-background-hover;
+    border-color: darken($color-button-background, 7);
 
     // Remove the underline/border
     &::after {
-      display: none;
+      display: none !important;
     }
   }
 
-  &:hover {
-    box-shadow: 0 2px 2px rgba(#000, 0.1);
-  }
-
   &:focus {
     outline: 0;
   }
 
-  &.tab-focus {
-    @include tab-focus();
+  &:focus-visible {
+    @include focus-visible($color-button-background);
   }
 
   &:active {
+    box-shadow: none;
     top: 1px;
   }
-}
 
-// Button group
-.button--with-count {
-  display: inline-flex;
-
-  .button .icon {
+  .icon {
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
     flex-shrink: 0;
   }
 }
 
 // Count bubble
 .button__count {
-  animation: fadein 0.2s ease;
+  animation: fade-in 0.2s ease;
   background: $color-button-count-background;
+  border: 1px solid $color-gray-100;
   color: $color-button-count-text;
   margin-left: ($spacing-base * 0.75);
 
   &::before {
-    border: $arrow-size solid transparent;
-    border-left-width: 0;
-    border-right-color: $color-button-count-background;
+    background-color: $color-button-count-background;
+    border: inherit;
+    border-width: 0 0 1px 1px;
     content: '';
-    height: 0;
+    display: block;
+    height: 8px;
     position: absolute;
     right: 100%;
     top: 50%;
-    transform: translateY(-50%);
-    width: 0;
+    transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
+    width: 8px;
   }
 }

demo/src/sass/components/header.scss

@@ -7,7 +7,7 @@ header {
   text-align: center;
 
   h1 span {
-    animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+    animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
     display: inline-block;
     font-weight: $font-weight-light;
     opacity: 0.5;

demo/src/sass/components/icons.scss

@@ -2,6 +2,8 @@
 // Icons
 // ==========================================================================
 
+@use 'sass:math';
+
 // Base size icon styles
 .icon {
   fill: currentColor;
@@ -19,5 +21,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-  margin-right: ($spacing-base / 2);
+  margin-right: math.div($spacing-base, 4);
 }

demo/src/sass/components/links.scss

@@ -2,15 +2,9 @@
 // Links
 // ==========================================================================
 
-// Make a <button> look like an <a>
-button.faux-link {
-  @extend a; // stylelint-disable-line
-  @include cancel-button-styles();
-}
-
-// Links
-a {
-  border-bottom: 1px dotted currentColor;
+.link {
+  align-items: center;
+  border-bottom: 1px dashed currentColor;
   color: $color-link;
   position: relative;
   text-decoration: none;
@@ -38,8 +32,8 @@ a {
     }
   }
 
-  &.tab-focus {
-    @include tab-focus();
+  &:focus-visible {
+    @include focus-visible($color-link);
   }
 
   &.no-border::after {

demo/src/sass/components/players.scss

@@ -2,10 +2,14 @@
 // Examples
 // ==========================================================================
 
+@use 'sass:math';
+
 // Example players
 .plyr {
-  border-radius: $border-radius-base;
-  box-shadow: 0 2px 15px rgba(#000, 0.1);
+  --shadow-color: 197deg 32% 65%;
+  border-radius: $border-radius-2x-large;
+  box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.36), 0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
+    0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36), -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);
   margin: $spacing-base auto;
 
   &.plyr--audio {
@@ -15,6 +19,7 @@
 
 .plyr__video-wrapper::after {
   border: 1px solid rgba(#000, 0.15);
+  border-bottom-color: rgba(#000, 0.25);
   border-radius: inherit;
   bottom: 0;
   content: '';
@@ -31,6 +36,6 @@
   color: $color-gray-500;
 
   .icon {
-    margin-right: ceil($spacing-base / 6);
+    margin-right: math.div($spacing-base, 6);
   }
 }

demo/src/sass/layout/core.scss

@@ -2,6 +2,8 @@
 // Core
 // ==========================================================================
 
+@use 'sass:math';
+
 html,
 body {
   display: flex;
@@ -35,6 +37,7 @@ main {
 aside {
   align-items: center;
   background: #fff;
+  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -46,7 +49,7 @@ aside {
 
   .icon {
     fill: $color-twitter;
-    margin-right: ($spacing-base / 2);
+    margin-right: math.div($spacing-base, 2);
   }
 
   p {
@@ -56,8 +59,8 @@ aside {
   a {
     color: $color-twitter;
 
-    &.tab-focus {
-      @include tab-focus($color-twitter);
+    &:focus-visible {
+      @include focus-visible($color-twitter);
     }
   }
 }

demo/src/sass/lib/animation.scss

@@ -3,23 +3,26 @@
 // ==========================================================================
 
 // Fade
-@keyframes fadein {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
 }
 
-@keyframes shrinkHide {
+@keyframes shrink-hide {
   0% {
     opacity: 0.5;
     width: 38px;
   }
+
   20% {
     width: 45px;
   }
+
   100% {
     opacity: 0;
     width: 0;

demo/src/sass/lib/fontface.scss

@@ -4,7 +4,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-light;
   src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
@@ -13,7 +13,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-regular;
   src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
@@ -22,7 +22,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-medium;
   src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
@@ -31,7 +31,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-bold;
   src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
@@ -40,7 +40,7 @@
 
 @font-face {
   font-display: swap;
-  font-family: 'Gordita';
+  font-family: Gordita;
   font-style: normal;
   font-weight: $font-weight-black;
   src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),

demo/src/sass/lib/mixins.scss

@@ -2,37 +2,20 @@
 // Mixins
 // ==========================================================================
 
-// Convert a <button> into an <a>
-// ---------------------------------------
-@mixin cancel-button-styles() {
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  cursor: pointer;
-  font: inherit;
-  line-height: $line-height-base;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  text-align: inherit;
-  text-shadow: inherit;
-  -moz-user-select: text; // stylelint-disable-line
-  vertical-align: baseline;
-  width: auto;
-}
+@use 'sass:math';
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin tab-focus($color: $tab-focus-default-color) {
-  box-shadow: 0 0 0 3px rgba($color, 0.35);
-  outline: 0;
+@mixin focus-visible($color: $focus-default-color) {
+  outline: 2px dashed $color;
+  outline-offset: 2px;
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
 @function calculate-rem($size) {
-  $rem: $size / 16;
+  $rem: math.div($size, 16);
   @return #{$rem}rem;
 }
 

demo/src/sass/lib/normalize.scss

@@ -11,8 +11,7 @@
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -89,7 +88,7 @@ hr {
    */
 
 pre {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 
@@ -103,7 +102,7 @@ pre {
 
 a {
   background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
+  text-decoration-skip: objects; /* 2 */
 }
 
 /**
@@ -112,7 +111,7 @@ a {
    */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
+  border-bottom: 0; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
 }
@@ -281,7 +280,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button; /* 2 */
+  appearance: button; /* 2 */
 }
 
 /**
@@ -375,7 +374,7 @@ textarea {
    */
 
 [type='search'] {
-  -webkit-appearance: textfield; /* 1 */
+  appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
@@ -385,7 +384,7 @@ textarea {
 
 [type='search']::-webkit-search-cancel-button,
 [type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -394,7 +393,7 @@ textarea {
    */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 

demo/src/sass/lib/reset.scss

@@ -9,3 +9,7 @@
 *::before {
   box-sizing: border-box;
 }
+
+button {
+  all: unset;
+}

demo/src/sass/settings/colors.scss

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 // Grayscale
-$color-gray-900: hsl(210, 15%, 16%);
+$color-gray-900: hsl(210deg 15% 16%);
 $color-gray-800: lighten($color-gray-900, 9%);
 $color-gray-700: lighten($color-gray-800, 9%);
 $color-gray-600: lighten($color-gray-700, 9%);
@@ -15,7 +15,7 @@ $color-gray-100: lighten($color-gray-200, 9%);
 $color-gray-50: lighten($color-gray-100, 9%);
 
 // Branding
-$color-brand-primary: hsl(198, 100%, 50%);
+$color-brand-primary: hsl(198deg 100% 50%);
 
 // Text
 $color-text: $color-gray-700;
@@ -28,15 +28,15 @@ $color-twitter: #4baaf4;
 $color-link: $color-brand-primary;
 
 // Background
-$color-background-from: hsl(198, 100%, 94%);
-$color-background-to: hsl(198, 100%, 98%);
+$color-background-from: hsl(198deg 100% 94%);
+$color-background-to: hsl(198deg 100% 98%);
 
 // Buttons
 $color-button-background: $color-brand-primary;
 $color-button-text: #fff;
-$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-background-hover: hsl(198deg 100% 55%);
 $color-button-count-background: #fff;
 $color-button-count-text: $color-gray-600;
 
 // Focus
-$tab-focus-default-color: #fff;
+$focus-default-color: $color-brand-primary;

demo/src/sass/settings/cosmetic.scss

@@ -6,7 +6,9 @@
 $arrow-size: 5px;
 
 // Radii
-$border-radius-base: 4px;
+$border-radius-small: 4px;
+$border-radius-medium: 6px;
+$border-radius-2x-large: 12px;
 
 // 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/src/sass/settings/type.scss

@@ -4,18 +4,14 @@
 
 $font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
   'Segoe UI Symbol';
-
 $font-size-base: 15;
 $font-size-small: 13;
 $font-size-large: 18;
 $font-size-h1: 64;
-
 $font-weight-light: 300;
 $font-weight-regular: 400;
 $font-weight-medium: 500;
 $font-weight-bold: 600;
 $font-weight-black: 900;
-
 $line-height-base: 1.75;
-
 $letter-spacing-headings: -0.025em;

demo/src/sass/type/base.scss

@@ -8,8 +8,9 @@ html {
 }
 
 body {
-  @include font-smoothing();
+  @include font-smoothing;
   @include font-size($font-size-base);
+
   color: $color-text;
   font-family: $font-sans-serif;
   font-weight: $font-weight-medium;
@@ -30,5 +31,6 @@ small {
 
 small {
   @include font-size($font-size-small);
+
   display: block;
 }

demo/src/sass/type/headings.scss

@@ -4,6 +4,7 @@
 
 h1 {
   @include font-size($font-size-h1);
+
   color: $color-headings;
   font-weight: $font-weight-bold;
   letter-spacing: $letter-spacing-headings;

demo/src/sass/utilities/focus.scss

@@ -0,0 +1,4 @@
+*:focus-visible {
+  outline: 2px dotted $color-brand-primary;
+  outline-offset: 2px;
+}

demo/yarn.lock

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "3.6.2",
+  "version": "3.7.8",
   "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "https://plyr.io",
   "author": "Sam Potts <sam@potts.es>",
@@ -31,70 +31,71 @@
   "browserslist": "> 1%",
   "scripts": {
     "build": "gulp build",
-    "lint": "eslint src/js && npm run-script remark",
-    "lint:fix": "eslint --fix src/js",
+    "lint": "eslint src/js && npm run remark && stylelint **/*.scss",
+    "lint:fix": "eslint --fix src/js && stylelint **/*.scss --fix",
     "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}\""
+    "deploy": "npm run lint && gulp version && gulp build && gulp deploy",
+    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\"",
+    "spellcheck": "cspell \"**/*.{js,md,scss,json}\" --no-must-find-files",
+    "start": "gulp"
   },
   "devDependencies": {
-    "ansi-colors": "^4.1.1",
-    "autoprefixer": "^9.7.6",
-    "aws-sdk": "^2.668.0",
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/preset-env": "^7.20.2",
+    "@sampotts/eslint-config": "1.1.7",
+    "autoprefixer": "^10.4.13",
+    "aws-sdk": "^2.1256.0",
     "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.26.7",
-    "del": "^5.1.0",
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb-base": "^14.1.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
-    "fancy-log": "^1.3.3",
-    "fastly-purge": "^1.0.1",
+    "browser-sync": "^2.27.10",
+    "colorette": "2.0.19",
+    "cspell": "^6.14.2",
+    "cssnano": "^5.1.14",
+    "del": "^6.1.1",
+    "eslint": "^7.23.0",
+    "fancy-log": "^2.0.0",
     "git-branch": "^2.0.1",
     "gulp": "^4.0.2",
-    "gulp-awspublish": "^4.1.1",
+    "gulp-awspublish": "^6.0.2",
     "gulp-better-rollup": "^4.0.1",
-    "gulp-filter": "^6.0.0",
+    "gulp-filter": "^7.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.1",
     "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-svgstore": "^7.0.1",
-    "gulp-terser": "^1.2.0",
-    "postcss-clean": "^1.1.0",
-    "postcss-custom-properties": "^9.1.1",
-    "prettier-eslint": "^9.0.1",
+    "gulp-replace": "^1.1.3",
+    "gulp-sass": "^5.1.0",
+    "gulp-size": "^4.0.1",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-svgstore": "^9.0.0",
+    "gulp-terser": "^2.1.0",
+    "postcss": "^8.4.19",
+    "postcss-custom-properties": "^12.1.9",
+    "postcss-scss": "^4.0.5",
+    "prettier-eslint": "^12.0.0",
     "prettier-stylelint": "^0.4.2",
-    "remark-cli": "^8.0.0",
-    "remark-validate-links": "^10.0.0",
-    "rollup": "^2.7.6",
+    "remark-cli": "^11.0.0",
+    "remark-validate-links": "^12.1.0",
+    "rollup": "^3.3.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "stylelint": "^13.3.3",
-    "stylelint-config-prettier": "^8.0.1",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-sass-guidelines": "^7.0.0",
-    "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.17.1",
-    "stylelint-selector-bem-pattern": "^2.1.0",
-    "through2": "^3.0.1"
+    "sass": "^1.56.1",
+    "stylelint": "^14.15.0",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-selector-bem-pattern": "^2.1.1"
   },
   "dependencies": {
-    "core-js": "^3.6.5",
+    "core-js": "^3.26.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"
   }
 }

plyr.code-workspace

@@ -12,7 +12,9 @@
 
     // Linting
     "stylelint.enable": true,
+    "stylelint.validate": ["css", "scss"],
     "css.validate": false,
+    "less.validate": false,
     "scss.validate": false,
     "javascript.validate.enable": false,
 

src/js/captions.js

@@ -47,6 +47,7 @@ const captions = {
     // Inject the container
     if (!is.element(this.elements.captions)) {
       this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
+      this.elements.captions.setAttribute('dir', 'auto');
 
       insertAfter(this.elements.captions, this.elements.wrapper);
     }
@@ -56,7 +57,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 +67,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 +85,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 +120,13 @@ const captions = {
     const tracks = captions.getTracks.call(this, true);
     // Get the wanted language
     const { active, language, meta, currentTrackNode } = this.captions;
-    const languageExists = Boolean(tracks.find(track => track.language === language));
+    const languageExists = Boolean(tracks.find((track) => track.language === language));
 
     // Handle tracks (add event listener and "pseudo"-default)
     if (this.isHTML5 && this.isVideo) {
       tracks
-        .filter(track => !meta.get(track))
-        .forEach(track => {
+        .filter((track) => !meta.get(track))
+        .forEach((track) => {
           this.debug.log('Track added', track);
 
           // Attempt to store if the original dom element was "default"
@@ -154,7 +155,9 @@ const captions = {
     }
 
     // Enable or disable captions based on track length
-    toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
+    if (this.elements) {
+      toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
+    }
 
     // Update available languages in list
     if (
@@ -309,19 +312,19 @@ const captions = {
     // For HTML5, use cache instead of current tracks when it exists (if captions.update is false)
     // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
     return tracks
-      .filter(track => !this.isHTML5 || update || this.captions.meta.has(track))
-      .filter(track => ['captions', 'subtitles'].includes(track.kind));
+      .filter((track) => !this.isHTML5 || update || this.captions.meta.has(track))
+      .filter((track) => ['captions', 'subtitles'].includes(track.kind));
   },
 
   // Match tracks based on languages and get the first
   findTrack(languages, force = false) {
     const tracks = captions.getTracks.call(this);
-    const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default);
+    const sortIsDefault = (track) => Number((this.captions.meta.get(track) || {}).default);
     const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
     let track;
 
-    languages.every(language => {
-      track = sorted.find(t => t.language === language);
+    languages.every((language) => {
+      track = sorted.find((t) => t.language === language);
       return !track; // Break iteration if there is a match
     });
 
@@ -383,12 +386,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

@@ -18,8 +18,7 @@ const defaults = {
   // Only allow one media playing at once (vimeo only)
   autopause: true,
 
-  // Allow inline playback on iOS (this effects YouTube/Vimeo - HTML5 requires the attribute present)
-  // TODO: Remove iosNative fullscreen option in favour of this (logic needs work)
+  // Allow inline playback on iOS
   playsinline: true,
 
   // Default time to skip when rewind/fast forward
@@ -61,7 +60,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.7.8/plyr.svg',
 
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -200,7 +199,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',
@@ -350,9 +349,9 @@ const defaults = {
     hover: 'plyr--hover',
     tooltip: 'plyr__tooltip',
     cues: 'plyr__cues',
+    marker: 'plyr__progress__marker',
     hidden: 'plyr__sr-only',
     hideControls: 'plyr--hide-controls',
-    isIos: 'plyr--is-ios',
     isTouch: 'plyr--is-touch',
     uiSupported: 'plyr--full-ui',
     noTransition: 'plyr--no-transition',
@@ -380,7 +379,6 @@ const defaults = {
       supported: 'plyr--airplay-supported',
       active: 'plyr--airplay-active',
     },
-    tabFocus: 'plyr__tab-focus',
     previewThumbnails: {
       // Tooltip thumbs
       thumbContainer: 'plyr__preview-thumb',
@@ -398,6 +396,7 @@ const defaults = {
     embed: {
       provider: 'data-plyr-provider',
       id: 'data-plyr-embed-id',
+      hash: 'data-plyr-embed-hash',
     },
   },
 
@@ -422,20 +421,37 @@ 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
+  },
+
+  // Media Metadata
+  mediaMetadata: {
+    title: '',
+    artist: '',
+    album: '',
+    artwork: [],
+  },
+
+  // Markers
+  markers: {
+    enabled: false,
+    points: [],
   },
 };
 

src/js/controls.js

@@ -38,7 +38,8 @@ const controls = {
   // Get icon URL
   getIconUrl() {
     const url = new URL(this.config.iconUrl, window.location);
-    const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody);
+    const host = window.location.host ? window.location.host : window.top.location.host;
+    const cors = url.host !== host || (browser.isIE && !window.svg4everybody);
 
     return {
       url: this.config.iconUrl,
@@ -179,7 +180,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 +194,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}`,
         });
@@ -382,6 +383,7 @@ const controls = {
       extend(attributes, {
         class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
         'aria-label': i18n.get(type, this.config),
+        role: 'timer',
       }),
       '00:00',
     );
@@ -401,9 +403,9 @@ const controls = {
       this,
       menuItem,
       'keydown keyup',
-      event => {
+      (event) => {
         // We only care about space and ⬆️ ⬇️️ ➡️
-        if (![32, 38, 39, 40].includes(event.which)) {
+        if (![' ', 'ArrowUp', 'ArrowDown', 'ArrowRight'].includes(event.key)) {
           return;
         }
 
@@ -419,13 +421,13 @@ const controls = {
         const isRadioButton = matches(menuItem, '[role="menuitemradio"]');
 
         // Show the respective menu
-        if (!isRadioButton && [32, 39].includes(event.which)) {
+        if (!isRadioButton && [' ', 'ArrowRight'].includes(event.key)) {
           controls.showMenuPanel.call(this, type, true);
         } else {
           let target;
 
-          if (event.which !== 32) {
-            if (event.which === 40 || (isRadioButton && event.which === 39)) {
+          if (event.key !== ' ') {
+            if (event.key === 'ArrowDown' || (isRadioButton && event.key === 'ArrowRight')) {
               target = menuItem.nextElementSibling;
 
               if (!is.element(target)) {
@@ -448,10 +450,8 @@ 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 => {
-      if (event.which !== 13) {
-        return;
-      }
+    on.call(this, menuItem, 'keyup', (event) => {
+      if (event.key !== 'Return') return;
 
       controls.focusFirstMenuItem.call(this, null, true);
     });
@@ -483,7 +483,7 @@ const controls = {
 
     menuItem.appendChild(flex);
 
-    // Replicate radio button behaviour
+    // Replicate radio button behavior
     Object.defineProperty(menuItem, 'checked', {
       enumerable: true,
       get() {
@@ -493,8 +493,8 @@ const controls = {
         // Ensure exclusivity
         if (check) {
           Array.from(menuItem.parentNode.children)
-            .filter(node => matches(node, '[role="menuitemradio"]'))
-            .forEach(node => node.setAttribute('aria-checked', 'false'));
+            .filter((node) => matches(node, '[role="menuitemradio"]'))
+            .forEach((node) => node.setAttribute('aria-checked', 'false'));
         }
 
         menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
@@ -504,8 +504,8 @@ const controls = {
     this.listeners.bind(
       menuItem,
       'click keyup',
-      event => {
-        if (is.keyboardEvent(event) && event.which !== 32) {
+      (event) => {
+        if (is.keyboardEvent(event) && event.key !== ' ') {
           return;
         }
 
@@ -677,7 +677,7 @@ const controls = {
     }
 
     // WebKit only
-    if (!browser.isWebkit) {
+    if (!browser.isWebKit && !browser.isIPadOS) {
       return;
     }
 
@@ -697,8 +697,9 @@ const controls = {
       return;
     }
 
+    const tipElement = this.elements.display.seekTooltip;
     const visible = `${this.config.classNames.tooltip}--visible`;
-    const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
+    const toggle = (show) => toggleClass(tipElement, visible, show);
 
     // Hide on touch
     if (this.touch) {
@@ -712,8 +713,8 @@ const controls = {
 
     if (is.event(event)) {
       percent = (100 / clientRect.width) * (event.pageX - clientRect.left);
-    } else if (hasClass(this.elements.display.seekTooltip, visible)) {
-      percent = parseFloat(this.elements.display.seekTooltip.style.left, 10);
+    } else if (hasClass(tipElement, visible)) {
+      percent = parseFloat(tipElement.style.left, 10);
     } else {
       return;
     }
@@ -725,11 +726,21 @@ const controls = {
       percent = 100;
     }
 
+    const time = (this.duration / 100) * percent;
+
     // Display the time a click would seek to
-    controls.updateTimeDisplay.call(this, this.elements.display.seekTooltip, (this.duration / 100) * percent);
+    tipElement.innerText = controls.formatTime(time);
+
+    // Get marker point for time
+    const point = this.config.markers?.points?.find(({ time: t }) => t === Math.round(time));
+
+    // Append the point label to the tooltip
+    if (point) {
+      tipElement.insertAdjacentHTML('afterbegin', `${point.label}<br>`);
+    }
 
     // Set position
-    this.elements.display.seekTooltip.style.left = `${percent}%`;
+    tipElement.style.left = `${percent}%`;
 
     // Show/hide the tooltip
     // If the event is a moues in/out and percentage is inside bounds
@@ -795,6 +806,10 @@ const controls = {
       controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
     }
 
+    if (this.config.markers.enabled) {
+      controls.setMarkers.call(this);
+    }
+
     // Update the tooltip (if visible)
     controls.updateSeekTooltip.call(this);
   },
@@ -894,7 +909,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 +928,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 +944,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 +1067,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 +1085,7 @@ const controls = {
     }
 
     // Create items
-    this.options.speed.forEach(speed => {
+    this.options.speed.forEach((speed) => {
       controls.createMenuItem.call(this, {
         value: speed,
         list,
@@ -1085,13 +1100,13 @@ 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);
   },
 
   // Focus the first menu item in a given (or visible) menu
-  focusFirstMenuItem(pane, tabFocus = false) {
+  focusFirstMenuItem(pane, focusVisible = false) {
     if (this.elements.settings.popup.hidden) {
       return;
     }
@@ -1099,12 +1114,12 @@ 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"]');
 
-    setFocus.call(this, firstItem, tabFocus);
+    setFocus.call(this, firstItem, focusVisible);
   },
 
   // Show/hide menu
@@ -1123,7 +1138,7 @@ const controls = {
 
     if (is.boolean(input)) {
       show = input;
-    } else if (is.keyboardEvent(input) && input.which === 27) {
+    } else if (is.keyboardEvent(input) && input.key === 'Escape') {
       show = false;
     } else if (is.event(input)) {
       // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
@@ -1181,7 +1196,7 @@ const controls = {
   },
 
   // Show a panel in the menu
-  showMenuPanel(type = '', tabFocus = false) {
+  showMenuPanel(type = '', focusVisible = false) {
     const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
 
     // Nothing to show, bail
@@ -1191,7 +1206,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 +1218,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;
@@ -1232,7 +1247,7 @@ const controls = {
     toggleHidden(target, false);
 
     // Focus the first item
-    controls.focusFirstMenuItem.call(this, target, tabFocus);
+    controls.focusFirstMenuItem.call(this, target, focusVisible);
   },
 
   // Set the download URL
@@ -1275,7 +1290,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));
@@ -1371,7 +1386,7 @@ const controls = {
         // Volume range control
         // Ignored on iOS as it's handled globally
         // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-        if (control === 'volume' && !browser.isIos) {
+        if (control === 'volume' && !browser.isIos && !browser.isIPadOS) {
           // Set the attributes
           const attributes = {
             max: 1,
@@ -1437,7 +1452,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,11 +1525,8 @@ const controls = {
             this,
             pane,
             'keydown',
-            event => {
-              // We only care about <-
-              if (event.which !== 37) {
-                return;
-              }
+            (event) => {
+              if (event.key !== 'ArrowLeft') return;
 
               // Prevent seek
               event.preventDefault();
@@ -1661,7 +1673,7 @@ const controls = {
     }
 
     // Replace props with their value
-    const replace = input => {
+    const replace = (input) => {
       let result = input;
 
       Object.entries(props).forEach(([key, value]) => {
@@ -1702,15 +1714,19 @@ 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;
+        button.setAttribute('aria-pressed', 'false');
+
         Object.defineProperty(button, 'pressed', {
+          configurable: true,
           enumerable: true,
           get() {
             return hasClass(button, className);
           },
           set(pressed = false) {
             toggleClass(button, className, pressed);
+            button.setAttribute('aria-pressed', pressed ? 'true' : 'false');
           },
         });
       };
@@ -1718,11 +1734,9 @@ const controls = {
       // Toggle classname when pressed property is set
       Object.values(this.elements.buttons)
         .filter(Boolean)
-        .forEach(button => {
+        .forEach((button) => {
           if (is.array(button) || is.nodeList(button)) {
-            Array.from(button)
-              .filter(Boolean)
-              .forEach(addProperty);
+            Array.from(button).filter(Boolean).forEach(addProperty);
           } else {
             addProperty(button);
           }
@@ -1740,12 +1754,100 @@ 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);
       });
     }
   },
+
+  // Set media metadata
+  setMediaMetadata() {
+    try {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.metadata = new window.MediaMetadata({
+          title: this.config.mediaMetadata.title,
+          artist: this.config.mediaMetadata.artist,
+          album: this.config.mediaMetadata.album,
+          artwork: this.config.mediaMetadata.artwork,
+        });
+      }
+    } catch (_) {
+      // Do nothing
+    }
+  },
+
+  // Add markers
+  setMarkers() {
+    if (!this.duration || this.elements.markers) return;
+
+    // Get valid points
+    const points = this.config.markers?.points?.filter(({ time }) => time > 0 && time < this.duration);
+    if (!points?.length) return;
+
+    const containerFragment = document.createDocumentFragment();
+    const pointsFragment = document.createDocumentFragment();
+    let tipElement = null;
+    const tipVisible = `${this.config.classNames.tooltip}--visible`;
+    const toggleTip = (show) => toggleClass(tipElement, tipVisible, show);
+
+    // Inject markers to progress container
+    points.forEach((point) => {
+      const markerElement = createElement(
+        'span',
+        {
+          class: this.config.classNames.marker,
+        },
+        '',
+      );
+
+      const left = `${(point.time / this.duration) * 100}%`;
+
+      if (tipElement) {
+        // Show on hover
+        markerElement.addEventListener('mouseenter', () => {
+          if (point.label) return;
+          tipElement.style.left = left;
+          tipElement.innerHTML = point.label;
+          toggleTip(true);
+        });
+
+        // Hide on leave
+        markerElement.addEventListener('mouseleave', () => {
+          toggleTip(false);
+        });
+      }
+
+      markerElement.addEventListener('click', () => {
+        this.currentTime = point.time;
+      });
+
+      markerElement.style.left = left;
+      pointsFragment.appendChild(markerElement);
+    });
+
+    containerFragment.appendChild(pointsFragment);
+
+    // Inject a tooltip if needed
+    if (!this.config.tooltips.seek) {
+      tipElement = createElement(
+        'span',
+        {
+          class: this.config.classNames.tooltip,
+        },
+        '',
+      );
+
+      containerFragment.appendChild(tipElement);
+    }
+
+    this.elements.markers = {
+      points: pointsFragment,
+      tip: tipElement,
+    };
+
+    this.elements.progress.appendChild(containerFragment);
+  },
 };
 
 export default controls;

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,24 +43,24 @@ 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();
   }
 
   // Determine if native supported
-  static get native() {
+  static get nativeSupported() {
     return !!(
       document.fullscreenEnabled ||
       document.webkitFullscreenEnabled ||
@@ -70,22 +70,20 @@ class Fullscreen {
   }
 
   // If we're actually using native
-  get usingNative() {
-    return Fullscreen.native && !this.forceFallback;
+  get useNative() {
+    return Fullscreen.nativeSupported && !this.forceFallback;
   }
 
   // Get the prefix for handlers
   static get prefix() {
     // No prefix
-    if (is.function(document.exitFullscreen)) {
-      return '';
-    }
+    if (is.function(document.exitFullscreen)) return '';
 
     // Check for fullscreen support by vendor prefix
     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;
@@ -101,28 +99,36 @@ class Fullscreen {
     return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
   }
 
-  // Determine if fullscreen is enabled
-  get enabled() {
-    return (
-      (Fullscreen.native || this.player.config.fullscreen.fallback) &&
-      this.player.config.fullscreen.enabled &&
-      this.player.supported.ui &&
-      this.player.isVideo
-    );
+  // Determine if fullscreen is supported
+  get supported() {
+    return [
+      // Fullscreen is enabled in config
+      this.player.config.fullscreen.enabled,
+      // Must be a video
+      this.player.isVideo,
+      // Either native is supported or fallback enabled
+      Fullscreen.nativeSupported || this.player.config.fullscreen.fallback,
+      // YouTube has no way to trigger fullscreen, so on devices with no native support, playsinline
+      // must be enabled and iosNative fullscreen must be disabled to offer the fullscreen fallback
+      !this.player.isYouTube ||
+        Fullscreen.nativeSupported ||
+        !browser.isIos ||
+        (this.player.config.playsinline && !this.player.config.fullscreen.iosNative),
+    ].every(Boolean);
   }
 
   // Get active state
   get active() {
-    if (!this.enabled) {
-      return false;
-    }
+    if (!this.supported) return false;
 
     // Fallback using classname
-    if (!Fullscreen.native || this.forceFallback) {
+    if (!Fullscreen.nativeSupported || this.forceFallback) {
       return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
     }
 
-    const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
+    const element = !this.prefix
+      ? this.target.getRootNode().fullscreenElement
+      : this.target.getRootNode()[`${this.prefix}${this.property}Element`];
 
     return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
   }
@@ -131,13 +137,11 @@ class Fullscreen {
   get target() {
     return browser.isIos && this.player.config.fullscreen.iosNative
       ? this.player.media
-      : this.player.elements.fullscreen || this.player.elements.container;
+      : this.player.elements.fullscreen ?? this.player.elements.container;
   }
 
-  onChange() {
-    if (!this.enabled) {
-      return;
-    }
+  onChange = () => {
+    if (!this.supported) return;
 
     // Update toggle button
     const button = this.player.elements.buttons.fullscreen;
@@ -145,16 +149,18 @@ 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 = {
-        x: window.scrollX || 0,
-        y: window.scrollY || 0,
+        x: window.scrollX ?? 0,
+        y: window.scrollY ?? 0,
       };
     } else {
       window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
@@ -182,28 +188,23 @@ class Fullscreen {
 
       if (toggle) {
         this.cleanupViewport = !hasProperty;
-
-        if (!hasProperty) {
-          viewport.content += `,${property}`;
-        }
+        if (!hasProperty) viewport.content += `,${property}`;
       } 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) {
-    // Bail if iOS, not active, not the tab key
-    if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
-      return;
-    }
+  trapFocus = (event) => {
+    // Bail if iOS/iPadOS, not active, not the tab key
+    if (browser.isIos || browser.isIPadOS || !this.active || event.key !== 'Tab') return;
 
     // Get the current focused element
     const focused = document.activeElement;
@@ -220,20 +221,16 @@ class Fullscreen {
       last.focus();
       event.preventDefault();
     }
-  }
+  };
 
   // Update UI
-  update() {
-    if (this.enabled) {
+  update = () => {
+    if (this.supported) {
       let mode;
 
-      if (this.forceFallback) {
-        mode = 'Fallback (forced)';
-      } else if (Fullscreen.native) {
-        mode = 'Native';
-      } else {
-        mode = 'Fallback';
-      }
+      if (this.forceFallback) mode = 'Fallback (forced)';
+      else if (Fullscreen.nativeSupported) mode = 'Native';
+      else mode = 'Fallback';
 
       this.player.debug.log(`${mode} fullscreen enabled`);
     } else {
@@ -241,38 +238,42 @@ class Fullscreen {
     }
 
     // Add styling hook to show button
-    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
-  }
+    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.supported);
+  };
 
   // Make an element fullscreen
-  enter() {
-    if (!this.enabled) {
-      return;
-    }
+  enter = () => {
+    if (!this.supported) return;
 
     // iOS native fullscreen doesn't need the request step
     if (browser.isIos && this.player.config.fullscreen.iosNative) {
-      this.target.webkitEnterFullscreen();
-    } else if (!Fullscreen.native || this.forceFallback) {
+      if (this.player.isVimeo) {
+        this.player.embed.requestFullscreen();
+      } else {
+        this.target.webkitEnterFullscreen();
+      }
+    } else if (!Fullscreen.nativeSupported || this.forceFallback) {
       this.toggleFallback(true);
     } else if (!this.prefix) {
       this.target.requestFullscreen({ navigationUI: 'hide' });
     } else if (!is.empty(this.prefix)) {
       this.target[`${this.prefix}Request${this.property}`]();
     }
-  }
+  };
 
   // Bail from fullscreen
-  exit() {
-    if (!this.enabled) {
-      return;
-    }
+  exit = () => {
+    if (!this.supported) return;
 
     // iOS native fullscreen
     if (browser.isIos && this.player.config.fullscreen.iosNative) {
-      this.target.webkitExitFullscreen();
+      if (this.player.isVimeo) {
+        this.player.embed.exitFullscreen();
+      } else {
+        this.target.webkitEnterFullscreen();
+      }
       silencePromise(this.player.play());
-    } else if (!Fullscreen.native || this.forceFallback) {
+    } else if (!Fullscreen.nativeSupported || this.forceFallback) {
       this.toggleFallback(false);
     } else if (!this.prefix) {
       (document.cancelFullScreen || document.exitFullscreen).call(document);
@@ -280,16 +281,13 @@ class Fullscreen {
       const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
       document[`${this.prefix}${action}${this.property}`]();
     }
-  }
+  };
 
   // Toggle state
-  toggle() {
-    if (!this.active) {
-      this.enter();
-    } else {
-      this.exit();
-    }
-  }
+  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'));
@@ -73,14 +73,14 @@ const html5 = {
           return;
         }
 
-        // If we're using an an external handler...
+        // If we're using an external handler...
         if (player.config.quality.forced && is.function(player.config.quality.onChange)) {
           player.config.quality.onChange(input);
         } else {
           // 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) {
@@ -21,7 +21,6 @@ class Listeners {
 
     this.handleKey = this.handleKey.bind(this);
     this.toggleMenu = this.toggleMenu.bind(this);
-    this.setTabFocus = this.setTabFocus.bind(this);
     this.firstTouch = this.firstTouch.bind(this);
   }
 
@@ -29,25 +28,25 @@ class Listeners {
   handleKey(event) {
     const { player } = this;
     const { elements } = player;
-    const code = event.keyCode ? event.keyCode : event.which;
-    const pressed = event.type === 'keydown';
-    const repeat = pressed && code === this.lastKey;
+    const { key, type, altKey, ctrlKey, metaKey, shiftKey } = event;
+    const pressed = type === 'keydown';
+    const repeat = pressed && key === this.lastKey;
 
     // Bail if a modifier key is set
-    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+    if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
 
     // If the event is bubbled from the media element
-    // Firefox doesn't get the keycode for whatever reason
-    if (!is.number(code)) {
+    // Firefox doesn't get the key for whatever reason
+    if (!key) {
       return;
     }
 
-    // Seek by the number keys
-    const seekByKey = () => {
+    // Seek by increment
+    const seekByIncrement = (increment) => {
       // Divide the max duration into 10th's and times by the number value
-      player.currentTime = (player.duration / 10) * (code - 48);
+      player.currentTime = (player.duration / 10) * increment;
     };
 
     // Handle the key on keydown
@@ -65,113 +64,114 @@ class Listeners {
           return;
         }
 
-        if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
+        if (event.key === ' ' && matches(focused, 'button, [role^="menuitem"]')) {
           return;
         }
       }
 
-      // Which keycodes should we prevent default
-      const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
+      // Which keys should we prevent default
+      const preventDefault = [
+        ' ',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowRight',
+        'ArrowDown',
 
-      // If the code is found prevent default (e.g. prevent scrolling for arrows)
-      if (preventDefault.includes(code)) {
+        '0',
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6',
+        '7',
+        '8',
+        '9',
+
+        'c',
+        'f',
+        'k',
+        'l',
+        'm',
+      ];
+
+      // If the key is found prevent default (e.g. prevent scrolling for arrows)
+      if (preventDefault.includes(key)) {
         event.preventDefault();
         event.stopPropagation();
       }
 
-      switch (code) {
-        case 48:
-        case 49:
-        case 50:
-        case 51:
-        case 52:
-        case 53:
-        case 54:
-        case 55:
-        case 56:
-        case 57:
-          // 0-9
+      switch (key) {
+        case '0':
+        case '1':
+        case '2':
+        case '3':
+        case '4':
+        case '5':
+        case '6':
+        case '7':
+        case '8':
+        case '9':
           if (!repeat) {
-            seekByKey();
+            seekByIncrement(parseInt(key, 10));
           }
           break;
 
-        case 32:
-        case 75:
-          // Space and K key
+        case ' ':
+        case 'k':
           if (!repeat) {
             silencePromise(player.togglePlay());
           }
           break;
 
-        case 38:
-          // Arrow up
+        case 'ArrowUp':
           player.increaseVolume(0.1);
           break;
 
-        case 40:
-          // Arrow down
+        case 'ArrowDown':
           player.decreaseVolume(0.1);
           break;
 
-        case 77:
-          // M key
+        case 'm':
           if (!repeat) {
             player.muted = !player.muted;
           }
           break;
 
-        case 39:
-          // Arrow forward
+        case 'ArrowRight':
           player.forward();
           break;
 
-        case 37:
-          // Arrow back
+        case 'ArrowLeft':
           player.rewind();
           break;
 
-        case 70:
-          // F key
+        case 'f':
           player.fullscreen.toggle();
           break;
 
-        case 67:
-          // C key
+        case 'c':
           if (!repeat) {
             player.toggleCaptions();
           }
           break;
 
-        case 76:
-          // L key
+        case 'l':
           player.loop = !player.loop;
           break;
 
-        /* case 73:
-                    this.setLoop('start');
-                    break;
-
-                case 76:
-                    this.setLoop();
-                    break;
-
-                case 79:
-                    this.setLoop('end');
-                    break; */
-
         default:
           break;
       }
 
       // Escape is handle natively when in full screen
       // So we only need to worry about non native
-      if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) {
+      if (key === 'Escape' && !player.fullscreen.usingNative && player.fullscreen.active) {
         player.fullscreen.toggle();
       }
 
-      // Store last code for next cycle
-      this.lastKey = code;
+      // Store last key for next cycle
+      this.lastKey = key;
     } else {
       this.lastKey = null;
     }
@@ -183,7 +183,7 @@ class Listeners {
   }
 
   // Device is touch enabled
-  firstTouch() {
+  firstTouch = () => {
     const { player } = this;
     const { elements } = player;
 
@@ -191,60 +191,10 @@ class Listeners {
 
     // Add touch class
     toggleClass(elements.container, player.config.classNames.isTouch, true);
-  }
-
-  setTabFocus(event) {
-    const { player } = this;
-    const { elements } = player;
-
-    clearTimeout(this.focusTimer);
-
-    // Ignore any key other than tab
-    if (event.type === 'keydown' && event.which !== 9) {
-      return;
-    }
-
-    // Store reference to event timeStamp
-    if (event.type === 'keydown') {
-      this.lastKeyDown = event.timeStamp;
-    }
-
-    // Remove current classes
-    const removeCurrent = () => {
-      const className = player.config.classNames.tabFocus;
-      const current = getElements.call(player, `.${className}`);
-      toggleClass(current, className, false);
-    };
-
-    // Determine if a key was pressed to trigger this event
-    const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20;
-
-    // Ignore focus events if a key was pressed prior
-    if (event.type === 'focus' && !wasKeyDown) {
-      return;
-    }
-
-    // Remove all current
-    removeCurrent();
-
-    // Delay the adding of classname until the focus has changed
-    // This event fires before the focusin event
-    if (event.type !== 'focusout') {
-      this.focusTimer = setTimeout(() => {
-        const focused = document.activeElement;
-
-        // Ignore if current focus element isn't inside the player
-        if (!elements.container.contains(focused)) {
-          return;
-        }
-
-        toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
-      }, 10);
-    }
-  }
+  };
 
   // Global window & document listeners
-  global(toggle = true) {
+  global = (toggle = true) => {
     const { player } = this;
 
     // Keyboard shortcuts
@@ -257,13 +207,10 @@ class Listeners {
 
     // Detect touch by events
     once.call(player, document.body, 'touchstart', this.firstTouch);
-
-    // 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 +224,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 +252,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 [, y] = ratio;
-      const [videoX, videoY] = getAspectRatio.call(player);
+      const target = elements.wrapper;
+      const { active } = player.fullscreen;
+      const [videoWidth, videoHeight] = getAspectRatio.call(player);
+      const useNativeAspectRatio = supportsCSS(`aspect-ratio: ${videoWidth} / ${videoHeight}`);
 
-      target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
-      target.style.margin = toggle ? '0 auto' : null;
-    };
-
-    // Resize on fullscreen change
-    const setPlayerSize = measure => {
-      // If we don't need to measure the viewport
-      if (!measure) {
-        return setAspectRatio.call(player);
+      // If not active, remove styles
+      if (!active) {
+        if (useNativeAspectRatio) {
+          target.style.width = null;
+          target.style.height = null;
+        } else {
+          target.style.maxWidth = null;
+          target.style.margin = null;
+        }
+        return;
       }
 
-      const rect = elements.container.getBoundingClientRect();
-      const { width, height } = rect;
+      // Determine which dimension will overflow and constrain view
+      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 => {
-      const { target, usingNative } = player.fullscreen;
+    on.call(player, elements.container, 'enterfullscreen exitfullscreen', (event) => {
+      const { target } = player.fullscreen;
 
       // Ignore events not from target
       if (target !== elements.container) {
@@ -349,34 +306,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
-      if (!usingNative) {
-        if (isEnter) {
-          on.call(player, window, 'resize', resized);
-        } else {
-          off.call(player, window, 'resize', resized);
-        }
-      }
+      // Watch for resizes
+      const method = event.type === 'enterfullscreen' ? on : off;
+      method.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 +341,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 +367,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 +407,7 @@ class Listeners {
         player,
         elements.wrapper,
         'contextmenu',
-        event => {
+        (event) => {
           event.preventDefault();
         },
         false,
@@ -485,7 +433,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 +447,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 +457,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 +475,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 +487,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 +501,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 +517,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 +590,7 @@ class Listeners {
     this.bind(
       elements.buttons.settings,
       'click',
-      event => {
+      (event) => {
         // Prevent the document click listener closing the menu
         event.stopPropagation();
         event.preventDefault();
@@ -641,16 +607,13 @@ class Listeners {
     this.bind(
       elements.buttons.settings,
       'keyup',
-      event => {
-        const code = event.which;
-
-        // We only care about space and return
-        if (![13, 32].includes(code)) {
+      (event) => {
+        if (![' ', 'Enter'].includes(event.key)) {
           return;
         }
 
         // Because return triggers a click anyway, all we need to do is set focus
-        if (code === 13) {
+        if (event.key === 'Enter') {
           controls.focusFirstMenuItem.call(player, null, true);
           return;
         }
@@ -669,26 +632,25 @@ class Listeners {
     );
 
     // Escape closes menu
-    this.bind(elements.settings.menu, 'keydown', event => {
-      if (event.which === 27) {
+    this.bind(elements.settings.menu, 'keydown', (event) => {
+      if (event.key === 'Escape') {
         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';
 
-      if (is.keyboardEvent(event) && code !== 39 && code !== 37) {
+      if (is.keyboardEvent(event) && !['ArrowLeft', 'ArrowRight'].includes(event.key)) {
         return;
       }
 
@@ -715,14 +677,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 +701,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 +725,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 +733,7 @@ class Listeners {
       }
     });
 
-    this.bind(elements.progress, 'mouseup touchend', event => {
+    this.bind(elements.progress, 'mouseup touchend', (event) => {
       const { previewThumbnails } = player;
 
       if (previewThumbnails && previewThumbnails.loaded) {
@@ -780,9 +742,9 @@ class Listeners {
     });
 
     // Polyfill for lower fill in <input type="range"> for webkit
-    if (browser.isWebkit) {
-      Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
-        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+    if (browser.isWebKit) {
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach((element) => {
+        this.bind(element, 'input', (event) => controls.updateRangeFill.call(player, event.target));
       });
     }
 
@@ -805,30 +767,32 @@ class Listeners {
     this.bind(
       elements.inputs.volume,
       inputEvent,
-      event => {
+      (event) => {
         player.volume = event.target.value;
       },
       'volume',
     );
 
     // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-    this.bind(elements.controls, 'mouseenter mouseleave', event => {
+    this.bind(elements.controls, 'mouseenter mouseleave', (event) => {
       elements.controls.hover = !player.touch && event.type === 'mouseenter';
     });
 
     // Also update controls.hover state for any non-player children of fullscreen element (as above)
     if (elements.fullscreen) {
       Array.from(elements.fullscreen.children)
-        .filter(c => !c.contains(elements.container))
-        .forEach(child => {
-          this.bind(child, 'mouseenter mouseleave', event => {
-            elements.controls.hover = !player.touch && event.type === 'mouseenter';
+        .filter((c) => !c.contains(elements.container))
+        .forEach((child) => {
+          this.bind(child, 'mouseenter mouseleave', (event) => {
+            if (elements.controls) {
+              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 +825,12 @@ class Listeners {
     this.bind(
       elements.inputs.volume,
       'wheel',
-      event => {
-        // Detect "natural" scroll - suppored on OS X Safari only
+      (event) => {
+        // Detect "natural" scroll - supported 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 +846,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 {
@@ -213,16 +213,16 @@ class Ads {
       request.setAdWillPlayMuted(!this.player.muted);
 
       this.loader.requestAds(request);
-    } catch (e) {
-      this.onAdError(e);
+    } catch (error) {
+      this.onAdError(error);
     }
-  }
+  };
 
   /**
    * 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
+   * @param {Event} event - adsManagerLoadedEvent
    */
-  onAdsManagerLoaded(event) {
+  onAdsManagerLoaded = (event) => {
     // Load could occur after a source change (race condition)
     if (!this.enabled) {
       return;
@@ -264,21 +264,21 @@ class Ads {
 
     // Add listeners to the required events
     // Advertisement error events
-    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
+    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, (error) => this.onAdError(error));
 
     // Advertisement regular events
-    Object.keys(google.ima.AdEvent.Type).forEach(type => {
-      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+    Object.keys(google.ima.AdEvent.Type).forEach((type) => {
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], (e) => this.onAdEvent(e));
     });
 
     // Resolve our adsManager
     this.trigger('loaded');
-  }
+  };
 
-  addCuePoints() {
+  addCuePoints = () => {
     // Add advertisement cue's within the time line if available
     if (!is.empty(this.cuePoints)) {
-      this.cuePoints.forEach(cuePoint => {
+      this.cuePoints.forEach((cuePoint) => {
         if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
           const seekElement = this.player.elements.progress;
 
@@ -294,7 +294,7 @@ class Ads {
         }
       });
     }
-  }
+  };
 
   /**
    * This is where all the event handling takes place. Retrieve the ad from the event. Some
@@ -302,7 +302,7 @@ class Ads {
    * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
    * @param {Event} event
    */
-  onAdEvent(event) {
+  onAdEvent = (event) => {
     const { container } = this.player.elements;
     // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
     // don't have ad object associated
@@ -310,7 +310,7 @@ class Ads {
     const adData = event.getAdData();
 
     // Proxy event
-    const dispatchEvent = type => {
+    const dispatchEvent = (type) => {
       triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
     };
 
@@ -410,23 +410,23 @@ class Ads {
       default:
         break;
     }
-  }
+  };
 
   /**
    * Any ad error handling comes through here
    * @param {Event} event
    */
-  onAdError(event) {
+  onAdError = (event) => {
     this.cancel();
     this.player.debug.warn('Ads error', event);
-  }
+  };
 
   /**
    * Setup hooks for Plyr and window events. This ensures
    * the mid- and post-roll launch at the correct time. And
    * resize the advertisement when the player resizes
    */
-  listeners() {
+  listeners = () => {
     const { container } = this.player.elements;
     let time;
 
@@ -464,12 +464,12 @@ class Ads {
         this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
       }
     });
-  }
+  };
 
   /**
    * Initialize the adsManager and start playing advertisements
    */
-  play() {
+  play = () => {
     const { container } = this.player.elements;
 
     if (!this.managerPromise) {
@@ -503,12 +503,12 @@ class Ads {
         }
       })
       .catch(() => {});
-  }
+  };
 
   /**
    * Resume our video
    */
-  resumeContent() {
+  resumeContent = () => {
     // Hide the advertisement container
     this.elements.container.style.zIndex = '';
 
@@ -517,12 +517,12 @@ class Ads {
 
     // Play video
     silencePromise(this.player.media.play());
-  }
+  };
 
   /**
    * Pause our video
    */
-  pauseContent() {
+  pauseContent = () => {
     // Show the advertisement container
     this.elements.container.style.zIndex = 3;
 
@@ -531,7 +531,7 @@ class Ads {
 
     // Pause our video.
     this.player.media.pause();
-  }
+  };
 
   /**
    * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
@@ -539,7 +539,7 @@ class Ads {
    * video requests. https://developers.google.com/interactive-
    * media-ads/docs/sdks/android/faq#8
    */
-  cancel() {
+  cancel = () => {
     // Pause our video
     if (this.initialized) {
       this.resumeContent();
@@ -550,12 +550,12 @@ class Ads {
 
     // Re-create our adsManager
     this.loadAds();
-  }
+  };
 
   /**
    * Re-create our adsManager
    */
-  loadAds() {
+  loadAds = () => {
     // Tell our adsManager to go bye bye
     this.managerPromise
       .then(() => {
@@ -565,7 +565,7 @@ class Ads {
         }
 
         // Re-set our adsManager promises
-        this.managerPromise = new Promise(resolve => {
+        this.managerPromise = new Promise((resolve) => {
           this.on('loaded', resolve);
           this.player.debug.log(this.manager);
         });
@@ -576,23 +576,24 @@ class Ads {
         this.requestAds();
       })
       .catch(() => {});
-  }
+  };
 
   /**
    * Handles callbacks after an ad event was invoked
    * @param {String} event - Event type
+   * @param args
    */
-  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 +601,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 +609,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 +619,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

@@ -2,18 +2,19 @@ import { createElement } from '../utils/elements';
 import { once } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
+import { clamp } from '../utils/numbers';
 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,15 +104,13 @@ 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;
     }
 
-    if (!this.enabled) {
-      return;
-    }
+    if (!this.enabled) return;
 
     this.getThumbnails().then(() => {
       if (!this.enabled) {
@@ -124,13 +123,16 @@ class PreviewThumbnails {
       // Check to see if thumb container size was specified manually in CSS
       this.determineContainerAutoSizing();
 
+      // Set up listeners
+      this.listeners();
+
       this.loaded = true;
     });
-  }
+  };
 
   // Download VTT files and parse them
-  getThumbnails() {
-    return new Promise(resolve => {
+  getThumbnails = () => {
+    return new Promise((resolve) => {
       const { src } = this.player.config.previewThumbnails;
 
       if (is.empty(src)) {
@@ -149,7 +151,7 @@ class PreviewThumbnails {
 
       // Via callback()
       if (is.function(src)) {
-        src(thumbnails => {
+        src((thumbnails) => {
           this.thumbnails = thumbnails;
           sortAndResolve();
         });
@@ -159,17 +161,17 @@ class PreviewThumbnails {
         // If string, convert into single-element list
         const urls = is.string(src) ? [src] : src;
         // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
-        const promises = urls.map(u => this.getThumbnail(u));
+        const promises = urls.map((u) => this.getThumbnail(u));
         // Resolve
         Promise.all(promises).then(sortAndResolve);
       }
     });
-  }
+  };
 
   // Process individual VTT file
-  getThumbnail(url) {
-    return new Promise(resolve => {
-      fetch(url).then(response => {
+  getThumbnail = (url) => {
+    return new Promise((resolve) => {
+      fetch(url).then((response) => {
         const thumbnail = {
           frames: parseVtt(response),
           height: null,
@@ -202,21 +204,15 @@ class PreviewThumbnails {
         tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
       });
     });
-  }
+  };
 
-  startMove(event) {
-    if (!this.loaded) {
-      return;
-    }
+  startMove = (event) => {
+    if (!this.loaded) return;
 
-    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
-      return;
-    }
+    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) return;
 
     // Wait until media has a duration
-    if (!this.player.media.duration) {
-      return;
-    }
+    if (!this.player.media.duration) return;
 
     if (event.type === 'touchmove') {
       // Calculate seek hover position as approx video seconds
@@ -241,17 +237,26 @@ class PreviewThumbnails {
 
       // Set time text inside image container
       this.elements.thumb.time.innerText = formatTime(this.seekTime);
+
+      // Get marker point for time
+      const point = this.player.config.markers?.points?.find(({ time: t }) => t === Math.round(this.seekTime));
+
+      // Append the point label to the tooltip
+      if (point) {
+        // this.elements.thumb.time.innerText.concat('\n');
+        this.elements.thumb.time.insertAdjacentHTML('afterbegin', `${point.label}<br>`);
+      }
     }
 
     // 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 +270,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 +288,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 +306,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,
@@ -326,7 +331,7 @@ class PreviewThumbnails {
     this.elements.thumb.time = createElement('span', {}, '00:00');
     timeContainer.appendChild(this.elements.thumb.time);
 
-    this.elements.thumb.container.appendChild(timeContainer);
+    this.elements.thumb.imageContainer.appendChild(timeContainer);
 
     // Inject the whole thumb
     if (is.element(this.player.elements.progress)) {
@@ -339,18 +344,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 +365,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;
@@ -382,15 +387,15 @@ class PreviewThumbnails {
       }
     });
 
-    // Only proceed if either thumbnum or thumbfilename has changed
+    // Only proceed if either thumb num or thumbfilename has changed
     if (thumbNum !== this.showingThumb) {
       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 +431,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 +454,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 +481,12 @@ class PreviewThumbnails {
         }, removeDelay);
       }
     });
-  }
+  };
 
   // Preload images before and after the current one. Only if the user is still hovering/seeking the same frame
   // This will only preload the lowest quality
-  preloadNearby(thumbNum, forward = true) {
-    return new Promise(resolve => {
+  preloadNearby = (thumbNum, forward = true) => {
+    return new Promise((resolve) => {
       setTimeout(() => {
         const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;
 
@@ -496,7 +501,7 @@ class PreviewThumbnails {
 
           let foundOne = false;
 
-          thumbnailsClone.forEach(frame => {
+          thumbnailsClone.forEach((frame) => {
             const newThumbFilename = frame.text;
 
             if (newThumbFilename !== oldThumbFilename) {
@@ -527,10 +532,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,14 +555,10 @@ class PreviewThumbnails {
         }, 300);
       }
     }
-  }
+  };
 
   get currentImageContainer() {
-    if (this.mouseDown) {
-      return this.elements.scrubbing.container;
-    }
-
-    return this.elements.thumb.imageContainer;
+    return this.mouseDown ? this.elements.scrubbing.container : this.elements.thumb.imageContainer;
   }
 
   get usingSprites() {
@@ -590,11 +591,7 @@ class PreviewThumbnails {
   }
 
   get currentImageElement() {
-    if (this.mouseDown) {
-      return this.currentScrubbingImageElement;
-    }
-
-    return this.currentThumbnailImageElement;
+    return this.mouseDown ? this.currentScrubbingImageElement : this.currentThumbnailImageElement;
   }
 
   set currentImageElement(element) {
@@ -605,7 +602,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 +610,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,74 +620,65 @@ 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 = () => {
+    const { imageContainer } = this.elements.thumb;
+
     if (!this.sizeSpecifiedInCSS) {
       const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`;
-      this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-    } else if (
-      this.elements.thumb.imageContainer.clientHeight > 20 &&
-      this.elements.thumb.imageContainer.clientWidth < 20
-    ) {
-      const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`;
-    } else if (
-      this.elements.thumb.imageContainer.clientHeight < 20 &&
-      this.elements.thumb.imageContainer.clientWidth > 20
-    ) {
-      const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio);
-      this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`;
+      imageContainer.style.height = `${this.thumbContainerHeight}px`;
+      imageContainer.style.width = `${thumbWidth}px`;
+    } else if (imageContainer.clientHeight > 20 && imageContainer.clientWidth < 20) {
+      const thumbWidth = Math.floor(imageContainer.clientHeight * this.thumbAspectRatio);
+      imageContainer.style.width = `${thumbWidth}px`;
+    } else if (imageContainer.clientHeight < 20 && imageContainer.clientWidth > 20) {
+      const thumbHeight = Math.floor(imageContainer.clientWidth / this.thumbAspectRatio);
+      imageContainer.style.height = `${thumbHeight}px`;
     }
 
     this.setThumbContainerPos();
-  }
+  };
 
-  setThumbContainerPos() {
-    const seekbarRect = this.player.elements.progress.getBoundingClientRect();
-    const plyrRect = this.player.elements.container.getBoundingClientRect();
+  setThumbContainerPos = () => {
+    const scrubberRect = this.player.elements.progress.getBoundingClientRect();
+    const containerRect = this.player.elements.container.getBoundingClientRect();
     const { container } = this.elements.thumb;
     // Find the lowest and highest desired left-position, so we don't slide out the side of the video container
-    const minVal = plyrRect.left - seekbarRect.left + 10;
-    const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10;
+    const min = containerRect.left - scrubberRect.left + 10;
+    const max = containerRect.right - scrubberRect.left - container.clientWidth - 10;
     // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
-    let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
+    const position = this.mousePosX - scrubberRect.left - container.clientWidth / 2;
+    const clamped = clamp(position, min, max);
 
-    if (previewPos < minVal) {
-      previewPos = minVal;
-    }
+    // Move the popover position
+    container.style.left = `${clamped}px`;
 
-    if (previewPos > maxVal) {
-      previewPos = maxVal;
-    }
-
-    container.style.left = `${previewPos}px`;
-  }
+    // The arrow can follow the cursor
+    container.style.setProperty('--preview-arrow-offset', `${position - clamped}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) {
-    if (!this.usingSprites) {
-      return;
-    }
+  setImageSizeAndOffset = (previewImage, frame) => {
+    if (!this.usingSprites) return;
 
     // Find difference between height and preview container height
     const multiplier = this.thumbContainerHeight / frame.h;
@@ -703,7 +691,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
@@ -28,6 +28,21 @@ function parseId(url) {
   return url.match(regex) ? RegExp.$2 : url;
 }
 
+// Try to extract a hash for private videos from the URL
+function parseHash(url) {
+  /* This regex matches a hexadecimal hash if given in any of these forms:
+   *  - [https://player.]vimeo.com/video/{id}/{hash}[?params]
+   *  - [https://player.]vimeo.com/video/{id}?h={hash}[&params]
+   *  - [https://player.]vimeo.com/video/{id}?[params]&h={hash}
+   *  - video/{id}/{hash}
+   * If matched, the hash is available in capture group 4
+   */
+  const regex = /^.*(vimeo.com\/|video\/)(\d+)(\?.*&*h=|\/)+([\d,a-f]+)/;
+  const found = url.match(regex);
+
+  return found && found.length === 5 ? found[4] : null;
+}
+
 // Set playback state and trigger change (only on actual change)
 function assurePlaybackState(play) {
   if (play && !this.embed.hasPlayed) {
@@ -58,7 +73,7 @@ const vimeo = {
         .then(() => {
           vimeo.ready.call(player);
         })
-        .catch(error => {
+        .catch((error) => {
           player.debug.warn('Vimeo SDK (player.js) failed to load', error);
         });
     } else {
@@ -71,6 +86,18 @@ const vimeo = {
     const player = this;
     const config = player.config.vimeo;
     const { premium, referrerPolicy, ...frameParams } = config;
+    // Get the source URL or ID
+    let source = player.media.getAttribute('src');
+    let hash = '';
+    // Get from <div> if needed
+    if (is.empty(source)) {
+      source = player.media.getAttribute(player.config.attributes.embed.id);
+      // hash can also be set as attribute on the <div>
+      hash = player.media.getAttribute(player.config.attributes.embed.hash);
+    } else {
+      hash = parseHash(source);
+    }
+    const hashParam = hash ? { h: hash } : {};
 
     // If the owner has a pro or premium account then we can hide controls etc
     if (premium) {
@@ -86,25 +113,22 @@ const vimeo = {
       autoplay: player.autoplay,
       muted: player.muted,
       gesture: 'media',
-      playsinline: !this.config.fullscreen.iosNative,
+      playsinline: player.config.playsinline,
+      // hash has to be added to iframe-URL
+      ...hashParam,
       ...frameParams,
     });
 
-    // Get the source URL or ID
-    let source = player.media.getAttribute('src');
-
-    // Get from <div> if needed
-    if (is.empty(source)) {
-      source = player.media.getAttribute(player.config.attributes.embed.id);
-    }
-
     const id = parseId(source);
     // Build an iframe
     const iframe = createElement('iframe');
     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 +136,29 @@ const vimeo = {
     }
 
     // Inject the package
-    const { poster } = player;
-    if (premium) {
-      iframe.setAttribute('data-poster', poster);
+    if (premium || !config.customControls) {
+      iframe.setAttribute('data-poster', player.poster);
       player.media = replaceElement(iframe, player.media);
     } else {
-      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
+      const wrapper = createElement('div', {
+        class: player.config.classNames.embedContainer,
+        'data-poster': player.poster,
+      });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
     }
 
     // Get poster image
-    fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
-      if (is.empty(response)) {
-        return;
-      }
+    if (!config.customControls) {
+      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
+        if (is.empty(response) || !response.thumbnail_url) {
+          return;
+        }
 
-      // Get the URL for thumbnail
-      const url = new URL(response[0].thumbnail_large);
-
-      // Get original image
-      url.pathname = `${url.pathname.split('_')[0]}.jpg`;
-
-      // Set and show poster
-      ui.setPoster.call(player, url.href).catch(() => {});
-    });
+        // Set and show poster
+        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
+      });
+    }
 
     // Setup instance
     // https://github.com/vimeo/player.js
@@ -243,7 +265,7 @@ const vimeo = {
       set(input) {
         const toggle = is.boolean(input) ? input : false;
 
-        player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
+        player.embed.setMuted(toggle ? true : player.config.muted).then(() => {
           muted = toggle;
           triggerEvent.call(player, player.media, 'volumechange');
         });
@@ -269,11 +291,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 +313,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 +388,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 +405,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 +423,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
-    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+    // Only load the poster when using custom controls
+    if (config.customControls) {
+      const posterSrc = (s) => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
 
-    // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
-    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-      .then(image => ui.setPoster.call(player, image.src))
-      .then(src => {
-        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-        if (!src.includes('maxres')) {
-          player.elements.poster.style.backgroundSize = 'cover';
-        }
-      })
-      .catch(() => {});
-
-    const config = player.config.youtube;
+      // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+      loadImage(posterSrc('maxres'), 121) // Highest quality and un-padded
+        .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+        .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+        .then((image) => ui.setPoster.call(player, image.src))
+        .then((src) => {
+          // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+          if (!src.includes('maxres')) {
+            player.elements.poster.style.backgroundSize = 'cover';
+          }
+        })
+        .catch(() => {});
+    }
 
     // Setup instance
     // https://developers.google.com/youtube/iframe_api_reference
-    player.embed = new window.YT.Player(id, {
+    player.embed = new window.YT.Player(player.media, {
       videoId,
       host: getHost(config),
       playerVars: extend(
         {},
         {
-          autoplay: player.config.autoplay ? 1 : 0, // Autoplay
-          hl: player.config.hl, // iframe interface language
-          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
-          disablekb: 1, // Disable keyboard as we handle it
-          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Autoplay
+          autoplay: player.config.autoplay ? 1 : 0,
+          // iframe interface language
+          hl: player.config.hl,
+          // Only show controls if not fully supported or opted out
+          controls: player.supported.ui && config.customControls ? 0 : 1,
+          // Disable keyboard as we handle it
+          disablekb: 1,
+          // Allow iOS inline playback
+          playsinline: player.config.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,
@@ -179,7 +183,7 @@ const youtube = {
                 100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
                 101: 'The owner of the requested video does not allow it to be played in embedded players.',
                 150: 'The owner of the requested video does not allow it to be played in embedded players.',
-              }[code] || 'An unknown error occured';
+              }[code] || 'An unknown error occurred';
 
             player.media.error = { code, message };
 
@@ -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
@@ -206,6 +211,11 @@ declare class Plyr {
    */
   airplay(): void;
 
+  /**
+   * Sets the preview thumbnails for the current source.
+   */
+  setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void;
+
   /**
    * Toggle the controls (video only). Takes optional truthy value to force it on/off.
    */
@@ -214,26 +224,17 @@ declare class Plyr {
   /**
    * Add an event listener for the specified event.
    */
-  on(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  on<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
 
   /**
    * Add an event listener for the specified event once.
    */
-  once(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  once<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
 
   /**
    * Remove an event listener for the specified event.
    */
-  off(
-    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-    callback: (this: this, event: Plyr.PlyrEvent) => void,
-  ): void;
+  off<K extends keyof Plyr.PlyrEventMap>(event: K, callback: (this: this, event: Plyr.PlyrEventMap[K]) => void): void;
 
   /**
    * Check support for a mime type.
@@ -242,44 +243,60 @@ declare class Plyr {
 
   /**
    * Destroy lib instance
+   * @param {Function} callback - Callback for when destroy is complete
+   * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
    */
-  destroy(): void;
+  destroy(callback?: (...args: any[]) => void, soft?: boolean): void;
 }
 
 declare namespace Plyr {
   type MediaType = 'audio' | 'video';
   type Provider = 'html5' | 'youtube' | 'vimeo';
-  type StandardEvent =
-    | 'progress'
-    | 'playing'
-    | 'play'
-    | 'pause'
-    | 'timeupdate'
-    | 'volumechange'
-    | 'seeking'
-    | 'seeked'
-    | 'ratechange'
-    | 'ended'
-    | 'enterfullscreen'
-    | 'exitfullscreen'
-    | 'captionsenabled'
-    | 'captionsdisabled'
-    | 'languagechange'
-    | 'controlshidden'
-    | 'controlsshown'
-    | 'ready';
-  type Html5Event =
-    | 'loadstart'
-    | 'loadeddata'
-    | 'loadedmetadata'
-    | 'canplay'
-    | 'canplaythrough'
-    | 'stalled'
-    | 'waiting'
-    | 'emptied'
-    | 'cuechange'
-    | 'error';
-  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+  type StandardEventMap = {
+    progress: PlyrEvent;
+    playing: PlyrEvent;
+    play: PlyrEvent;
+    pause: PlyrEvent;
+    timeupdate: PlyrEvent;
+    volumechange: PlyrEvent;
+    seeking: PlyrEvent;
+    seeked: PlyrEvent;
+    ratechange: PlyrEvent;
+    ended: PlyrEvent;
+    enterfullscreen: PlyrEvent;
+    exitfullscreen: PlyrEvent;
+    captionsenabled: PlyrEvent;
+    captionsdisabled: PlyrEvent;
+    languagechange: PlyrEvent;
+    controlshidden: PlyrEvent;
+    controlsshown: PlyrEvent;
+    ready: PlyrEvent;
+  };
+  // For retrocompatibility, we keep StandardEvent
+  type StandardEvent = keyof Plyr.StandardEventMap;
+  type Html5EventMap = {
+    loadstart: PlyrEvent;
+    loadeddata: PlyrEvent;
+    loadedmetadata: PlyrEvent;
+    canplay: PlyrEvent;
+    canplaythrough: PlyrEvent;
+    stalled: PlyrEvent;
+    waiting: PlyrEvent;
+    emptied: PlyrEvent;
+    cuechange: PlyrEvent;
+    error: PlyrEvent;
+  };
+  // For retrocompatibility, we keep Html5Event
+  type Html5Event = keyof Plyr.Html5EventMap;
+  type YoutubeEventMap = {
+    statechange: PlyrStateChangeEvent;
+    qualitychange: PlyrEvent;
+    qualityrequested: PlyrEvent;
+  };
+  // For retrocompatibility, we keep YoutubeEvent
+  type YoutubeEvent = keyof Plyr.YoutubeEventMap;
+
+  type PlyrEventMap = StandardEventMap & Html5EventMap & YoutubeEventMap;
 
   interface FullscreenControl {
     /**
@@ -324,7 +341,7 @@ declare namespace Plyr {
      * id (the unique id for the player), seektime (the seektime step in seconds), and title (the media title). See CONTROLS.md for more info on how the html needs to be structured.
      * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
      */
-    controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
+    controls?: string | string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
 
     /**
      * If you're using the default controls are used then you can specify which settings to show in the menu
@@ -357,7 +374,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.
@@ -501,10 +518,22 @@ declare namespace Plyr {
      * Preview Thumbnails Options.
      */
     previewThumbnails?: PreviewThumbnailsOptions;
+
+    /**
+     * Media Metadata Options.
+     */
+    mediaMetadata?: MediaMetadataOptions;
+
+    /**
+     * Markers Options
+     */
+    markers?: MarkersOptions;
   }
 
   interface QualityOptions {
     default: number;
+    forced?: boolean;
+    onChange?: (quality: number) => void;
     options: number[];
   }
 
@@ -514,7 +543,8 @@ declare namespace Plyr {
 
   interface AdOptions {
     enabled: boolean;
-    publisherId: string;
+    publisherId?: string;
+    tagUrl?: string;
   }
 
   interface SpeedOptions {
@@ -534,9 +564,10 @@ declare namespace Plyr {
 
   interface FullScreenOptions {
     enabled?: boolean;
-    fallback?: boolean;
+    fallback?: boolean | 'force';
     allowAudio?: boolean;
     iosNative?: boolean;
+    container?: string;
   }
 
   interface CaptionOptions {
@@ -552,7 +583,51 @@ declare namespace Plyr {
 
   interface PreviewThumbnailsOptions {
     enabled?: boolean;
-    src?: string;
+    src?: string | string[];
+  }
+
+  interface MediaMetadataArtwork {
+    src: string;
+    sizes?: string;
+    type: string;
+  }
+
+  interface MediaMetadataOptions {
+    title?: string;
+    artist?: string;
+    album?: string;
+    artwork?: MediaMetadataArtwork[];
+  }
+
+  interface MarkersPoints {
+    time: number;
+    label: string;
+  }
+
+  interface MarkersOptions {
+    enabled: boolean;
+    points: MarkersPoints[];
+  }
+
+  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 {
@@ -582,6 +657,11 @@ declare namespace Plyr {
      * Booleans are converted to HTML5 value-less attributes.
      */
     tracks?: Track[];
+
+    /**
+     * Enable or disable preview thumbnails for current source
+     */
+    previewThumbnails?: Plyr.PreviewThumbnailsOptions;
   }
 
   interface Source {
@@ -623,6 +703,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.7.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
@@ -71,7 +72,7 @@ class Plyr {
       (() => {
         try {
           return JSON.parse(this.media.getAttribute('data-plyr-config'));
-        } catch (e) {
+        } catch (_) {
           return {};
         }
       })(),
@@ -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;
         }
@@ -245,7 +246,7 @@ class Plyr {
     }
 
     // Check for support again but with type
-    this.supported = support.check(this.type, this.provider, this.config.playsinline);
+    this.supported = support.check(this.type, this.provider);
 
     // If no support for even API, bail
     if (!this.supported.api) {
@@ -266,7 +267,7 @@ class Plyr {
 
     // Wrap media
     if (!is.element(this.elements.container)) {
-      this.elements.container = createElement('div', { tabindex: 0 });
+      this.elements.container = createElement('div');
       wrap(this.media, this.elements.container);
     }
 
@@ -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
@@ -648,7 +649,7 @@ class Plyr {
 
   /**
    * Set playback speed
-   * @param {Number} speed - the speed of playback (0.5-2.0)
+   * @param {Number} input - the speed of playback (0.5-2.0)
    */
   set speed(input) {
     let speed = null;
@@ -674,7 +675,9 @@ class Plyr {
 
     // Set media speed
     setTimeout(() => {
-      this.media.playbackRate = speed;
+      if (this.media) {
+        this.media.playbackRate = speed;
+      }
     }, 0);
   }
 
@@ -915,12 +918,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);
   }
@@ -930,8 +933,7 @@ class Plyr {
    * @param {Boolean} input - Whether to autoplay or not
    */
   set autoplay(input) {
-    const toggle = is.boolean(input) ? input : this.config.autoplay;
-    this.config.autoplay = toggle;
+    this.config.autoplay = is.boolean(input) ? input : this.config.autoplay;
   }
 
   /**
@@ -951,10 +953,11 @@ class Plyr {
 
   /**
    * Set the caption track by index
-   * @param {Number} - Caption index
+   * @param {Number} input - Caption index
    */
   set currentTrack(input) {
     captions.set.call(this, input, false);
+    captions.setup.call(this);
   }
 
   /**
@@ -968,7 +971,7 @@ class Plyr {
   /**
    * Set the wanted language for captions
    * Since tracks can be added later it won't update the actual caption track until there is a matching track
-   * @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
+   * @param {String} input - Two character ISO language code (e.g. EN, FR, PT, etc)
    */
   set language(input) {
     captions.setLanguage.call(this, input, false);
@@ -1028,22 +1031,39 @@ class Plyr {
     return this.media === document.pictureInPictureElement;
   }
 
+  /**
+   * Sets the preview thumbnails for the current source
+   */
+  setPreviewThumbnails(thumbnailSource) {
+    if (this.previewThumbnails && this.previewThumbnails.loaded) {
+      this.previewThumbnails.destroy();
+      this.previewThumbnails = null;
+    }
+
+    Object.assign(this.config.previewThumbnails, thumbnailSource);
+
+    // Create new instance if it is still enabled
+    if (this.config.previewThumbnails.enabled) {
+      this.previewThumbnails = new PreviewThumbnails(this);
+    }
+  }
+
   /**
    * 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 +1074,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 +1093,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 +1129,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 +1165,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,24 +1227,21 @@ class Plyr {
       // Vimeo does not always return
       setTimeout(done, 200);
     }
-  }
+  };
 
   /**
    * Check for support for a mime type (HTML5 only)
    * @param {String} type - Mime type
    */
-  supports(type) {
-    return support.mime.call(this, type);
-  }
+  supports = (type) => support.mime.call(this, type);
 
   /**
    * Check for support
    * @param {String} type - Player type (audio/video)
    * @param {String} provider - Provider (html5/youtube/vimeo)
-   * @param {Boolean} inline - Where player has `playsinline` sttribute
    */
-  static supported(type, provider, inline) {
-    return support.check(type, provider, inline);
+  static supported(type, provider) {
+    return support.check(type, provider);
   }
 
   /**
@@ -1248,7 +1273,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.7.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

@@ -26,12 +26,12 @@ class Storage {
       window.localStorage.removeItem(test);
 
       return true;
-    } catch (e) {
+    } catch (_) {
       return false;
     }
   }
 
-  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;
@@ -70,8 +70,12 @@ class Storage {
     extend(storage, object);
 
     // Update storage
-    window.localStorage.setItem(this.key, JSON.stringify(storage));
-  }
+    try {
+      window.localStorage.setItem(this.key, JSON.stringify(storage));
+    } catch (_) {
+      // Do nothing
+    }
+  };
 }
 
 export default Storage;

src/js/support.js

@@ -24,10 +24,9 @@ const support = {
 
   // Check for support
   // Basic functionality vs full UI
-  check(type, provider, playsinline) {
-    const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
+  check(type, provider) {
     const api = support[type] || provider !== 'html5';
-    const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
+    const ui = api && support.rangeInput;
 
     return {
       api,
@@ -38,6 +37,9 @@ const support = {
   // Picture-in-picture support
   // Safari & Chrome only currently
   pip: (() => {
+    // While iPhone's support picture-in-picture for some apps, seemingly Safari isn't one of them
+    // It will throw the following error when trying to enter picture-in-picture
+    // `NotSupportedError: The Picture-in-Picture mode is not supported.`
     if (browser.isIPhone) {
       return false;
     }
@@ -88,7 +90,7 @@ const support = {
 
     try {
       return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-    } catch (e) {
+    } catch (_) {
       return false;
     }
   },

src/js/ui.js

@@ -5,7 +5,6 @@
 import captions from './captions';
 import controls from './controls';
 import support from './support';
-import browser from './utils/browser';
 import { getElement, toggleClass } from './utils/elements';
 import { ready, triggerEvent } from './utils/events';
 import i18n from './utils/i18n';
@@ -82,6 +81,9 @@ const ui = {
     // Reset time display
     controls.timeUpdate.call(this);
 
+    // Reset duration display
+    controls.durationUpdate.call(this);
+
     // Update the UI
     ui.checkPlaying.call(this);
 
@@ -95,9 +97,6 @@ const ui = {
     // Check for airplay support
     toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
 
-    // Add iOS class
-    toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
-
     // Add touch class
     toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
 
@@ -122,6 +121,11 @@ const ui = {
     if (this.config.duration) {
       controls.durationUpdate.call(this);
     }
+
+    // Media metadata
+    if (this.config.mediaMetadata) {
+      controls.setMediaMetadata.call(this);
+    }
   },
 
   // Setup aria attribute for play and iframe title
@@ -135,7 +139,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,19 +176,22 @@ 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((error) => {
           // Hide poster on error unless it's been set by another call
           if (poster === this.poster) {
             ui.togglePoster.call(this, false);
           }
           // Rethrow
-          throw err;
+          throw error;
         })
         .then(() => {
           // Prevent race conditions
@@ -214,7 +221,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 +277,8 @@ const ui = {
     // Loop through values (as they are the keys when the object is spread 🤔)
     Object.values({ ...this.media.style })
       // We're only fussed about Plyr specific properties
-      .filter(key => !is.empty(key) && key.startsWith('--plyr'))
-      .forEach(key => {
+      .filter((key) => !is.empty(key) && is.string(key) && key.startsWith('--plyr'))
+      .forEach((key) => {
         // Set on the container
         this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
 

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;
 })();
@@ -31,7 +31,7 @@ export function repaint(element, delay) {
 
       // eslint-disable-next-line no-param-reassign
       element.hidden = false;
-    } catch (e) {
+    } catch (_) {
       // Do nothing
     }
   }, delay);

src/js/utils/browser.js

@@ -3,12 +3,19 @@
 // Unfortunately, due to mixed support, UA sniffing is required
 // ==========================================================================
 
-const browser = {
-  isIE: /* @cc_on!@ */ false || !!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),
-};
+const isIE = Boolean(window.document.documentMode);
+const isEdge = /Edge/g.test(navigator.userAgent);
+const isWebKit = 'WebkitAppearance' in document.documentElement.style && !/Edge/g.test(navigator.userAgent);
+const isIPhone = /iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
+// navigator.platform may be deprecated but this check is still required
+const isIPadOS = navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
+const isIos = /iPad|iPhone|iPod/gi.test(navigator.userAgent) && navigator.maxTouchPoints > 1;
 
-export default browser;
+export default {
+  isIE,
+  isEdge,
+  isWebKit,
+  isIPhone,
+  isIPadOS,
+  isIos,
+};

src/js/utils/elements.js

@@ -37,9 +37,7 @@ export function wrap(elements, wrapper) {
 
 // Set attributes
 export function setAttributes(element, attributes) {
-  if (!is.element(element) || is.empty(attributes)) {
-    return;
-  }
+  if (!is.element(element) || is.empty(attributes)) return;
 
   // Assume null and undefined attributes should be left out,
   // Setting them would otherwise convert them to "null" and "undefined"
@@ -67,20 +65,16 @@ export function createElement(type, attributes, text) {
   return element;
 }
 
-// Inaert an element after another
+// Insert an element after another
 export function insertAfter(element, target) {
-  if (!is.element(element) || !is.element(target)) {
-    return;
-  }
+  if (!is.element(element) || !is.element(target)) return;
 
   target.parentNode.insertBefore(element, target.nextSibling);
 }
 
 // Insert a DocumentFragment
 export function insertElement(type, parent, attributes, text) {
-  if (!is.element(parent)) {
-    return;
-  }
+  if (!is.element(parent)) return;
 
   parent.appendChild(createElement(type, attributes, text));
 }
@@ -101,9 +95,7 @@ export function removeElement(element) {
 
 // Remove all child elements
 export function emptyElement(element) {
-  if (!is.element(element)) {
-    return;
-  }
+  if (!is.element(element)) return;
 
   let { length } = element.childNodes;
 
@@ -115,9 +107,7 @@ export function emptyElement(element) {
 
 // Replace element
 export function replaceElement(newChild, oldChild) {
-  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
-    return null;
-  }
+  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) return null;
 
   oldChild.parentNode.replaceChild(newChild, oldChild);
 
@@ -131,14 +121,12 @@ export function getAttributesFromSelector(sel, existingAttributes) {
   // '#test' to { id: 'test' }
   // '[data-test="test"]' to { 'data-test': 'test' }
 
-  if (!is.string(sel) || is.empty(sel)) {
-    return {};
-  }
+  if (!is.string(sel) || is.empty(sel)) return {};
 
   const attributes = {};
   const existing = extend({}, existingAttributes);
 
-  sel.split(',').forEach(s => {
+  sel.split(',').forEach((s) => {
     // Remove whitespace
     const selector = s.trim();
     const className = selector.replace('.', '');
@@ -181,9 +169,7 @@ export function getAttributesFromSelector(sel, existingAttributes) {
 
 // Toggle hidden
 export function toggleHidden(element, hidden) {
-  if (!is.element(element)) {
-    return;
-  }
+  if (!is.element(element)) return;
 
   let hide = hidden;
 
@@ -198,7 +184,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)) {
@@ -268,16 +254,9 @@ export function getElement(selector) {
 }
 
 // Set focus and tab focus class
-export function setFocus(element = null, tabFocus = false) {
-  if (!is.element(element)) {
-    return;
-  }
+export function setFocus(element = null, focusVisible = false) {
+  if (!is.element(element)) return;
 
   // Set regular focus
-  element.focus({ preventScroll: true });
-
-  // If we want to mimic keyboard focus via tab
-  if (tabFocus) {
-    toggleClass(element, this.config.classNames.tabFocus);
-  }
+  element.focus({ preventScroll: true, focusVisible });
 }

src/js/utils/events.js

@@ -19,7 +19,7 @@ const supportsPassiveListeners = (() => {
     });
     window.addEventListener('test', null, options);
     window.removeEventListener('test', null, options);
-  } catch (e) {
+  } catch (_) {
     // Do nothing
   }
 
@@ -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/fetch.js

@@ -17,7 +17,7 @@ export default function fetch(url, responseType = 'text') {
         if (responseType === 'text') {
           try {
             resolve(JSON.parse(request.responseText));
-          } catch (e) {
+          } catch (_) {
             resolve(request.responseText);
           }
         } else {
@@ -35,8 +35,8 @@ export default function fetch(url, responseType = 'text') {
       request.responseType = responseType;
 
       request.send();
-    } catch (e) {
-      reject(e);
+    } catch (error) {
+      reject(error);
     }
   });
 }

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 isObject = input => getConstructor(input) === Object;
-const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input);
-const isString = input => getConstructor(input) === String;
-const isBoolean = input => getConstructor(input) === Boolean;
-const isFunction = input => getConstructor(input) === Function;
-const isArray = input => Array.isArray(input);
-const isWeakMap = input => instanceOf(input, WeakMap);
-const isNodeList = input => instanceOf(input, NodeList);
-const isElement = input => instanceOf(input, Element);
-const isTextNode = input => getConstructor(input) === Text;
-const isEvent = input => instanceOf(input, Event);
-const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
-const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
-const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
-const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
+const isNullOrUndefined = (input) => input === null || typeof input === 'undefined';
+const isObject = (input) => getConstructor(input) === Object;
+const isNumber = (input) => getConstructor(input) === Number && !Number.isNaN(input);
+const isString = (input) => getConstructor(input) === String;
+const isBoolean = (input) => getConstructor(input) === Boolean;
+const isFunction = (input) => typeof input === 'function';
+const isArray = (input) => Array.isArray(input);
+const isWeakMap = (input) => instanceOf(input, WeakMap);
+const isNodeList = (input) => instanceOf(input, NodeList);
+const isTextNode = (input) => getConstructor(input) === Text;
+const isEvent = (input) => instanceOf(input, Event);
+const isKeyboardEvent = (input) => instanceOf(input, KeyboardEvent);
+const isCue = (input) => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
+const isTrack = (input) => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isPromise = (input) => instanceOf(input, Promise) && isFunction(input.then);
 
-const isEmpty = input =>
+const isElement = (input) =>
+  input !== null &&
+  typeof input === 'object' &&
+  input.nodeType === 1 &&
+  typeof input.style === 'object' &&
+  typeof input.ownerDocument === 'object';
+
+const isEmpty = (input) =>
   isNullOrUndefined(input) ||
   ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
   (isObject(input) && !Object.keys(input).length);
 
-const isUrl = input => {
+const isUrl = (input) => {
   // Accept a URL object
   if (instanceOf(input, window.URL)) {
     return true;
@@ -45,7 +51,7 @@ const isUrl = input => {
 
   try {
     return !isEmpty(new URL(string).hostname);
-  } catch (e) {
+  } catch (_) {
     return false;
   }
 };

src/js/utils/load-sprite.js

@@ -54,18 +54,22 @@ export default function loadSprite(url, id) {
 
     // Get the sprite
     fetch(url)
-      .then(result => {
+      .then((result) => {
         if (is.empty(result)) {
           return;
         }
 
         if (useStorage) {
-          window.localStorage.setItem(
-            `${prefix}-${id}`,
-            JSON.stringify({
-              content: result,
-            }),
-          );
+          try {
+            window.localStorage.setItem(
+              `${prefix}-${id}`,
+              JSON.stringify({
+                content: result,
+              }),
+            );
+          } catch (_) {
+            // Do nothing
+          }
         }
 
         update(container, result);

src/js/utils/numbers.js

@@ -7,7 +7,7 @@
  * @param {Number} input
  * @param {Number} min The lower boundary of the output range
  * @param {Number} max The upper boundary of the output range
- * @returns A number in the range [min, max]
+ * @returns A number within the bounds of min and max
  * @type Number
  */
 export function clamp(input = 0, min = 0, max = 255) {

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

@@ -11,11 +11,9 @@ export function generateId(prefix) {
 
 // Format string
 export function format(input, ...args) {
-  if (is.empty(input)) {
-    return input;
-  }
+  if (is.empty(input)) return input;
 
-  return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString());
+  return input.toString().replace(/{(\d+)}/g, (_, i) => args[i].toString());
 }
 
 // Get percentage
@@ -27,13 +25,13 @@ export function getPercentage(current, max) {
   return ((current / max) * 100).toFixed(2);
 }
 
-// Replace all occurances of a string in a string
+// Replace all occurrences of a string in a string
 export const replaceAll = (input = '', find = '', replace = '') =>
   input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
 
 // 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.slice(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 getMinutes = value => Math.trunc((value / 60) % 60, 10);
-export const getSeconds = value => Math.trunc(value % 60, 10);
+export const getHours = (value) => Math.trunc((value / 60 / 60) % 60, 10);
+export const getMinutes = (value) => Math.trunc((value / 60) % 60, 10);
+export const getSeconds = (value) => Math.trunc(value % 60, 10);
 
 // Format time to UI friendly string
 export function formatTime(time = 0, displayHours = false, inverted = false) {
@@ -17,7 +17,7 @@ export function formatTime(time = 0, displayHours = false, inverted = false) {
   }
 
   // Format time component to add leading zero
-  const format = value => `0${value}`.slice(-2);
+  const format = (value) => `0${value}`.slice(-2);
   // Breakdown to hours, mins, secs
   let hours = getHours(time);
   const mins = getMinutes(time);

src/js/utils/urls.js

@@ -20,7 +20,7 @@ export function parseUrl(input, safe = true) {
 
   try {
     return new URL(url);
-  } catch (e) {
+  } catch (_) {
     return null;
   }
 }

src/sass/base.scss

@@ -5,6 +5,7 @@
 // Base
 .plyr {
   @include plyr-font-smoothing($plyr-font-smoothing);
+
   align-items: center;
   direction: ltr;
   display: flex;
@@ -12,7 +13,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/control.scss

@@ -28,8 +28,8 @@
   }
 
   // Tab focus
-  &.plyr__tab-focus {
-    @include plyr-tab-focus();
+  &:focus-visible {
+    @include plyr-focus-visible;
   }
 }
 

src/sass/components/controls.scss

@@ -56,6 +56,7 @@
 .plyr [data-plyr='fullscreen'] {
   display: none;
 }
+
 .plyr--captions-enabled [data-plyr='captions'],
 .plyr--pip-supported [data-plyr='pip'],
 .plyr--airplay-supported [data-plyr='airplay'],

src/sass/components/menus.scss

@@ -10,6 +10,7 @@
   .plyr__control svg {
     transition: transform 0.3s ease;
   }
+
   .plyr__control[aria-expanded='true'] {
     svg {
       transform: rotate(90deg);
@@ -25,7 +26,7 @@
   &__container {
     animation: plyr-popup 0.2s ease;
     background: $plyr-menu-background;
-    border-radius: 4px;
+    border-radius: $plyr-menu-radius;
     bottom: 100%;
     box-shadow: $plyr-menu-shadow;
     color: $plyr-menu-color;
@@ -73,10 +74,7 @@
       color: $plyr-menu-color;
       display: flex;
       font-size: $plyr-font-size-menu;
-      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
-      padding-left: calc(#{$plyr-control-padding} * 1.5);
-      padding-right: calc(#{$plyr-control-padding} * 1.5);
-      padding-top: calc(#{$plyr-control-padding} / 1.5);
+      padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
       user-select: none;
       width: 100%;
 
@@ -102,7 +100,7 @@
           right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
         &:hover::after {
           border-left-color: currentColor;
         }
@@ -134,7 +132,7 @@
           top: 100%;
         }
 
-        &.plyr__tab-focus::after,
+        &:focus-visible::after,
         &:hover::after {
           border-right-color: currentColor;
         }
@@ -176,13 +174,14 @@
         &::before {
           background: $plyr-control-toggle-checked-background;
         }
+
         &::after {
           opacity: 1;
           transform: translateY(-50%) scale(1);
         }
       }
 
-      &.plyr__tab-focus::before,
+      &:focus-visible::before,
       &:hover::before {
         background: rgba($plyr-color-gray-900, 0.1);
       }
@@ -193,7 +192,7 @@
       align-items: center;
       display: flex;
       margin-left: auto;
-      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+      margin-right: calc((#{$plyr-control-padding} - 2px) * -1);
       overflow: hidden;
       padding-left: calc(#{$plyr-control-padding} * 3.5);
       pointer-events: none;

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