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.

.editorconfig

@@ -4,7 +4,7 @@ root = true
 [*]
 charset = utf-8
 end_of_line = lf
-indent_size = 4
+indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true

.eslintrc

@@ -0,0 +1,18 @@
+{
+  "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"
+  }
+}

.eslintrc.json

@@ -1,41 +0,0 @@
-{
-    "parser": "babel-eslint",
-    "extends": ["airbnb-base", "prettier"],
-    "env": {
-        "browser": true,
-        "es6": true
-    },
-    "globals": { "Plyr": false, "jQuery": false },
-    "rules": {
-        "no-const-assign": 1,
-        "no-shadow": 0,
-        "no-this-before-super": 1,
-        "no-undef": 1,
-        "no-unreachable": 1,
-        "no-unused-vars": 1,
-        "constructor-super": 1,
-        "valid-typeof": 1,
-        "indent": [2, 4, { "SwitchCase": 1 }],
-        "quotes": [2, "single", "avoid-escape"],
-        "semi": [2, "always"],
-        "eqeqeq": [2, "always"],
-        "one-var": [2, "never"],
-        "comma-dangle": [2, "always-multiline"],
-        "no-restricted-globals": [
-            "error",
-            {
-                "name": "event",
-                "message": "Use local parameter instead."
-            },
-            {
-                "name": "error",
-                "message": "Use local parameter instead."
-            }
-        ],
-        "array-bracket-newline": [2, { "minItems": 2 }],
-        "array-element-newline": [2, { "minItems": 2 }]
-    },
-    "parserOptions": {
-        "sourceType": "module"
-    }
-}

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+github: sampotts
+patreon: plyr
+open_collective: plyr

.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,55 @@
+---
+name: Bug report
+about: Report an issue or unexpected behaviour with Plyr
+---
+
+<!--
+
+Before creating the issue, please make sure that...
+
+* You aren't getting any errors in your own code, causing the problem.
+* You are using the latest version of Plyr.
+* There isn't already an open issue for your problem.
+* You are following the documentation correctly (https://github.com/sampotts/plyr/)
+* Your problem doesn't happen if you remove Plyr and use native HTML5 media (when applicable).
+
+For problems with autoplay, see our FAQ (https://github.com/sampotts/plyr/wiki/FAQ)
+
+If you have multiple unrelated problems, create separate issues rather than combining them into one.
+
+Note that leaving sections blank or being vague will make it difficult for us to troubleshoot and we may close the issue.
+-->
+
+### Expected behaviour
+
+### Actual behaviour
+
+### Steps to reproduce
+
+### Environment
+
+- Browser:
+- Version:
+- Operating System:
+- Version:
+
+### Console errors (if any)
+
+### Link to where the bug is happening
+
+<!--
+This link can be either to our demo at https://plyr.io/ if the problem can be observed there, or to a code playground with a **minimal** test case that demonstrates the problem.
+
+You can use one of our prepared templates to get started creating the test case:
+
+* 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
+* Dash.js integration: https://codepen.io/pen?template=zaBgBy
+* Hls.js integration: https://codepen.io/pen?template=oyLKQb
+* Shaka Player integration: https://codepen.io/pen?template=ZRpzZO
+
+It's important that you keep the issue description and replication demo **minimal**. If your replication includes frameworks, libraries or customizations, this makes it much harder to understand the problem and find the bug. For more help on how to create the demo, see https://github.com/sampotts/plyr/wiki/Writing-helpful-issue-descriptions
+
+-->

.github/ISSUE_TEMPLATE/feature.md

@@ -0,0 +1,10 @@
+---
+name: New feature
+about: Request new functionality
+---
+
+<!--
+Please describe the behaviour that you want to add, and why. Be as clear as possible to avoid confusion.
+
+If you want to request multiple features that aren't directly related, then create one issue per feature.
+-->

.github/ISSUE_TEMPLATE/improvement.md

@@ -0,0 +1,10 @@
+---
+name: Improvement
+about: Request a change that isn't a bug or new feature
+---
+
+<!--
+Please describe the behaviour that you want to change, and why. Be as clear as possible to avoid confusion.
+
+If you want to request multiple changes that aren't directly related, then create one issue per change.
+-->

.github/issue_template.md

@@ -1,17 +1,3 @@
-<!---
-Please use this issue template as it makes replicating and fixing the issue easier!
---->
+PLEASE USE OUR SPECIFIC ISSUE TEMPLATES for bug reports, features and improvement suggestions.
 
-### Expected behaviour
-
-### Actual behaviour
-
-### Environment
-
-- Browser:
-- Version:
-- Operating System:
-- Version:
-
-### Steps to reproduce
--
+Our issue tracker is not for support questions. If you need help, follow our support instructions: https://github.com/sampotts/plyr/blob/master/CONTRIBUTING.md#support

.github/pull_request_template.md

@@ -1,8 +1,3 @@
 ### Link to related issue (if applicable)
 
-### Sumary of proposed changes
-
-### Task list
-
-- [ ] Tested on [supported browsers](https://github.com/sampotts/plyr#browser-support)
-- [ ] Gulp build completed
+### Summary of proposed changes

.gitignore

@@ -1,11 +1,9 @@
 node_modules
 .DS_Store
-aws.json
+credentials.json
 *.mp4
-!dist/blank.mp4
-index-*.html
 npm-debug.log
+yarn-error.log
 *.webm
-/package-lock.json
 .idea/
-
+dist/

.gitpod.yml

@@ -0,0 +1,6 @@
+tasks:
+  - before: npm install && npm i gulp -g
+    command: gulp
+ports:
+  - port: 3000
+    onOpen: open-preview

.npmignore

@@ -2,3 +2,11 @@ demo
 .github
 .vscode
 *.code-workspace
+build.json
+credentials.json
+deploy.json
+yarn.lock
+package-lock.json
+*.webm
+*.mp4
+!dist/blank.mp4

.nvmrc

@@ -0,0 +1 @@
+v12.8

.prettierrc

@@ -1,7 +1,7 @@
 {
-    "useTabs": false,
-    "tabWidth": 4,
-    "printWidth": 160,
-    "singleQuote": true,
-    "trailingComma": "all"
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 120
 }

.stickler.yml

@@ -0,0 +1,5 @@
+linters:
+  eslint:
+files:
+  ignore:
+    - 'node_modules/*'

.stylelintrc.json

@@ -1,24 +1,25 @@
 {
-    "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"],
-    "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"],
-    "rules": {
-        "selector-class-pattern": null,
-        "selector-no-qualifying-type": [
-            true,
-            {
-                "ignore": ["attribute", "class"]
-            }
-        ],
-        "indentation": 4,
-        "string-quotes": "single",
-        "max-nesting-depth": 2,
-        "plugin/selector-bem-pattern": {
-            "preset": "bem",
-            "componentName": "(([a-z0-9]+(?!-$)-?)+)",
-            "componentSelectors": {
-                "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$"
-            },
-            "ignoreSelectors": [".*\\.has-.*", ".*\\.is-.*"]
-        }
+  "plugins": ["stylelint-selector-bem-pattern", "stylelint-scss"],
+  "extends": ["stylelint-config-recommended", "stylelint-config-sass-guidelines", "stylelint-config-prettier"],
+  "rules": {
+    "selector-class-pattern": null,
+    "selector-no-qualifying-type": [
+      true,
+      {
+        "ignore": ["attribute", "class"]
+      }
+    ],
+    "string-no-newline": null,
+    "indentation": 2,
+    "string-quotes": "single",
+    "max-nesting-depth": 2,
+    "plugin/selector-bem-pattern": {
+      "preset": "bem",
+      "componentName": "(([a-z0-9]+(?!-$)-?)+)",
+      "componentSelectors": {
+        "initial": "\\.{componentName}(((__|--)(([a-z0-9\\[\\]'=]+(?!-$)-?)+))+)?$"
+      },
+      "ignoreSelectors": [".*\\.has-.*", ".*\\.is-.*"]
     }
+  }
 }

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js: lts/*
+
+script:
+- npm run lint
+- npm run build

.vscode/extensions.json

@@ -2,11 +2,11 @@
     // See http://go.microsoft.com/fwlink/?LinkId=827846
     // for the documentation about the extensions.json format
     "recommendations": [
-        // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
         "dbaeumer.vscode-eslint",
-        "wix.vscode-import-cost",
         "esbenp.prettier-vscode",
-        "shinnn.stylelint",
-        "wayou.vscode-todo-highlight"
+        "wayou.vscode-todo-highlight",
+        "wix.vscode-import-cost",
+        "stylelint.vscode-stylelint",
+        "pflannery.vscode-versionlens"
     ]
 }

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost/dev/plyr/demo",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

CONTRIBUTING.md

@@ -0,0 +1,54 @@
+# Contributing
+
+We welcome bug reports, feature requests and pull requests. If you want to help us out, please follow these guidelines, in order to avoid redundant work.
+
+## Support
+
+Before asking questions, read our [documentation](https://github.com/sampotts/plyr) and [FAQ](https://github.com/sampotts/plyr/wiki/FAQ).
+
+If these doesn't answer your question
+
+- Use [Stack Overflow](https://stackoverflow.com/) for questions that doesn't directly involve Plyr. This includes for example how to use Javascript, CSS or HTML5 media in general, and how to use other frameworks, libraries and technology.
+- Use [our Slack](https://bit.ly/plyr-chat) if you need help using Plyr or have questions about Plyr.
+
+## Commenting
+
+When commenting, keep a civil tone and stay on topic. Don't ask for [support](#support), or post "+1" or "I agree" type of comments. Use the emojis instead.
+
+Asking for the status on issues is discouraged. Unless someone has explicitly said in an issue that it's work in progress, most likely that means no one is working on it. We have a lot to do, and it may not be a top priority for us.
+
+We _may_ moderate discussions. We do this to avoid threads being "hijacked", to avoid confusion in case the content is misleading or outdated, and to avoid bothering people with github notifications.
+
+## Creating issues
+
+Please follow the instructions in our issue templates. Don't use github issues to ask for [support](#support).
+
+## Contributing features and documentation
+
+- If you want to add a feature or make critical changes, you may want to ensure that this is something we also want (so you don't waste your time). Ask us about this in the corresponding issue if there is one, or on [our Slack](https://bit.ly/plyr-chat) otherwise.
+
+- Fork Plyr, and create a new branch in your fork, based on the **develop** branch
+
+- To test locally, you can use the demo site. First make sure you have installed the dependencies with `npm install` or `yarn`. Run `gulp` to build and it will run a local web server for development and watch for any changes.
+
+### Online one-click setup for contributing
+
+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 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.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+
+- Develop and test your modifications.
+
+- Preferably commit your changes as independent logical chunks, with meaningful messages. Make sure you do not commit unnecessary files or changes, such as the build output, or logging and breakpoints you added for testing.
+
+- 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. 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

@@ -0,0 +1,154 @@
+# Controls
+
+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
+
+## Using default controls
+
+If you want to use the standard controls as they are, you don't need to pass any options. If you want to turn on off controls, here's the full list:
+
+```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
+];
+```
+
+### 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.
+
+#### Example
+
+```javascript
+i18n: {
+    restart: 'Restart',
+    rewind: 'Rewind {seektime} secs',
+    play: 'Play',
+    pause: 'Pause',
+    fastForward: 'Forward {seektime} secs',
+    seek: 'Seek',
+    played: 'Played',
+    buffered: 'Buffered',
+    currentTime: 'Current time',
+    duration: 'Duration',
+    volume: 'Volume',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    enableCaptions: 'Enable captions',
+    disableCaptions: 'Disable captions',
+    enterFullscreen: 'Enter fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    frameTitle: 'Player for {title}',
+    captions: 'Captions',
+    settings: 'Settings',
+    speed: 'Speed',
+    normal: 'Normal',
+    quality: 'Quality',
+    loop: 'Loop',
+    start: 'Start',
+    end: 'End',
+    all: 'All',
+    reset: 'Reset',
+    disabled: 'Disabled',
+    advertisement: 'Ad',
+}
+```
+
+Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs".
+
+## Using custom HTML
+
+You can specify the HTML as a `String` or your `Function` return for the controls using the `controls` option.
+
+The classes and data attributes used in your template should match the `selectors` option if you change any.
+
+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
+
+### 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
+
+### Example
+
+Here's an example of custom controls markup (this is just all default controls shown).
+
+```javascript
+const controls = `
+<div class="plyr__controls">
+    <button type="button" class="plyr__control" data-plyr="restart">
+        <svg role="presentation"><use xlink:href="#plyr-restart"></use></svg>
+        <span class="plyr__tooltip" role="tooltip">Restart</span>
+    </button>
+    <button type="button" class="plyr__control" data-plyr="rewind">
+        <svg role="presentation"><use xlink:href="#plyr-rewind"></use></svg>
+        <span class="plyr__tooltip" role="tooltip">Rewind {seektime} secs</span>
+    </button>
+    <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">
+        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>
+        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>
+        <span class="label--pressed plyr__tooltip" role="tooltip">Pause</span>
+        <span class="label--not-pressed plyr__tooltip" role="tooltip">Play</span>
+    </button>
+    <button type="button" class="plyr__control" data-plyr="fast-forward">
+        <svg role="presentation"><use xlink:href="#plyr-fast-forward"></use></svg>
+        <span class="plyr__tooltip" role="tooltip">Forward {seektime} secs</span>
+    </button>
+    <div class="plyr__progress">
+        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
+        <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
+        <span role="tooltip" class="plyr__tooltip">00:00</span>
+    </div>
+    <div class="plyr__time plyr__time--current" aria-label="Current time">00:00</div>
+    <div class="plyr__time plyr__time--duration" aria-label="Duration">00:00</div>
+    <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">
+        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>
+        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>
+        <span class="label--pressed plyr__tooltip" role="tooltip">Unmute</span>
+        <span class="label--not-pressed plyr__tooltip" role="tooltip">Mute</span>
+    </button>
+    <div class="plyr__volume">
+        <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">
+    </div>
+    <button type="button" class="plyr__control" data-plyr="captions">
+        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-captions-on"></use></svg>
+        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-captions-off"></use></svg>
+        <span class="label--pressed plyr__tooltip" role="tooltip">Disable captions</span>
+        <span class="label--not-pressed plyr__tooltip" role="tooltip">Enable captions</span>
+    </button>
+    <button type="button" class="plyr__control" data-plyr="fullscreen">
+        <svg class="icon--pressed" role="presentation"><use xlink:href="#plyr-exit-fullscreen"></use></svg>
+        <svg class="icon--not-pressed" role="presentation"><use xlink:href="#plyr-enter-fullscreen"></use></svg>
+        <span class="label--pressed plyr__tooltip" role="tooltip">Exit fullscreen</span>
+        <span class="label--not-pressed plyr__tooltip" role="tooltip">Enter fullscreen</span>
+    </button>
+</div>
+`;
+
+// Setup the player
+const player = new Plyr('#player', { controls });
+```

README.md

@@ -0,0 +1,886 @@
+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)
+
+# Features
+
+- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
+- 💪 **Accessible** - full support for VTT captions and screen readers
+- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want
+- 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
+  `<span>` or `<a href="#">` button hacks
+- 📱 **Responsive** - works with any screen size
+- 💵 **[Monetization](#ads)** - make money from your videos
+- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
+- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
+- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
+- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
+- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
+- 🖥 **Picture-in-Picture** - supports picture-in-picture mode
+- 📱 **Playsinline** - supports the `playsinline` attribute
+- 🏎 **Speed controls** - adjust speed on the fly
+- 📖 **Multiple captions** - support for multiple caption tracks
+- 🌎 **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
+
+### 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=GRoogML), [Hls.js](https://codepen.io/pen?template=oyLKQb) and [Shaka Player](https://codepen.io/pen?template=ZRpzZO)
+
+# Quick setup
+
+## HTML
+
+Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
+
+### HTML5 Video
+
+```html
+<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
+  <source src="/path/to/video.mp4" type="video/mp4" />
+  <source src="/path/to/video.webm" type="video/webm" />
+
+  <!-- Captions are optional -->
+  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
+</video>
+```
+
+**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
+
+### HTML5 Audio
+
+```html
+<audio id="player" controls>
+  <source src="/path/to/audio.mp3" type="audio/mp3" />
+  <source src="/path/to/audio.ogg" type="audio/ogg" />
+</audio>
+```
+
+For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop`, `hl` (YouTube only) and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
+
+### YouTube
+
+We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `<iframe>` as the source element (which Plyr will progressively enhance) or a bog standard `<div>` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.
+
+```html
+<div class="plyr__video-embed" id="player">
+  <iframe
+    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
+    allowfullscreen
+    allowtransparency
+    allow="autoplay"
+  ></iframe>
+</div>
+```
+
+_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.
+
+Or the `<div>` non progressively enhanced method:
+
+```html
+<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
+```
+
+_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.
+
+### Vimeo
+
+Much the same as YouTube above.
+
+```html
+<div class="plyr__video-embed" id="player">
+  <iframe
+    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
+    allowfullscreen
+    allowtransparency
+    allow="autoplay"
+  ></iframe>
+</div>
+```
+
+Or the `<div>` non progressively enhanced method:
+
+```html
+<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
+```
+
+## JavaScript
+
+You can use Plyr as an ES6 module as follows:
+
+```javascript
+import Plyr from 'plyr';
+
+const player = new Plyr('#player');
+```
+
+Alternatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
+
+```html
+<script src="path/to/plyr.js"></script>
+<script>
+  const player = new Plyr('#player');
+</script>
+```
+
+See [initialising](#initialising) for more information on advanced setups.
+
+You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
+
+```html
+<script src="https://cdn.plyr.io/3.6.6/plyr.js"></script>
+```
+
+...or...
+
+```html
+<script src="https://cdn.plyr.io/3.6.6/plyr.polyfilled.js"></script>
+```
+
+## CSS
+
+Include the `plyr.css` stylsheet 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:
+
+```html
+<link rel="stylesheet" href="https://cdn.plyr.io/3.6.6/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.6/plyr.svg`.
+
+# Ads
+
+Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
+
+- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
+- Grab your publisher ID from the code snippet
+- Enable ads in the [config options](#options) and enter your publisher ID
+
+Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
+
+If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#options).
+
+# Advanced
+
+## Customizing the CSS
+
+If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+
+Here's a list of the properties and what they are used for:
+
+| Name                                           | Description                                                                                             | Default / Fallback                                                    |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `--plyr-color-main`                            | The primary UI color.                                                                                   | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff`    |
+| `--plyr-video-background`                      | The background color of video and poster wrappers for using alpha channel videos and poster images.     | `rgba(0, 0, 0, 1)`    |
+| `--plyr-tab-focus-color`                       | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus.  | `--plyr-color-main`                                                   |
+| `--plyr-badge-background`                      | The background color for badges in the menu.                                                            | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464`    |
+| `--plyr-badge-text-color`                      | The text color for badges.                                                                              | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff`    |
+| `--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-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-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-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-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-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-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-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`                                                                 |
+| `--plyr-range-fill-background`                 | The fill color of the scrubber/progress.                                                                | `--plyr-color-main`                                                   |
+| `--plyr-video-range-track-background`          | The background of the scrubber/progress.                                                                | `--plyr-video-progress-buffered-background`                           |
+| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed).                    | `rgba(255, 255, 255, 0.5)`                                            |
+| `--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-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`                                                                 |
+| `--plyr-tooltip-shadow`                        | The shadow on tooltips.                                                                                 | `0 1px 2px rgba(0, 0, 0, 0.15)`                                       |
+| `--plyr-font-family`                           | The font family used in the player.                                                                     |                                                                       |
+| `--plyr-font-size-base`                        | The base font size. Mainly used for captions.                                                           | `15px`                                                                |
+| `--plyr-font-size-small`                       | The smaller font size. Mainly used for captions.                                                        | `13px`                                                                |
+| `--plyr-font-size-large`                       | The larger font size. Mainly used for captions.                                                         | `18px`                                                                |
+| `--plyr-font-size-xlarge`                      | The even larger font size. Mainly used for captions.                                                    | `21px`                                                                |
+| `--plyr-font-size-time`                        | The font size for the time.                                                                             | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-menu`                        | The font size used in the menu.                                                                         | `--plyr-font-size-small`                                              |
+| `--plyr-font-size-badge`                       | The font size used for badges.                                                                          | `9px`                                                                 |
+| `--plyr-font-weight-regular`                   | The regular font weight.                                                                                | `400`                                                                 |
+| `--plyr-font-weight-bold`                      | The bold font weight.                                                                                   | `600`                                                                 |
+| `--plyr-line-height`                           | The line height used within the player.                                                                 | `1.7`                                                                 |
+| `--plyr-font-smoothing`                        | Whether to enable font antialiasing within the player.                                                  | `false`                                                               |
+
+You can set them in your CSS for all players:
+
+```css
+:root {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or for a specific class name:
+
+```css
+.player {
+  --plyr-color-main: #1ac266;
+}
+```
+
+...or in your HTML:
+
+```html
+<video class="player" style="--plyr-color-main: #1ac266;">
+    ...
+</video>
+```
+
+### 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
+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
+you write. Check out the JavaScript source for more on this.
+
+## SVG
+
+The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build
+system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
+
+### Using the `iconUrl` option
+
+You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser
+limitations or if it's a relative path, just use the path directly.
+
+If you're using the `<base>` tag on your site, you may need to use something like this: [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
+
+More info on SVG sprites here: [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) and the AJAX
+technique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
+
+## Cross Origin (CORS)
+
+You'll notice the `crossorigin` attribute on the example `<video>` elements. This is because the TextTrack captions are loaded from another domain. If your
+TextTrack captions are also hosted on another domain, you will need to add this attribute and make sure your host has the correct headers setup. For more info
+on CORS checkout the MDN docs:
+[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
+
+## Captions
+
+WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element. Be sure to
+[validate your caption files](https://quuz.org/webvtt/).
+
+## JavaScript
+
+### Initialising
+
+You can specify a range of arguments for the constructor to use:
+
+- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
+- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
+- A [jQuery](https://jquery.com) object
+
+_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [multiple players](#multiple-players) below.
+
+#### Single player
+
+Passing a CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector):
+
+```javascript
+const player = new Plyr('#player');
+```
+
+Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):
+
+```javascript
+const player = new Plyr(document.getElementById('player'));
+```
+
+```javascript
+const player = new Plyr(document.querySelector('.js-player'));
+```
+
+The HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds.
+
+#### Multiple players
+
+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));
+```
+
+...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
+const players = Plyr.setup('.js-player');
+```
+
+Both options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array.
+
+#### Options
+
+The second argument for the constructor is the [options](#options) object:
+
+```javascript
+const player = new Plyr('#player', {
+  title: 'Example Title',
+});
+```
+
+Options can be passed as an object to the constructor as above or as JSON in `data-plyr-config` attribute on each of your target elements:
+
+```html
+<video src="/path/to/video.mp4" id="player" controls data-plyr-config='{ "title": "Example Title" }'></video>
+```
+
+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.                                                                                                                            |
+
+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/
+
+# API
+
+There are methods, setters and getters on a Plyr object.
+
+## 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
+const player = new Plyr('#player', {
+  /* options */
+});
+```
+
+You can also access the object through any events:
+
+```javascript
+element.addEventListener('ready', event => {
+  const player = event.detail.plyr;
+});
+```
+
+## Methods
+
+Example method use:
+
+```javascript
+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.                                                     |
+
+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
+player.volume = 0.5; // Sets volume at 50%
+player.currentTime = 10; // Seeks to 10 seconds
+```
+
+Example getters:
+
+```javascript
+player.volume; // 0.5;
+player.currentTime; // 10
+player.fullscreen.active; // false;
+```
+
+| Property             | Getter | Setter | Description                                                                                                                                                                                                                                                                                                                            |
+| -------------------- | ------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isHTML5`            | ✓      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                                                                                                                                                                           |
+| `isEmbed`            | ✓      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                                                                                                                                                                              |
+| `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                                                                                                                                                                         |
+| `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                                                                                                                                                                          |
+| `stopped`            | ✓      | -      | Returns a boolean indicating if the current player is stopped.                                                                                                                                                                                                                                                                         |
+| `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                                                                                                                                                                              |
+| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                                                                                                                                                                           |
+| `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                                                                                                                                                                    |
+| `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                                                                                                                                                                         |
+| `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                                                                                                                                                                            |
+| `volume`             | ✓      | ✓      | Gets or sets the volume for the player. The setter accepts a float between 0 and 1.                                                                                                                                                                                                                                                    |
+| `muted`              | ✓      | ✓      | Gets or sets the muted state of the player. The setter accepts a boolean.                                                                                                                                                                                                                                                              |
+| `hasAudio`           | ✓      | -      | Returns a boolean indicating if the current media has an audio track.                                                                                                                                                                                                                                                                  |
+| `speed`              | ✓      | ✓      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                                                                                                                                                                        |
+| `quality`&sup1;      | ✓      | ✓      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                                                                                                                                                                         |
+| `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.                                                                                                                                                                                                               |
+| `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. |
+| `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                                                                                                                                                                              |
+| `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                                                                                                                                                                             |
+| `pip`&sup1;          | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ (on MacOS Sierra+ and iOS 10+) and Chrome 70+.                                                                                                                                                      |
+| `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
+
+### The `.source` setter
+
+This allows changing the player source and type on the fly.
+
+Video example:
+
+```javascript
+player.source = {
+  type: 'video',
+  title: 'Example title',
+  sources: [
+    {
+      src: '/path/to/movie.mp4',
+      type: 'video/mp4',
+      size: 720,
+    },
+    {
+      src: '/path/to/movie.webm',
+      type: 'video/webm',
+      size: 1080,
+    },
+  ],
+  poster: '/path/to/poster.jpg',
+  previewThumbnails: {
+    src: '/path/to/thumbnails.vtt',
+  },
+  tracks: [
+    {
+      kind: 'captions',
+      label: 'English',
+      srclang: 'en',
+      src: '/path/to/captions.en.vtt',
+      default: true,
+    },
+    {
+      kind: 'captions',
+      label: 'French',
+      srclang: 'fr',
+      src: '/path/to/captions.fr.vtt',
+    },
+  ],
+};
+```
+
+Audio example:
+
+```javascript
+player.source = {
+  type: 'audio',
+  title: 'Example title',
+  sources: [
+    {
+      src: '/path/to/audio.mp3',
+      type: 'audio/mp3',
+    },
+    {
+      src: '/path/to/audio.ogg',
+      type: 'audio/ogg',
+    },
+  ],
+};
+```
+
+YouTube example:
+
+```javascript
+player.source = {
+  type: 'video',
+  sources: [
+    {
+      src: 'bTqVqk7FSmY',
+      provider: 'youtube',
+    },
+  ],
+};
+```
+
+Vimeo example
+
+```javascript
+player.source = {
+  type: 'video',
+  sources: [
+    {
+      src: '143418951',
+      provider: 'vimeo',
+    },
+  ],
+};
+```
+
+_Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
+
+| Property                  | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                    | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |
+| `title`                   | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |
+| `sources`                 | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |
+| `poster`&sup1;            | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |
+| `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
+
+# Events
+
+You can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video. Using your
+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 => {
+  const instance = event.detail.plyr;
+});
+```
+
+## Standard Media Events
+
+| Event Type         | Description                                                                                                                                                                                                            |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `progress`         | Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's `buffered` attribute. |
+| `playing`          | Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).                                                                                         |
+| `play`             | Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior `pause` event.                                                                                        |
+| `pause`            | Sent when playback is paused.                                                                                                                                                                                          |
+| `timeupdate`       | The time indicated by the element's `currentTime` attribute has changed.                                                                                                                                               |
+| `volumechange`     | Sent when the audio volume changes (both when the volume is set and when the `muted` state is changed).                                                                                                                |
+| `seeking`          | Sent when a seek operation begins.                                                                                                                                                                                     |
+| `seeked`           | Sent when a seek operation completes.                                                                                                                                                                                  |
+| `ratechange`       | Sent when the playback speed changes.                                                                                                                                                                                  |
+| `ended`            | Sent when playback completes. _Note:_ This does not fire if `autoplay` is true.                                                                                                                                        |
+| `enterfullscreen`  | Sent when the player enters fullscreen mode (either the proper fullscreen or full-window fallback for older browsers).                                                                                                 |
+| `exitfullscreen`   | Sent when the player exits fullscreen mode.                                                                                                                                                                            |
+| `captionsenabled`  | Sent when captions are enabled.                                                                                                                                                                                        |
+| `captionsdisabled` | Sent when captions are disabled.                                                                                                                                                                                       |
+| `languagechange`   | Sent when the caption language is changed.                                                                                                                                                                             |
+| `controlshidden`   | Sent when the controls are hidden.                                                                                                                                                                                     |
+| `controlsshown`    | Sent when the controls are shown.                                                                                                                                                                                      |
+| `ready`            | Triggered when the instance is ready for API calls.                                                                                                                                                                    |
+
+### HTML5 only
+
+| Event Type       | Description                                                                                                                                                                                                                                                                                                                                    |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loadstart`      | Sent when loading of the media begins.                                                                                                                                                                                                                                                                                                         |
+| `loadeddata`     | The first frame of the media has finished loading.                                                                                                                                                                                                                                                                                             |
+| `loadedmetadata` | The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.                                                                                                                                                                                                                          |
+| `qualitychange`  | The quality of playback has changed.                                                                                                                                                                                                                                                                                                           |
+| `canplay`        | Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`.                                                                                                                                                                                     |
+| `canplaythrough` | Sent when the ready state changes to `CAN_PLAY_THROUGH`, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. _Note:_ Manually setting the `currentTime` will eventually fire a `canplaythrough` event in firefox. Other browsers might not fire this event. |
+| `stalled`        | Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.                                                                                                                                                                                                                                              |
+| `waiting`        | Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).                                                                                                                                                                                                                  |
+| `emptied`        | he media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.                                                                                                                                                                         |
+| `cuechange`      | Sent when a `TextTrack` has changed the currently displaying cues.                                                                                                                                                                                                                                                                             |
+| `error`          | Sent when an error occurs. The element's `error` attribute contains more information.                                                                                                                                                                                                                                                          |
+
+### YouTube only
+
+| Event Type    | Description                                                                                                                                                                                                                                                                                                                |
+| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `statechange` | The state of the player has changed. The code can be accessed via `event.detail.code`. Possible values are `-1`: Unstarted, `0`: Ended, `1`: Playing, `2`: Paused, `3`: Buffering, `5`: Video cued. See the [YouTube Docs](https://developers.google.com/youtube/iframe_api_reference#onStateChange) for more information. |
+
+_Note:_ These events also bubble up the DOM. The event target will be the container element.
+
+Some event details borrowed from [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
+
+# Embeds
+
+YouTube and Vimeo are currently supported and function much like a HTML5 video. Similar events and API methods are available for all types. However if you wish
+to access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the
+third party APIs. More info on the respective API's here:
+
+- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
+- [Vimeo player.js Reference](https://github.com/vimeo/player.js)
+
+_Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.
+
+# Shortcuts
+
+By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the
+document then the shortcuts will work when any element has focus, apart from an element that requires input.
+
+| Key        | Action                                 |
+| ---------- | -------------------------------------- |
+| `0` to `9` | Seek from 0 to 90% respectively        |
+| `space`    | Toggle playback                        |
+| `K`        | Toggle playback                        |
+| &larr;     | Seek backward by the `seekTime` option |
+| &rarr;     | Seek forward by the `seekTime` option  |
+| &uarr;     | Increase volume                        |
+| &darr;     | Decrease volume                        |
+| `M`        | Toggle mute                            |
+| `F`        | Toggle fullscreen                      |
+| `C`        | Toggle captions                        |
+| `L`        | Toggle loop                            |
+
+# Preview thumbnails
+
+It's possible to display preview thumbnails as per the demo when you hover over the scrubber or while you are scrubbing in the main video area. This can be used for all video types but is easiest with HTML5 of course. You will need to generate the sprite or images yourself. This is possible using something like AWS transcoder to generate the frames and then combine them into a sprite image. Sprites are recommended for performance reasons - they will be much faster to download and easier to compress into a small file size making them load faster.
+
+You can see the example VTT files [here](https://cdn.plyr.io/static/demo/thumbs/100p.vtt) and [here](https://cdn.plyr.io/static/demo/thumbs/240p.vtt) for how the sprites are done. The coordinates are set as the `xywh` hash on the URL in the order X Offset, Y Offset, Width, Height (e.g. `240p-00001.jpg#xywh=1708,480,427,240` is offset `1708px` from the left, `480px` from the top and is `427x240px`. If you want to include images per frame, this is also possible but will be slower, resulting in a degraded experience.
+
+# Fullscreen
+
+Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).
+
+# Browser support
+
+Plyr supports the last 2 versions of most _modern_ browsers.
+
+| Browser       | Supported       |
+| ------------- | --------------- |
+| Safari        | ✓               |
+| Mobile Safari | ✓&sup1;         |
+| Firefox       | ✓               |
+| Chrome        | ✓               |
+| Opera         | ✓               |
+| Edge          | ✓               |
+| 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.
+
+## Polyfills
+
+Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the ~90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use [polyfill.io](https://polyfill.io) which provides polyfills based on user agent. This is the method the demo uses.
+
+## Checking for support
+
+You can use the static method to check for support. For example
+
+```javascript
+const supported = Plyr.supported('video', 'html5', true);
+```
+
+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+)
+
+## 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
+{
+  enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+}
+```
+
+If a User Agent is disabled but supports `<video>` and `<audio>` natively, it will use the native player.
+
+# Plugins & Components
+
+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)           |
+| svelte-plyr    | Ben Woodward / benwoodward ([@benwoodward](https://github.com/benwoodward)) | [https://github.com/benwoodward](https://github.com/benwoodward)           |
+
+# Issues
+
+If you find anything weird with Plyr, please let us know using the GitHub issues tracker.
+
+# Author
+
+Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome
+[contributors](https://github.com/sampotts/plyr/graphs/contributors)
+
+# Donate
+
+Plyr costs money to run, not only my time. I donate my time for free as I enjoy building Plyr but unfortunately have to pay for domains, hosting, and more. Any help with costs is appreciated...
+
+- [Donate via Patreon](https://www.patreon.com/plyr)
+- [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
+
+# Mentions
+
+- [ProductHunt](https://www.producthunt.com/tech/plyr)
+- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
+- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
+- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
+- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+- [Front End Focus #177](https://frontendfoc.us/issues/177)
+- [Hacker News](https://news.ycombinator.com/item?id=9136774)
+- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
+- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
+- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
+- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
+
+# Used by
+
+- [Selz.com](https://selz.com)
+- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
+- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
+- [TomTom.com](http://prioritydriving.tomtom.com/)
+- [DIGBMX](http://digbmx.com/)
+- [Grime Archive](https://grimearchive.com/)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
+- [Sparkk TV](https://www.sparkktv.com/)
+- [@halfhalftravel](https://www.halfhalftravel.com/)
+- [BitChute](https://www.bitchute.com)
+- [Rutheneum-Bote](https://gymnasium-rutheneum.de/content/newspaper/kreativwettbewerb.php)
+- [pressakey.com | Blog-Magazin für Videospiele](https://pressakey.com)
+- [STROLLÿN: Work with a View](https://strollyn.com)
+- [CFDA Runway360](https://runway360.cfda.com/)
+
+If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
+
+# Useful links and credits
+
+- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)
+- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
+
+# 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.
+
+## Contributors
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+
+<a href="https://github.com/sampotts/plyr/graphs/contributors"><img src="https://opencollective.com/plyr/contributors.svg?width=890&button=false" /></a>
+
+### Financial Contributors
+
+Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/plyr/contribute)]
+
+#### Individuals
+
+<a href="https://opencollective.com/plyr"><img src="https://opencollective.com/plyr/individuals.svg?width=890"></a>
+
+#### Organizations
+
+Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/plyr/contribute)]
+
+<a href="https://opencollective.com/plyr/organization/0/website"><img src="https://opencollective.com/plyr/organization/0/avatar.svg"></a>
+<a href="https://opencollective.com/plyr/organization/1/website"><img src="https://opencollective.com/plyr/organization/1/avatar.svg"></a><a href="https://opencollective.com/plyr/organization/2/website"><img src="https://opencollective.com/plyr/organization/2/avatar.svg"></a>
+
+# Copyright and License
+
+[The MIT license](LICENSE.md)

bower.json

@@ -1,33 +0,0 @@
-{
-    "name": "plyr",
-    "description": "A simple HTML5 media player using custom controls",
-    "homepage": "http://plyr.io",
-    "keywords": [
-        "Audio",
-        "Video",
-        "HTML5 Audio",
-        "HTML5 Video"
-    ],
-    "authors": [
-        "Sam Potts <sam@potts.es>"
-    ],
-    "dependencies": {},
-    "main": [
-        "dist/plyr.css",
-        "dist/plyr.js",
-        "dist/plyr.svg",
-        "src/less/plyr.less",
-        "src/scss/plyr.scss",
-        "src/js/plyr.js"
-    ],
-    "ignore": [
-        "node_modules",
-        "bower_components",
-        ".gitignore"
-    ],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/sampotts/plyr.git"
-    },
-    "license": "MIT"
-}

build.json

@@ -0,0 +1,48 @@
+{
+    "js": {
+        "plyr.js": {
+            "src": "./src/js/plyr.js",
+            "dist": "./dist/",
+            "formats": ["es", "umd"],
+            "namespace": "Plyr"
+        },
+        "plyr.polyfilled.js": {
+            "src": "./src/js/plyr.polyfilled.js",
+            "dist": "./dist/",
+            "formats": ["es", "umd"],
+            "namespace": "Plyr",
+            "polyfill": true
+        },
+        "demo.js": {
+            "src": "./demo/src/js/demo.js",
+            "dist": "./demo/dist/",
+            "formats": ["iife"],
+            "namespace": "Demo",
+            "polyfill": true
+        }
+    },
+    "css": {
+        "plyr.css": {
+            "src": "./src/sass/plyr.scss",
+            "dist": "./dist/"
+        },
+        "demo.css": {
+            "src": "./demo/src/sass/bundles/demo.scss",
+            "dist": "./demo/dist/"
+        },
+        "error.css": {
+            "src": "./demo/src/sass/bundles/error.scss",
+            "dist": "./demo/dist/"
+        }
+    },
+    "sprite": {
+        "plyr.svg": {
+            "src": "./src/sprite/*.svg",
+            "dist": "./dist"
+        },
+        "demo.svg": {
+            "src": "./src/sprite/*.svg",
+            "dist": "./demo/dist"
+        }
+    }
+}

bundles.json

@@ -1,20 +0,0 @@
-{
-    "plyr": {
-        "sass": {
-            "plyr.css": "src/sass/plyr.scss"
-        },
-        "js": {
-            "plyr.js": "src/js/plyr.js",
-            "plyr.polyfilled.js": "src/js/plyr.polyfilled.js"
-        }
-    },
-    "demo": {
-        "sass": {
-            "demo.css": "demo/src/sass/bundles/demo.scss",
-            "error.css": "demo/src/sass/bundles/error.csss"
-        },
-        "js": {
-            "demo.js": "demo/src/js/demo.js"
-        }
-    }
-}

changelog.md

@@ -1,752 +0,0 @@
-# v3.0.2
-
-*   Fix for Safari not firing error events when trying to load blocked scripts
-
-# v3.0.1
-
-*   Fix for trying to accessing local storage when it's blocked
-
-# v3.0.0
-
-This is a massive release. A _mostly_ complete rewrite in ES6. What started out as a few changes quickly snowballed. There's many breaking changes so be careful upgrading.
-
-### Big changes
-
-*   New settings menu complete with funky animations
-*   Ability to adjust speed of playback
-*   Ability to toggle caption language (HTML5 and Vimeo only)
-*   Ability to set YouTube quality (HTML5 will follow)
-*   Added support for Vimeo captions
-*   Added Picture-in-Picture support (Safari only)
-*   Added AirPlay support (again, Safari only)
-*   Added `playsinline` support for iOS 10+
-*   Soundcloud removed until I can work on a plugin framework
-*   Embedded players are now progressively enhanced - no more empty `<div>`s!
-
-### 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
-*   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
-*   `controlshidden` and `controlsshown` events added for when the controls show or hide
-*   `qualityrequested` and `qualitychange` events for YouTube quality control (HTML5 will follow)
-*   Volume is now `0` to `1` as per HTML5 spec
-*   No longer bodging a `<progress>` behind the `<input type="range">` to make up for WebKit's lack of lower fill styling
-*   Captions now render with line breaks as intended
-*   Captions now render without AJAX using the native events etc
-*   Added a fallback for getting YouTube video data incase `.getVideoData()` disappears when one of their developers randomly deletes it again
-*   Setup and building of the UI should be way "snappier"
-*   Click to toggle inverted time (e.g. 0:01 or -2:59 for a 3 minute video at 1 seconds) - new `toggleInvert` and `invertTime` options
-*   Added `autopause` option for Vimeo
-*   Added `muted` option for you guessed it, muted playback
-*   Restored the `.off()` API method
-*   `.play()` will now return a promise to prevent that pesky uncaught promise issue in Chrome etc
-*   Pressing and hold the seek bar no longer freezes all other updates of the UI
-
-...plus loads of bug fixes.
-
-### Breaking changes
-
-You gotta break eggs to make an omelette. Sadly, there's quite a few breaking changes:
-
-*   Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before
-*   Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info
-*   The data attributes for the embeds are now `data-plyr-provider` and `data-plyr-embed-id` to prevent compatibility issues. These can be changed under `config.attributes.embed` if required
-*   `blankUrl` -> `blankVideo`
-*   `volume` is now `0` to `1` as per HTML5 spec
-*   `keyboardShorcuts` (typo) is now just `keyboard`
-*   `loop` is now `loop.active` in preparation for loop enhancements later
-*   `html` option for custom controls removed in favour of the `controls` option which now accepts an array (to use built in controls) or a string of HTML for custom controls.
-*   `classes` -> `classNames`
-*   `classes.videoWrapper` -> `classNames.video`
-*   `classes.embedWrapper` -> `classNames.embed`
-*   `classes.ready` removed
-*   `classes.setup` removed
-*   `classes.muted` removed
-*   `classes.fullscreen.active` removed in favour of the `:fullscreen` selector
-*   `selectors.html5` removed
-*   `selectors.embed` removed
-*   `selectors.buttons.seek` -> `selectors.inputs.seek`
-*   `selectors.volume.input` -> `selectors.inputs.volume`
-*   `selectors.volume.display` -> `selectors.display.volume`
-*   `selectors.currentTime` -> `selectors.display.currentTime`
-*   `selectors.duration` -> `selectors.display.duration`
-
-### Polyfilling
-
-Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [polyfill.io](https://polyfill.io). Alternatively, you can use the prebuilt polyfilled build but bear in mind this is 20kb larger. I'd suggest working our your own polyfill strategy.
-
-## v2.0.18
-
-*   Fix for YouTube .getVideoData() issue (fixes #709)
-
-## v2.0.17
-
-*   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)
-
-## v2.0.16
-
-*   Fullscreen bug fix (fixes #664)
-
-## v2.0.15
-
-*   Demo fix
-
-## v2.0.14
-
-*   CDN URL updates. Sorry, still working on V3 as hard as I can...
-
-## v2.0.13
-
-*   Repo moved and Vimeo demo fix
-
-## 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)
-
-## v2.0.11
-
-*   Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
-*   Fix for YouTube controls on iPad (fixes #391)
-
-## v2.0.10
-
-*   Added seek event fixes for Vimeo and YouTube (fixes #409)
-*   Added support for embed URLs rather than ID only (fixes #345)
-
-## v2.0.9
-
-*   Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
-
-## v2.0.8
-
-*   Added `isPaused()` API method (thanks to @darrena092)
-*   Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
-*   Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
-*   Fix for Firefox VTT compatibility (thanks to @magourex)
-*   Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
-*   Added Issue and PR templates with the aim of reducing duplicate or duff issues
-
-## v2.0.7
-
-*   Fixed `getCurrentTime()` method (fixes #351)
-*   Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
-
-## v2.0.6
-
-*   Fixed merge issue with `Updated define to work with AMD imports #326` PR
-*   Code formatting
-
-## v2.0.5
-
-*   Fix for Vimeo in IE9 & IE10
-*   Fix for HTML5 elements not firing `ready` event
-
-## v2.0.4
-
-*   Fix for Firefox full screen (fixes #343)
-
-## v2.0.3
-
-*   Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored
-
-## v2.0.2
-
-*   Added 'global' keyboard shortcut option
-
-## v2.0.1
-
-*   Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)
-
-# v2.0.0
-
-This version contains several potential **_breaking changes_**:
-
-*   `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the _instance_ rather than the _element_. This is because the reference to the instance is no longer added to the original element (see below).
-*   The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.
-*   Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This _may_ break any custom styling based on DOM position.
-*   Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-)
-
-And some other changes and bug fixes:
-
-*   New `get()` method on the global plyr object to get all instances inside a container
-*   New API methods: - `getOriginal()` to get the original, _unmodified_ element plyr was setup on (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo) - `getContainer()` to get the players outer wrapper element - `getMedia()` to get the players media element (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo) - `getEmbed()` to access the YouTube or Vimeo API directly - `getType()` to get the type of the player - `isReady()` to determine if an instance has completed setup and necessary APIs are loaded (for YouTube / Vimeo) - `on()` to provide an easy way to listen to events - `stop()` to, you guessed it, stop the player
-*   `destroy()` now works correctly for YouTube and Vimeo (fixes #272)
-*   New `destroyed` event when `destroy()` has completed (original element is passed as event.target)
-*   Default volume is now 10 (max) rather than 5
-*   Sprite is only loaded once (fixes #259)
-*   Fixes for Vimeo post message bugs on source change or destroy (fixes #318)
-*   Save caption state in storage (fixes #311)
-*   Added keyboard shortcuts to the current focused player (with `keyboardShortcuts` boolean option to disable) (fixes #309)
-*   Fix for captions bug (fixes #332)
-*   Change to AMD (fixes #298)
-
-## v1.8.12
-
-*   Vimeo keyboard focus fix (Fixes #317)
-*   Fix for Vimeo on basic support devices
-
-## v1.8.11
-
-*   Fix for keyboard navigation on Vimeo (Fixes #317)
-*   Fix for bug introduced in v1.8.9 related to additional controls
-*   Vimeo API upgrade
-*   Fix for YouTube bug introduced in v1.8.9
-*   Added support for passing array to .setup() (Fixes #319)
-
-## v1.8.10
-
-*   Fix for seek issues introduced in v1.8.9
-
-## v1.8.9
-
-*   Fix for fullscreen not being defined (Fixes #295)
-*   Fix for multiline captions (Fixes #314)
-*   Clean up of type checks and fix for `restart()` (Fixes #315)
-*   Fix for `MEDIA_ERR_SRC_NOT_SUPPORTED` when calling `.source()` API method
-
-## v1.8.8
-
-*   Added getCurrentTime API method (fixes #292)
-*   Fix for !hideControls on touch devices (fixes #303)
-
-## v1.8.7
-
-*   Line height fix
-
-## v1.8.6
-
-*   Reverted font size change
-
-## v1.8.5
-
-*   Fixed overflow issues (fixes #286)
-
-## v1.8.4
-
-*   Fix for large play button on small videos
-
-## v1.8.3
-
-*   Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback
-*   Fixed IE11 icon loading (fixes #269)
-*   Updated screenshot (fixes #281)
-*   Added WordPress plugin (fixes #239)
-*   Added Neos plugin
-*   Added HLS, Shaka and dash.js examples (see #235 for more)
-*   Improvements for controls hiding and showing on touch devices
-
-## v1.8.2
-
-*   Fixed event bubbling
-
-## v1.8.1
-
-*   Fixed inaccurate log message
-
-# v1.8.0
-
-*   **_(Important)_** `setup()` now returns the element Plyr was setup on rather than the `plyr` object. This means `var player = plyr.setup()[0];` would now be `var player = plyr.setup()[0].plyr;`. This improves support for React and other virtual dom frameworks as mentioned in #254
-*   Fixed using a relative URL for `iconUrl` in IE (fixes #269)
-
-# v1.7.0
-
-*   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)
-*   Renamed the 'docs' folder to `demo` to avoid confusion - the readme is the docs after all
-
-## v1.6.20
-
-*   Fix for multiple sprites being requested (fixes #259)
-
-## v1.6.19
-
-*   Fix for scroll direction issues on volume control (fixes #258)
-
-## v1.6.18
-
-*   Reduced rounding of seek value from 1 decimal point to 4 (fixes #242)
-
-## v1.6.17
-
-*   Added `disableContextMenu` option to hide the right click context menu (fixes #248 and #225)
-
-## v1.6.16
-
-*   Always hide standard controls (fixes #225)
-*   Fix for Tooltips overflowing (fixes #230)
-
-## v1.6.15
-
-*   Restore scroll position when exiting full screen (fixes #236)
-
-## v1.6.14
-
-*   SVG sprite loading automatically for an easier setup
-*   Touch devices now show controls on touch rather than pausing playback
-
-## v1.6.13
-
-*   Decreased sensitivity and inverted scroll on volume slider (scroll up to increase, down to decrease)
-
-## v1.6.12
-
-*   Fix for undefined buffer error
-*   Add scroll listener on volume slider (PR #227 bty @igoradamenko)
-
-## v1.6.11
-
-*   Fix for Vimeo fullscreen (fixes #214)
-
-## v1.6.10
-
-*   Changed default icon prefix from 'icon' to 'plyr' to avoid clashes
-
-## v1.6.9
-
-*   Added 'latest' CDN option
-*   Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
-
-## v1.6.8
-
-*   Fix for bug introduced in v1.6.7
-
-## v1.6.7
-
-*   Fixes for using `source` API method on iOS
-
-## v1.6.6
-
-*   Icons cleaned up
-*   IE11 button fix for tooltips (fixes #210)
-
-## v1.6.5
-
-*   IE UI bug fixes
-
-## v1.6.4
-
-*   Bug fix for undefined progress bar
-
-## v1.6.3
-
-*   Seek back to 0 for all media on ended
-*   Check for HTML5 video on ended reload
-*   Update to docs for `showPosterOnEnd` option
-
-## v1.6.2
-
-*   Fix for tooltip displaying when duration is not set (fixes #177)
-*   `showPosterOnEnd` option to show poster when HTML5 video ended (fixes #59)
-*   Error handler for YouTube (fixes #189)
-*   Initial SoundCloud support (fixes #194)
-*   Other minor bug fixes
-
-## v1.6.1
-
-*   Tooltip changes for accessibility
-
-## v1.6.0
-
-*   New, cleaner, UI: - Controls are now overlaid, maintaining the video's ratio and making sizing easier - A large play button can now be overlaid over videos - Default number of control buttons reduced - New play, pause, rewind and fast forward icons - Flexbox all the things!
-*   Tidied up the LESS (and SCSS) as part of the above, variables and mixins in seprate files amking customization and upgrades easier
-*   Toggle mute bug fix; if a player was muted previously and the user refreshed, unmuting would have meant volume was still zero (effectively muted), now the config default value is used. Not ideal but good for now
-*   New `iconUrl` option allowing specifying a same origin SVG sprite location. Loading this way means you don't need the AJAX sprite loading JavaScript
-*   `click` option renamed to `clickToPlay` to make it a bit more self explanatory. Unfortunately cross origin SVG sprites is not supported in any browser yet :-(
-*   `hideControls` is now a global option, rather than being exclusive to fullscreen. Controls are now hidden after 2 seconds of no mouse movement. Controls are always shown when media is paused or stopped. This is defaulted to true.
-*   `sass` folder in `src` renamed from to `scss`
-
-## v1.5.21
-
-*   Bug fix for embeds: `play` not being defined (fixes #185 and #186)
-
-## v1.5.20
-
-*   Bug fix for autoplay option
-
-## v1.5.19
-
-*   Fix for accessing `embed` property after `ready` event fired
-
-## v1.5.18
-
-*   Added 'ready' event for initial setup complete or source change occurs
-*   Fixed SASS stylesheet references to transparentize
-*   Added default font stack to controls
-*   Docs fixes inc controls HTML (fixes #180)
-
-## v1.5.17
-
-*   Expose YouTube and Vimeo API (docs update required) (fixes #176)
-*   Auto set title based on YouTube getVideoData() title property
-*   Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
-
-## v1.5.16
-
-*   Cancel requests on source change (fixes #174)
-
-## v1.5.15
-
-*   Fix for CustomEvent polyfill and related bug (see #172)
-
-## v1.5.14
-
-*   Volume storage fix (fixes #171)
-
-## v1.5.13
-
-*   Fix for manual caption rendering
-
-## v1.5.12
-
-*   Added a duration option to pass the duration of the file
-*   Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
-*   Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
-*   Firefox bug fix for event not defined
-
-## v1.5.11
-
-*   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)
-
-## v1.5.9 + v1.5.10
-
-*   NPM bug fixes
-
-## v1.5.8
-
-*   Fix for touch device seek tooltip
-*   Seek improvements
-
-## v1.5.7
-
-*   Fix for control tooltips always showing
-
-## v1.5.6
-
-*   Seek tooltip (option for tooltips changed, please check docs)
-*   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)
-
-## v1.5.5
-
-*   Fixed controls.md example
-*   Bug fix for docs error page
-*   Bug fix for controls tooltips
-
-## v1.5.4
-
-*   Minor bug fix for clicking video to play/pause after source change
-
-## v1.5.3
-
-*   Minor bug fix for occasional display of 0:00 as the media duration
-
-## v1.5.2
-
-*   `handlers` option renamed to `listeners`
-*   Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)
-*   Removed onSetup config option (use the 'setup' event instead, plyr element is event.plyr)
-*   Style bug fixes
-*   Vimeo seek bug fix (requires whole seconds when seeking)
-*   Fix for fullscreen player (using class hook, not browser fullscreen)
-
-## v1.5.1
-
-*   Fix for event listeners being duplicated on source change
-
-# v1.5.0
-
-*   Vimeo support (fixes #8)
-*   New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)
-*   Switched to BEM methodology (you will need to change CSS and probably HTML)
-*   Decoupled CSS and JS hooks (fixes #129)
-*   Custom controls container (fixes #98)
-*   Fix for private/incognito mode local storage bug (fixes #131)
-*   UMD module setup (fixes #121)
-*   Specify iframe title for Vimeo and YouTube (fixes #124)
-*   Better handling of mission controls (fixes #132)
-*   Retain classname on source change (fixes #120)
-*   Increased thumb size on seek (partially fixes #130)
-*   Passing no argument to `source` api method, now returns current source (by @gurupras)
-*   Ability to add custom handlers to controls prior to Plyr bindings (by @gurupras)
-*   Keyboard navigation improvements (focus on seek, focus trap in fullscreen) (fixes #135)
-
-## v1.3.5
-
-*   Fixed bug with API use on basic supported browsers
-
-## v1.3.4
-
-*   Code cleanup by @calvintam236
-
-## v1.3.3
-
-*   Removed captions being read by screen readers
-
-## v1.3.2
-
-*   Voiceover fix for captions
-
-## v1.3.1
-
-*   ARIA improvements for captions being read
-
-## v1.3.0
-
-*   Internationalization support (i18n) using default controls (required markup changes to controls)
-*   ARIA enhancements for controls (required markup changes to controls)
-*   Captions legibility improvements
-*   YouTube bug fixes
-
-## v1.2.6
-
-*   SASS updates and fixes (cheers @ChristianPV)
-
-## v1.2.5
-
-*   Fix for YouTube quality (let them decide quality)
-
-## v1.2.4
-
-*   Fix for omitted kind attribute on <track> (fixes #88)
-
-## v1.2.3
-
-*   Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)
-*   Docs tidy up
-*   Fullscreen for Safari fix (fixes #96)
-
-## v1.2.2
-
-*   Fix for :focus keyboard vs mouse (fixes #61)
-*   Fix for caption positioning in full screen (fixes #92)
-
-## v1.2.1
-
-*   Tooltip bug fix
-
-# v1.2.0
-
-*   Added YouTube support
-
-## v1.1.13
-
-*   Added icon prefix option for when using default controls
-
-## v1.1.13
-
-*   Logic tweaks for hiding controls in fullscreen
-
-## v1.1.12
-
-*   Bug fix for Chrome Canary
-
-## v1.1.11
-
-*   Bug fix
-
-## v1.1.10
-
-*   Bug fix
-
-## v1.1.9
-
-*   Bug fix for 1.1.8
-
-## v1.1.8
-
-*   setVolume API method improvements (fixes #83)
-
-## v1.1.7
-
-*   Restore classname on destroy()
-
-## v1.1.6
-
-*   New API methods (fixes #77), Fix for non strict mode (fixes #78)
-
-## v1.1.5
-
-*   Fix for incorrect `isFullscreen()` return value in Mozilla (fixes #38)
-
-## v1.1.4
-
-*   Minor bug fixes
-
-## v1.1.3
-
-*   Fixes for random id used in controls with multiple instances and one call to setup
-*   Audio player UI improvements
-
-## v1.1.2
-
-*   Added an onSetup callback option
-*   Added fullscreen API methods `toggleFullscreen()` (must be user iniated), and `isFullscreen()`
-
-## v1.1.1
-
-*   Fix for unsupported browser handling
-*   Fix for config.controls having no effect
-
-## v1.1.0
-
-*   Added config option to set which controls are shown (if using the default controls html) and better handling of missing controls
-
-## v1.0.31
-
-*   Display duration on `metadataloaded`
-
-## v1.0.30
-
-*   Fixed bug with media longer than 60 minutes (fixes #69)
-
-## v1.0.29
-
-*   Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (fixes #47)
-*   Fixed a bug with caption toggle in 1.0.28
-
-## v1.0.28
-
-*   Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)
-
-## v1.0.27
-
-*   Keyboard accessibility improvements (fixes #66)
-
-## v1.0.26
-
-*   Fixes for SASS (cheers @brunowego)
-*   Indentation reset to 4 spaces
-
-## v1.0.25
-
-*   Fixes for iOS volume controls (hidden)
-*   Classnames for left/right controls changed
-
-## v1.0.24
-
-*   Added tooltip option to display labels as tooltips (fixes #50)
-
-## v1.0.23
-
-*   Handling loading states in the UI (fixes #36)
-
-## v1.0.22
-
-*   Added support() API method for checking mimetype support
-*   Added source() API method for setting media source(s) (fixes #44)
-*   Added poster() API method for setting poster source
-*   Refactored captions logic for manual captions
-
-## v1.0.21
-
-*   Added an <input type="range"> for seeking to improve experience (and support dragging) (fixes #40, #42)
-*   Icons for restart and captions improved (and some IDs changed) (fixes #49)
-
-## v1.0.20
-
-*   Default controls included (Fixes #45)
-*   Volume changes on `input` as well as `change` (fixes #43)
-*   Fix for undefined Play text
-*   License changed to MIT
-
-## v1.0.19
-
-*   Fixed firefox fullscreen issue (fixes #38)
-
-## v1.0.18
-
-*   Added CDN references
-
-## v1.0.17
-
-*   SASS support added (thanks to @brunowego)
-*   Docs completely separated to avoid any confusion
-*   New gulp tasks (will add more documentation for this)
-
-## v1.0.16
-
-*   Aria label is now dynamic
-
-## v1.0.15
-
-*   Fix for seek time display in controls
-*   More documentation for controls html
-
-## v1.0.14
-
-*   Minor change for bootstrap compatibility
-
-## v1.0.13
-
-*   Minor tweaks
-
-## v1.0.12
-
-*   Handle native events (issue #34)
-
-## v1.0.11
-
-*   Bug fixes for fullscreen mode
-
-## v1.0.10
-
-*   Bower includes src files now
-*   Folder re-arrangement
-
-## v1.0.9
-
-*   Added buffer progress bar
-*   Fixed Safari 8 caption track (it needs to be removed from the DOM like in Safari 7)
-*   Added validation (it works or it doesn't basically) of the `html` option passed
-
-## v1.0.8
-
-*   Bug fix
-
-## v1.0.7
-
-*   Storing user selected volume in local storage
-
-## v1.0.6
-
-*   Fullscreen fallback for older browsers to use "full window"
-
-## v1.0.5
-
-*   More minor bug fixes and improvements
-
-## v1.0.4
-
-*   Fixed caption legibility issues
-
-## v1.0.3
-
-*   Minor bug fixes
-
-## v1.0.2
-
-*   Added OGG to <audio> example for Firefox
-*   Fixed IE11 fullscreen issues
-
-## v1.0.1
-
-*   Bug fixes for IE (as per usual)
-*   Added CSS hooks for media type
-*   Return instances of Plyr to the element
-
-## v1.0.0
-
-*   Initial release

controls.md

@@ -1,113 +0,0 @@
-# Controls
-
-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.
-
-## 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.
-
-### Example
-
-```javascript
-i18n: {
-    restart:            "Restart",
-    rewind:             "Rewind {seektime} secs",
-    play:               "Play",
-    pause:              "Pause",
-    forward:            "Forward {seektime} secs",
-    buffered:           "buffered",
-    currentTime:        "Current time",
-    duration:           "Duration",
-    volume:             "Volume",
-    toggleMute:         "Toggle Mute",
-    toggleCaptions:     "Toggle Captions",
-    toggleFullscreen:   "Toggle Fullscreen"
-}
-```
-
-Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs".
-
-## Using custom HTML
-
-You can specify the HTML for the controls using the `html` option.
-
-The classes and data attributes used in your template should match the `selectors` option.
-
-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
-
-You can include only the controls you need when specifying custom html.
-
-### Example
-
-This is an example `html` option with all controls.
-
-```javascript
-var controls = ["<div class='plyr__controls'>",
-    "<button type='button' data-plyr='restart'>",
-        "<svg><use xlink:href='#plyr-restart'></use></svg>",
-        "<span class='plyr__sr-only'>Restart</span>",
-    "</button>",
-    "<button type='button' data-plyr='rewind'>",
-        "<svg><use xlink:href='#plyr-rewind'></use></svg>",
-        "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
-    "</button>",
-    "<button type='button' data-plyr='play'>",
-        "<svg><use xlink:href='#plyr-play'></use></svg>",
-        "<span class='plyr__sr-only'>Play</span>",
-    "</button>",
-    "<button type='button' data-plyr='pause'>",
-        "<svg><use xlink:href='#plyr-pause'></use></svg>",
-        "<span class='plyr__sr-only'>Pause</span>",
-    "</button>",
-    "<button type='button' data-plyr='fast-forward'>",
-        "<svg><use xlink:href='#plyr-fast-forward'></use></svg>",
-        "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
-    "</button>",
-    "<span class='plyr__progress'>",
-        "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
-        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
-        "<progress class='plyr__progress--played' max='100' value='0' role='presentation'></progress>",
-        "<progress class='plyr__progress--buffer' max='100' value='0'>",
-            "<span>0</span>% buffered",
-        "</progress>",
-        "<span class='plyr__tooltip'>00:00</span>",
-    "</span>",
-    "<span class='plyr__time'>",
-        "<span class='plyr__sr-only'>Current time</span>",
-        "<span class='plyr__time--current'>00:00</span>",
-    "</span>",
-    "<span class='plyr__time'>",
-        "<span class='plyr__sr-only'>Duration</span>",
-        "<span class='plyr__time--duration'>00:00</span>",
-    "</span>",
-    "<button type='button' data-plyr='mute'>",
-        "<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
-        "<svg><use xlink:href='#plyr-volume'></use></svg>",
-        "<span class='plyr__sr-only'>Toggle Mute</span>",
-    "</button>",
-    "<span class='plyr__volume'>",
-        "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
-        "<input id='volume{id}' class='plyr__volume--input' type='range' min='0' max='10' value='5' data-plyr='volume'>",
-        "<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
-    "</span>",
-    "<button type='button' data-plyr='captions'>",
-        "<svg class='icon--captions-on'><use xlink:href='#plyr-captions-on'></use></svg>",
-        "<svg><use xlink:href='#plyr-captions-off'></use></svg>",
-        "<span class='plyr__sr-only'>Toggle Captions</span>",
-    "</button>",
-    "<button type='button' data-plyr='fullscreen'>",
-        "<svg class='icon--exit-fullscreen'><use xlink:href='#plyr-exit-fullscreen'></use></svg>",
-        "<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
-        "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
-    "</button>",
-"</div>"].join("");
-
-// Setup the player
-plyr.setup('.js-player', {
-    html: controls
-});
-```

demo/error.html

@@ -6,8 +6,14 @@
     <title>Doh. Looks like something went wrong.</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
+    <!-- Icons -->
+    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/error.css">
+    <link rel="stylesheet" href="dist/error.css?v=2">
 
     <!-- Preload -->
     <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">

demo/index.html

@@ -1,187 +1,268 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="utf-8" />
     <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
-    <meta name="description" property="og:description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-    <meta name="author" content="Sam Potts">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta
+      name="description"
+      property="og:description"
+      content="A simple HTML5 media player with custom controls and WebVTT captions."
+    />
+    <meta name="author" content="Sam Potts" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Icons -->
-    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
-    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
-    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico" />
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32" />
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16" />
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png" />
 
-    <!-- Opengraph -->
-    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
-    <meta property="og:site_name" content="Plyr">
-    <meta property="og:url" content="https://plyr.io">
-    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
+    <!-- Open Graph -->
+    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player" />
+    <meta property="og:site_name" content="Plyr" />
+    <meta property="og:url" content="https://plyr.io" />
+    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png" />
 
     <!-- Twitter -->
-    <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="@sam_potts">
-    <meta name="twitter:creator" content="@sam_potts">
-    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@sam_potts" />
+    <meta name="twitter:creator" content="@sam_potts" />
+    <meta name="twitter:card" content="summary_large_image" />
 
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
+    <link rel="stylesheet" href="dist/demo.css" />
 
     <!-- Preload -->
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
-    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
-</head>
+    <link
+      rel="preload"
+      as="font"
+      crossorigin
+      type="font/woff2"
+      href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2"
+    />
+    <link
+      rel="preload"
+      as="font"
+      crossorigin
+      type="font/woff2"
+      href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2"
+    />
 
-<body>
+    <!-- Google Analytics-->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132699580-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-132699580-1');
+    </script>
+  </head>
+
+  <body>
     <div class="grid">
-        <header>
-            <h1>Plyr</h1>
-            <p>A simple, accessible and customisable media player for
-                <button type="button" class="faux-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>,
-                <button type="button" class="faux-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>,
-                <button type="button" class="faux-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
+      <header>
+        <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">
+            <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
+          >,
+          <button type="button" class="faux-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
+          >,
+          <button type="button" class="faux-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</button> and
-                <button type="button" class="faux-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
+                    M6,11V5l5,3L6,11z"
+              ></path></svg
+            >YouTube
+          </button>
+          and
+          <button type="button" class="faux-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</button>
-            </p>
+                       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
+          </button>
+        </p>
 
-            <p>Premium video monitization 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>
+        <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">
-                <span class="button--with-count">
-                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
-                        <svg class="icon" role="presentation">
-                            <title>GitHub</title>
-                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+        <div class="call-to-action">
+          <a href="https://github.com/sampotts/plyr" target="_blank" class="button js-shr">
+            <svg class="icon" role="presentation">
+              <title>GitHub</title>
+              <path
+                d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
                C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
                c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
                c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
                c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
-               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
-                        </svg>
-                        Download on GitHub
-                    </a>
-                </span>
-            </div>
-        </header>
+               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"
+              ></path>
+            </svg>
+            Download on GitHub
+          </a>
+        </div>
+      </header>
+      <main>
+        <div id="container">
+          <video
+            controls
+            crossorigin
+            playsinline
+            data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
+            id="player"
+          >
+            <!-- Video files -->
+            <source
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
+              type="video/mp4"
+              size="576"
+            />
+            <source
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
+              type="video/mp4"
+              size="720"
+            />
+            <source
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
+              type="video/mp4"
+              size="1080"
+            />
 
-        <main>
-            <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
-                <!-- Video files -->
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+            <!-- Caption files -->
+            <track
+              kind="captions"
+              label="English"
+              srclang="en"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+              default
+            />
+            <track
+              kind="captions"
+              label="Français"
+              srclang="fr"
+              src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
+            />
 
-                <!-- Text track file -->
-                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
-                    default>
-                <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
+            <!-- Fallback for browsers that don't support the <video> element -->
+            <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" download>Download</a>
+          </video>
+        </div>
 
-                <!-- Fallback for browsers that don't support the <video> element -->
-                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
-            </video>
-
-            <ul>
-                <li class="plyr__cite plyr__cite--video" hidden>
-                    <small>
-                        <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>
-                        <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--audio" hidden>
-                    <small>
-                        <svg class="icon" title="HTML5">
-                            <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>
-                        <a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--youtube" hidden>
-                    <small>
-                        <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
-                        <span class="color--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
+        <ul>
+          <li class="plyr__cite plyr__cite--video" hidden>
+            <small>
+              <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>
+              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
+                >View From A Blue Moon</a
+              >
+              &copy; Brainfarm
+            </small>
+          </li>
+          <li class="plyr__cite plyr__cite--audio" hidden>
+            <small>
+              <svg class="icon" title="HTML5">
+                <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>
+              <a href="http://www.kishibashi.com/" target="_blank"
+                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
+              >
+              &copy; Kishi Bashi
+            </small>
+          </li>
+          <li class="plyr__cite plyr__cite--youtube" hidden>
+            <small>
+              <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a>
+              on&nbsp;
+              <span class="color--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
-                        </span>
-                    </small>
-                </li>
-                <li class="plyr__cite plyr__cite--vimeo" hidden>
-                    <small>
-                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
-                        <span class="color--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
+                                    M6,11V5l5,3L6,11z"
+                  ></path></svg
+                >YouTube
+              </span>
+            </small>
+          </li>
+          <li class="plyr__cite plyr__cite--vimeo" hidden>
+            <small>
+              <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
+              on&nbsp;
+              <span class="color--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
-                        </span>
-                    </small>
-                </li>
-            </ul>
-        </main>
+                               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
+              </span>
+            </small>
+          </li>
+        </ul>
+      </main>
     </div>
 
     <aside>
-        <svg class="icon">
-            <title>Twitter</title>
-            <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
+      <svg class="icon">
+        <title>Twitter</title>
+        <path
+          d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
        C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
        c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
-       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
-        </svg>
-        <p>If you think Plyr's good,
-            <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" data-shr-network="twitter">tweet it</a>
-        </p>
+       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"
+        ></path>
+      </svg>
+      <p>
+        If you think Plyr's good,
+        <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"
+          >tweet it</a
+        >
+        👍
+      </p>
     </aside>
 
-    <!-- Polyfills -->
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent" crossorigin="anonymous"></script>
-
-    <!-- Plyr core script -->
-    <script src="../dist/plyr.js" crossorigin="anonymous"></script>
-
-    <!-- Sharing libary (https://shr.one) -->
-    <script src="https://cdn.shr.one/1.0.1/shr.js" crossorigin="anonymous"></script>
-
-    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async crossorigin="anonymous"></script>
-
-    <!-- Docs script -->
     <script src="dist/demo.js" crossorigin="anonymous"></script>
-</body>
-
-</html>
+  </body>
+</html>

demo/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "plyr-demo",
+  "version": "1.0.0",
+  "description": "Demo for Plyr",
+  "homepage": "https://plyr.io",
+  "author": "Sam Potts <sam@potts.es>",
+  "dependencies": {
+    "@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.10"
+  }
+}

demo/src/js/demo.js

@@ -1,260 +1,149 @@
 // ==========================================================================
 // Plyr.io demo
 // This code is purely for the https://plyr.io website
-// Please see readme.md in the root or github.com/sampotts/plyr
+// Please see README.md in the root or github.com/sampotts/plyr
 // ==========================================================================
 
-import Raven from 'raven-js';
+import './tab-focus';
+import 'custom-event-polyfill';
+import 'url-polyfill';
+
+import * as Sentry from '@sentry/browser';
+import Shr from 'shr-buttons';
+
+import Plyr from '../../../src/js/plyr';
+import sources from './sources';
+import toggleClass from './toggle-class';
 
 (() => {
-    const isLive = window.location.host === 'plyr.io';
+  const production = 'plyr.io';
 
-    // Raven / Sentry
-    // For demo site (https://plyr.io) only
-    if (isLive) {
-        Raven.config('https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555').install();
-    }
+  // Sentry for demo site (https://plyr.io) only
+  if (window.location.host === production) {
+    Sentry.init({
+      dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
+      whitelistUrls: [production].map((d) => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
+    });
+  }
 
-    document.addEventListener('DOMContentLoaded', () => {
-        Raven.context(() => {
-            if (window.shr) {
-                window.shr.setup({
-                    count: {
-                        classname: 'button__count',
-                    },
-                });
-            }
+  document.addEventListener('DOMContentLoaded', () => {
+    const selector = '#player';
 
-            // Setup tab focus
-            const tabClassName = 'tab-focus';
-
-            // Remove class on blur
-            document.addEventListener('focusout', event => {
-                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(() => {
-                    document.activeElement.classList.add(tabClassName);
-                }, 0);
-            });
-
-            // Setup the player
-            const player = new Plyr('#player', {
-                debug: true,
-                title: 'View From A Blue Moon',
-                iconUrl: '../dist/plyr.svg',
-                keyboard: {
-                    global: true,
-                },
-                tooltips: {
-                    controls: true,
-                },
-                captions: {
-                    active: true,
-                },
-                keys: {
-                    google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
-                },
-                ads: {
-                    enabled: true,
-                    publisherId: '918848828995742',
-                },
-            });
-
-            // Expose for tinkering in the console
-            window.player = player;
-
-            // Setup type toggle
-            const buttons = document.querySelectorAll('[data-source]');
-            const types = {
-                video: 'video',
-                audio: 'audio',
-                youtube: 'youtube',
-                vimeo: 'vimeo',
-            };
-            let currentType = window.location.hash.replace('#', '');
-            const historySupport = window.history && window.history.pushState;
-
-            // Toggle class on an element
-            function toggleClass(element, className, state) {
-                if (element) {
-                    element.classList[state ? 'add' : 'remove'](className);
-                }
-            }
-
-            // Set a new source
-            function newSource(type, init) {
-                // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
-                    return;
-                }
-
-                switch (type) {
-                    case types.video:
-                        player.source = {
-                            type: 'video',
-                            title: 'View From A Blue Moon',
-                            sources: [{
-                                src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
-                                type: 'video/mp4',
-                            }],
-                            poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
-                            tracks: [
-                                {
-                                    kind: 'captions',
-                                    label: 'English',
-                                    srclang: 'en',
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-                                    default: true,
-                                },
-                                {
-                                    kind: 'captions',
-                                    label: 'French',
-                                    srclang: 'fr',
-                                    src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    case types.audio:
-                        player.source = {
-                            type: 'audio',
-                            title: 'Kishi Bashi – “It All Began With A Burst”',
-                            sources: [
-                                {
-                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-                                    type: 'audio/mp3',
-                                },
-                                {
-                                    src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-                                    type: 'audio/ogg',
-                                },
-                            ],
-                        };
-
-                        break;
-
-                    case types.youtube:
-                        player.source = {
-                            type: 'video',
-                            title: 'View From A Blue Moon',
-                            sources: [{
-                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                                provider: 'youtube',
-                            }],
-                        };
-
-                        break;
-
-                    case types.vimeo:
-                        player.source = {
-                            type: 'video',
-                            sources: [{
-                                src: 'https://vimeo.com/76979871',
-                                provider: 'vimeo',
-                            }],
-                        };
-
-                        break;
-
-                    default:
-                        break;
-                }
-
-                // Set the current type for next time
-                currentType = type;
-
-                // Remove active classes
-                Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
-
-                // Set active on parent
-                toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
-
-                // Show cite
-                Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
-                    cite.setAttribute('hidden', '');
-                });
-                document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
-            }
-
-            // Bind to each button
-            Array.from(buttons).forEach(button => {
-                button.addEventListener('click', () => {
-                    const type = button.getAttribute('data-source');
-
-                    newSource(type);
-
-                    if (historySupport) {
-                        window.history.pushState({ type }, '', `#${type}`);
-                    }
-                });
-            });
-
-            // List for backwards/forwards
-            window.addEventListener('popstate', event => {
-                if (event.state && 'type' in event.state) {
-                    newSource(event.state.type);
-                }
-            });
-
-            // On load
-            if (historySupport) {
-                const video = !currentType.length;
-
-                // If there's no current type set, assume video
-                if (video) {
-                    currentType = types.video;
-                }
-
-                // Replace current history state
-                if (currentType in types) {
-                    window.history.replaceState(
-                        {
-                            type: currentType,
-                        },
-                        '',
-                        video ? '' : `#${currentType}`,
-                    );
-                }
-
-                // If it's not video, load the source
-                if (currentType !== types.video) {
-                    newSource(currentType, true);
-                }
-            }
-        });
+    // Setup share buttons
+    Shr.setup('.js-shr', {
+      count: {
+        className: 'button__count',
+      },
+      wrapper: {
+        className: 'button--with-count',
+      },
     });
 
-    // Google analytics
-    // For demo site (https://plyr.io) only
-    /* eslint-disable */
-    if (isLive) {
-        (function(i, s, o, g, r, a, m) {
-            i.GoogleAnalyticsObject = r;
-            i[r] =
-                i[r] ||
-                function() {
-                    (i[r].q = i[r].q || []).push(arguments);
-                };
-            i[r].l = 1 * new Date();
-            a = s.createElement(o);
-            m = s.getElementsByTagName(o)[0];
-            a.async = 1;
-            a.src = g;
-            m.parentNode.insertBefore(a, m);
-        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-        window.ga('create', 'UA-40881672-11', 'auto');
-        window.ga('send', 'pageview');
+    // Setup the player
+    const player = new Plyr(selector, {
+      debug: true,
+      title: 'View From A Blue Moon',
+      iconUrl: 'dist/demo.svg',
+      keyboard: {
+        global: true,
+      },
+      tooltips: {
+        controls: true,
+      },
+      captions: {
+        active: true,
+      },
+      ads: {
+        enabled: window.location.host.includes(production),
+        publisherId: '918848828995742',
+      },
+      previewThumbnails: {
+        enabled: true,
+        src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
+      },
+      vimeo: {
+        // Prevent Vimeo blocking plyr.io demo site
+        referrerPolicy: 'no-referrer',
+      },
+    });
+
+    // Expose for tinkering in the console
+    window.player = player;
+
+    // Setup type toggle
+    const buttons = document.querySelectorAll('[data-source]');
+    const types = Object.keys(sources);
+    const historySupport = Boolean(window.history && window.history.pushState);
+    let currentType = window.location.hash.substring(1);
+    const hasInitialType = currentType.length;
+
+    function render(type) {
+      // Remove active classes
+      Array.from(buttons).forEach((button) => toggleClass(button.parentElement, 'active', false));
+
+      // Set active on parent
+      toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+
+      // Show cite
+      Array.from(document.querySelectorAll('.plyr__cite')).forEach((cite) => {
+        // eslint-disable-next-line no-param-reassign
+        cite.hidden = true;
+      });
+
+      document.querySelector(`.plyr__cite--${type}`).hidden = false;
     }
-    /* eslint-enable */
+
+    // Set a new source
+    function setSource(type, init) {
+      // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+      if (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
+        return;
+      }
+
+      // Set the new source
+      player.source = sources[type];
+
+      // Set the current type for next time
+      currentType = type;
+
+      render(type);
+    }
+
+    // Bind to each button
+    Array.from(buttons).forEach((button) => {
+      button.addEventListener('click', () => {
+        const type = button.getAttribute('data-source');
+
+        setSource(type);
+
+        if (historySupport) {
+          window.history.pushState({ type }, '', `#${type}`);
+        }
+      });
+    });
+
+    // List for backwards/forwards
+    window.addEventListener('popstate', (event) => {
+      if (event.state && Object.keys(event.state).includes('type')) {
+        setSource(event.state.type);
+      }
+    });
+
+    // If there's no current type set, assume video
+    if (!hasInitialType) {
+      currentType = 'video';
+    }
+
+    // Replace current history state
+    if (historySupport && types.includes(currentType)) {
+      window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
+    }
+
+    // If it's not video, load the source
+    if (currentType !== 'video') {
+      setSource(currentType, true);
+    }
+
+    render(currentType);
+  });
 })();

demo/src/js/sources.js

@@ -0,0 +1,81 @@
+const sources = {
+  video: {
+    type: 'video',
+    title: 'View From A Blue Moon',
+    sources: [
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
+        type: 'video/mp4',
+        size: 576,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
+        type: 'video/mp4',
+        size: 720,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
+        type: 'video/mp4',
+        size: 1080,
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
+        type: 'video/mp4',
+        size: 1440,
+      },
+    ],
+    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+    tracks: [
+      {
+        kind: 'captions',
+        label: 'English',
+        srclang: 'en',
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+        default: true,
+      },
+      {
+        kind: 'captions',
+        label: 'French',
+        srclang: 'fr',
+        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+      },
+    ],
+    previewThumbnails: {
+      src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
+    },
+  },
+  audio: {
+    type: 'audio',
+    title: 'Kishi Bashi – “It All Began With A Burst”',
+    sources: [
+      {
+        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+        type: 'audio/mp3',
+      },
+      {
+        src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+        type: 'audio/ogg',
+      },
+    ],
+  },
+  youtube: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+        provider: 'youtube',
+      },
+    ],
+  },
+  vimeo: {
+    type: 'video',
+    sources: [
+      {
+        src: 'https://vimeo.com/40648169',
+        provider: 'vimeo',
+      },
+    ],
+  },
+};
+
+export default sources;

demo/src/js/tab-focus.js

@@ -0,0 +1,31 @@
+// 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

@@ -0,0 +1,5 @@
+// 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

@@ -3,6 +3,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import '../../../../src/sass/lib/css-vars';
+$css-vars-use-native: true;
+
 // Settings
 @import '../settings/breakpoints';
 @import '../settings/colors';

demo/src/sass/bundles/error.scss

@@ -3,12 +3,6 @@
 // ==========================================================================
 @charset 'UTF-8';
 
-// Libs
-@import '../lib/fontface';
-@import '../lib/mixins';
-@import '../lib/normalize';
-@import '../lib/reset';
-
 // Settings
 @import '../settings/colors';
 @import '../settings/cosmetic';
@@ -17,6 +11,12 @@
 @import '../settings/spacing';
 @import '../settings/type';
 
+// Libs
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+@import '../lib/reset';
+
 // Layout
 @import '../layout/error';
 

demo/src/sass/components/buttons.scss

@@ -5,79 +5,80 @@
 // Shared
 .button,
 .button__count {
-    align-items: center;
-    background: $color-button-background;
-    border: 0;
-    border-radius: $border-radius-base;
-    box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
-    display: inline-flex;
-    padding: ($spacing-base * 0.75);
-    position: relative;
-    text-shadow: none;
-    user-select: none;
-    vertical-align: middle;
+  align-items: center;
+  border: 0;
+  border-radius: $border-radius-base;
+  box-shadow: 0 1px 1px rgba(#000, 0.1);
+  display: inline-flex;
+  padding: ($spacing-base * 0.75);
+  position: relative;
+  text-shadow: none;
+  user-select: none;
+  vertical-align: middle;
 }
 
 // Buttons
 .button {
-    font-weight: $font-weight-bold;
-    padding-left: $spacing-base;
-    padding-right: $spacing-base;
-    transition: all 0.2s ease;
+  background: $color-button-background;
+  color: $color-button-text;
+  font-weight: $font-weight-bold;
+  padding-left: ($spacing-base * 1.25);
+  padding-right: ($spacing-base * 1.25);
+  transition: all 0.2s ease;
 
-    &:hover,
-    &:focus {
-        color: $gray-dark;
+  &:hover,
+  &:focus {
+    background: $color-button-background-hover;
 
-        // Remove the underline/border
-        &::after {
-            display: none;
-        }
+    // Remove the underline/border
+    &::after {
+      display: none;
     }
+  }
 
-    &:hover {
-        box-shadow: 0 2px 2px rgba(#000, 0.1);
-        transform: translateY(-1px);
-    }
+  &:hover {
+    box-shadow: 0 2px 2px rgba(#000, 0.1);
+  }
 
-    &:focus {
-        outline: 0;
-    }
+  &:focus {
+    outline: 0;
+  }
 
-    &.tab-focus {
-        @include tab-focus();
-    }
+  &.tab-focus {
+    @include tab-focus();
+  }
 
-    &:active {
-        transform: translateY(1px);
-    }
+  &:active {
+    top: 1px;
+  }
 }
 
 // Button group
 .button--with-count {
-    display: inline-flex;
+  display: inline-flex;
 
-    .button .icon {
-        flex-shrink: 0;
-    }
+  .button .icon {
+    flex-shrink: 0;
+  }
 }
 
 // Count bubble
 .button__count {
-    animation: fadein 0.2s ease;
-    margin-left: ($spacing-base / 2);
+  animation: fadein 0.2s ease;
+  background: $color-button-count-background;
+  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-background;
-        content: '';
-        height: 0;
-        position: absolute;
-        right: 100%;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 0;
-    }
+  &::before {
+    border: $arrow-size solid transparent;
+    border-left-width: 0;
+    border-right-color: $color-button-count-background;
+    content: '';
+    height: 0;
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+  }
 }

demo/src/sass/components/header.scss

@@ -3,17 +3,28 @@
 // ==========================================================================
 
 header {
-    padding-bottom: $spacing-base;
-    text-align: center;
+  padding-bottom: $spacing-base;
+  text-align: center;
 
-    .call-to-action {
-        margin-top: ($spacing-base * 1.5);
-    }
+  h1 span {
+    animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+    display: inline-block;
+    font-weight: $font-weight-light;
+    opacity: 0.5;
+  }
 
-    @media only screen and (min-width: $screen-md) {
-        margin-right: ($spacing-base * 3);
-        max-width: 360px;
-        padding-bottom: ($spacing-base * 2);
-        text-align: left;
+  .call-to-action {
+    margin-top: ($spacing-base * 1.5);
+  }
+
+  @media only screen and (min-width: $screen-md) {
+    margin-right: ($spacing-base * 3);
+    max-width: 360px;
+    padding-bottom: ($spacing-base * 2);
+    text-align: left;
+
+    p:first-of-type {
+      @include font-size($font-size-base + 1);
     }
+  }
 }

demo/src/sass/components/icons.scss

@@ -4,20 +4,20 @@
 
 // Base size icon styles
 .icon {
-    fill: currentColor;
-    height: $icon-size;
-    vertical-align: -3px;
-    width: $icon-size;
+  fill: currentColor;
+  height: $icon-size;
+  vertical-align: -3px;
+  width: $icon-size;
 }
 
 // Within elements
 a svg,
 button svg,
 label svg {
-    pointer-events: none;
+  pointer-events: none;
 }
 
 a .icon,
 .btn .icon {
-    margin-right: floor($spacing-base / 3);
+  margin-right: ($spacing-base / 2);
 }

demo/src/sass/components/links.scss

@@ -4,46 +4,45 @@
 
 // Make a <button> look like an <a>
 button.faux-link {
-    @extend a; // stylelint-disable-line
-    @include cancel-button-styles();
+  @extend a; // stylelint-disable-line
+  @include cancel-button-styles();
 }
 
 // Links
 a {
-    border-bottom: 1px dotted currentColor;
-    color: $color-link;
-    font-weight: $font-weight-bold;
-    position: relative;
-    text-decoration: none;
-    transition: all 0.2s ease;
+  border-bottom: 1px dotted currentColor;
+  color: $color-link;
+  position: relative;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &::after {
+    background: currentColor;
+    content: '';
+    height: 1px;
+    left: 50%;
+    position: absolute;
+    top: 100%;
+    transform: translateX(-50%);
+    transition: width 0.2s ease;
+    width: 0;
+  }
+
+  &:hover,
+  &:focus {
+    border-bottom-color: transparent;
+    outline: 0;
 
     &::after {
-        background: currentColor;
-        content: '';
-        height: 1px;
-        left: 50%;
-        position: absolute;
-        top: 100%;
-        transform: translateX(-50%);
-        transition: width 0.2s ease;
-        width: 0;
+      width: 100%;
     }
+  }
 
-    &:hover,
-    &:focus {
-        border-bottom-color: transparent;
-        outline: 0;
+  &.tab-focus {
+    @include tab-focus();
+  }
 
-        &::after {
-            width: 100%;
-        }
-    }
-
-    &.tab-focus {
-        @include tab-focus();
-    }
-
-    &.no-border::after {
-        display: none;
-    }
+  &.no-border::after {
+    display: none;
+  }
 }

demo/src/sass/components/lists.scss

@@ -5,7 +5,7 @@
 // Lists
 ul,
 li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }

demo/src/sass/components/media.scss

@@ -5,6 +5,6 @@
 img,
 video,
 audio {
-    max-width: 100%;
-    vertical-align: middle;
+  max-width: 100%;
+  vertical-align: middle;
 }

demo/src/sass/components/navigation.scss

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 nav {
-    display: flex;
-    justify-content: center;
-    margin-bottom: $spacing-base;
+  display: flex;
+  justify-content: center;
+  margin-bottom: $spacing-base;
 }

demo/src/sass/components/players.scss

@@ -2,48 +2,35 @@
 // Examples
 // ==========================================================================
 
-// For non supported browsers
-video {
-    max-width: 100%;
-    vertical-align: middle;
-}
-
 // Example players
 .plyr {
-    border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
-    margin: $spacing-base auto;
+  border-radius: $border-radius-large;
+  box-shadow: 0 2px 15px rgba(#000, 0.1);
+  margin: $spacing-base auto;
 
-    &.plyr--audio {
-        max-width: 480px;
-    }
+  &.plyr--audio {
+    max-width: 480px;
+  }
 }
 
 .plyr__video-wrapper::after {
-    border: 1px solid rgba(#000, 0.15);
-    border-radius: inherit;
-    bottom: 0;
-    content: '';
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
+  border: 1px solid rgba(#000, 0.15);
+  border-radius: inherit;
+  bottom: 0;
+  content: '';
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
 }
 
 // Style full supported player
 .plyr__cite {
-    display: none;
-    margin-top: $spacing-base;
+  color: $color-gray-500;
 
-    .icon {
-        margin-right: ceil($spacing-base / 6);
-    }
-}
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
-    display: block;
+  .icon {
+    margin-right: ceil($spacing-base / 6);
+  }
 }

demo/src/sass/layout/core.scss

@@ -4,61 +4,60 @@
 
 html,
 body {
-    display: flex;
-    width: 100%;
+  display: flex;
+  width: 100%;
 }
 
 html {
-    background: $page-background;
-    background-attachment: fixed;
-    height: 100%;
+  background: $page-background;
+  background-attachment: fixed;
+  height: 100%;
 }
 
 body {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
 }
 
 .grid {
-    flex: 1;
-    overflow: auto;
+  flex: 1;
+  overflow: auto;
 }
 
 main {
-    margin: auto;
-    padding-bottom: 1px; // Collapsing margins
-    text-align: center;
+  margin: auto;
+  padding-bottom: 1px; // Collapsing margins
+  text-align: center;
 }
 
 aside {
-    align-items: center;
-    background: #fff;
-    color: $gray;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    padding: ($spacing-base * 0.75);
-    position: relative;
-    text-align: center;
-    text-shadow: none;
-    width: 100%;
+  align-items: center;
+  background: #fff;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: $spacing-base;
+  position: relative;
+  text-align: center;
+  text-shadow: none;
+  width: 100%;
 
-    .icon {
-        fill: $color-twitter;
-        margin-right: ($spacing-base / 2);
-    }
-
-    p {
-        margin: 0;
-    }
-
-    a {
-        color: $color-twitter;
-
-        &.tab-focus {
-            @include tab-focus($color-twitter);
-        }
+  .icon {
+    fill: $color-twitter;
+    margin-right: ($spacing-base / 2);
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: $color-twitter;
+
+    &.tab-focus {
+      @include tab-focus($color-twitter);
     }
+  }
 }

demo/src/sass/layout/error.scss

@@ -5,26 +5,26 @@
 // Error page
 html.error,
 .error body {
-    height: 100%;
+  height: 100%;
 }
 
 html.error {
-    background: $page-background;
-    background-attachment: fixed;
+  background: $page-background;
+  background-attachment: fixed;
 }
 
 .error body {
-    align-items: center;
-    display: flex;
-    width: 100%;
+  align-items: center;
+  display: flex;
+  width: 100%;
 }
 
 .error main {
-    padding: $spacing-base;
-    text-align: center;
-    width: 100%;
+  padding: $spacing-base;
+  text-align: center;
+  width: 100%;
 
-    p {
-        @include font-size($font-size-large);
-    }
+  p {
+    @include font-size($font-size-large);
+  }
 }

demo/src/sass/layout/grid.scss

@@ -3,17 +3,17 @@
 // ==========================================================================
 
 .grid {
-    margin: 0 auto;
-    padding: $spacing-base;
+  margin: 0 auto;
+  padding: $spacing-base;
 
-    @media only screen and (min-width: $screen-md) {
-        align-items: center;
-        display: flex;
-        max-width: $container-max-width;
-        width: 100%;
+  @media only screen and (min-width: $screen-md) {
+    align-items: center;
+    display: flex;
+    max-width: $container-max-width;
+    width: 100%;
 
-        > * {
-            flex: 1;
-        }
+    > * {
+      flex: 1;
     }
+  }
 }

demo/src/sass/lib/animation.scss

@@ -4,10 +4,24 @@
 
 // Fade
 @keyframes fadein {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes shrinkHide {
+  0% {
+    opacity: 0.5;
+    width: 38px;
+  }
+  20% {
+    width: 45px;
+  }
+  100% {
+    opacity: 0;
+    width: 0;
+  }
 }

demo/src/sass/lib/fontface.scss

@@ -3,43 +3,46 @@
 // ==========================================================================
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-light;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-light;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-regular;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-regular;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-medium;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
-        url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-medium;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-bold;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-bold;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
 }
 
 @font-face {
-    font-display: swap;
-    font-family: 'Gordita';
-    font-style: normal;
-    font-weight: $font-weight-black;
-    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+  font-display: swap;
+  font-family: 'Gordita';
+  font-style: normal;
+  font-weight: $font-weight-black;
+  src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),
+    url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
 }

demo/src/sass/lib/mixins.scss

@@ -5,50 +5,50 @@
 // 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;
+  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;
 }
 
 // Nicer focus styles
 // ---------------------------------------
 @mixin tab-focus($color: $tab-focus-default-color) {
-    box-shadow: 0 0 0 3px rgba($color, 0.35);
-    outline: 0;
+  box-shadow: 0 0 0 3px rgba($color, 0.35);
+  outline: 0;
 }
 
 // Use rems for font sizing
 // Leave <body> at 100%/16px
 // ---------------------------------------
 @function calculate-rem($size) {
-    $rem: $size / 16;
-    @return #{$rem}rem;
+  $rem: $size / 16;
+  @return #{$rem}rem;
 }
 
-@mixin font-size($size: 16) {
-    font-size: $size * 1px; // Fallback in px
-    font-size: calculate-rem($size);
+@mixin font-size($size: $font-size-base) {
+  font-size: $size * 1px; // Fallback in px
+  font-size: calculate-rem($size);
 }
 
 // Font smoothing
 // ---------------------------------------
 @mixin font-smoothing($enabled: true) {
-    @if $enabled {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
-    }
+  @if $enabled {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  } @else {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }

demo/src/sass/lib/normalize.scss

@@ -10,9 +10,9 @@
  */
 
 html {
-    line-height: 1.15; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -23,7 +23,7 @@ html {
    */
 
 body {
-    margin: 0;
+  margin: 0;
 }
 
 /**
@@ -36,7 +36,7 @@ footer,
 header,
 nav,
 section {
-    display: block;
+  display: block;
 }
 
 /**
@@ -45,8 +45,8 @@ section {
    */
 
 h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+  font-size: 2em;
+  margin: 0.67em 0;
 }
 
 /* Grouping content
@@ -60,8 +60,8 @@ h1 {
 figcaption,
 figure,
 main {
-    /* 1 */
-    display: block;
+  /* 1 */
+  display: block;
 }
 
 /**
@@ -69,7 +69,7 @@ main {
    */
 
 figure {
-    margin: 1em 40px;
+  margin: 1em 40px;
 }
 
 /**
@@ -78,9 +78,9 @@ figure {
    */
 
 hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
 
 /**
@@ -89,8 +89,8 @@ hr {
    */
 
 pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /* Text-level semantics
@@ -102,8 +102,8 @@ pre {
    */
 
 a {
-    background-color: transparent; /* 1 */
-    -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
 }
 
 /**
@@ -112,9 +112,9 @@ a {
    */
 
 abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }
 
 /**
@@ -123,7 +123,7 @@ abbr[title] {
 
 b,
 strong {
-    font-weight: inherit;
+  font-weight: inherit;
 }
 
 /**
@@ -132,7 +132,7 @@ strong {
 
 b,
 strong {
-    font-weight: bolder;
+  font-weight: bolder;
 }
 
 /**
@@ -143,8 +143,8 @@ strong {
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /**
@@ -152,7 +152,7 @@ samp {
    */
 
 dfn {
-    font-style: italic;
+  font-style: italic;
 }
 
 /**
@@ -160,8 +160,8 @@ dfn {
    */
 
 mark {
-    background-color: #ff0;
-    color: #000;
+  background-color: #ff0;
+  color: #000;
 }
 
 /**
@@ -169,7 +169,7 @@ mark {
    */
 
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 
 /**
@@ -179,18 +179,18 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 /* Embedded content
@@ -202,7 +202,7 @@ sup {
 
 audio,
 video {
-    display: inline-block;
+  display: inline-block;
 }
 
 /**
@@ -210,8 +210,8 @@ video {
    */
 
 audio:not([controls]) {
-    display: none;
-    height: 0;
+  display: none;
+  height: 0;
 }
 
 /**
@@ -219,7 +219,7 @@ audio:not([controls]) {
    */
 
 img {
-    border-style: none;
+  border-style: none;
 }
 
 /**
@@ -227,7 +227,7 @@ img {
    */
 
 svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 /* Forms
@@ -243,10 +243,10 @@ input,
 optgroup,
 select,
 textarea {
-    font-family: sans-serif; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }
 
 /**
@@ -256,8 +256,8 @@ textarea {
 
 button,
 input {
-    /* 1 */
-    overflow: visible;
+  /* 1 */
+  overflow: visible;
 }
 
 /**
@@ -267,8 +267,8 @@ input {
 
 button,
 select {
-    /* 1 */
-    text-transform: none;
+  /* 1 */
+  text-transform: none;
 }
 
 /**
@@ -281,7 +281,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
-    -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button; /* 2 */
 }
 
 /**
@@ -292,8 +292,8 @@ button::-moz-focus-inner,
 [type='button']::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
-    border-style: none;
-    padding: 0;
+  border-style: none;
+  padding: 0;
 }
 
 /**
@@ -304,7 +304,7 @@ button:-moz-focusring,
 [type='button']:-moz-focusring,
 [type='reset']:-moz-focusring,
 [type='submit']:-moz-focusring {
-    outline: 1px dotted ButtonText;
+  outline: 1px dotted ButtonText;
 }
 
 /**
@@ -312,7 +312,7 @@ button:-moz-focusring,
    */
 
 fieldset {
-    padding: 0.35em 0.75em 0.625em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**
@@ -323,12 +323,12 @@ fieldset {
    */
 
 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
 
 /**
@@ -337,8 +337,8 @@ legend {
    */
 
 progress {
-    display: inline-block; /* 1 */
-    vertical-align: baseline; /* 2 */
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
 
 /**
@@ -346,7 +346,7 @@ progress {
    */
 
 textarea {
-    overflow: auto;
+  overflow: auto;
 }
 
 /**
@@ -356,8 +356,8 @@ textarea {
 
 [type='checkbox'],
 [type='radio'] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
@@ -366,7 +366,7 @@ textarea {
 
 [type='number']::-webkit-inner-spin-button,
 [type='number']::-webkit-outer-spin-button {
-    height: auto;
+  height: auto;
 }
 
 /**
@@ -375,8 +375,8 @@ textarea {
    */
 
 [type='search'] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
 /**
@@ -385,7 +385,7 @@ textarea {
 
 [type='search']::-webkit-search-cancel-button,
 [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 /**
@@ -394,8 +394,8 @@ textarea {
    */
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
 /* Interactive
@@ -408,7 +408,7 @@ textarea {
 
 details,
 menu {
-    display: block;
+  display: block;
 }
 
 /*
@@ -416,7 +416,7 @@ menu {
    */
 
 summary {
-    display: list-item;
+  display: list-item;
 }
 
 /* Scripting
@@ -427,7 +427,7 @@ summary {
    */
 
 canvas {
-    display: inline-block;
+  display: inline-block;
 }
 
 /**
@@ -435,7 +435,7 @@ canvas {
    */
 
 template {
-    display: none;
+  display: none;
 }
 
 /* Hidden
@@ -446,5 +446,5 @@ template {
    */
 
 [hidden] {
-    display: none;
+  display: none;
 }

demo/src/sass/lib/reset.scss

@@ -7,5 +7,5 @@
 *,
 *::after,
 *::before {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }

demo/src/sass/settings/colors.scss

@@ -2,31 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
-$gray-light: #cbd0d3;
-$gray-lighter: #dbe3e8;
-$off-white: #f2f5f7;
+// Grayscale
+$color-gray-900: hsl(210, 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%);
+$color-gray-500: lighten($color-gray-600, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
+
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
 // Text
-$color-text: #fff;
-
-// Plyr
-$color-brand-primary: #1aafff;
+$color-text: $color-gray-700;
+$color-headings: $color-brand-primary;
 
 // Brands
 $color-twitter: #4baaf4;
-$color-youtube: #cc181e;
-$color-vimeo: #19b7ed;
 
 // Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
 
 // Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-600;
 
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/settings/cosmetic.scss

@@ -7,6 +7,7 @@ $arrow-size: 5px;
 
 // Radii
 $border-radius-base: 4px;
+$border-radius-large: 8px;
 
 // Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$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: 1280px;
+$container-max-width: 1240px;

demo/src/sass/settings/plyr.scss

@@ -2,17 +2,17 @@
 // Plyr Settings
 // ==========================================================================
 
-// Font
-$plyr-font-family: inherit;
-
-// Sizes
-$plyr-font-size-base: 13px;
-$plyr-font-size-small: 12px;
-$plyr-font-size-time: 11px;
-$plyr-font-size-badges: 9px;
-
-// Captions
-$plyr-font-size-captions-base: $plyr-font-size-base;
-$plyr-font-size-captions-small: $plyr-font-size-small;
-$plyr-font-size-captions-medium: 18px;
-$plyr-font-size-captions-large: 21px;
+@include css-vars(
+  (
+    --plyr-color-main: $color-brand-primary,
+    --plyr-font-size-base: 13px,
+    --plyr-font-size-small: 12px,
+    --plyr-font-size-time: 11px,
+    --plyr-font-size-badges: 9px,
+    --plyr-font-size-menu: var(--plyr-font-size-base),
+    --plyr-font-weight-regular: 500,
+    --plyr-font-weight-bold: 600,
+    --plyr-font-size-captions-medium: 18px,
+    --plyr-font-size-captions-large: 21px,
+  )
+);

demo/src/sass/settings/spacing.scss

@@ -2,4 +2,4 @@
 // Colors
 // ==========================================================================
 
-$spacing-base: 20px;
+$spacing-base: 16px;

demo/src/sass/settings/type.scss

@@ -2,7 +2,8 @@
 // Typography
 // ==========================================================================
 
-$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+$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;

demo/src/sass/type/base.scss

@@ -4,32 +4,31 @@
 
 // Set to 100% for rem sizing
 html {
-    font-size: 100%;
+  font-size: 100%;
 }
 
 body {
-    @include font-smoothing();
-    @include font-size($font-size-base);
-    color: $color-text;
-    font-family: $font-sans-serif;
-    font-weight: $font-weight-medium;
-    line-height: $line-height-base;
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
+  @include font-smoothing();
+  @include font-size($font-size-base);
+  color: $color-text;
+  font-family: $font-sans-serif;
+  font-weight: $font-weight-medium;
+  line-height: $line-height-base;
 }
 
 button,
 input,
 select,
 textarea {
-    font: inherit;
+  font: inherit;
 }
 
 p,
 small {
-    margin: 0 0 $spacing-base;
+  margin: 0 0 ($spacing-base * 1.5);
 }
 
 small {
-    @include font-size($font-size-small);
-    display: block;
+  @include font-size($font-size-small);
+  display: block;
 }

demo/src/sass/type/headings.scss

@@ -3,8 +3,10 @@
 // ==========================================================================
 
 h1 {
-    @include font-size($font-size-h1);
-    font-weight: $font-weight-bold;
-    letter-spacing: $letter-spacing-headings;
-    margin: 0 0 ($spacing-base / 2);
+  @include font-size($font-size-h1);
+  color: $color-headings;
+  font-weight: $font-weight-bold;
+  letter-spacing: $letter-spacing-headings;
+  line-height: 1.2;
+  margin: 0 0 ($spacing-base * 1.5);
 }

demo/src/sass/utilities/cosmetic.scss

@@ -3,5 +3,5 @@
 // ==========================================================================
 
 .no-border {
-    border: 0;
+  border: 0;
 }

demo/src/sass/utilities/hidden.scss

@@ -3,18 +3,18 @@
 // ==========================================================================
 
 [hidden] {
-    display: none;
+  display: none;
 }
 
 // Hide only visually, but have it available for screen readers: h5bp.com/v
 .sr-only {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    opacity: 0.001;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  opacity: 0.001;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }

demo/yarn.lock

@@ -0,0 +1,80 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@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.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@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.22.3"
+    "@sentry/minimal" "5.22.3"
+    "@sentry/types" "5.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@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.22.3"
+    "@sentry/utils" "5.22.3"
+    tslib "^1.9.3"
+
+"@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.22.3"
+    "@sentry/types" "5.22.3"
+    tslib "^1.9.3"
+
+"@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.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.22.3"
+    tslib "^1.9.3"
+
+core-js@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
+custom-event-polyfill@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz#9bc993ddda937c1a30ccd335614c6c58c4f87aee"
+  integrity sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==
+
+shr-buttons@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/shr-buttons/-/shr-buttons-2.0.3.tgz#2ffd021fc3d789e1510ce2736b938bd09ea1da5a"
+  integrity sha512-sPAgHiw4uaIt9TnxTfyZEedDChcldSVtnBHE44cpe/mSC7rqm4IEKZRLYqnVlTcGM+FSDNBPUNpSf50Q2ntd+w==
+
+tslib@^1.9.3:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
+  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+
+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==

deploy.json

@@ -0,0 +1,12 @@
+{
+  "cdn": {
+    "bucket": "plyr",
+    "domain": "cdn.plyr.io",
+    "region": "us-east-1"
+  },
+  "demo": {
+    "bucket": "plyr.io",
+    "domain": "plyr.io",
+    "region": "us-west-1"
+  }
+}

dist/plyr.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-airplay" viewBox="0 0 18 18"><path d="M16 1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v-2H3V3h12v8h-2v2h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/><path d="M4 17h10l-5-6z"/></symbol><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-pip" viewBox="0 0 18 18"><path d="M13.293 3.293L7.022 9.564l1.414 1.414 6.271-6.271L17 7V1h-6z"/><path d="M13 15H3V5h5V3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6h-2v5z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-settings" viewBox="0 0 18 18"><path d="M16.135 7.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094a2 2 0 0 1-2.969-1.23C10.065 1.258 9.669 1 9.219 1h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C1.26 7.935 1 8.33 1 8.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.781.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997zM9 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>

gulpfile.js

@@ -1,412 +1,8 @@
 // ==========================================================================
 // Gulp build script
 // ==========================================================================
-/* global require, __dirname */
-/* eslint no-console: "off" */
 
-const del = require('del');
-const path = require('path');
 const gulp = require('gulp');
-const gutil = require('gulp-util');
-const concat = require('gulp-concat');
-const filter = require('gulp-filter');
-const sass = require('gulp-sass');
-const cleancss = require('gulp-clean-css');
-const run = require('run-sequence');
-const prefix = require('gulp-autoprefixer');
-const gitbranch = require('git-branch');
-const svgstore = require('gulp-svgstore');
-const svgmin = require('gulp-svgmin');
-const rename = require('gulp-rename');
-const s3 = require('gulp-s3');
-const replace = require('gulp-replace');
-const open = require('gulp-open');
-const size = require('gulp-size');
-const rollup = require('gulp-better-rollup');
-const babel = require('rollup-plugin-babel');
-const sourcemaps = require('gulp-sourcemaps');
-const uglify = require('gulp-uglify-es').default;
-const commonjs = require('rollup-plugin-commonjs');
-const resolve = require('rollup-plugin-node-resolve');
+const HubRegistry = require('gulp-hub');
 
-const bundles = require('./bundles.json');
-const pkg = require('./package.json');
-
-// Get AWS config
-let aws = {};
-try {
-    aws = require('./aws.json'); //eslint-disable-line
-} catch (e) {
-    // Do nothing
-}
-
-const minSuffix = '.min';
-
-// Paths
-const root = __dirname;
-const paths = {
-    plyr: {
-        // Source paths
-        src: {
-            sass: path.join(root, 'src/sass/**/*.scss'),
-            js: path.join(root, 'src/js/**/*'),
-            sprite: path.join(root, 'src/sprite/*.svg'),
-        },
-
-        // Output paths
-        output: path.join(root, 'dist/'),
-    },
-    demo: {
-        // Source paths
-        src: {
-            sass: path.join(root, 'demo/src/sass/**/*.scss'),
-            js: path.join(root, 'demo/src/js/**/*'),
-        },
-
-        // Output paths
-        output: path.join(root, 'demo/dist/'),
-
-        // Demo
-        root: path.join(root, 'demo/'),
-    },
-    upload: [
-        path.join(root, `dist/*${minSuffix}.*`),
-        path.join(root, 'dist/*.css'),
-        path.join(root, 'dist/*.svg'),
-        path.join(root, `demo/dist/*${minSuffix}.*`),
-        path.join(root, 'demo/dist/*.css'),
-    ],
-};
-
-// Task arrays
-const tasks = {
-    sass: [],
-    js: [],
-    sprite: [],
-    clean: ['clean'],
-};
-
-// Size plugin
-const sizeOptions = { showFiles: true, gzip: true };
-
-// Browserlist
-const browsers = ['> 1%'];
-
-// Babel config
-const babelrc = {
-    presets: [[
-        'env',
-        {
-            targets: {
-                browsers,
-            },
-            useBuiltIns: true,
-            modules: false,
-        },
-    ]],
-    plugins: ['external-helpers'],
-    babelrc: false,
-    exclude: 'node_modules/**',
-};
-
-// Clean out /dist
-gulp.task('clean', () => {
-    const dirs = [
-        paths.plyr.output,
-        paths.demo.output,
-    ].map(dir => path.join(dir, '**/*'));
-
-    // Don't delete the mp4
-    dirs.push(`!${path.join(paths.plyr.output, '**/*.mp4')}`);
-
-    del(dirs);
-});
-
-const build = {
-    js(files, bundle, options) {
-        Object.keys(files).forEach(key => {
-            const name = `js:${key}`;
-            tasks.js.push(name);
-            const { output } = paths[bundle];
-
-            gulp.task(name, () =>
-                gulp
-                    .src(bundles[bundle].js[key])
-                    .pipe(sourcemaps.init())
-                    .pipe(concat(key))
-                    .pipe(
-                        rollup(
-                            {
-                                plugins: [
-                                    resolve(),
-                                    commonjs(),
-                                    babel(babelrc),
-                                ],
-                            },
-                            options,
-                        ),
-                    )
-                    .pipe(sourcemaps.write(''))
-                    .pipe(gulp.dest(output))
-                    .pipe(filter('**/*.js'))
-                    .pipe(uglify())
-                    .pipe(size(sizeOptions))
-                    .pipe(rename({ suffix: minSuffix }))
-                    .pipe(sourcemaps.write(''))
-                    .pipe(gulp.dest(output)),
-            );
-        });
-    },
-    sass(files, bundle) {
-        Object.keys(files).forEach(key => {
-            const name = `sass:${key}`;
-            tasks.sass.push(name);
-
-            gulp.task(name, () =>
-                gulp
-                    .src(bundles[bundle].sass[key])
-                    .pipe(sass())
-                    .on('error', gutil.log)
-                    .pipe(concat(key))
-                    .pipe(prefix(browsers, { cascade: false }))
-                    .pipe(cleancss())
-                    .pipe(size(sizeOptions))
-                    .pipe(gulp.dest(paths[bundle].output)),
-            );
-        });
-    },
-    sprite(bundle) {
-        const name = `svg:sprite:${bundle}`;
-        tasks.sprite.push(name);
-
-        // Process Icons
-        gulp.task(name, () =>
-            gulp
-                .src(paths[bundle].src.sprite)
-                .pipe(
-                    svgmin({
-                        plugins: [{
-                            removeDesc: true,
-                        }],
-                    }),
-                )
-                .pipe(svgstore())
-                .pipe(rename({ basename: bundle }))
-                .pipe(size(sizeOptions))
-                .pipe(gulp.dest(paths[bundle].output)),
-        );
-    },
-};
-
-// Plyr core files
-build.js(bundles.plyr.js, 'plyr', { name: 'Plyr', format: 'umd' });
-build.sass(bundles.plyr.sass, 'plyr');
-build.sprite('plyr');
-
-// Demo files
-build.sass(bundles.demo.sass, 'demo');
-build.js(bundles.demo.js, 'demo', { format: 'iife' });
-
-// Build all JS
-gulp.task('js', () => {
-    run(tasks.js);
-});
-
-// Watch for file changes
-gulp.task('watch', () => {
-    // Plyr core
-    gulp.watch(paths.plyr.src.js, tasks.js);
-    gulp.watch(paths.plyr.src.sass, tasks.sass);
-    gulp.watch(paths.plyr.src.sprite, tasks.sprite);
-
-    // Demo
-    gulp.watch(paths.demo.src.js, tasks.js);
-    gulp.watch(paths.demo.src.sass, tasks.sass);
-});
-
-// Default gulp task
-gulp.task('default', () => {
-    run(tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'watch');
-});
-
-// Publish a version to CDN and demo
-// --------------------------------------------
-// If aws is setup
-if (Object.keys(aws).includes('cdn') && Object.keys(aws).includes('demo')) {
-    const { version } = pkg;
-
-    // Get branch info
-    const branch = {
-        current: gitbranch.sync(),
-        master: 'master',
-        beta: 'beta',
-    };
-    const allowed = [
-        branch.master,
-        branch.beta,
-    ];
-
-    const maxAge = 31536000; // 1 year
-    const options = {
-        cdn: {
-            headers: {
-                'Cache-Control': `max-age=${maxAge}`,
-                Vary: 'Accept-Encoding',
-            },
-        },
-        demo: {
-            uploadPath: branch.current === branch.beta ? 'beta/' : null,
-            headers: {
-                'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
-                Vary: 'Accept-Encoding',
-            },
-        },
-        symlinks(ver, filename) {
-            return {
-                headers: {
-                    // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
-                    'x-amz-website-redirect-location': `/${ver}/${filename}`,
-                    'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
-                },
-            };
-        },
-    };
-
-    const regex = '(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?';
-    const semver = new RegExp(`v${regex}`, 'gi');
-    const localPath = new RegExp('(../)?dist', 'gi');
-    const versionPath = `https://${aws.cdn.domain}/${version}`;
-    const cdnpath = new RegExp(`${aws.cdn.domain}/${regex}/`, 'gi');
-
-    gulp.task('version', () => {
-        console.log(`Updating versions to '${version}'...`);
-
-        // Replace versioned URLs in source
-        const files = [
-            'plyr.js',
-            'plyr.polyfilled.js',
-            'defaults.js',
-        ];
-        gulp
-            .src(files.map(file => path.join(root, `src/js/${file}`)))
-            .pipe(replace(semver, `v${version}`))
-            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
-            .pipe(gulp.dest(path.join(root, 'src/js/')));
-    });
-
-    // Publish version to CDN bucket
-    gulp.task('cdn', () => {
-        if (!allowed.includes(branch.current)) {
-            console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
-            return null;
-        }
-
-        console.log(`Uploading '${version}' to ${aws.cdn.domain}...`);
-
-        // Upload to CDN
-        return (
-            gulp
-                .src(paths.upload)
-                .pipe(
-                    rename(p => {
-                        p.basename = p.basename.replace(minSuffix, ''); // eslint-disable-line
-                        p.dirname = p.dirname.replace('.', version); // eslint-disable-line
-                    }),
-                )
-                // Remove min suffix from source map URL
-                .pipe(replace(/sourceMappingURL=([\w-?.]+)/, (match, p1) => `sourceMappingURL=${p1.replace(minSuffix, '')}`))
-                .pipe(
-                    size({
-                        showFiles: true,
-                        gzip: true,
-                    }),
-                )
-                .pipe(replace(localPath, versionPath))
-                .pipe(s3(aws.cdn, options.cdn))
-        );
-    });
-
-    // Publish to demo bucket
-    gulp.task('demo', () => {
-        if (!allowed.includes(branch.current)) {
-            console.error(`Must be on ${allowed.join(', ')} to publish! (current: ${branch.current})`);
-            return null;
-        }
-
-        console.log(`Uploading '${version}' demo to ${aws.demo.domain}...`);
-
-        // Replace versioned files in readme.md
-        gulp
-            .src([`${root}/readme.md`])
-            .pipe(replace(cdnpath, `${aws.cdn.domain}/${version}/`))
-            .pipe(gulp.dest(root));
-
-        // Replace local file paths with remote paths in demo HTML
-        // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-        const index = `${paths.demo.root}index.html`;
-        const error = `${paths.demo.root}error.html`;
-        const pages = [index];
-
-        if (branch.current === branch.master) {
-            pages.push(error);
-        }
-
-        gulp
-            .src(pages)
-            .pipe(replace(localPath, versionPath))
-            .pipe(s3(aws.demo, options.demo));
-
-        // Only update CDN for master (prod)
-        if (branch.current !== branch.master) {
-            return null;
-        }
-
-        // Upload error.html to cdn (as well as demo site)
-        return gulp
-            .src([error])
-            .pipe(replace(localPath, versionPath))
-            .pipe(s3(aws.cdn, options.demo));
-    });
-
-    // Update symlinks for latest
-    /* gulp.task("symlinks", function () {
-        console.log("Updating symlinks...");
-
-        return gulp.src(paths.upload)
-            .pipe(through.obj(function (chunk, enc, callback) {
-                if (chunk.stat.isFile()) {
-                    // Get the filename
-                    var filename = chunk.path.split("/").reverse()[0];
-
-                    // Create the 0 byte redirect files to upload
-                    createFile(filename, "")
-                        .pipe(rename(function (path) {
-                            path.dirname = path.dirname.replace(".", "latest");
-                        }))
-                        // Upload to S3 with correct headers
-                        .pipe(s3(aws.cdn, options.symlinks(version, filename)));
-                }
-
-                callback(null, chunk);
-            }));
-    }); */
-
-    // Open the demo site to check it's sweet
-    gulp.task('open', () => {
-        console.log(`Opening ${aws.demo.domain}...`);
-
-        // A file must be specified or gulp will skip the task
-        // Doesn't matter which file since we set the URL above
-        // Weird, I know...
-        return gulp.src([`${paths.demo.root}index.html`]).pipe(
-            open('', {
-                url: `http://${aws.demo.domain}`,
-            }),
-        );
-    });
-
-    // Do everything
-    gulp.task('publish', () => {
-        run('version', tasks.clean, tasks.js, tasks.sass, tasks.sprite, 'cdn', 'demo');
-    });
-}
+gulp.registry(new HubRegistry(['tasks/*.js']));

package.json

@@ -1,74 +1,99 @@
 {
-    "name": "plyr",
-    "version": "3.0.2",
-    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
-    "homepage": "https://plyr.io",
-    "main": "./dist/plyr.js",
-    "browser": "./dist/plyr.min.js",
-    "sass": "./src/sass/plyr.scss",
-    "style": "./dist/plyr.css",
-    "devDependencies": {
-        "babel-core": "^6.26.0",
-        "babel-eslint": "^8.2.2",
-        "babel-plugin-external-helpers": "^6.22.0",
-        "babel-preset-env": "^1.6.1",
-        "del": "^3.0.0",
-        "eslint": "^4.19.0",
-        "eslint-config-airbnb-base": "^12.1.0",
-        "eslint-config-prettier": "^2.9.0",
-        "eslint-plugin-import": "^2.9.0",
-        "git-branch": "^2.0.1",
-        "gulp": "^3.9.1",
-        "gulp-autoprefixer": "^5.0.0",
-        "gulp-better-rollup": "^3.0.0",
-        "gulp-clean-css": "^3.9.3",
-        "gulp-concat": "^2.6.1",
-        "gulp-filter": "^5.1.0",
-        "gulp-open": "^3.0.0",
-        "gulp-rename": "^1.2.2",
-        "gulp-replace": "^0.6.1",
-        "gulp-s3": "^0.11.0",
-        "gulp-sass": "^3.1.0",
-        "gulp-size": "^3.0.0",
-        "gulp-sourcemaps": "^2.6.4",
-        "gulp-svgmin": "^1.2.4",
-        "gulp-svgstore": "^6.1.1",
-        "gulp-uglify-es": "^1.0.1",
-        "gulp-util": "^3.0.8",
-        "prettier-eslint": "^8.8.1",
-        "prettier-stylelint": "^0.4.2",
-        "rollup-plugin-babel": "^3.0.3",
-        "rollup-plugin-commonjs": "^8.4.1",
-        "rollup-plugin-node-resolve": "^3.2.0",
-        "run-sequence": "^2.2.1",
-        "stylelint": "^9.1.3",
-        "stylelint-config-prettier": "^3.0.4",
-        "stylelint-config-recommended": "^2.1.0",
-        "stylelint-config-sass-guidelines": "^5.0.0",
-        "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^2.5.0",
-        "stylelint-selector-bem-pattern": "^2.0.0"
-    },
-    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
-    "repository": {
-        "type": "git",
-        "url": "git://github.com/sampotts/plyr.git"
-    },
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/sampotts/plyr/issues"
-    },
-    "directories": {
-        "doc": "readme.md"
-    },
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "Sam Potts <sam@potts.es>",
-    "dependencies": {
-        "babel-polyfill": "^6.26.0",
-        "custom-event-polyfill": "^0.3.0",
-        "loadjs": "^3.5.2",
-        "raven-js": "^3.23.3"
-    }
+  "name": "plyr",
+  "version": "3.6.6",
+  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
+  "homepage": "https://plyr.io",
+  "author": "Sam Potts <sam@potts.es>",
+  "main": "dist/plyr.js",
+  "types": "src/js/plyr.d.ts",
+  "module": "dist/plyr.min.mjs",
+  "jsnext:main": "dist/plyr.min.mjs",
+  "browser": "dist/plyr.min.js",
+  "sass": "src/sass/plyr.scss",
+  "style": "dist/plyr.css",
+  "keywords": [
+    "HTML5 Video",
+    "HTML5 Audio",
+    "Media Player",
+    "DASH",
+    "Shaka",
+    "WordPress",
+    "HLS"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/sampotts/plyr.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sampotts/plyr/issues"
+  },
+  "browserslist": "> 1%",
+  "scripts": {
+    "build": "gulp build",
+    "lint": "eslint src/js && npm run-script remark",
+    "lint:fix": "eslint --fix src/js",
+    "remark": "remark -f --use 'validate-links=repository:\"sampotts/plyr\"' '{,!(node_modules),.?**/}*.md'",
+    "deploy": "yarn lint && gulp version && gulp build && gulp deploy",
+    "format": "prettier --write \"./{src,demo/src}/**/*.{js,scss}\"",
+    "start": "gulp"
+  },
+  "devDependencies": {
+    "@sampotts/eslint-config": "1.1.7",
+    "autoprefixer": "^10.2.5",
+    "aws-sdk": "^2.888.0",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "babel-eslint": "^10.1.0",
+    "browser-sync": "^2.26.14",
+    "colorette": "1.2.2",
+    "cssnano": "^5.0.1",
+    "del": "^6.0.0",
+    "eslint": "^7.23.0",
+    "fancy-log": "^1.3.3",
+    "git-branch": "^2.0.1",
+    "gulp": "^4.0.2",
+    "gulp-awspublish": "^4.1.2",
+    "gulp-better-rollup": "^4.0.1",
+    "gulp-filter": "^6.0.0",
+    "gulp-header": "^2.0.9",
+    "gulp-hub": "^4.2.0",
+    "gulp-if": "^3.0.0",
+    "gulp-imagemin": "^7.1.0",
+    "gulp-open": "^3.0.1",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^9.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-size": "^3.0.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-svgstore": "^7.0.1",
+    "gulp-terser": "^2.0.1",
+    "postcss": "^8.2.10",
+    "postcss-custom-properties": "^11.0.0",
+    "prettier-eslint": "^12.0.0",
+    "prettier-stylelint": "^0.4.2",
+    "remark-cli": "^9.0.0",
+    "remark-validate-links": "^10.0.4",
+    "rollup": "^2.45.2",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "stylelint": "^13.12.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended": "^4.0.0",
+    "stylelint-config-sass-guidelines": "^8.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-scss": "^3.19.0",
+    "stylelint-selector-bem-pattern": "^2.1.0"
+  },
+  "dependencies": {
+    "core-js": "^3.10.1",
+    "custom-event-polyfill": "^1.0.7",
+    "loadjs": "^4.2.0",
+    "rangetouch": "^2.0.1",
+    "url-polyfill": "^1.1.12"
+  }
 }

plyr.code-workspace

@@ -1,31 +1,37 @@
 {
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		// Exclude from the editor
-		"files.exclude": {
-			"**/node_modules": true
-		},
-		// Exclude from search
-		"search.exclude": {
-			"dist/": true
-		},
-		// Linting
-		"stylelint.enable": true,
-		"css.validate": false,
-		"scss.validate": false,
-		"javascript.validate.enable": false,
-		// Prettier
-		"prettier.eslintIntegration": true,
-		"prettier.stylelintIntegration": true,
-		// Formatting
-		"editor.tabSize": 4,
-		"editor.insertSpaces": true,
-		"editor.formatOnSave": true,
-		// Trim on save
-		"files.trimTrailingWhitespace": true
-	}
-}
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/dist": true
+    },
+
+    // Linting
+    "stylelint.enable": true,
+    "css.validate": false,
+    "scss.validate": false,
+    "javascript.validate.enable": false,
+
+    // Formatting
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
+    "editor.formatOnSave": true,
+
+    // Trim on save
+    "files.trimTrailingWhitespace": true,
+
+    // Special file associations
+    "files.associations": {
+      ".eslintrc": "jsonc"
+    },
+
+    "editor.codeActionsOnSave": {
+      "source.fixAll": true
+    }
+  }
+}

readme.md

@@ -1,712 +0,0 @@
-# Plyr
-
-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 to support Plyr](#donate) - [Chat on Slack](https://bit.ly/plyr-slack)
-
-[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png?v=3)](https://plyr.io)
-
-## Features
-
-*   **Accessible** - full support for VTT captions and screen readers
-*   **[Customisable](#html)** - make the player look how you want with the markup you want
-*   **Semantic** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
-    `<span>` or `<a href="#">` button hacks
-*   **Responsive** - works with any screen size
-*   **HTML Video & Audio** - support for both formats
-*   **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
-*   **[Monetization](#ads)** - make money from your videos
-*   **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
-*   **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
-*   **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
-*   **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
-*   **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
-*   **i18n support** - support for internationalization of controls
-*   **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
-*   **SASS** - to include in your build processes
-
-Oh and yes, it works with Bootstrap.
-
-## Changelog
-
-Check out the [changelog](changelog.md) to see what's new with Plyr.
-
-## Plugins & Components
-
-Some awesome folks have made plugins for CMSs and Components for JavaScript frameworks:
-
-| Type      | Maintainer                                                            | Link                                                                                         |
-| --------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| WordPress | Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake)) | [https://wordpress.org/plugins/plyr/](https://wordpress.org/plugins/plyr/)                   |
-| React     | Jose Miguel Bejarano ([@xDae](https://github.com/xDae))               | [https://github.com/xDae/react-plyr](https://github.com/xDae/react-plyr)                     |
-| 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)         |
-
-## Quick setup
-
-Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp). You can grab all of the source with [NPM](https://www.npmjs.com/package/plyr) using `npm install plyr`.
-
-### HTML
-
-Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) markup so that's all you need for those types.
-
-#### HTML5 Video
-
-```html
-<video poster="/path/to/poster.jpg" id="player" playsinline controls>
-    <source src="/path/to/video.mp4" type="video/mp4">
-    <source src="/path/to/video.webm" type="video/webm">
-
-    <!-- Captions are optional -->
-    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
-</video>
-```
-
-#### HTML5 Audio
-
-```html
-<audio id="player" controls>
-    <source src="/path/to/audio.mp3" type="audio/mp3">
-    <source src="/path/to/audio.ogg" type="audio/ogg">
-</audio>
-```
-
-For YouTube and Vimeo players, Plyr uses progressive enhancement to enhance the default `<iframe>` embeds. Below are some examples. The `plyr__video-embed` classname will make the embed responsive. You can add the `autoplay`, `loop` and `playsinline` (YouTube only) query parameters to the URL and they will be set as config options automatically. For YouTube, the `origin` should be updated to reflect the domain you're hosting the embed on, or you can opt to omit it.
-
-#### YouTube embed
-
-We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/) with the embedded players. You can elect to use an `<iframe>` as the source element (which Plyr will progressively enhance) or a bog standard `<div>` with two essential data attributes - `data-plyr-provider` and `data-plyr-embed-id`.
-
-```html
-<div class="plyr__video-embed" id="player">
-    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
-</div>
-```
-
-_Note_: The `plyr__video-embed` classname will make the player a responsive 16:9 (most common) iframe embed. When plyr itself kicks in, your custom `ratio` config option will be used.
-
-Or the `<div>` non progressively enhanced method:
-
-```html
-<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
-```
-
-_Note_: The `data-plyr-embed-id` can either be the video ID or URL for the media.
-
-#### Vimeo embed
-
-Much the same as YouTube above.
-
-```html
-<div class="plyr__video-embed" id="player">
-    <iframe src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media" allowfullscreen allowtransparency allow="autoplay"></iframe>
-</div>
-```
-
-Or the `<div>` non progressively enhanced method:
-
-```html
-<div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
-```
-
-### JavaScript
-
-Include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
-
-```html
-<script src="path/to/plyr.js"></script>
-<script>const player = new Plyr('#player');</script>
-```
-
-See [initialising](#initialising) for more information on advanced setups.
-
-If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
-
-```html
-<script src="https://cdn.plyr.io/3.0.2/plyr.js"></script>
-```
-
-_Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
-
-### CSS
-
-Include the `plyr.css` stylsheet 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:
-
-```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.0.2/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.0.2/plyr.svg`.
-
-## Ads
-
-Plyr has partnered up with [vi.ai](http://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
-
-*   [Sign up for a vi.ai account](http://vi.ai/publisher-video-monetization/?aid=plyrio)
-*   Grab your publisher ID from the code snippet
-*   Enable ads in the [config options](#options) and enter your publisher ID
-
-Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
-
-## Advanced
-
-### SASS
-
-You can use `bundle.scss` file included in `/src` as part of your build and change variables to suit your design. The SASS require you to
-use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you be should 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
-you write. Check out the JavaScript source for more on this.
-
-### SVG
-
-The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build
-system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
-
-#### Using the `iconUrl` option
-
-You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser
-limitations or if it's a relative path, just use the path directly.
-
-If you're using the `<base>` tag on your site, you may need to use something like this: [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
-
-More info on SVG sprites here: [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) and the AJAX
-technique here: [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)
-
-### Cross Origin (CORS)
-
-You'll notice the `crossorigin` attribute on the example `<video>` elements. This is because the TextTrack captions are loaded from another domain. If your
-TextTrack captions are also hosted on another domain, you will need to add this attribute and make sure your host has the correct headers setup. For more info
-on CORS checkout the MDN docs:
-[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
-
-### Captions
-
-WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element. Be sure to
-[validate your caption files](https://quuz.org/webvtt/).
-
-### JavaScript
-
-#### Initialising
-
-You can specify a range of arguments for the constructor to use:
-
-*   A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
-*   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
-*   A [`NodeList]`(https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
-*   A [jQuery](https://jquery.com) object
-
-_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup.
-
-Here's some examples
-
-Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
-
-```javascript
-const player = new Plyr('#player');
-```
-
-Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):
-
-```javascript
-const player = new Plyr(document.getElementById('player'));
-```
-
-Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
-
-```javascript
-const player = new Plyr(document.querySelectorAll('.js-player'));
-```
-
-The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds
-
-##### Setting up multiple players
-
-```javascript
-const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
-```
-
-The second argument for the constructor is the [#options](options) object:
-
-```javascript
-const player = new Plyr('#player', {
-    /* options */
-});
-```
-
-The constructor will return a Plyr object that can be used with the [API](#api) methods. See the [API](#api) section for more info.
-
-#### Options
-
-Options can be passed as an object to the constructor as above or as JSON in `data-plyr-config` attribute on each of your target elements:
-
-```html
-<video src="/path/to/video.mp4" id="player" controls data-plyr-config='{ "title": "This is an example video", "volume": 1, "debug": true }'></video>
-```
-
-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 you're using the default controls are used then you can specify which settings to show in the menu                                                                                                                                                                                                                                                                  |
-| `i18n`               | Object                     | See [defaults.js](/src/js/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.                                                                                                                                 |
-| `blankUrl`           | 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`           | Boolean                    | `false`                                                                                                                        | Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled by default in some browsers. 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.                                                                                             |
-| `showPosterOnEnd`    | Boolean                    | false                                                                                                                          | This will restore and _reload_ HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution.                                                                                                                                                                       |
-| `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: window.navigator.language.split('-')[0] }`                                                         | `active`: Toggles if captions should be active by default. `language`: Sets the default language to load (if available).                                                                                                                                                                                                                                               |
-| `fullscreen`         | Object                     | `{ enabled: true, fallback: true, iosNative: false }`                                                                          | `enabled`: Toggles whether fullscreen should be enabled. `fallback`: Allow fallback to a full-window solution. `iosNative`: whether to use native iOS fullscreen when entering fullscreen (no custom controls)                                                                                                                                                         |
-| `ratio`              | String                     | `16:9`                                                                                                                         | The aspect ratio you want to use for embedded players.                                                                                                                                                                                                                                                                                                                 |
-| `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`: Options to display in the menu. Most browsers will refuse to play slower than 0.5.                                                                                                                                                                                                                              |
-| `quality`            | Object                     | `{ default: 'default', options: ['hd2160', 'hd1440', 'hd1080', 'hd720', 'large', 'medium', 'small', 'tiny', 'default'] }`      | Currently only supported by YouTube. `default` is the default quality level, determined by YouTube. `options` are the options to display.                                                                                                                                                                                                                              |
-| `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: '' }`                                                                                          | `enabled`: Whether to enable vi.ai ads. `publisherId`: Your unique vi.ai publisher ID.                                                                                                                                                                                                                                                                                 |
-
-1.  Vimeo only
-
-## API
-
-There are methods, setters and getters on a Plyr object.
-
-### 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
-const player = new Plyr('#player', {
-    /* options */
-});
-```
-
-You can also access the object through any events:
-
-```javascript
-element.addEventListener('ready', event => {
-    const player = event.detail.plyr;
-});
-```
-
-### Methods
-
-Example method use:
-
-```javascript
-player.play(); // Start playback
-player.fullscreen.enter(); // Enter fullscreen
-```
-
-| Method                   | Parameters       | Description                                                                                                |
-| ------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------- |
-| `play()`&sup1;           | -                | Start playback.                                                                                            |
-| `pause()`                | -                | Pause playback.                                                                                            |
-| `togglePlay(toggle)`     | 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 based on the specified boolean.                                                        |
-| `on(event, function)`    | String, Function | Add an event listener for the specified event.                                                             |
-| `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) in _some_ browsers - WebKit and Mozilla [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
-
-### Getters and Setters
-
-Example setters:
-
-```javascript
-player.volume = 0.5; // Sets volume at 50%
-player.currentTime = 10; // Seeks to 10 seconds
-```
-
-Example getters:
-
-```javascript
-player.volume; // 0.5;
-player.currentTime; // 10
-player.fullscreen.active; // false;
-```
-
-| Property             | Getter | Setter | Description                                                                                                                                                                          |
-| -------------------- | ------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `isHTML5`            | ✓      | -      | Returns a boolean indicating if the current player is HTML5.                                                                                                                         |
-| `isEmbed`            | ✓      | -      | Returns a boolean indicating if the current player is an embedded player.                                                                                                            |
-| `paused`             | ✓      | -      | Returns a boolean indicating if the current player is paused.                                                                                                                        |
-| `playing`            | ✓      | -      | Returns a boolean indicating if the current player is playing.                                                                                                                       |
-| `ended`              | ✓      | -      | Returns a boolean indicating if the current player has finished playback.                                                                                                            |
-| `buffered`           | ✓      | -      | Returns a float between 0 and 1 indicating how much of the media is buffered                                                                                                         |
-| `currentTime`        | ✓      | ✓      | Gets or sets the currentTime for the player. The setter accepts a float in seconds.                                                                                                  |
-| `seeking`            | ✓      | -      | Returns a boolean indicating if the current player is seeking.                                                                                                                       |
-| `duration`           | ✓      | -      | Returns the duration for the current media.                                                                                                                                          |
-| `volume`             | ✓      | ✓      | Gets or sets the volume for the player. The setter accepts a float between 0 and 1.                                                                                                  |
-| `muted`              | ✓      | ✓      | Gets or sets the muted state of the player. The setter accepts a boolean.                                                                                                            |
-| `hasAudio`           | ✓      | -      | Returns a boolean indicating if the current media has an audio track.                                                                                                                |
-| `speed`              | ✓      | ✓      | Gets or sets the speed for the player. The setter accepts a value in the options specified in your config. Generally the minimum should be 0.5.                                      |
-| `quality`&sup1;      | ✓      | ✓      | Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.                                                                       |
-| `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](#source-setter) below for examples.                                                |
-| `poster`&sup2;       | ✓      | ✓      | Gets or sets the current poster image for the player. The setter accepts a string; the URL for the updated poster image.                                                             |
-| `autoplay`           | ✓      | ✓      | Gets or sets the autoplay state of the player. The setter accepts a boolean.                                                                                                         |
-| `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. |
-| `fullscreen.active`  | ✓      | -      | Returns a boolean indicating if the current player is in fullscreen mode.                                                                                                            |
-| `fullscreen.enabled` | ✓      | -      | Returns a boolean indicating if the current player has fullscreen enabled.                                                                                                           |
-| `pip`                | ✓      | ✓      | Gets or sets the picture-in-picture state of the player. The setter accepts a boolean. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+.                     |
-
-1.  YouTube only. HTML5 will follow.
-2.  HTML5 only
-
-#### The `.source` setter
-
-This allows changing the player source and type on the fly.
-
-Video example:
-
-```javascript
-player.source = {
-    type: 'video',
-    title: 'Example title',
-    sources: [
-        {
-            src: '/path/to/movie.mp4',
-            type: 'video/mp4',
-        },
-        {
-            src: '/path/to/movie.webm',
-            type: 'video/webm',
-        },
-    ],
-    poster: '/path/to/poster.jpg',
-    tracks: [
-        {
-            kind: 'captions',
-            label: 'English',
-            srclang: 'en',
-            src: '/path/to/captions.en.vtt',
-            default: true,
-        },
-        {
-            kind: 'captions',
-            label: 'French',
-            srclang: 'fr',
-            src: '/path/to/captions.fr.vtt',
-        },
-    ],
-};
-```
-
-Audio example:
-
-```javascript
-player.source = {
-    type: 'audio',
-    title: 'Example title',
-    sources: [
-        {
-            src: '/path/to/audio.mp3',
-            type: 'audio/mp3',
-        },
-        {
-            src: '/path/to/audio.ogg',
-            type: 'audio/ogg',
-        },
-    ],
-};
-```
-
-YouTube example:
-
-```javascript
-player.source = {
-    type: 'video',
-    sources: [
-        {
-            src: 'bTqVqk7FSmY',
-            provider: 'youtube',
-        },
-    ],
-};
-```
-
-_Note_: `src` can be the video ID or URL
-
-Vimeo example
-
-```javascript
-player.source = {
-    type: 'video',
-    sources: [
-        {
-            src: '143418951',
-            provider: 'vimeo',
-        },
-    ],
-};
-```
-
-_Note:_ `src` property for YouTube and Vimeo can either be the video ID or the whole URL.
-
-| Property       | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                    |
-| -------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `type`         | String | Either `video` or `audio`. _Note:_ YouTube and Vimeo are currently not supported as audio sources.                                                                                                                                                                                                                                                                                                             |
-| `title`        | String | _Optional._ Title of the new media. Used for the `aria-label` attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.                                                                                                                                                                                                                                                |
-| `sources`      | Array  | This is an array of sources. For HTML5 media, the properties of this object are mapped directly to HTML attributes so more can be added to the object if required.                                                                                                                                                                                                                                             |
-| `poster`&sup1; | String | The URL for the poster image (HTML5 video only).                                                                                                                                                                                                                                                                                                                                                               |
-| `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. |
-
-1.  HTML5 only
-
-## Events
-
-You can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video. Using your
-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 => {
-    const instance = event.detail.plyr;
-});
-```
-
-### Standard Media Events
-
-| Event Type         | Description                                                                                                                                                                                                            |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `progress`         | Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's `buffered` attribute. |
-| `playing`          | Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).                                                                                         |
-| `play`             | Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior `pause` event.                                                                                        |
-| `pause`            | Sent when playback is paused.                                                                                                                                                                                          |
-| `timeupdate`       | The time indicated by the element's `currentTime` attribute has changed.                                                                                                                                               |
-| `volumechange`     | Sent when the audio volume changes (both when the volume is set and when the `muted` state is changed).                                                                                                                |
-| `seeking`          | Sent when a seek operation begins.                                                                                                                                                                                     |
-| `seeked`           | Sent when a seek operation completes.                                                                                                                                                                                  |
-| `ratechange`       | Sent when the playback speed changes.                                                                                                                                                                                  |
-| `ended`            | Sent when playback completes. _Note:_ This does not fire if `autoplay` is true.                                                                                                                                        |
-| `enterfullscreen`  | Sent when the player enters fullscreen mode (either the proper fullscreen or full-window fallback for older browsers).                                                                                                 |
-| `exitfullscreen`   | Sent when the player exits fullscreen mode.                                                                                                                                                                            |
-| `captionsenabled`  | Sent when captions are enabled.                                                                                                                                                                                        |
-| `captionsdisabled` | Sent when captions are disabled.                                                                                                                                                                                       |
-| `languagechange`   | Sent when the caption language is changed.                                                                                                                                                                             |
-| `controlshidden`   | Sent when the controls are hidden.                                                                                                                                                                                     |
-| `controlsshown`    | Sent when the controls are shown.                                                                                                                                                                                      |
-| `ready`            | Triggered when the instance is ready for API calls.                                                                                                                                                                    |
-
-#### HTML5 only
-
-| Event Type       | Description                                                                                                                                                                                                                                                                                                                                    |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `loadstart`      | Sent when loading of the media begins.                                                                                                                                                                                                                                                                                                         |
-| `loadeddata`     | The first frame of the media has finished loading.                                                                                                                                                                                                                                                                                             |
-| `loadedmetadata` | The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.                                                                                                                                                                                                                          |
-| `canplay`        | Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the `HAVE_ENOUGH_DATA` `readyState`.                                                                                                                                                                                     |
-| `canplaythrough` | Sent when the ready state changes to `CAN_PLAY_THROUGH`, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. _Note:_ Manually setting the `currentTime` will eventually fire a `canplaythrough` event in firefox. Other browsers might not fire this event. |
-| `stalled`        | Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.                                                                                                                                                                                                                                              |
-| `waiting`        | Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).                                                                                                                                                                                                                  |
-| `emptied`        | he media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the `load()` method is called to reload it.                                                                                                                                                                         |
-| `cuechange`      | Sent when a `TextTrack` has changed the currently displaying cues.                                                                                                                                                                                                                                                                             |
-| `error`          | Sent when an error occurs. The element's `error` attribute contains more information.                                                                                                                                                                                                                                                          |
-
-#### YouTube only
-
-| Event Type         | Description                                                                                                                                                                                                                                                                                                                |
-| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `statechange`      | The state of the player has changed. The code can be accessed via `event.detail.code`. Possible values are `-1`: Unstarted, `0`: Ended, `1`: Playing, `2`: Paused, `3`: Buffering, `5`: Video cued. See the [YouTube Docs](https://developers.google.com/youtube/iframe_api_reference#onStateChange) for more information. |
-| `qualitychange`    | The quality of playback has changed.                                                                                                                                                                                                                                                                                       |
-| `qualityrequested` | A change to playback quality has been requested. _Note:_ A change to quality can only be _requested_ via the API. There is no guarantee the quality will change to the level requested. You should listen to the `qualitychange` event for true changes.                                                                   |
-
-_Note:_ These events also bubble up the DOM. The event target will be the container element.
-
-Some event details borrowed from [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
-
-## Embeds
-
-YouTube and Vimeo are currently supported and function much like a HTML5 video. Similar events and API methods are available for all types. However if you wish
-to access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the
-third party APIs. More info on the respective API's here:
-
-*   [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
-*   [Vimeo player.js Reference](https://github.com/vimeo/player.js)
-
-_Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.
-
-## Shortcuts
-
-By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the
-document then the shortcuts will work when any element has focus, apart from an element that requires input.
-
-| Key        | Action                                 |
-| ---------- | -------------------------------------- |
-| `0` to `9` | Seek from 0 to 90% respectively        |
-| `space`    | Toggle playback                        |
-| `K`        | Toggle playback                        |
-| &larr;     | Seek backward by the `seekTime` option |
-| &rarr;     | Seek forward by the `seekTime` option  |
-| &uarr;     | Increase volume                        |
-| &darr;     | Decrease volume                        |
-| `M`        | Toggle mute                            |
-| `F`        | Toggle fullscreen                      |
-| `C`        | Toggle captions                        |
-| `L`        | Toggle loop                            |
-
-## Streaming
-
-Because Plyr is an extension of the standard HTML5 video and audio elements, third party streaming plugins can be used with Plyr. Massive thanks to Matias
-Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's a few examples:
-
-*   Using [hls.js](https://github.com/dailymotion/hls.js) - [Demo](http://codepen.io/sampotts/pen/JKEMqB)
-*   Using [Shaka](https://github.com/google/shaka-player) - [Demo](http://codepen.io/sampotts/pen/zBNpVR)
-*   Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN)
-
-## Fullscreen
-
-Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).
-
-## Browser support
-
-Plyr supports the last 2 versions of most _modern_ browsers.
-
-| Browser       | Supported |
-| ------------- | --------- |
-| Safari        | ✓         |
-| Mobile Safari | ✓&sup1;   |
-| Firefox       | ✓         |
-| Chrome        | ✓         |
-| Opera         | ✓         |
-| Edge          | ✓         |
-| IE11          | ✓         |
-| IE10          | ✓&sup2;   |
-
-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))
-
-### Polyfills
-
-Plyr uses ES6 which isn't supported in all browsers quite yet. This means some features will need to be polyfilled to be available otherwise you'll run into issues. We've elected to not burden the ~90% of users that do support these features with extra JS and instead leave polyfilling to you to work out based on your needs. The easiest method I've found is to use [polyfill.io](https://polyfill.io) which provides polyfills based on user agent. This is the method the demo uses.
-
-### Checking for support
-
-You can use the static method to check for support. For example
-
-```javascript
-const supported = Plyr.supported('video', 'html5', true);
-```
-
-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+)
-
-### Disable support programatically
-
-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
-{
-    enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
-}
-```
-
-If a User Agent is disabled but supports `<video>` and `<audio>` natively, it will use the native player.
-
-## RangeTouch
-
-Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with `<input type="range">` elements whereby touching the track to set the value
-doesn't work and sliding the thumb can be tricky. To combat this, I've created [RangeTouch](https://rangetouch.com) which I'd recommend including in your
-solution. It's a tiny script with a nice benefit for users on touch devices.
-
-## Issues
-
-If you find anything weird with Plyr, please let us know using the GitHub issues tracker.
-
-## Author
-
-Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome
-[contributors](https://github.com/sampotts/plyr/graphs/contributors)
-
-## Donate
-
-Plyr costs money to run, not only my time - I donate that for free but domains, hosting and more. Any help is appreciated...
-[Donate to support Plyr](https://www.paypal.me/pottsy/20usd)
-
-## Mentions
-
-*   [ProductHunt](https://www.producthunt.com/tech/plyr)
-*   [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
-*   [HTML5 Weekly #177](http://html5weekly.com/issues/177)
-*   [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
-*   [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
-*   [Hacker News](https://news.ycombinator.com/item?id=9136774)
-*   [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
-*   [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
-*   [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
-*   [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
-
-## Used by
-
-*   [Selz.com](https://selz.com)
-*   [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
-*   [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
-*   [TomTom.com](http://prioritydriving.tomtom.com/)
-*   [DIGBMX](http://digbmx.com/)
-*   [Grime Archive](https://grimearchive.com/)
-*   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
-*   [Oscar Radio](http://oscar-radio.xyz/)
-*   [Sparkk TV](https://www.sparkktv.com/)
-
-Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
-
-## Useful links and credits
-
-Credit to the PayPal HTML5 Video player from which Plyr's caption functionality was originally ported from:
-
-*   [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
-*   [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
-
-## Thanks
-
-[![Fastly](https://cdn.plyr.io/static/demo/fastly-logo.png)](https://www.fastly.com/)
-
-Massive thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
-
-## Copyright and License
-
-[The MIT license](license.md)

src/js/captions.js

@@ -3,229 +3,405 @@
 // TODO: Create as class
 // ==========================================================================
 
-import support from './support';
-import utils from './utils';
 import controls from './controls';
+import support from './support';
+import { dedupe } from './utils/arrays';
+import browser from './utils/browser';
+import {
+  createElement,
+  emptyElement,
+  getAttributesFromSelector,
+  insertAfter,
+  removeElement,
+  toggleClass,
+} from './utils/elements';
+import { on, triggerEvent } from './utils/events';
+import fetch from './utils/fetch';
+import i18n from './utils/i18n';
+import is from './utils/is';
+import { getHTML } from './utils/strings';
+import { parseUrl } from './utils/urls';
 
 const captions = {
-    // Setup captions
-    setup() {
-        // Requires UI support
-        if (!this.supported.ui) {
-            return;
+  // Setup captions
+  setup() {
+    // Requires UI support
+    if (!this.supported.ui) {
+      return;
+    }
+
+    // Only Vimeo and HTML5 video supported at this point
+    if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
+      // Clear menu and hide
+      if (
+        is.array(this.config.controls) &&
+        this.config.controls.includes('settings') &&
+        this.config.settings.includes('captions')
+      ) {
+        controls.setCaptionsMenu.call(this);
+      }
+
+      return;
+    }
+
+    // Inject the container
+    if (!is.element(this.elements.captions)) {
+      this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
+
+      insertAfter(this.elements.captions, this.elements.wrapper);
+    }
+
+    // Fix IE captions if CORS is used
+    // Fetch captions and inject as blobs instead (data URIs not supported!)
+    if (browser.isIE && window.URL) {
+      const elements = this.media.querySelectorAll('track');
+
+      Array.from(elements).forEach((track) => {
+        const src = track.getAttribute('src');
+        const url = parseUrl(src);
+
+        if (
+          url !== null &&
+          url.hostname !== window.location.href.hostname &&
+          ['http:', 'https:'].includes(url.protocol)
+        ) {
+          fetch(src, 'blob')
+            .then((blob) => {
+              track.setAttribute('src', window.URL.createObjectURL(blob));
+            })
+            .catch(() => {
+              removeElement(track);
+            });
         }
+      });
+    }
 
-        // Set default language if not set
-        const stored = this.storage.get('language');
+    // Get and set initial data
+    // The "preferred" options are not realized unless / until the wanted language has a match
+    // * languages: Array of user's browser languages.
+    // * language:  The language preferred by user settings or config
+    // * active:    The state preferred by user settings or config
+    // * toggled:   The real captions state
 
-        if (!utils.is.empty(stored)) {
-            this.captions.language = stored;
-        }
+    const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
+    const languages = dedupe(browserLanguages.map((language) => language.split('-')[0]));
+    let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
 
-        if (utils.is.empty(this.captions.language)) {
-            this.captions.language = this.config.captions.language.toLowerCase();
-        }
+    // Use first browser language when language is 'auto'
+    if (language === 'auto') {
+      [language] = languages;
+    }
 
-        // Set captions enabled state if not set
-        if (!utils.is.boolean(this.captions.active)) {
-            const active = this.storage.get('captions');
+    let active = this.storage.get('captions');
+    if (!is.boolean(active)) {
+      ({ active } = this.config.captions);
+    }
 
-            if (utils.is.boolean(active)) {
-                this.captions.active = active;
-            } else {
-                this.captions.active = this.config.captions.active;
-            }
-        }
+    Object.assign(this.captions, {
+      toggled: false,
+      active,
+      language,
+      languages,
+    });
 
-        // Only Vimeo and HTML5 video supported at this point
-        if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
-            // Clear menu and hide
-            if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
-                controls.setCaptionsMenu.call(this);
-            }
+    // Watch changes to textTracks and update captions menu
+    if (this.isHTML5) {
+      const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack';
+      on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this));
+    }
 
-            return;
-        }
-        // Inject the container
-        if (!utils.is.element(this.elements.captions)) {
-            this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions));
+    // Update available languages in list next tick (the event must not be triggered before the listeners)
+    setTimeout(captions.update.bind(this), 0);
+  },
 
-            utils.insertAfter(this.elements.captions, this.elements.wrapper);
-        }
+  // Update available language options in settings based on tracks
+  update() {
+    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));
 
-        // Set the class hook
-        utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this)));
+    // Handle tracks (add event listener and "pseudo"-default)
+    if (this.isHTML5 && this.isVideo) {
+      tracks
+        .filter((track) => !meta.get(track))
+        .forEach((track) => {
+          this.debug.log('Track added', track);
 
-        // Get tracks
+          // Attempt to store if the original dom element was "default"
+          meta.set(track, {
+            default: track.mode === 'showing',
+          });
+
+          // Turn off native caption rendering to avoid double captions
+          // Note: mode='hidden' forces a track to download. To ensure every track
+          // isn't downloaded at once, only 'showing' tracks should be reassigned
+          // eslint-disable-next-line no-param-reassign
+          if (track.mode === 'showing') {
+            // eslint-disable-next-line no-param-reassign
+            track.mode = 'hidden';
+          }
+
+          // Add event listener for cue changes
+          on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
+        });
+    }
+
+    // Update language first time it matches, or if the previous matching track was removed
+    if ((languageExists && this.language !== language) || !tracks.includes(currentTrackNode)) {
+      captions.setLanguage.call(this, language);
+      captions.toggle.call(this, active && languageExists);
+    }
+
+    // Enable or disable captions based on track length
+    toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
+
+    // Update available languages in list
+    if (
+      is.array(this.config.controls) &&
+      this.config.controls.includes('settings') &&
+      this.config.settings.includes('captions')
+    ) {
+      controls.setCaptionsMenu.call(this);
+    }
+  },
+
+  // Toggle captions display
+  // Used internally for the toggleCaptions method, with the passive option forced to false
+  toggle(input, passive = true) {
+    // If there's no full support
+    if (!this.supported.ui) {
+      return;
+    }
+
+    const { toggled } = this.captions; // Current state
+    const activeClass = this.config.classNames.captions.active;
+    // Get the next state
+    // If the method is called without parameter, toggle based on current value
+    const active = is.nullOrUndefined(input) ? !toggled : input;
+
+    // Update state and trigger event
+    if (active !== toggled) {
+      // When passive, don't override user preferences
+      if (!passive) {
+        this.captions.active = active;
+        this.storage.set({ captions: active });
+      }
+
+      // Force language if the call isn't passive and there is no matching language to toggle to
+      if (!this.language && active && !passive) {
         const tracks = captions.getTracks.call(this);
+        const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true);
 
-        // If no caption file exists, hide container for caption text
-        if (utils.is.empty(tracks)) {
-            return;
-        }
+        // Override user preferences to avoid switching languages if a matching track is added
+        this.captions.language = track.language;
 
-        // Get browser info
-        const browser = utils.getBrowser();
+        // Set caption, but don't store in localStorage as user preference
+        captions.set.call(this, tracks.indexOf(track));
+        return;
+      }
 
-        // Fix IE captions if CORS is used
-        // Fetch captions and inject as blobs instead (data URIs not supported!)
-        if (browser.isIE && window.URL) {
-            const elements = this.media.querySelectorAll('track');
+      // Toggle button if it's enabled
+      if (this.elements.buttons.captions) {
+        this.elements.buttons.captions.pressed = active;
+      }
 
-            Array.from(elements).forEach(track => {
-                const src = track.getAttribute('src');
-                const href = utils.parseUrl(src);
+      // Add class hook
+      toggleClass(this.elements.container, activeClass, active);
 
-                if (href.hostname !== window.location.href.hostname && [
-                    'http:',
-                    'https:',
-                ].includes(href.protocol)) {
-                    utils
-                        .fetch(src, 'blob')
-                        .then(blob => {
-                            track.setAttribute('src', window.URL.createObjectURL(blob));
-                        })
-                        .catch(() => {
-                            utils.removeElement(track);
-                        });
-                }
-            });
-        }
+      this.captions.toggled = active;
 
-        // Set language
-        captions.setLanguage.call(this);
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
 
-        // Enable UI
-        captions.show.call(this);
+      // Trigger event (not used internally)
+      triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
+    }
 
-        // Set available languages in list
-        if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) {
-            controls.setCaptionsMenu.call(this);
-        }
-    },
+    // Wait for the call stack to clear before setting mode='hidden'
+    // on the active track - forcing the browser to download it
+    setTimeout(() => {
+      if (active && this.captions.toggled) {
+        this.captions.currentTrackNode.mode = 'hidden';
+      }
+    });
+  },
 
-    // Set the captions language
-    setLanguage() {
-        // Setup HTML5 track rendering
-        if (this.isHTML5 && this.isVideo) {
-            captions.getTracks.call(this).forEach(track => {
-                // Show track
-                utils.on(track, 'cuechange', event => captions.setCue.call(this, event));
+  // Set captions by track index
+  // Used internally for the currentTrack setter with the passive option forced to false
+  set(index, passive = true) {
+    const tracks = captions.getTracks.call(this);
 
-                // Turn off native caption rendering to avoid double captions
-                // eslint-disable-next-line
-                track.mode = 'hidden';
-            });
+    // Disable captions if setting to -1
+    if (index === -1) {
+      captions.toggle.call(this, false, passive);
+      return;
+    }
 
-            // Get current track
-            const currentTrack = captions.getCurrentTrack.call(this);
+    if (!is.number(index)) {
+      this.debug.warn('Invalid caption argument', index);
+      return;
+    }
 
-            // Check if suported kind
-            if (utils.is.track(currentTrack)) {
-                // If we change the active track while a cue is already displayed we need to update it
-                if (Array.from(currentTrack.activeCues || []).length) {
-                    captions.setCue.call(this, currentTrack);
-                }
-            }
-        } else if (this.isVimeo && this.captions.active) {
-            this.embed.enableTextTrack(this.language);
-        }
-    },
+    if (!(index in tracks)) {
+      this.debug.warn('Track not found', index);
+      return;
+    }
 
-    // Get the tracks
-    getTracks() {
-        // Return empty array at least
-        if (utils.is.nullOrUndefined(this.media)) {
-            return [];
-        }
+    if (this.captions.currentTrack !== index) {
+      this.captions.currentTrack = index;
+      const track = tracks[index];
+      const { language } = track || {};
 
-        // Only get accepted kinds
-        return Array.from(this.media.textTracks || []).filter(track => [
-            'captions',
-            'subtitles',
-        ].includes(track.kind));
-    },
+      // Store reference to node for invalidation on remove
+      this.captions.currentTrackNode = track;
 
-    // Get the current track for the current language
-    getCurrentTrack() {
-        return captions.getTracks.call(this).find(track => track.language.toLowerCase() === this.language);
-    },
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
 
-    // Display active caption if it contains text
-    setCue(input) {
-        // Get the track from the event if needed
-        const track = utils.is.event(input) ? input.target : input;
-        const { activeCues } = track;
-        const active = activeCues.length && activeCues[0];
-        const currentTrack = captions.getCurrentTrack.call(this);
+      // When passive, don't override user preferences
+      if (!passive) {
+        this.captions.language = language;
+        this.storage.set({ language });
+      }
 
-        // Only display current track
-        if (track !== currentTrack) {
-            return;
-        }
+      // Handle Vimeo captions
+      if (this.isVimeo) {
+        this.embed.enableTextTrack(language);
+      }
 
-        // Display a cue, if there is one
-        if (utils.is.cue(active)) {
-            captions.setText.call(this, active.getCueAsHTML());
-        } else {
-            captions.setText.call(this, null);
-        }
+      // Trigger event
+      triggerEvent.call(this, this.media, 'languagechange');
+    }
 
-        utils.dispatchEvent.call(this, this.media, 'cuechange');
-    },
+    // Show captions
+    captions.toggle.call(this, true, passive);
 
-    // Set the current caption
-    setText(input) {
-        // Requires UI
-        if (!this.supported.ui) {
-            return;
-        }
+    if (this.isHTML5 && this.isVideo) {
+      // If we change the active track while a cue is already displayed we need to update it
+      captions.updateCues.call(this);
+    }
+  },
 
-        if (utils.is.element(this.elements.captions)) {
-            const content = utils.createElement('span');
+  // Set captions by language
+  // Used internally for the language setter with the passive option forced to false
+  setLanguage(input, passive = true) {
+    if (!is.string(input)) {
+      this.debug.warn('Invalid language argument', input);
+      return;
+    }
+    // Normalize
+    const language = input.toLowerCase();
+    this.captions.language = language;
 
-            // Empty the container
-            utils.emptyElement(this.elements.captions);
+    // Set currentTrack
+    const tracks = captions.getTracks.call(this);
+    const track = captions.findTrack.call(this, [language]);
+    captions.set.call(this, tracks.indexOf(track), passive);
+  },
 
-            // Default to empty
-            const caption = !utils.is.nullOrUndefined(input) ? input : '';
+  // Get current valid caption tracks
+  // If update is false it will also ignore tracks without metadata
+  // This is used to "freeze" the language options when captions.update is false
+  getTracks(update = false) {
+    // Handle media or textTracks missing or null
+    const tracks = Array.from((this.media || {}).textTracks || []);
+    // 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));
+  },
 
-            // Set the span content
-            if (utils.is.string(caption)) {
-                content.textContent = caption.trim();
-            } else {
-                content.appendChild(caption);
-            }
+  // 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 sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a));
+    let track;
 
-            // Set new caption text
-            this.elements.captions.appendChild(content);
-        } else {
-            this.debug.warn('No captions element to render to');
-        }
-    },
+    languages.every((language) => {
+      track = sorted.find((t) => t.language === language);
+      return !track; // Break iteration if there is a match
+    });
 
-    // Display captions container and button (for initialization)
-    show() {
-        // If there's no caption toggle, bail
-        if (!utils.is.element(this.elements.buttons.captions)) {
-            return;
-        }
+    // If no match is found but is required, get first
+    return track || (force ? sorted[0] : undefined);
+  },
 
-        // Try to load the value from storage
-        let active = this.storage.get('captions');
+  // Get the current track
+  getCurrentTrack() {
+    return captions.getTracks.call(this)[this.currentTrack];
+  },
 
-        // Otherwise fall back to the default config
-        if (!utils.is.boolean(active)) {
-            ({ active } = this.config.captions);
-        } else {
-            this.captions.active = active;
-        }
+  // Get UI label for track
+  getLabel(track) {
+    let currentTrack = track;
 
-        if (active) {
-            utils.toggleClass(this.elements.container, this.config.classNames.captions.active, true);
-            utils.toggleState(this.elements.buttons.captions, true);
-        }
-    },
+    if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
+      currentTrack = captions.getCurrentTrack.call(this);
+    }
+
+    if (is.track(currentTrack)) {
+      if (!is.empty(currentTrack.label)) {
+        return currentTrack.label;
+      }
+
+      if (!is.empty(currentTrack.language)) {
+        return track.language.toUpperCase();
+      }
+
+      return i18n.get('enabled', this.config);
+    }
+
+    return i18n.get('disabled', this.config);
+  },
+
+  // Update captions using current track's active cues
+  // Also optional array argument in case there isn't any track (ex: vimeo)
+  updateCues(input) {
+    // Requires UI
+    if (!this.supported.ui) {
+      return;
+    }
+
+    if (!is.element(this.elements.captions)) {
+      this.debug.warn('No captions element to render to');
+      return;
+    }
+
+    // Only accept array or empty input
+    if (!is.nullOrUndefined(input) && !Array.isArray(input)) {
+      this.debug.warn('updateCues: Invalid input', input);
+      return;
+    }
+
+    let cues = input;
+
+    // Get cues from track
+    if (!cues) {
+      const track = captions.getCurrentTrack.call(this);
+
+      cues = Array.from((track || {}).activeCues || [])
+        .map((cue) => cue.getCueAsHTML())
+        .map(getHTML);
+    }
+
+    // Set new caption text
+    const content = cues.map((cueText) => cueText.trim()).join('\n');
+    const changed = content !== this.elements.captions.innerHTML;
+
+    if (changed) {
+      // Empty the container and create a new child element
+      emptyElement(this.elements.captions);
+      const caption = createElement('span', getAttributesFromSelector(this.config.selectors.caption));
+      caption.innerHTML = content;
+      this.elements.captions.appendChild(caption);
+
+      // Trigger event
+      triggerEvent.call(this, this.media, 'cuechange');
+    }
+  },
 };
 
 export default captions;

src/js/config/defaults.js

@@ -0,0 +1,445 @@
+// ==========================================================================
+// Plyr default config
+// ==========================================================================
+
+const defaults = {
+  // Disable
+  enabled: true,
+
+  // Custom media title
+  title: '',
+
+  // Logging to console
+  debug: false,
+
+  // Auto play (if supported)
+  autoplay: false,
+
+  // 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)
+  playsinline: true,
+
+  // Default time to skip when rewind/fast forward
+  seekTime: 10,
+
+  // Default volume
+  volume: 1,
+  muted: false,
+
+  // Pass a custom duration
+  duration: null,
+
+  // Display the media duration on load in the current time position
+  // If you have opted to display both duration and currentTime, this is ignored
+  displayDuration: true,
+
+  // Invert the current time to be a countdown
+  invertTime: true,
+
+  // Clicking the currentTime inverts it's value to show time left rather than elapsed
+  toggleInvert: true,
+
+  // Force an aspect ratio
+  // The format must be `'w:h'` (e.g. `'16:9'`)
+  ratio: null,
+
+  // Click video container to play/pause
+  clickToPlay: true,
+
+  // Auto hide the controls
+  hideControls: true,
+
+  // Reset to start when playback ended
+  resetOnEnd: false,
+
+  // Disable the standard context menu
+  disableContextMenu: true,
+
+  // Sprite (for icons)
+  loadSprite: true,
+  iconPrefix: 'plyr',
+  iconUrl: 'https://cdn.plyr.io/3.6.6/plyr.svg',
+
+  // Blank video (used to prevent errors on source change)
+  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+
+  // Quality default
+  quality: {
+    default: 576,
+    // The options to display in the UI, if available for the source media
+    options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
+    forced: false,
+    onChange: null,
+  },
+
+  // Set loops
+  loop: {
+    active: false,
+    // start: null,
+    // end: null,
+  },
+
+  // Speed default and options to display
+  speed: {
+    selected: 1,
+    // The options to display in the UI, if available for the source media (e.g. Vimeo and YouTube only support 0.5x-4x)
+    options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
+  },
+
+  // Keyboard shortcut settings
+  keyboard: {
+    focused: true,
+    global: false,
+  },
+
+  // Display tooltips
+  tooltips: {
+    controls: false,
+    seek: true,
+  },
+
+  // Captions settings
+  captions: {
+    active: false,
+    language: 'auto',
+    // Listen to new tracks added after Plyr is initialized.
+    // This is needed for streaming captions, but may result in unselectable options
+    update: false,
+  },
+
+  // Fullscreen settings
+  fullscreen: {
+    enabled: true, // Allow fullscreen?
+    fallback: true, // Fallback using full viewport/window
+    iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
+    // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
+    // Non-ancestors of the player element will be ignored
+    // container: null, // defaults to the player element
+  },
+
+  // Local storage
+  storage: {
+    enabled: true,
+    key: 'plyr',
+  },
+
+  // Default controls
+  controls: [
+    'play-large',
+    // 'restart',
+    // 'rewind',
+    'play',
+    // 'fast-forward',
+    'progress',
+    'current-time',
+    // 'duration',
+    'mute',
+    'volume',
+    'captions',
+    'settings',
+    'pip',
+    'airplay',
+    // 'download',
+    'fullscreen',
+  ],
+  settings: ['captions', 'quality', 'speed'],
+
+  // Localisation
+  i18n: {
+    restart: 'Restart',
+    rewind: 'Rewind {seektime}s',
+    play: 'Play',
+    pause: 'Pause',
+    fastForward: 'Forward {seektime}s',
+    seek: 'Seek',
+    seekLabel: '{currentTime} of {duration}',
+    played: 'Played',
+    buffered: 'Buffered',
+    currentTime: 'Current time',
+    duration: 'Duration',
+    volume: 'Volume',
+    mute: 'Mute',
+    unmute: 'Unmute',
+    enableCaptions: 'Enable captions',
+    disableCaptions: 'Disable captions',
+    download: 'Download',
+    enterFullscreen: 'Enter fullscreen',
+    exitFullscreen: 'Exit fullscreen',
+    frameTitle: 'Player for {title}',
+    captions: 'Captions',
+    settings: 'Settings',
+    pip: 'PIP',
+    menuBack: 'Go back to previous menu',
+    speed: 'Speed',
+    normal: 'Normal',
+    quality: 'Quality',
+    loop: 'Loop',
+    start: 'Start',
+    end: 'End',
+    all: 'All',
+    reset: 'Reset',
+    disabled: 'Disabled',
+    enabled: 'Enabled',
+    advertisement: 'Ad',
+    qualityBadge: {
+      2160: '4K',
+      1440: 'HD',
+      1080: 'HD',
+      720: 'HD',
+      576: 'SD',
+      480: 'SD',
+    },
+  },
+
+  // URLs
+  urls: {
+    download: null,
+    vimeo: {
+      sdk: 'https://player.vimeo.com/api/player.js',
+      iframe: 'https://player.vimeo.com/video/{0}?{1}',
+      api: 'https://vimeo.com/api/oembed.json?url={0}',
+    },
+    youtube: {
+      sdk: 'https://www.youtube.com/iframe_api',
+      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
+    },
+    googleIMA: {
+      sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
+    },
+  },
+
+  // Custom control listeners
+  listeners: {
+    seek: null,
+    play: null,
+    pause: null,
+    restart: null,
+    rewind: null,
+    fastForward: null,
+    mute: null,
+    volume: null,
+    captions: null,
+    download: null,
+    fullscreen: null,
+    pip: null,
+    airplay: null,
+    speed: null,
+    quality: null,
+    loop: null,
+    language: null,
+  },
+
+  // Events to watch and bubble
+  events: [
+    // Events to watch on HTML5 media elements and bubble
+    // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
+    'ended',
+    'progress',
+    'stalled',
+    'playing',
+    'waiting',
+    'canplay',
+    'canplaythrough',
+    'loadstart',
+    'loadeddata',
+    'loadedmetadata',
+    'timeupdate',
+    'volumechange',
+    'play',
+    'pause',
+    'error',
+    'seeking',
+    'seeked',
+    'emptied',
+    'ratechange',
+    'cuechange',
+
+    // Custom events
+    'download',
+    'enterfullscreen',
+    'exitfullscreen',
+    'captionsenabled',
+    'captionsdisabled',
+    'languagechange',
+    'controlshidden',
+    'controlsshown',
+    'ready',
+
+    // YouTube
+    'statechange',
+
+    // Quality
+    'qualitychange',
+
+    // Ads
+    'adsloaded',
+    'adscontentpause',
+    'adscontentresume',
+    'adstarted',
+    'adsmidpoint',
+    'adscomplete',
+    'adsallcomplete',
+    'adsimpression',
+    'adsclick',
+  ],
+
+  // Selectors
+  // Change these to match your template if using custom HTML
+  selectors: {
+    editable: 'input, textarea, select, [contenteditable]',
+    container: '.plyr',
+    controls: {
+      container: null,
+      wrapper: '.plyr__controls',
+    },
+    labels: '[data-plyr]',
+    buttons: {
+      play: '[data-plyr="play"]',
+      pause: '[data-plyr="pause"]',
+      restart: '[data-plyr="restart"]',
+      rewind: '[data-plyr="rewind"]',
+      fastForward: '[data-plyr="fast-forward"]',
+      mute: '[data-plyr="mute"]',
+      captions: '[data-plyr="captions"]',
+      download: '[data-plyr="download"]',
+      fullscreen: '[data-plyr="fullscreen"]',
+      pip: '[data-plyr="pip"]',
+      airplay: '[data-plyr="airplay"]',
+      settings: '[data-plyr="settings"]',
+      loop: '[data-plyr="loop"]',
+    },
+    inputs: {
+      seek: '[data-plyr="seek"]',
+      volume: '[data-plyr="volume"]',
+      speed: '[data-plyr="speed"]',
+      language: '[data-plyr="language"]',
+      quality: '[data-plyr="quality"]',
+    },
+    display: {
+      currentTime: '.plyr__time--current',
+      duration: '.plyr__time--duration',
+      buffer: '.plyr__progress__buffer',
+      loop: '.plyr__progress__loop', // Used later
+      volume: '.plyr__volume--display',
+    },
+    progress: '.plyr__progress',
+    captions: '.plyr__captions',
+    caption: '.plyr__caption',
+  },
+
+  // Class hooks added to the player in different states
+  classNames: {
+    type: 'plyr--{0}',
+    provider: 'plyr--{0}',
+    video: 'plyr__video-wrapper',
+    embed: 'plyr__video-embed',
+    videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',
+    embedContainer: 'plyr__video-embed__container',
+    poster: 'plyr__poster',
+    posterEnabled: 'plyr__poster-enabled',
+    ads: 'plyr__ads',
+    control: 'plyr__control',
+    controlPressed: 'plyr__control--pressed',
+    playing: 'plyr--playing',
+    paused: 'plyr--paused',
+    stopped: 'plyr--stopped',
+    loading: 'plyr--loading',
+    hover: 'plyr--hover',
+    tooltip: 'plyr__tooltip',
+    cues: 'plyr__cues',
+    hidden: 'plyr__sr-only',
+    hideControls: 'plyr--hide-controls',
+    isIos: 'plyr--is-ios',
+    isTouch: 'plyr--is-touch',
+    uiSupported: 'plyr--full-ui',
+    noTransition: 'plyr--no-transition',
+    display: {
+      time: 'plyr__time',
+    },
+    menu: {
+      value: 'plyr__menu__value',
+      badge: 'plyr__badge',
+      open: 'plyr--menu-open',
+    },
+    captions: {
+      enabled: 'plyr--captions-enabled',
+      active: 'plyr--captions-active',
+    },
+    fullscreen: {
+      enabled: 'plyr--fullscreen-enabled',
+      fallback: 'plyr--fullscreen-fallback',
+    },
+    pip: {
+      supported: 'plyr--pip-supported',
+      active: 'plyr--pip-active',
+    },
+    airplay: {
+      supported: 'plyr--airplay-supported',
+      active: 'plyr--airplay-active',
+    },
+    tabFocus: 'plyr__tab-focus',
+    previewThumbnails: {
+      // Tooltip thumbs
+      thumbContainer: 'plyr__preview-thumb',
+      thumbContainerShown: 'plyr__preview-thumb--is-shown',
+      imageContainer: 'plyr__preview-thumb__image-container',
+      timeContainer: 'plyr__preview-thumb__time-container',
+      // Scrubbing
+      scrubbingContainer: 'plyr__preview-scrubbing',
+      scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',
+    },
+  },
+
+  // Embed attributes
+  attributes: {
+    embed: {
+      provider: 'data-plyr-provider',
+      id: 'data-plyr-embed-id',
+    },
+  },
+
+  // Advertisements plugin
+  // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
+  ads: {
+    enabled: false,
+    publisherId: '',
+    tagUrl: '',
+  },
+
+  // Preview Thumbnails plugin
+  previewThumbnails: {
+    enabled: false,
+    src: '',
+  },
+
+  // Vimeo plugin
+  vimeo: {
+    byline: false,
+    portrait: false,
+    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,
+  },
+
+  // YouTube plugin
+  youtube: {
+    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
+  },
+};
+
+export default defaults;

src/js/config/states.js

@@ -0,0 +1,10 @@
+// ==========================================================================
+// Plyr states
+// ==========================================================================
+
+export const pip = {
+  active: 'picture-in-picture',
+  inactive: 'inline',
+};
+
+export default { pip };

src/js/config/types.js

@@ -0,0 +1,34 @@
+// ==========================================================================
+// Plyr supported types and providers
+// ==========================================================================
+
+export const providers = {
+  html5: 'html5',
+  youtube: 'youtube',
+  vimeo: 'vimeo',
+};
+
+export const types = {
+  audio: 'audio',
+  video: 'video',
+};
+
+/**
+ * Get provider by URL
+ * @param {String} url
+ */
+export function getProviderByUrl(url) {
+  // YouTube
+  if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) {
+    return providers.youtube;
+  }
+
+  // Vimeo
+  if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
+    return providers.vimeo;
+  }
+
+  return null;
+}
+
+export default { providers, types };

src/js/console.js

@@ -5,24 +5,26 @@
 const noop = () => {};
 
 export default class Console {
-    constructor(enabled = false) {
-        this.enabled = window.console && enabled;
+  constructor(enabled = false) {
+    this.enabled = window.console && enabled;
 
-        if (this.enabled) {
-            this.log('Debugging enabled');
-        }
+    if (this.enabled) {
+      this.log('Debugging enabled');
     }
+  }
 
-    get log() {
-        // eslint-disable-next-line no-console
-        return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;
-    }
-    get warn() {
-        // eslint-disable-next-line no-console
-        return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;
-    }
-    get error() {
-        // eslint-disable-next-line no-console
-        return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;
-    }
+  get log() {
+    // eslint-disable-next-line no-console
+    return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;
+  }
+
+  get warn() {
+    // eslint-disable-next-line no-console
+    return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop;
+  }
+
+  get error() {
+    // eslint-disable-next-line no-console
+    return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;
+  }
 }

src/js/defaults.js

@@ -1,383 +0,0 @@
-// ==========================================================================
-// Plyr default config
-// ==========================================================================
-
-const defaults = {
-    // Disable
-    enabled: true,
-
-    // Custom media title
-    title: '',
-
-    // Logging to console
-    debug: false,
-
-    // Auto play (if supported)
-    autoplay: false,
-
-    // Only allow one media playing at once (vimeo only)
-    autopause: true,
-
-    // Default time to skip when rewind/fast forward
-    seekTime: 10,
-
-    // Default volume
-    volume: 1,
-    muted: false,
-
-    // Pass a custom duration
-    duration: null,
-
-    // Display the media duration on load in the current time position
-    // If you have opted to display both duration and currentTime, this is ignored
-    displayDuration: true,
-
-    // Invert the current time to be a countdown
-    invertTime: true,
-
-    // Clicking the currentTime inverts it's value to show time left rather than elapsed
-    toggleInvert: true,
-
-    // Aspect ratio (for embeds)
-    ratio: '16:9',
-
-    // Click video container to play/pause
-    clickToPlay: true,
-
-    // Auto hide the controls
-    hideControls: true,
-
-    // Revert to poster on finish (HTML5 - will cause reload)
-    showPosterOnEnd: false,
-
-    // Disable the standard context menu
-    disableContextMenu: true,
-
-    // Sprite (for icons)
-    loadSprite: true,
-    iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.0.2/plyr.svg',
-
-    // Blank video (used to prevent errors on source change)
-    blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
-
-    // Quality default
-    quality: {
-        default: 'default',
-        options: [
-            'hd2160',
-            'hd1440',
-            'hd1080',
-            'hd720',
-            'large',
-            'medium',
-            'small',
-            'tiny',
-            'default',
-        ],
-    },
-
-    // Set loops
-    loop: {
-        active: false,
-        // start: null,
-        // end: null,
-    },
-
-    // Speed default and options to display
-    speed: {
-        selected: 1,
-        options: [
-            0.5,
-            0.75,
-            1,
-            1.25,
-            1.5,
-            1.75,
-            2,
-        ],
-    },
-
-    // Keyboard shortcut settings
-    keyboard: {
-        focused: true,
-        global: false,
-    },
-
-    // Display tooltips
-    tooltips: {
-        controls: false,
-        seek: true,
-    },
-
-    // Captions settings
-    captions: {
-        active: false,
-        language: window.navigator.language.split('-')[0],
-    },
-
-    // Fullscreen settings
-    fullscreen: {
-        enabled: true, // Allow fullscreen?
-        fallback: true, // Fallback for vintage browsers
-        iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
-    },
-
-    // Local storage
-    storage: {
-        enabled: true,
-        key: 'plyr',
-    },
-
-    // Default controls
-    controls: [
-        'play-large',
-        'play',
-        'progress',
-        'current-time',
-        'mute',
-        'volume',
-        'captions',
-        'settings',
-        'pip',
-        'airplay',
-        'fullscreen',
-    ],
-    settings: [
-        'captions',
-        'quality',
-        'speed',
-    ],
-
-    // Localisation
-    i18n: {
-        restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
-        play: 'Play',
-        pause: 'Pause',
-        forward: 'Forward {seektime} secs',
-        seek: 'Seek',
-        played: 'Played',
-        buffered: 'Buffered',
-        currentTime: 'Current time',
-        duration: 'Duration',
-        volume: 'Volume',
-        mute: 'Mute',
-        unmute: 'Unmute',
-        enableCaptions: 'Enable captions',
-        disableCaptions: 'Disable captions',
-        enterFullscreen: 'Enter fullscreen',
-        exitFullscreen: 'Exit fullscreen',
-        frameTitle: 'Player for {title}',
-        captions: 'Captions',
-        settings: 'Settings',
-        speed: 'Speed',
-        quality: 'Quality',
-        loop: 'Loop',
-        start: 'Start',
-        end: 'End',
-        all: 'All',
-        reset: 'Reset',
-        none: 'None',
-        disabled: 'Disabled',
-        advertisement: 'Ad',
-    },
-
-    // URLs
-    urls: {
-        vimeo: {
-            api: 'https://player.vimeo.com/api/player.js',
-        },
-        youtube: {
-            api: 'https://www.youtube.com/iframe_api',
-        },
-        googleIMA: {
-            api: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
-        },
-    },
-
-    // Custom control listeners
-    listeners: {
-        seek: null,
-        play: null,
-        pause: null,
-        restart: null,
-        rewind: null,
-        forward: null,
-        mute: null,
-        volume: null,
-        captions: null,
-        fullscreen: null,
-        pip: null,
-        airplay: null,
-        speed: null,
-        quality: null,
-        loop: null,
-        language: null,
-    },
-
-    // Events to watch and bubble
-    events: [
-        // Events to watch on HTML5 media elements and bubble
-        // https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
-        'ended',
-        'progress',
-        'stalled',
-        'playing',
-        'waiting',
-        'canplay',
-        'canplaythrough',
-        'loadstart',
-        'loadeddata',
-        'loadedmetadata',
-        'timeupdate',
-        'volumechange',
-        'play',
-        'pause',
-        'error',
-        'seeking',
-        'seeked',
-        'emptied',
-        'ratechange',
-        'cuechange',
-
-        // Custom events
-        'enterfullscreen',
-        'exitfullscreen',
-        'captionsenabled',
-        'captionsdisabled',
-        'languagechange',
-        'controlshidden',
-        'controlsshown',
-        'ready',
-
-        // YouTube
-        'statechange',
-        'qualitychange',
-        'qualityrequested',
-
-        // Ads
-        'adsloaded',
-        'adscontentpause',
-        'adscontentresume',
-        'adstarted',
-        'adsmidpoint',
-        'adscomplete',
-        'adsallcomplete',
-        'adsimpression',
-        'adsclick',
-    ],
-
-    // Selectors
-    // Change these to match your template if using custom HTML
-    selectors: {
-        editable: 'input, textarea, select, [contenteditable]',
-        container: '.plyr',
-        controls: {
-            container: null,
-            wrapper: '.plyr__controls',
-        },
-        labels: '[data-plyr]',
-        buttons: {
-            play: '[data-plyr="play"]',
-            pause: '[data-plyr="pause"]',
-            restart: '[data-plyr="restart"]',
-            rewind: '[data-plyr="rewind"]',
-            forward: '[data-plyr="fast-forward"]',
-            mute: '[data-plyr="mute"]',
-            captions: '[data-plyr="captions"]',
-            fullscreen: '[data-plyr="fullscreen"]',
-            pip: '[data-plyr="pip"]',
-            airplay: '[data-plyr="airplay"]',
-            settings: '[data-plyr="settings"]',
-            loop: '[data-plyr="loop"]',
-        },
-        inputs: {
-            seek: '[data-plyr="seek"]',
-            volume: '[data-plyr="volume"]',
-            speed: '[data-plyr="speed"]',
-            language: '[data-plyr="language"]',
-            quality: '[data-plyr="quality"]',
-        },
-        display: {
-            currentTime: '.plyr__time--current',
-            duration: '.plyr__time--duration',
-            buffer: '.plyr__progress--buffer',
-            played: '.plyr__progress--played',
-            loop: '.plyr__progress--loop',
-            volume: '.plyr__volume--display',
-        },
-        progress: '.plyr__progress',
-        captions: '.plyr__captions',
-        menu: {
-            quality: '.js-plyr__menu__list--quality',
-        },
-    },
-
-    // Class hooks added to the player in different states
-    classNames: {
-        video: 'plyr__video-wrapper',
-        embed: 'plyr__video-embed',
-        ads: 'plyr__ads',
-        control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
-        stopped: 'plyr--stopped',
-        playing: 'plyr--playing',
-        loading: 'plyr--loading',
-        error: 'plyr--has-error',
-        hover: 'plyr--hover',
-        tooltip: 'plyr__tooltip',
-        cues: 'plyr__cues',
-        hidden: 'plyr__sr-only',
-        hideControls: 'plyr--hide-controls',
-        isIos: 'plyr--is-ios',
-        isTouch: 'plyr--is-touch',
-        uiSupported: 'plyr--full-ui',
-        noTransition: 'plyr--no-transition',
-        menu: {
-            value: 'plyr__menu__value',
-            badge: 'plyr__badge',
-            open: 'plyr--menu-open',
-        },
-        captions: {
-            enabled: 'plyr--captions-enabled',
-            active: 'plyr--captions-active',
-        },
-        fullscreen: {
-            enabled: 'plyr--fullscreen-enabled',
-            fallback: 'plyr--fullscreen-fallback',
-        },
-        pip: {
-            supported: 'plyr--pip-supported',
-            active: 'plyr--pip-active',
-        },
-        airplay: {
-            supported: 'plyr--airplay-supported',
-            active: 'plyr--airplay-active',
-        },
-        tabFocus: 'plyr__tab-focus',
-    },
-
-    // Embed attributes
-    attributes: {
-        embed: {
-            provider: 'data-plyr-provider',
-            id: 'data-plyr-embed-id',
-        },
-    },
-
-    // API keys
-    keys: {
-        google: null,
-    },
-
-    // Advertisements plugin
-    // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
-    ads: {
-        enabled: false,
-        publisherId: '',
-    },
-};
-
-export default defaults;

src/js/fullscreen.js

@@ -1,204 +1,303 @@
 // ==========================================================================
 // Fullscreen wrapper
+// https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing
+// https://webkit.org/blog/7929/designing-websites-for-iphone-x/
 // ==========================================================================
 
-import utils from './utils';
+import browser from './utils/browser';
+import { closest, getElements, hasClass, toggleClass } from './utils/elements';
+import { on, triggerEvent } from './utils/events';
+import is from './utils/is';
+import { silencePromise } from './utils/promise';
 
-const browser = utils.getBrowser();
+class Fullscreen {
+  constructor(player) {
+    // Keep reference to parent
+    this.player = player;
 
-function onChange() {
-    if (!this.enabled) {
+    // Get prefix
+    this.prefix = Fullscreen.prefix;
+    this.property = Fullscreen.property;
+
+    // Scroll position
+    this.scrollPosition = { x: 0, y: 0 };
+
+    // Force the use of 'full window/browser' rather than fullscreen
+    this.forceFallback = player.config.fullscreen.fallback === 'force';
+
+    // Get the fullscreen element
+    // Checks container is an ancestor, defaults to null
+    this.player.elements.fullscreen =
+      player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
+
+    // Register event listeners
+    // Handle event (incase user presses escape etc)
+    on.call(
+      this.player,
+      document,
+      this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`,
+      () => {
+        // TODO: Filter for target??
+        this.onChange();
+      },
+    );
+
+    // Fullscreen toggle on double click
+    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.player.listeners.proxy(event, this.toggle, 'fullscreen');
+    });
+
+    // Tap focus when in fullscreen
+    on.call(this, this.player.elements.container, 'keydown', (event) => this.trapFocus(event));
+
+    // Update the UI
+    this.update();
+
+    // this.toggle = this.toggle.bind(this);
+  }
+
+  // Determine if native supported
+  static get native() {
+    return !!(
+      document.fullscreenEnabled ||
+      document.webkitFullscreenEnabled ||
+      document.mozFullScreenEnabled ||
+      document.msFullscreenEnabled
+    );
+  }
+
+  // If we're actually using native
+  get usingNative() {
+    return Fullscreen.native && !this.forceFallback;
+  }
+
+  // Get the prefix for handlers
+  static get prefix() {
+    // No prefix
+    if (is.function(document.exitFullscreen)) {
+      return '';
+    }
+
+    // Check for fullscreen support by vendor prefix
+    let value = '';
+    const prefixes = ['webkit', 'moz', 'ms'];
+
+    prefixes.some((pre) => {
+      if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {
+        value = pre;
+        return true;
+      }
+
+      return false;
+    });
+
+    return value;
+  }
+
+  static get property() {
+    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
+    );
+  }
+
+  // Get active state
+  get active() {
+    if (!this.enabled) {
+      return false;
+    }
+
+    // Fallback using classname
+    if (!Fullscreen.native || this.forceFallback) {
+      return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
+    }
+
+    const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
+
+    return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
+  }
+
+  // Get target element
+  get target() {
+    return browser.isIos && this.player.config.fullscreen.iosNative
+      ? this.player.media
+      : this.player.elements.fullscreen || this.player.elements.container;
+  }
+
+  onChange = () => {
+    if (!this.enabled) {
+      return;
     }
 
     // Update toggle button
     const button = this.player.elements.buttons.fullscreen;
-    if (utils.is.element(button)) {
-        utils.toggleState(button, this.active);
+    if (is.element(button)) {
+      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
-    utils.dispatchEvent(this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+    triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+  };
 
-    // Trap focus in container
-    if (!browser.isIos) {
-        utils.trapFocus.call(this.player, this.target, this.active);
-    }
-}
-
-function toggleFallback(toggle = false) {
+  toggleFallback = (toggle = false) => {
     // Store or restore scroll position
     if (toggle) {
-        this.scrollPosition = {
-            x: window.scrollX || 0,
-            y: window.scrollY || 0,
-        };
+      this.scrollPosition = {
+        x: window.scrollX || 0,
+        y: window.scrollY || 0,
+      };
     } else {
-        window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
+      window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
     }
 
     // Toggle scroll
     document.body.style.overflow = toggle ? 'hidden' : '';
 
     // Toggle class hook
-    utils.toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);
+    toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);
+
+    // Force full viewport on iPhone X+
+    if (browser.isIos) {
+      let viewport = document.head.querySelector('meta[name="viewport"]');
+      const property = 'viewport-fit=cover';
+
+      // Inject the viewport meta if required
+      if (!viewport) {
+        viewport = document.createElement('meta');
+        viewport.setAttribute('name', 'viewport');
+      }
+
+      // Check if the property already exists
+      const hasProperty = is.string(viewport.content) && viewport.content.includes(property);
+
+      if (toggle) {
+        this.cleanupViewport = !hasProperty;
+
+        if (!hasProperty) {
+          viewport.content += `,${property}`;
+        }
+      } else if (this.cleanupViewport) {
+        viewport.content = viewport.content
+          .split(',')
+          .filter((part) => part.trim() !== property)
+          .join(',');
+      }
+    }
 
     // Toggle button and fire events
-    onChange.call(this);
-}
+    this.onChange();
+  };
 
-class Fullscreen {
-    constructor(player) {
-        // Keep reference to parent
-        this.player = player;
-
-        // Get prefix
-        this.prefix = Fullscreen.prefix;
-
-        // Scroll position
-        this.scrollPosition = { x: 0, y: 0 };
-
-        // Register event listeners
-        // Handle event (incase user presses escape etc)
-        utils.on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => {
-            // TODO: Filter for target??
-            onChange.call(this);
-        });
-
-        // Fullscreen toggle on double click
-        utils.on(this.player.elements.container, 'dblclick', () => {
-            this.toggle();
-        });
-
-        // Prevent double click on controls bubbling up
-        utils.on(this.player.elements.controls, 'dblclick', event => event.stopPropagation());
-
-        // Update the UI
-        this.update();
+  // 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;
     }
 
-    // Determine if native supported
-    static get native() {
-        return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
+    // Get the current focused element
+    const focused = document.activeElement;
+    const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
+    const [first] = focusable;
+    const last = focusable[focusable.length - 1];
+
+    if (focused === last && !event.shiftKey) {
+      // Move focus to first element that can be tabbed if Shift isn't used
+      first.focus();
+      event.preventDefault();
+    } else if (focused === first && event.shiftKey) {
+      // Move focus to last element that can be tabbed if Shift is used
+      last.focus();
+      event.preventDefault();
+    }
+  };
+
+  // Update UI
+  update = () => {
+    if (this.enabled) {
+      let mode;
+
+      if (this.forceFallback) {
+        mode = 'Fallback (forced)';
+      } else if (Fullscreen.native) {
+        mode = 'Native';
+      } else {
+        mode = 'Fallback';
+      }
+
+      this.player.debug.log(`${mode} fullscreen enabled`);
+    } else {
+      this.player.debug.log('Fullscreen not supported and fallback disabled');
     }
 
-    // Get the prefix for handlers
-    static get prefix() {
-        // No prefix
-        if (utils.is.function(document.cancelFullScreen)) {
-            return false;
-        }
+    // Add styling hook to show button
+    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
+  };
 
-        // Check for fullscreen support by vendor prefix
-        let value = '';
-        const prefixes = [
-            'webkit',
-            'moz',
-            'ms',
-        ];
-
-        prefixes.some(pre => {
-            if (utils.is.function(document[`${pre}CancelFullScreen`])) {
-                value = pre;
-                return true;
-            } else if (utils.is.function(document.msExitFullscreen)) {
-                value = 'ms';
-                return true;
-            }
-
-            return false;
-        });
-
-        return value;
+  // Make an element fullscreen
+  enter = () => {
+    if (!this.enabled) {
+      return;
     }
 
-    // Determine if fullscreen is enabled
-    get enabled() {
-        const fallback = this.player.config.fullscreen.fallback && !utils.inFrame();
+    // iOS native fullscreen doesn't need the request step
+    if (browser.isIos && this.player.config.fullscreen.iosNative) {
+      if (this.player.isVimeo) {
+        this.player.embed.requestFullscreen();
+      } else {
+        this.target.webkitEnterFullscreen();
+      }
+    } else if (!Fullscreen.native || this.forceFallback) {
+      this.toggleFallback(true);
+    } else if (!this.prefix) {
+      this.target.requestFullscreen({ navigationUI: 'hide' });
+    } else if (!is.empty(this.prefix)) {
+      this.target[`${this.prefix}Request${this.property}`]();
+    }
+  };
 
-        return (Fullscreen.native || fallback) && this.player.config.fullscreen.enabled && this.player.supported.ui && this.player.isVideo;
+  // Bail from fullscreen
+  exit = () => {
+    if (!this.enabled) {
+      return;
     }
 
-    // Get active state
-    get active() {
-        if (!this.enabled) {
-            return false;
-        }
-
-        // Fallback using classname
-        if (!Fullscreen.native) {
-            return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
-        }
-
-        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}FullscreenElement`];
-
-        return element === this.target;
+    // iOS native fullscreen
+    if (browser.isIos && this.player.config.fullscreen.iosNative) {
+      this.target.webkitExitFullscreen();
+      silencePromise(this.player.play());
+    } else if (!Fullscreen.native || this.forceFallback) {
+      this.toggleFallback(false);
+    } else if (!this.prefix) {
+      (document.cancelFullScreen || document.exitFullscreen).call(document);
+    } else if (!is.empty(this.prefix)) {
+      const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
+      document[`${this.prefix}${action}${this.property}`]();
     }
+  };
 
-    // Get target element
-    get target() {
-        return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
-    }
-
-    // Update UI
-    update() {
-        if (this.enabled) {
-            this.player.debug.log(`${Fullscreen.native ? 'Native' : 'Fallback'} fullscreen enabled`);
-        } else {
-            this.player.debug.log('Fullscreen not supported and fallback disabled');
-        }
-
-        // Add styling hook to show button
-        utils.toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
-    }
-
-    // Make an element fullscreen
-    enter() {
-        if (!this.enabled) {
-            return;
-        }
-
-        // iOS native fullscreen doesn't need the request step
-        if (browser.isIos && this.player.config.fullscreen.iosNative) {
-            if (this.player.playing) {
-                this.target.webkitEnterFullscreen();
-            }
-        } else if (!Fullscreen.native) {
-            toggleFallback.call(this, true);
-        } else if (!this.prefix) {
-            this.target.requestFullScreen();
-        } else if (!utils.is.empty(this.prefix)) {
-            this.target[`${this.prefix}${this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen'}`]();
-        }
-    }
-
-    // Bail from fullscreen
-    exit() {
-        if (!this.enabled) {
-            return;
-        }
-
-        // iOS native fullscreen
-        if (browser.isIos && this.player.config.fullscreen.iosNative) {
-            this.target.webkitExitFullscreen();
-            this.player.play();
-        } else if (!Fullscreen.native) {
-            toggleFallback.call(this, false);
-        } else if (!this.prefix) {
-            document.cancelFullScreen();
-        } else if (!utils.is.empty(this.prefix)) {
-            document[`${this.prefix}${this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen'}`]();
-        }
-    }
-
-    // Toggle state
-    toggle() {
-        if (!this.active) {
-            this.enter();
-        } else {
-            this.exit();
-        }
+  // Toggle state
+  toggle = () => {
+    if (!this.active) {
+      this.enter();
+    } else {
+      this.exit();
     }
+  };
 }
 
 export default Fullscreen;

src/js/html5.js

@@ -0,0 +1,147 @@
+// ==========================================================================
+// Plyr HTML5 helpers
+// ==========================================================================
+
+import support from './support';
+import { removeElement } from './utils/elements';
+import { triggerEvent } from './utils/events';
+import is from './utils/is';
+import { silencePromise } from './utils/promise';
+import { setAspectRatio } from './utils/style';
+
+const html5 = {
+  getSources() {
+    if (!this.isHTML5) {
+      return [];
+    }
+
+    const sources = Array.from(this.media.querySelectorAll('source'));
+
+    // Filter out unsupported sources (if type is specified)
+    return sources.filter((source) => {
+      const type = source.getAttribute('type');
+
+      if (is.empty(type)) {
+        return true;
+      }
+
+      return support.mime.call(this, type);
+    });
+  },
+
+  // Get quality levels
+  getQualityOptions() {
+    // Whether we're forcing all options (e.g. for streaming)
+    if (this.config.quality.forced) {
+      return this.config.quality.options;
+    }
+
+    // Get sizes from <source> elements
+    return html5.getSources
+      .call(this)
+      .map((source) => Number(source.getAttribute('size')))
+      .filter(Boolean);
+  },
+
+  setup() {
+    if (!this.isHTML5) {
+      return;
+    }
+
+    const player = this;
+
+    // Set speed options from config
+    player.options.speed = player.config.speed.options;
+
+    // Set aspect ratio if fixed
+    if (!is.empty(this.config.ratio)) {
+      setAspectRatio.call(player);
+    }
+
+    // Quality
+    Object.defineProperty(player.media, 'quality', {
+      get() {
+        // Get sources
+        const sources = html5.getSources.call(player);
+        const source = sources.find((s) => s.getAttribute('src') === player.source);
+
+        // Return size, if match is found
+        return source && Number(source.getAttribute('size'));
+      },
+      set(input) {
+        if (player.quality === input) {
+          return;
+        }
+
+        // If we're using an 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);
+
+          // No matching source found
+          if (!source) {
+            return;
+          }
+
+          // Get current state
+          const { currentTime, paused, preload, readyState, playbackRate } = player.media;
+
+          // Set new source
+          player.media.src = source.getAttribute('src');
+
+          // Prevent loading if preload="none" and the current source isn't loaded (#1044)
+          if (preload !== 'none' || readyState) {
+            // Restore time
+            player.once('loadedmetadata', () => {
+              player.speed = playbackRate;
+              player.currentTime = currentTime;
+
+              // Resume playing
+              if (!paused) {
+                silencePromise(player.play());
+              }
+            });
+
+            // Load new source
+            player.media.load();
+          }
+        }
+
+        // Trigger change event
+        triggerEvent.call(player, player.media, 'qualitychange', false, {
+          quality: input,
+        });
+      },
+    });
+  },
+
+  // Cancel current network requests
+  // See https://github.com/sampotts/plyr/issues/174
+  cancelRequests() {
+    if (!this.isHTML5) {
+      return;
+    }
+
+    // Remove child sources
+    removeElement(html5.getSources.call(this));
+
+    // Set blank video src attribute
+    // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
+    // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
+    this.media.setAttribute('src', this.config.blankVideo);
+
+    // Load the new empty source
+    // This will cancel existing requests
+    // See https://github.com/sampotts/plyr/issues/174
+    this.media.load();
+
+    // Debugging
+    this.debug.log('Cancelled network requests');
+  },
+};
+
+export default html5;

src/js/media.js

@@ -2,105 +2,58 @@
 // Plyr Media
 // ==========================================================================
 
-import support from './support';
-import utils from './utils';
-import youtube from './plugins/youtube';
+import html5 from './html5';
 import vimeo from './plugins/vimeo';
-import ui from './ui';
-
-// Sniff out the browser
-const browser = utils.getBrowser();
+import youtube from './plugins/youtube';
+import { createElement, toggleClass, wrap } from './utils/elements';
 
 const media = {
-    // Setup media
-    setup() {
-        // If there's no media, bail
-        if (!this.media) {
-            this.debug.warn('No media element found!');
-            return;
-        }
+  // Setup media
+  setup() {
+    // If there's no media, bail
+    if (!this.media) {
+      this.debug.warn('No media element found!');
+      return;
+    }
 
-        // Add type class
-        utils.toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);
+    // Add type class
+    toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);
 
-        // Add provider class
-        utils.toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true);
+    // Add provider class
+    toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true);
 
-        // Add video class for embeds
-        // This will require changes if audio embeds are added
-        if (this.isEmbed) {
-            utils.toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
-        }
+    // Add video class for embeds
+    // This will require changes if audio embeds are added
+    if (this.isEmbed) {
+      toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
+    }
 
-        if (this.supported.ui) {
-            // Check for picture-in-picture support
-            utils.toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo);
+    // Inject the player wrapper
+    if (this.isVideo) {
+      // Create the wrapper div
+      this.elements.wrapper = createElement('div', {
+        class: this.config.classNames.video,
+      });
 
-            // Check for airplay support
-            utils.toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
+      // Wrap the video in a container
+      wrap(this.media, this.elements.wrapper);
 
-            // If there's no autoplay attribute, assume the video is stopped and add state class
-            utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.config.autoplay);
+      // Poster image container
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
+      });
 
-            // Add iOS class
-            utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
+      this.elements.wrapper.appendChild(this.elements.poster);
+    }
 
-            // Add touch class
-            utils.toggleClass(this.elements.container, this.config.classNames.isTouch, support.touch);
-        }
-
-        // Inject the player wrapper
-        if (this.isVideo) {
-            // Create the wrapper div
-            this.elements.wrapper = utils.createElement('div', {
-                class: this.config.classNames.video,
-            });
-
-            // Wrap the video in a container
-            utils.wrap(this.media, this.elements.wrapper);
-        }
-
-        if (this.isEmbed) {
-            switch (this.provider) {
-                case 'youtube':
-                    youtube.setup.call(this);
-                    break;
-
-                case 'vimeo':
-                    vimeo.setup.call(this);
-                    break;
-
-                default:
-                    break;
-            }
-        } else if (this.isHTML5) {
-            ui.setTitle.call(this);
-        }
-    },
-
-    // Cancel current network requests
-    // See https://github.com/sampotts/plyr/issues/174
-    cancelRequests() {
-        if (!this.isHTML5) {
-            return;
-        }
-
-        // Remove child sources
-        utils.removeElement(this.media.querySelectorAll('source'));
-
-        // Set blank video src attribute
-        // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
-        // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
-        this.media.setAttribute('src', this.config.blankVideo);
-
-        // Load the new empty source
-        // This will cancel existing requests
-        // See https://github.com/sampotts/plyr/issues/174
-        this.media.load();
-
-        // Debugging
-        this.debug.log('Cancelled network requests');
-    },
+    if (this.isHTML5) {
+      html5.setup.call(this);
+    } else if (this.isYouTube) {
+      youtube.setup.call(this);
+    } else if (this.isVimeo) {
+      vimeo.setup.call(this);
+    }
+  },
 };
 
 export default media;

src/js/plugins/preview-thumbnails.js

@@ -0,0 +1,709 @@
+import { createElement } from '../utils/elements';
+import { once } from '../utils/events';
+import fetch from '../utils/fetch';
+import is from '../utils/is';
+import { formatTime } from '../utils/time';
+
+// Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
+const parseVtt = (vttDataString) => {
+  const processedList = [];
+  const frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
+
+  frames.forEach((frame) => {
+    const result = {};
+    const lines = frame.split(/\r\n|\n|\r/);
+
+    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(
+          /([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})( ?--> ?)([0-9]{2})?:?([0-9]{2}):([0-9]{2}).([0-9]{2,3})/,
+        ); // Note that this currently ignores caption formatting directives that are optionally on the end of this line - fine for non-captions VTT
+
+        if (matchTimes) {
+          result.startTime =
+            Number(matchTimes[1] || 0) * 60 * 60 +
+            Number(matchTimes[2]) * 60 +
+            Number(matchTimes[3]) +
+            Number(`0.${matchTimes[4]}`);
+          result.endTime =
+            Number(matchTimes[6] || 0) * 60 * 60 +
+            Number(matchTimes[7]) * 60 +
+            Number(matchTimes[8]) +
+            Number(`0.${matchTimes[9]}`);
+        }
+      } else if (!is.empty(line.trim()) && is.empty(result.text)) {
+        // If we already have the startTime, then we're definitely up to the text line(s)
+        const lineSplit = line.trim().split('#xywh=');
+        [result.text] = lineSplit;
+
+        // If there's content in lineSplit[1], then we have sprites. If not, then it's just one frame per image
+        if (lineSplit[1]) {
+          [result.x, result.y, result.w, result.h] = lineSplit[1].split(',');
+        }
+      }
+    });
+
+    if (result.text) {
+      processedList.push(result);
+    }
+  });
+
+  return processedList;
+};
+
+/**
+ * Preview thumbnails for seek hover and scrubbing
+ * Seeking: Hover over the seek bar (desktop only): shows a small preview container above the seek bar
+ * Scrubbing: Click and drag the seek bar (desktop and mobile): shows the preview image over the entire video, as if the video is scrubbing at very high speed
+ *
+ * Notes:
+ * - Thumbs are set via JS settings on Plyr init, not HTML5 'track' property. Using the track property would be a bit gross, because it doesn't support custom 'kinds'. kind=metadata might be used for something else, and we want to allow multiple thumbnails tracks. Tracks must have a unique combination of 'kind' and 'label'. We would have to do something like kind=metadata,label=thumbnails1 / kind=metadata,label=thumbnails2. Square peg, round hole
+ * - VTT info: the image URL is relative to the VTT, not the current document. But if the url starts with a slash, it will naturally be relative to the current domain. https://support.jwplayer.com/articles/how-to-add-preview-thumbnails
+ * - This implementation uses multiple separate img elements. Other implementations use background-image on one element. This would be nice and simple, but Firefox and Safari have flickering issues with replacing backgrounds of larger images. It seems that YouTube perhaps only avoids this because they don't have the option for high-res previews (even the fullscreen ones, when mousedown/seeking). Images appear over the top of each other, and previous ones are discarded once the new ones have been rendered
+ */
+
+const fitRatio = (ratio, outer) => {
+  const targetRatio = outer.width / outer.height;
+  const result = {};
+  if (ratio > targetRatio) {
+    result.width = outer.width;
+    result.height = (1 / ratio) * outer.width;
+  } else {
+    result.height = outer.height;
+    result.width = ratio * outer.height;
+  }
+
+  return result;
+};
+
+class PreviewThumbnails {
+  /**
+   * PreviewThumbnails constructor.
+   * @param {Plyr} player
+   * @return {PreviewThumbnails}
+   */
+  constructor(player) {
+    this.player = player;
+    this.thumbnails = [];
+    this.loaded = false;
+    this.lastMouseMoveTime = Date.now();
+    this.mouseDown = false;
+    this.loadedImages = [];
+
+    this.elements = {
+      thumb: {},
+      scrubbing: {},
+    };
+
+    this.load();
+  }
+
+  get enabled() {
+    return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
+  }
+
+  load = () => {
+    // Toggle the regular seek tooltip
+    if (this.player.elements.display.seekTooltip) {
+      this.player.elements.display.seekTooltip.hidden = this.enabled;
+    }
+
+    if (!this.enabled) {
+      return;
+    }
+
+    this.getThumbnails().then(() => {
+      if (!this.enabled) {
+        return;
+      }
+
+      // Render DOM elements
+      this.render();
+
+      // Check to see if thumb container size was specified manually in CSS
+      this.determineContainerAutoSizing();
+
+      this.loaded = true;
+    });
+  };
+
+  // Download VTT files and parse them
+  getThumbnails = () => {
+    return new Promise((resolve) => {
+      const { src } = this.player.config.previewThumbnails;
+
+      if (is.empty(src)) {
+        throw new Error('Missing previewThumbnails.src config attribute');
+      }
+
+      // Resolve promise
+      const sortAndResolve = () => {
+        // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
+        this.thumbnails.sort((x, y) => x.height - y.height);
+
+        this.player.debug.log('Preview thumbnails', this.thumbnails);
+
+        resolve();
+      };
+
+      // Via callback()
+      if (is.function(src)) {
+        src((thumbnails) => {
+          this.thumbnails = thumbnails;
+          sortAndResolve();
+        });
+      }
+      // VTT urls
+      else {
+        // 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));
+        // Resolve
+        Promise.all(promises).then(sortAndResolve);
+      }
+    });
+  };
+
+  // Process individual VTT file
+  getThumbnail = (url) => {
+    return new Promise((resolve) => {
+      fetch(url).then((response) => {
+        const thumbnail = {
+          frames: parseVtt(response),
+          height: null,
+          urlPrefix: '',
+        };
+
+        // If the URLs don't start with '/', then we need to set their relative path to be the location of the VTT file
+        // If the URLs do start with '/', then they obviously don't need a prefix, so it will remain blank
+        // If the thumbnail URLs start with with none of '/', 'http://' or 'https://', then we need to set their relative path to be the location of the VTT file
+        if (
+          !thumbnail.frames[0].text.startsWith('/') &&
+          !thumbnail.frames[0].text.startsWith('http://') &&
+          !thumbnail.frames[0].text.startsWith('https://')
+        ) {
+          thumbnail.urlPrefix = url.substring(0, url.lastIndexOf('/') + 1);
+        }
+
+        // Download the first frame, so that we can determine/set the height of this thumbnailsDef
+        const tempImage = new Image();
+
+        tempImage.onload = () => {
+          thumbnail.height = tempImage.naturalHeight;
+          thumbnail.width = tempImage.naturalWidth;
+
+          this.thumbnails.push(thumbnail);
+
+          resolve();
+        };
+
+        tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
+      });
+    });
+  };
+
+  startMove = (event) => {
+    if (!this.loaded) {
+      return;
+    }
+
+    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
+      return;
+    }
+
+    // Wait until media has a duration
+    if (!this.player.media.duration) {
+      return;
+    }
+
+    if (event.type === 'touchmove') {
+      // Calculate seek hover position as approx video seconds
+      this.seekTime = this.player.media.duration * (this.player.elements.inputs.seek.value / 100);
+    } else {
+      // Calculate seek hover position as approx video seconds
+      const clientRect = this.player.elements.progress.getBoundingClientRect();
+      const percentage = (100 / clientRect.width) * (event.pageX - clientRect.left);
+      this.seekTime = this.player.media.duration * (percentage / 100);
+
+      if (this.seekTime < 0) {
+        // The mousemove fires for 10+px out to the left
+        this.seekTime = 0;
+      }
+
+      if (this.seekTime > this.player.media.duration - 1) {
+        // Took 1 second off the duration for safety, because different players can disagree on the real duration of a video
+        this.seekTime = this.player.media.duration - 1;
+      }
+
+      this.mousePosX = event.pageX;
+
+      // Set time text inside image container
+      this.elements.thumb.time.innerText = formatTime(this.seekTime);
+    }
+
+    // Download and show image
+    this.showImageAtCurrentTime();
+  };
+
+  endMove = () => {
+    this.toggleThumbContainer(false, true);
+  };
+
+  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;
+
+      // Wait until media has a duration
+      if (this.player.media.duration) {
+        this.toggleScrubbingContainer(true);
+        this.toggleThumbContainer(false, true);
+
+        // Download and show image
+        this.showImageAtCurrentTime();
+      }
+    }
+  };
+
+  endScrubbing = () => {
+    this.mouseDown = false;
+
+    // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
+    if (Math.ceil(this.lastTime) === Math.ceil(this.player.media.currentTime)) {
+      // The video was already seeked/loaded at the chosen time - hide immediately
+      this.toggleScrubbingContainer(false);
+    } else {
+      // The video hasn't seeked yet. Wait for that
+      once.call(this.player, this.player.media, 'timeupdate', () => {
+        // Re-check mousedown - we might have already started scrubbing again
+        if (!this.mouseDown) {
+          this.toggleScrubbingContainer(false);
+        }
+      });
+    }
+  };
+
+  /**
+   * Setup hooks for Plyr and window events
+   */
+  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);
+    });
+
+    this.player.on('seeked', () => {
+      this.toggleThumbContainer(false);
+    });
+
+    this.player.on('timeupdate', () => {
+      this.lastTime = this.player.media.currentTime;
+    });
+  };
+
+  /**
+   * Create HTML elements for image containers
+   */
+  render = () => {
+    // Create HTML element: plyr__preview-thumbnail-container
+    this.elements.thumb.container = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.thumbContainer,
+    });
+
+    // Wrapper for the image for styling
+    this.elements.thumb.imageContainer = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.imageContainer,
+    });
+    this.elements.thumb.container.appendChild(this.elements.thumb.imageContainer);
+
+    // Create HTML element, parent+span: time text (e.g., 01:32:00)
+    const timeContainer = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.timeContainer,
+    });
+
+    this.elements.thumb.time = createElement('span', {}, '00:00');
+    timeContainer.appendChild(this.elements.thumb.time);
+
+    this.elements.thumb.container.appendChild(timeContainer);
+
+    // Inject the whole thumb
+    if (is.element(this.player.elements.progress)) {
+      this.player.elements.progress.appendChild(this.elements.thumb.container);
+    }
+
+    // Create HTML element: plyr__preview-scrubbing-container
+    this.elements.scrubbing.container = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
+    });
+
+    this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
+  };
+
+  destroy = () => {
+    if (this.elements.thumb.container) {
+      this.elements.thumb.container.remove();
+    }
+    if (this.elements.scrubbing.container) {
+      this.elements.scrubbing.container.remove();
+    }
+  };
+
+  showImageAtCurrentTime = () => {
+    if (this.mouseDown) {
+      this.setScrubbingContainerSize();
+    } else {
+      this.setThumbContainerSizeAndPos();
+    }
+
+    // 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,
+    );
+    const hasThumb = thumbNum >= 0;
+    let qualityIndex = 0;
+
+    // Show the thumb container if we're not scrubbing
+    if (!this.mouseDown) {
+      this.toggleThumbContainer(hasThumb);
+    }
+
+    // No matching thumb found
+    if (!hasThumb) {
+      return;
+    }
+
+    // Check to see if we've already downloaded higher quality versions of this image
+    this.thumbnails.forEach((thumbnail, index) => {
+      if (this.loadedImages.includes(thumbnail.frames[thumbNum].text)) {
+        qualityIndex = index;
+      }
+    });
+
+    // Only proceed if either thumbnum 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) => {
+    const thumbNum = this.showingThumb;
+    const thumbnail = this.thumbnails[qualityIndex];
+    const { urlPrefix } = thumbnail;
+    const frame = thumbnail.frames[thumbNum];
+    const thumbFilename = thumbnail.frames[thumbNum].text;
+    const thumbUrl = urlPrefix + thumbFilename;
+
+    if (!this.currentImageElement || this.currentImageElement.dataset.filename !== thumbFilename) {
+      // If we're already loading a previous image, remove its onload handler - we don't want it to load after this one
+      // Only do this if not using sprites. Without sprites we really want to show as many images as possible, as a best-effort
+      if (this.loadingImage && this.usingSprites) {
+        this.loadingImage.onload = null;
+      }
+
+      // We're building and adding a new image. In other implementations of similar functionality (YouTube), background image
+      // is instead used. But this causes issues with larger images in Firefox and Safari - switching between background
+      // images causes a flicker. Putting a new image over the top does not
+      const previewImage = new Image();
+      previewImage.src = thumbUrl;
+      previewImage.dataset.index = thumbNum;
+      previewImage.dataset.filename = thumbFilename;
+      this.showingThumbFilename = thumbFilename;
+
+      this.player.debug.log(`Loading image: ${thumbUrl}`);
+
+      // For some reason, passing the named function directly causes it to execute immediately. So I've wrapped it in an anonymous function...
+      previewImage.onload = () => this.showImage(previewImage, frame, qualityIndex, thumbNum, thumbFilename, true);
+      this.loadingImage = previewImage;
+      this.removeOldImages(previewImage);
+    } else {
+      // Update the existing image
+      this.showImage(this.currentImageElement, frame, qualityIndex, thumbNum, thumbFilename, false);
+      this.currentImageElement.dataset.index = thumbNum;
+      this.removeOldImages(this.currentImageElement);
+    }
+  };
+
+  showImage = (previewImage, frame, qualityIndex, thumbNum, thumbFilename, newImage = true) => {
+    this.player.debug.log(
+      `Showing thumb: ${thumbFilename}. num: ${thumbNum}. qual: ${qualityIndex}. newimg: ${newImage}`,
+    );
+    this.setImageSizeAndOffset(previewImage, frame);
+
+    if (newImage) {
+      this.currentImageContainer.appendChild(previewImage);
+      this.currentImageElement = previewImage;
+
+      if (!this.loadedImages.includes(thumbFilename)) {
+        this.loadedImages.push(thumbFilename);
+      }
+    }
+
+    // Preload images before and after the current one
+    // Show higher quality of the same frame
+    // Each step here has a short time delay, and only continues if still hovering/seeking the same spot. This is to protect slow connections from overloading
+    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) => {
+    // Get a list of all images, convert it from a DOM list to an array
+    Array.from(this.currentImageContainer.children).forEach((image) => {
+      if (image.tagName.toLowerCase() !== 'img') {
+        return;
+      }
+
+      const removeDelay = this.usingSprites ? 500 : 1000;
+
+      if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {
+        // Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
+        // First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
+        // eslint-disable-next-line no-param-reassign
+        image.dataset.deleting = true;
+
+        // This has to be set before the timeout - to prevent issues switching between hover and scrub
+        const { currentImageContainer } = this;
+
+        setTimeout(() => {
+          currentImageContainer.removeChild(image);
+          this.player.debug.log(`Removing thumb: ${image.dataset.filename}`);
+        }, 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) => {
+      setTimeout(() => {
+        const oldThumbFilename = this.thumbnails[0].frames[thumbNum].text;
+
+        if (this.showingThumbFilename === oldThumbFilename) {
+          // Find the nearest thumbs with different filenames. Sometimes it'll be the next index, but in the case of sprites, it might be 100+ away
+          let thumbnailsClone;
+          if (forward) {
+            thumbnailsClone = this.thumbnails[0].frames.slice(thumbNum);
+          } else {
+            thumbnailsClone = this.thumbnails[0].frames.slice(0, thumbNum).reverse();
+          }
+
+          let foundOne = false;
+
+          thumbnailsClone.forEach((frame) => {
+            const newThumbFilename = frame.text;
+
+            if (newThumbFilename !== oldThumbFilename) {
+              // Found one with a different filename. Make sure it hasn't already been loaded on this page visit
+              if (!this.loadedImages.includes(newThumbFilename)) {
+                foundOne = true;
+                this.player.debug.log(`Preloading thumb filename: ${newThumbFilename}`);
+
+                const { urlPrefix } = this.thumbnails[0];
+                const thumbURL = urlPrefix + newThumbFilename;
+                const previewImage = new Image();
+                previewImage.src = thumbURL;
+                previewImage.onload = () => {
+                  this.player.debug.log(`Preloaded thumb filename: ${newThumbFilename}`);
+                  if (!this.loadedImages.includes(newThumbFilename)) this.loadedImages.push(newThumbFilename);
+
+                  // We don't resolve until the thumb is loaded
+                  resolve();
+                };
+              }
+            }
+          });
+
+          // If there are none to preload then we want to resolve immediately
+          if (!foundOne) {
+            resolve();
+          }
+        }
+      }, 300);
+    });
+  };
+
+  // If user has been hovering current image for half a second, look for a higher quality one
+  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;
+
+      if (this.usingSprites) {
+        previewImageHeight = frame.h;
+      }
+
+      if (previewImageHeight < this.thumbContainerHeight) {
+        // Recurse back to the loadImage function - show a higher quality one, but only if the viewer is on this frame for a while
+        setTimeout(() => {
+          // Make sure the mouse hasn't already moved on and started hovering at another image
+          if (this.showingThumbFilename === thumbFilename) {
+            this.player.debug.log(`Showing higher quality thumb for: ${thumbFilename}`);
+            this.loadImage(currentQualityIndex + 1);
+          }
+        }, 300);
+      }
+    }
+  };
+
+  get currentImageContainer() {
+    if (this.mouseDown) {
+      return this.elements.scrubbing.container;
+    }
+
+    return this.elements.thumb.imageContainer;
+  }
+
+  get usingSprites() {
+    return Object.keys(this.thumbnails[0].frames[0]).includes('w');
+  }
+
+  get thumbAspectRatio() {
+    if (this.usingSprites) {
+      return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;
+    }
+
+    return this.thumbnails[0].width / this.thumbnails[0].height;
+  }
+
+  get thumbContainerHeight() {
+    if (this.mouseDown) {
+      const { height } = fitRatio(this.thumbAspectRatio, {
+        width: this.player.media.clientWidth,
+        height: this.player.media.clientHeight,
+      });
+      return height;
+    }
+
+    // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset)
+    if (this.sizeSpecifiedInCSS) {
+      return this.elements.thumb.imageContainer.clientHeight;
+    }
+
+    return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
+  }
+
+  get currentImageElement() {
+    if (this.mouseDown) {
+      return this.currentScrubbingImageElement;
+    }
+
+    return this.currentThumbnailImageElement;
+  }
+
+  set currentImageElement(element) {
+    if (this.mouseDown) {
+      this.currentScrubbingImageElement = element;
+    } else {
+      this.currentThumbnailImageElement = element;
+    }
+  }
+
+  toggleThumbContainer = (toggle = false, clearShowing = false) => {
+    const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
+    this.elements.thumb.container.classList.toggle(className, toggle);
+
+    if (!toggle && clearShowing) {
+      this.showingThumb = null;
+      this.showingThumbFilename = null;
+    }
+  };
+
+  toggleScrubbingContainer = (toggle = false) => {
+    const className = this.player.config.classNames.previewThumbnails.scrubbingContainerShown;
+    this.elements.scrubbing.container.classList.toggle(className, toggle);
+
+    if (!toggle) {
+      this.showingThumb = null;
+      this.showingThumbFilename = null;
+    }
+  };
+
+  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 = () => {
+    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`;
+    }
+
+    this.setThumbContainerPos();
+  };
+
+  setThumbContainerPos = () => {
+    const seekbarRect = this.player.elements.progress.getBoundingClientRect();
+    const plyrRect = 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;
+    // Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
+    let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
+
+    if (previewPos < minVal) {
+      previewPos = minVal;
+    }
+
+    if (previewPos > maxVal) {
+      previewPos = maxVal;
+    }
+
+    container.style.left = `${previewPos}px`;
+  };
+
+  // Can't use 100% width, in case the video is a different aspect ratio to the video container
+  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;
+    }
+
+    // Find difference between height and preview container height
+    const multiplier = this.thumbContainerHeight / frame.h;
+
+    // eslint-disable-next-line no-param-reassign
+    previewImage.style.height = `${previewImage.naturalHeight * multiplier}px`;
+    // eslint-disable-next-line no-param-reassign
+    previewImage.style.width = `${previewImage.naturalWidth * multiplier}px`;
+    // eslint-disable-next-line no-param-reassign
+    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

@@ -2,322 +2,416 @@
 // Vimeo plugin
 // ==========================================================================
 
-import utils from './../utils';
-import captions from './../captions';
-import ui from './../ui';
+import captions from '../captions';
+import controls from '../controls';
+import ui from '../ui';
+import { createElement, replaceElement, toggleClass } from '../utils/elements';
+import { triggerEvent } from '../utils/events';
+import fetch from '../utils/fetch';
+import is from '../utils/is';
+import loadScript from '../utils/load-script';
+import { format, stripHTML } from '../utils/strings';
+import { roundAspectRatio, setAspectRatio } from '../utils/style';
+import { buildUrlParams } from '../utils/urls';
+
+// Parse Vimeo ID from URL
+function parseId(url) {
+  if (is.empty(url)) {
+    return null;
+  }
+
+  if (is.number(Number(url))) {
+    return url;
+  }
+
+  const regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
+  return url.match(regex) ? RegExp.$2 : url;
+}
+
+// Set playback state and trigger change (only on actual change)
+function assurePlaybackState(play) {
+  if (play && !this.embed.hasPlayed) {
+    this.embed.hasPlayed = true;
+  }
+  if (this.media.paused === play) {
+    this.media.paused = !play;
+    triggerEvent.call(this, this.media, play ? 'play' : 'pause');
+  }
+}
 
 const vimeo = {
-    setup() {
-        // Add embed class for responsive
-        utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+  setup() {
+    const player = this;
 
-        // Set intial ratio
-        vimeo.setAspectRatio.call(this);
+    // Add embed class for responsive
+    toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
 
-        // Load the API if not already
-        if (!utils.is.object(window.Vimeo)) {
-            utils
-                .loadScript(this.config.urls.vimeo.api)
-                .then(() => {
-                    vimeo.ready.call(this);
-                })
-                .catch(error => {
-                    this.debug.warn('Vimeo API failed to load', error);
-                });
-        } else {
-            vimeo.ready.call(this);
-        }
-    },
+    // Set speed options from config
+    player.options.speed = player.config.speed.options;
 
-    // Set aspect ratio
-    // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI
-    setAspectRatio(input) {
-        const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':');
-        const padding = 100 / ratio[0] * ratio[1];
-        const height = 200;
-        const offset = (height - padding) / (height / 50);
-        this.elements.wrapper.style.paddingBottom = `${padding}%`;
-        this.media.style.transform = `translateY(-${offset}%)`;
-    },
+    // Set intial ratio
+    setAspectRatio.call(player);
 
-    // API Ready
-    ready() {
-        const player = this;
+    // Load the SDK if not already
+    if (!is.object(window.Vimeo)) {
+      loadScript(player.config.urls.vimeo.sdk)
+        .then(() => {
+          vimeo.ready.call(player);
+        })
+        .catch((error) => {
+          player.debug.warn('Vimeo SDK (player.js) failed to load', error);
+        });
+    } else {
+      vimeo.ready.call(player);
+    }
+  },
 
-        // Get Vimeo params for the iframe
-        const options = {
-            loop: player.config.loop.active,
-            autoplay: player.autoplay,
-            byline: false,
-            portrait: false,
-            title: false,
-            speed: true,
-            transparent: 0,
-            gesture: 'media',
-        };
-        const params = utils.buildUrlParams(options);
+  // API Ready
+  ready() {
+    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');
+    // If the owner has a pro or premium account then we can hide controls etc
+    if (premium) {
+      Object.assign(frameParams, {
+        controls: false,
+        sidedock: false,
+      });
+    }
 
-        // Get from <div> if needed
-        if (utils.is.empty(source)) {
-            source = player.media.getAttribute(this.config.attributes.embed.id);
+    // Get Vimeo params for the iframe
+    const params = buildUrlParams({
+      loop: player.config.loop.active,
+      autoplay: player.autoplay,
+      muted: player.muted,
+      gesture: 'media',
+      playsinline: !this.config.fullscreen.iosNative,
+      ...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', 'encrypted-media', 'accelerometer', 'gyroscope'].join('; '),
+    );
+
+    // Set the referrer policy if required
+    if (!is.empty(referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
+    }
+
+    // Inject the package
+    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': player.poster,
+      });
+      wrapper.appendChild(iframe);
+      player.media = replaceElement(wrapper, player.media);
+    }
+
+    // Get poster image
+    if (!config.customControls) {
+      fetch(format(player.config.urls.vimeo.api, src)).then((response) => {
+        if (is.empty(response) || !response.thumbnail_url) {
+          return;
         }
 
-        const id = utils.parseVimeoId(source);
+        // Set and show poster
+        ui.setPoster.call(player, response.thumbnail_url).catch(() => {});
+      });
+    }
 
-        // Build an iframe
-        const iframe = utils.createElement('iframe');
-        const src = `https://player.vimeo.com/video/${id}?${params}`;
-        iframe.setAttribute('src', src);
-        iframe.setAttribute('allowfullscreen', '');
-        iframe.setAttribute('allowtransparency', '');
-        iframe.setAttribute('allow', 'autoplay');
+    // Setup instance
+    // https://github.com/vimeo/player.js
+    player.embed = new window.Vimeo.Player(iframe, {
+      autopause: player.config.autopause,
+      muted: player.muted,
+    });
 
-        // Inject the package
-        const wrapper = utils.createElement('div');
-        wrapper.appendChild(iframe);
-        player.media = utils.replaceElement(wrapper, player.media);
+    player.media.paused = true;
+    player.media.currentTime = 0;
 
-        // Setup instance
-        // https://github.com/vimeo/player.js
-        player.embed = new window.Vimeo.Player(iframe);
+    // Disable native text track rendering
+    if (player.supported.ui) {
+      player.embed.disableTextTrack();
+    }
 
-        player.media.paused = true;
-        player.media.currentTime = 0;
+    // Create a faux HTML5 API using the Vimeo API
+    player.media.play = () => {
+      assurePlaybackState.call(player, true);
+      return player.embed.play();
+    };
 
-        // Create a faux HTML5 API using the Vimeo API
-        player.media.play = () => {
-            player.embed.play().then(() => {
-                player.media.paused = false;
-            });
-        };
+    player.media.pause = () => {
+      assurePlaybackState.call(player, false);
+      return player.embed.pause();
+    };
 
-        player.media.pause = () => {
-            player.embed.pause().then(() => {
-                player.media.paused = true;
-            });
-        };
+    player.media.stop = () => {
+      player.pause();
+      player.currentTime = 0;
+    };
 
-        player.media.stop = () => {
-            player.embed.stop().then(() => {
-                player.media.paused = true;
-                player.currentTime = 0;
-            });
-        };
+    // Seeking
+    let { currentTime } = player.media;
+    Object.defineProperty(player.media, 'currentTime', {
+      get() {
+        return currentTime;
+      },
+      set(time) {
+        // Vimeo will automatically play on seek if the video hasn't been played before
 
-        // Seeking
-        let { currentTime } = player.media;
-        Object.defineProperty(player.media, 'currentTime', {
-            get() {
-                return currentTime;
-            },
-            set(time) {
-                // Get current paused state
-                // Vimeo will automatically play on seek
-                const { paused } = player.media;
+        // Get current paused state and volume etc
+        const { embed, media, paused, volume } = player;
+        const restorePause = paused && !embed.hasPlayed;
 
-                // Set seeking flag
-                player.media.seeking = true;
+        // Set seeking state and trigger event
+        media.seeking = true;
+        triggerEvent.call(player, media, 'seeking');
 
-                // Trigger seeking
-                utils.dispatchEvent.call(player, player.media, 'seeking');
+        // If paused, mute until seek is complete
+        Promise.resolve(restorePause && embed.setVolume(0))
+          // Seek
+          .then(() => embed.setCurrentTime(time))
+          // Restore paused
+          .then(() => restorePause && embed.pause())
+          // Restore volume
+          .then(() => restorePause && embed.setVolume(volume))
+          .catch(() => {
+            // Do nothing
+          });
+      },
+    });
 
-                // Seek after events
-                player.embed.setCurrentTime(time);
+    // Playback speed
+    let speed = player.config.speed.selected;
+    Object.defineProperty(player.media, 'playbackRate', {
+      get() {
+        return speed;
+      },
+      set(input) {
+        player.embed
+          .setPlaybackRate(input)
+          .then(() => {
+            speed = input;
+            triggerEvent.call(player, player.media, 'ratechange');
+          })
+          .catch(() => {
+            // Cannot set Playback Rate, Video is probably not on Pro account
+            player.options.speed = [1];
+          });
+      },
+    });
 
-                // Restore pause state
-                if (paused) {
-                    player.pause();
-                }
-            },
+    // Volume
+    let { volume } = player.config;
+    Object.defineProperty(player.media, 'volume', {
+      get() {
+        return volume;
+      },
+      set(input) {
+        player.embed.setVolume(input).then(() => {
+          volume = input;
+          triggerEvent.call(player, player.media, 'volumechange');
         });
+      },
+    });
 
-        // Playback speed
-        let speed = player.config.speed.selected;
-        Object.defineProperty(player.media, 'playbackRate', {
-            get() {
-                return speed;
-            },
-            set(input) {
-                player.embed.setPlaybackRate(input).then(() => {
-                    speed = input;
-                    utils.dispatchEvent.call(player, player.media, 'ratechange');
-                });
-            },
+    // Muted
+    let { muted } = player.config;
+    Object.defineProperty(player.media, 'muted', {
+      get() {
+        return muted;
+      },
+      set(input) {
+        const toggle = is.boolean(input) ? input : false;
+
+        player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
+          muted = toggle;
+          triggerEvent.call(player, player.media, 'volumechange');
         });
+      },
+    });
 
-        // Volume
-        let { volume } = player.config;
-        Object.defineProperty(player.media, 'volume', {
-            get() {
-                return volume;
-            },
-            set(input) {
-                player.embed.setVolume(input).then(() => {
-                    volume = input;
-                    utils.dispatchEvent.call(player, player.media, 'volumechange');
-                });
-            },
+    // Loop
+    let { loop } = player.config;
+    Object.defineProperty(player.media, 'loop', {
+      get() {
+        return loop;
+      },
+      set(input) {
+        const toggle = is.boolean(input) ? input : player.config.loop.active;
+
+        player.embed.setLoop(toggle).then(() => {
+          loop = toggle;
         });
+      },
+    });
 
-        // Muted
-        let { muted } = player.config;
-        Object.defineProperty(player.media, 'muted', {
-            get() {
-                return muted;
-            },
-            set(input) {
-                const toggle = utils.is.boolean(input) ? input : false;
+    // Source
+    let currentSrc;
+    player.embed
+      .getVideoUrl()
+      .then((value) => {
+        currentSrc = value;
+        controls.setDownloadUrl.call(player);
+      })
+      .catch((error) => {
+        this.debug.warn(error);
+      });
 
-                player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
-                    muted = toggle;
-                    utils.dispatchEvent.call(player, player.media, 'volumechange');
-                });
-            },
-        });
+    Object.defineProperty(player.media, 'currentSrc', {
+      get() {
+        return currentSrc;
+      },
+    });
 
-        // Loop
-        let { loop } = player.config;
-        Object.defineProperty(player.media, 'loop', {
-            get() {
-                return loop;
-            },
-            set(input) {
-                const toggle = utils.is.boolean(input) ? input : player.config.loop.active;
+    // Ended
+    Object.defineProperty(player.media, 'ended', {
+      get() {
+        return player.currentTime === player.duration;
+      },
+    });
 
-                player.embed.setLoop(toggle).then(() => {
-                    loop = toggle;
-                });
-            },
-        });
+    // Set aspect ratio based on video size
+    Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then((dimensions) => {
+      const [width, height] = dimensions;
+      player.embed.ratio = roundAspectRatio(width, height);
+      setAspectRatio.call(this);
+    });
 
-        // Source
-        let currentSrc;
-        player.embed.getVideoUrl().then(value => {
-            currentSrc = value;
-        });
-        Object.defineProperty(player.media, 'currentSrc', {
-            get() {
-                return currentSrc;
-            },
-        });
+    // Set autopause
+    player.embed.setAutopause(player.config.autopause).then((state) => {
+      player.config.autopause = state;
+    });
 
-        // Ended
-        Object.defineProperty(player.media, 'ended', {
-            get() {
-                return player.currentTime === player.duration;
-            },
-        });
+    // Get title
+    player.embed.getVideoTitle().then((title) => {
+      player.config.title = title;
+      ui.setTitle.call(this);
+    });
 
-        // Set aspect ratio based on video size
-        Promise.all([
-            player.embed.getVideoWidth(),
-            player.embed.getVideoHeight(),
-        ]).then(dimensions => {
-            const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]);
-            vimeo.setAspectRatio.call(this, ratio);
-        });
+    // Get current time
+    player.embed.getCurrentTime().then((value) => {
+      currentTime = value;
+      triggerEvent.call(player, player.media, 'timeupdate');
+    });
 
-        // Set autopause
-        player.embed.setAutopause(player.config.autopause).then(state => {
-            player.config.autopause = state;
-        });
+    // Get duration
+    player.embed.getDuration().then((value) => {
+      player.media.duration = value;
+      triggerEvent.call(player, player.media, 'durationchange');
+    });
 
-        // Get title
-        player.embed.getVideoTitle().then(title => {
-            player.config.title = title;
-            ui.setTitle.call(this);
-        });
+    // Get captions
+    player.embed.getTextTracks().then((tracks) => {
+      player.media.textTracks = tracks;
+      captions.setup.call(player);
+    });
 
-        // Get current time
-        player.embed.getCurrentTime().then(value => {
-            currentTime = value;
-            utils.dispatchEvent.call(player, player.media, 'timeupdate');
-        });
+    player.embed.on('cuechange', ({ cues = [] }) => {
+      const strippedCues = cues.map((cue) => stripHTML(cue.text));
+      captions.updateCues.call(player, strippedCues);
+    });
 
-        // Get duration
-        player.embed.getDuration().then(value => {
-            player.media.duration = value;
-            utils.dispatchEvent.call(player, player.media, 'durationchange');
-        });
+    player.embed.on('loaded', () => {
+      // Assure state and events are updated on autoplay
+      player.embed.getPaused().then((paused) => {
+        assurePlaybackState.call(player, !paused);
+        if (!paused) {
+          triggerEvent.call(player, player.media, 'playing');
+        }
+      });
 
-        // Get captions
-        player.embed.getTextTracks().then(tracks => {
-            player.media.textTracks = tracks;
-            captions.setup.call(player);
-        });
+      if (is.element(player.embed.element) && player.supported.ui) {
+        const frame = player.embed.element;
 
-        player.embed.on('cuechange', data => {
-            let cue = null;
+        // Fix keyboard focus issues
+        // https://github.com/sampotts/plyr/issues/317
+        frame.setAttribute('tabindex', -1);
+      }
+    });
 
-            if (data.cues.length) {
-                cue = utils.stripHTML(data.cues[0].text);
-            }
+    player.embed.on('bufferstart', () => {
+      triggerEvent.call(player, player.media, 'waiting');
+    });
 
-            captions.setText.call(player, cue);
-        });
+    player.embed.on('bufferend', () => {
+      triggerEvent.call(player, player.media, 'playing');
+    });
 
-        player.embed.on('loaded', () => {
-            if (utils.is.element(player.embed.element) && player.supported.ui) {
-                const frame = player.embed.element;
+    player.embed.on('play', () => {
+      assurePlaybackState.call(player, true);
+      triggerEvent.call(player, player.media, 'playing');
+    });
 
-                // Fix keyboard focus issues
-                // https://github.com/sampotts/plyr/issues/317
-                frame.setAttribute('tabindex', -1);
-            }
-        });
+    player.embed.on('pause', () => {
+      assurePlaybackState.call(player, false);
+    });
 
-        player.embed.on('play', () => {
-            // Only fire play if paused before
-            if (player.media.paused) {
-                utils.dispatchEvent.call(player, player.media, 'play');
-            }
-            player.media.paused = false;
-            utils.dispatchEvent.call(player, player.media, 'playing');
-        });
+    player.embed.on('timeupdate', (data) => {
+      player.media.seeking = false;
+      currentTime = data.seconds;
+      triggerEvent.call(player, player.media, 'timeupdate');
+    });
 
-        player.embed.on('pause', () => {
-            player.media.paused = true;
-            utils.dispatchEvent.call(player, player.media, 'pause');
-        });
+    player.embed.on('progress', (data) => {
+      player.media.buffered = data.percent;
+      triggerEvent.call(player, player.media, 'progress');
 
-        player.embed.on('timeupdate', data => {
-            player.media.seeking = false;
-            currentTime = data.seconds;
-            utils.dispatchEvent.call(player, player.media, 'timeupdate');
-        });
+      // Check all loaded
+      if (parseInt(data.percent, 10) === 1) {
+        triggerEvent.call(player, player.media, 'canplaythrough');
+      }
 
-        player.embed.on('progress', data => {
-            player.media.buffered = data.percent;
-            utils.dispatchEvent.call(player, player.media, 'progress');
+      // 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) => {
+        if (value !== player.media.duration) {
+          player.media.duration = value;
+          triggerEvent.call(player, player.media, 'durationchange');
+        }
+      });
+    });
 
-            // Check all loaded
-            if (parseInt(data.percent, 10) === 1) {
-                utils.dispatchEvent.call(player, player.media, 'canplaythrough');
-            }
-        });
+    player.embed.on('seeked', () => {
+      player.media.seeking = false;
+      triggerEvent.call(player, player.media, 'seeked');
+    });
 
-        player.embed.on('seeked', () => {
-            player.media.seeking = false;
-            utils.dispatchEvent.call(player, player.media, 'seeked');
-            utils.dispatchEvent.call(player, player.media, 'play');
-        });
+    player.embed.on('ended', () => {
+      player.media.paused = true;
+      triggerEvent.call(player, player.media, 'ended');
+    });
 
-        player.embed.on('ended', () => {
-            player.media.paused = true;
-            utils.dispatchEvent.call(player, player.media, 'ended');
-        });
+    player.embed.on('error', (detail) => {
+      player.media.error = detail;
+      triggerEvent.call(player, player.media, 'error');
+    });
 
-        player.embed.on('error', detail => {
-            player.media.error = detail;
-            utils.dispatchEvent.call(player, player.media, 'error');
-        });
-
-        // Rebuild UI
-        setTimeout(() => ui.build.call(player), 0);
-    },
+    // Rebuild UI
+    if (config.customControls) {
+      setTimeout(() => ui.build.call(player), 0);
+    }
+  },
 };
 
 export default vimeo;