From 3e0a91141822758094b2cbd5f0ecdd8ce4142b5f Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 26 May 2018 13:37:10 +1000
Subject: WIP

---
 src/sass/components/captions.scss |   4 +-
 src/sass/components/control.scss  |  22 +++----
 src/sass/lib/css-vars.scss        | 131 ++++++++++++++++++++++++++++++++++++++
 src/sass/plyr.scss                |   3 +
 src/sass/settings/captions.scss   |  12 +++-
 src/sass/settings/colors.scss     |  10 +++
 src/sass/settings/controls.scss   |  24 ++++++-
 src/sass/settings/cosmetics.scss  |   2 +
 src/sass/settings/sliders.scss    |   2 +-
 9 files changed, 191 insertions(+), 19 deletions(-)
 create mode 100644 src/sass/lib/css-vars.scss

(limited to 'src')

diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 9dfc2be8..66f34199 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,7 @@
 .plyr__captions {
     animation: plyr-fade-in 0.3s ease;
     bottom: 0;
-    color: $plyr-captions-color;
+    color: var(--plyr-captions-text-color);
     display: none;
     font-size: $plyr-font-size-captions-small;
     left: 0;
@@ -22,7 +22,7 @@
     width: 100%;
 
     span {
-        background: $plyr-captions-bg;
+        background: var(--plyr-captions-background);
         border-radius: 2px;
         box-decoration-break: clone;
         line-height: 185%;
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 52716805..d93a6f34 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -5,21 +5,21 @@
 .plyr__control {
     background: transparent;
     border: 0;
-    border-radius: $plyr-control-radius;
+    border-radius: var(--plyr-control-radius);
     color: inherit;
     cursor: pointer;
     flex-shrink: 0;
     overflow: visible; // IE11
-    padding: $plyr-control-padding;
+    padding: var(--plyr-control-padding);
     position: relative;
     transition: all 0.3s ease;
 
     svg {
         display: block;
         fill: currentColor;
-        height: $plyr-control-icon-size;
+        height: var(--plyr-control-icon-size);
         pointer-events: none;
-        width: $plyr-control-icon-size;
+        width: var(--plyr-control-icon-size);
     }
 
     // Default focus
@@ -46,18 +46,18 @@
     &.plyr__tab-focus,
     &:hover,
     &[aria-expanded='true'] {
-        background: $plyr-audio-control-bg-hover;
-        color: $plyr-audio-control-color-hover;
+        background: var(--plyr-audio-control-bg-hover);
+        color: var(--plyr-audio-control-color-hover);
     }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: rgba($plyr-video-control-bg-hover, 0.8);
+    background: var(--plyr-video-control-bg-hover);
     border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: $plyr-video-control-color;
+    color: var(--plyr-video-control-color);
     display: none;
     left: 50%;
     padding: ceil($plyr-control-spacing * 1.5);
@@ -67,15 +67,15 @@
     z-index: 2;
 
     svg {
-        height: $plyr-control-icon-size-large;
+        height: var(--plyr-control-icon-size-large);
         left: 2px; // Offset to make the play button look right
         position: relative;
-        width: $plyr-control-icon-size-large;
+        width: var(--plyr-control-icon-size-large);
     }
 
     &:hover,
     &:focus {
-        background: $plyr-video-control-bg-hover;
+        background: var(--plyr-video-control-bg-hover);
     }
 }
 
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss
new file mode 100644
index 00000000..cb251831
--- /dev/null
+++ b/src/sass/lib/css-vars.scss
@@ -0,0 +1,131 @@
+// Downloaded from https://github.com/malyw/css-vars
+
+//// VARIABLES ////
+
+// global map to be filled via variables
+$css-vars: ();
+
+// the variable may be set to "true" anywhere in the code,
+// so native CSS custom properties will be used instead of the Sass global map
+$css-vars-use-native: false !default;
+
+// enables the output of debug messages
+$css-vars-debug-log: false !default;
+
+//// FUNCTIONS ////
+
+///
+// Assigns a variable to the global map
+///
+@function _cssVarAssign($varName: null, $varValue: null) {
+    // CHECK PARAMS
+    @if ($varName==null) {
+        @error 'Variable name is expected, instead got: null';
+    }
+    @if ($varValue==null) {
+        @error 'Variable value is expected, instead got: null';
+    }
+
+    // assign to the global map
+    @if ($css-vars-debug-log and map-get($css-vars, $varName)) {
+        @debug "'#{$varName}' variable is reassigned";
+    }
+
+    @return map-merge($css-vars, ($varName: $varValue));
+}
+
+///
+// Emulates var() CSS native function behavior
+//
+// $args[0] {String} "--" + variable name
+// [$args[1]] Optional default value if variable is not assigned yet
+//
+// E.G.:
+// color: var(--main-color);
+// background: var(--main-bg, green);
+///
+@function var($args...) {
+    // CHECK PARAMS
+    @if (length($args) ==0) {
+        @error 'Variable name is expected to be passed to the var() function';
+    }
+    @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+        @error "Variable name is expected to start from '--'";
+    }
+
+    // PROCESS
+    $varName: nth($args, 1);
+    $varValue: map-get($css-vars, $varName);
+
+    @if ($css-vars-debug-log or not $css-vars-use-native) {
+        // Sass or debug
+        @if ($varValue==null) {
+            // variable is not provided so far
+            @if (length($args) ==2) {
+                // the default value is passed
+                @if ($css-vars-debug-log) {
+                    @debug "Provided default value is used for the variable: '#{$varName}'";
+                }
+                $varValue: nth($args, 2);
+            } @else if ($css-vars-debug-log) {
+                @debug "Variable '#{$varName}' is not assigned";
+                @if (not $css-vars-use-native) {
+                    @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS";
+                }
+            }
+        }
+    }
+
+    @if ($css-vars-use-native) {
+        // CSS variables
+        // Native CSS: don't process function in case of native
+        @return unquote('var(' + $args + ')');
+    } @else {
+        // Sass: return value from the map
+        @return $varValue;
+    }
+}
+
+//// MIXIN ////
+
+///
+// CSS mixin to provide variables
+// E.G.:
+// @include css-vars((
+//    --color: rebeccapurple,
+//    --height: 68px,
+//    --margin-top: calc(2vh + 20px)
+// ));
+///
+@mixin css-vars($varMap: null) {
+    // CHECK PARAMS
+    @if ($varMap==null) {
+        @error 'Map of variables is expected, instead got: null';
+    }
+    @if (type_of($varMap) !=map) {
+        @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}';
+    }
+
+    // PROCESS
+    @if ($css-vars-debug-log or not $css-vars-use-native) {
+        // Sass or debug
+        // merge variables and values to the global map (provides no output)
+        @each $varName, $varValue in $varMap {
+            $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable
+        }
+    }
+
+    @if ($css-vars-use-native) {
+        // CSS variables
+        // Native CSS: assign CSS custom properties to the global scope
+        @at-root :root {
+            @each $varName, $varValue in $varMap {
+                @if (type_of($varValue) ==string) {
+                    #{$varName}: $varValue; // to prevent quotes interpolation
+                } @else {
+                    #{$varName}: #{$varValue};
+                }
+            }
+        }
+    }
+}
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index e934cf92..6a283dc1 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -5,6 +5,9 @@
 // ==========================================================================
 @charset 'UTF-8';
 
+@import 'lib/css-vars';
+$css-vars-use-native: true;
+
 @import 'settings/breakpoints';
 @import 'settings/colors';
 @import 'settings/cosmetics';
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 0c259046..46c9cfc8 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -2,9 +2,17 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-bg: rgba(#000, 0.8) !default;
-$plyr-captions-color: #fff !default;
+$plyr-captions-background: rgba(#000, 0.8) !default;
+$plyr-captions-text-color: #fff !default;
+
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
 $plyr-font-size-captions-medium: $plyr-font-size-large !default;
 $plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
+
+@include css-vars(
+    (
+        --plyr-captions-background: $plyr-captions-background,
+        --plyr-captions-text-color: $plyr-captions-text-color
+    )
+);
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index c9ea580c..5a2f4e82 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -7,3 +7,13 @@ $plyr-color-gunmetal: #2f343d !default;
 $plyr-color-fiord: #4f5b5f !default;
 $plyr-color-lynch: #6b7d85 !default;
 $plyr-color-heather: #b7c5cd !default;
+
+@include css-vars(
+    (
+        --plyr-color-main: $plyr-color-main,
+        --plyr-color-gunmetal: $plyr-color-gunmetal,
+        --plyr-color-fiord: $plyr-color-fiord,
+        --plyr-color-lynch: $plyr-color-lynch,
+        --plyr-color-heather: $plyr-color-heather
+    )
+);
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index 64f05cec..77387567 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -11,9 +11,27 @@ $plyr-control-radius: 3px !default;
 $plyr-video-controls-bg: #000 !default;
 $plyr-video-control-color: #fff !default;
 $plyr-video-control-color-hover: #fff !default;
-$plyr-video-control-bg-hover: $plyr-color-main !default;
+$plyr-video-control-bg-hover: var(--plyr-color-main) !default;
 
 $plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color: var(--plyr-color-fiord) !default;
 $plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-bg-hover: $plyr-color-main !default;
+$plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
+
+@include css-vars(
+    (
+        --plyr-control-icon-size: $plyr-control-icon-size,
+        --plyr-control-icon-size-large: $plyr-control-icon-size-large,
+        --plyr-control-spacing: $plyr-control-spacing,
+        --plyr-control-padding: $plyr-control-padding,
+        --plyr-control-radius: $plyr-control-radius,
+        --plyr-video-controls-bg: $plyr-video-controls-bg,
+        --plyr-video-control-color: $plyr-video-control-color,
+        --plyr-video-control-color-hover: $plyr-video-control-color-hover,
+        --plyr-video-control-bg-hover: $plyr-video-control-bg-hover,
+        --plyr-audio-controls-bg: $plyr-audio-controls-bg,
+        --plyr-audio-control-color: $plyr-audio-control-color,
+        --plyr-audio-control-color-hover: $plyr-audio-control-color-hover,
+        --plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover
+    )
+);
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index d6e4b86d..80063850 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -3,3 +3,5 @@
 // ==========================================================================
 
 $plyr-tab-focus-default-color: $plyr-color-main !default;
+
+@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color));
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 3c75b797..edc3fe7e 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -16,7 +16,7 @@ $plyr-range-track-height: 6px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill
-$plyr-range-fill-bg: $plyr-color-main !default;
+$plyr-range-fill-bg: var(--plyr-color-main);
 
 // Type specific
 $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
-- 
cgit v1.2.3


From bdd513635fffa33f66735c80209e6ae77e0426b4 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 8 Dec 2018 17:06:20 +1100
Subject: Work on outline/focus styles

---
 src/sass/components/control.scss |  4 ++--
 src/sass/lib/mixins.scss         | 10 +++++++---
 src/sass/settings/controls.scss  |  1 -
 3 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index d5a9847e..eedcab13 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -71,8 +71,8 @@ a.plyr__control {
     &.plyr__tab-focus,
     &:hover,
     &[aria-expanded='true'] {
-        background: var(--plyr-audio-control-bg-hover);
-        color: var(--plyr-audio-control-color-hover);
+        background: var(--plyr-video-control-bg-hover);
+        color: var(--plyr-video-control-color-hover);
     }
 }
 
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index e015ffee..0a0f7dcb 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -4,9 +4,13 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
-    box-shadow: 0 0 0 5px rgba($color, 0.5);
-    outline: 0;
+@mixin plyr-tab-focus() {
+    // box-shadow: 0 0 0 5px rgba($color, 0.5);
+    // outline: 0;
+    outline-color: var(--plyr-color-main);
+    outline-offset: 2px;
+    outline-style: dotted;
+    outline-width: 3px;
 }
 
 // Font smoothing
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index ee88434a..906744b2 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -20,7 +20,6 @@ $plyr-audio-control-bg-hover: var(--plyr-color-main) !default;
 @include css-vars(
     (
         --plyr-control-icon-size: $plyr-control-icon-size,
-        --plyr-control-icon-size-large: $plyr-control-icon-size-large,
         --plyr-control-spacing: $plyr-control-spacing,
         --plyr-control-padding: $plyr-control-padding,
         --plyr-control-radius: $plyr-control-radius,
-- 
cgit v1.2.3


From 996075decc6e8c0f0c5059dccea21b16020eb78b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 11 Apr 2019 20:50:20 +1000
Subject: More work on variable usage

---
 src/sass/base.scss                |  6 +--
 src/sass/components/badges.scss   |  2 +-
 src/sass/components/captions.scss |  1 -
 src/sass/components/control.scss  |  2 +-
 src/sass/lib/css-vars.scss        | 97 +++++++++++++--------------------------
 src/sass/settings/colors.scss     |  2 +-
 src/sass/settings/controls.scss   |  2 +-
 src/sass/settings/type.scss       | 20 +++++++-
 8 files changed, 58 insertions(+), 74 deletions(-)

(limited to 'src')

diff --git a/src/sass/base.scss b/src/sass/base.scss
index 9bb9d98a..84861e99 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -7,10 +7,10 @@
     @include plyr-font-smoothing($plyr-font-smoothing);
 
     direction: ltr;
-    font-family: $plyr-font-family;
+    font-family: var(--plyr-font-family);
     font-variant-numeric: tabular-nums; // Force monosace-esque number widths
-    font-weight: $plyr-font-weight-regular;
-    line-height: $plyr-line-height;
+    font-weight: var(--plyr-font-weight-regular);
+    line-height: var(--plyr-line-height);
     max-width: 100%;
     min-width: 200px;
     position: relative;
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 3a9a28b5..46c87d03 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -6,7 +6,7 @@
     background: $plyr-badge-bg;
     border-radius: 2px;
     color: $plyr-badge-color;
-    font-size: $plyr-font-size-badge;
+    font-size: var(--plyr-font-size-badge);
     line-height: 1;
     padding: 3px 4px;
 }
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index b8e2d771..d7951b96 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -56,4 +56,3 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
     transform: translateY(-($plyr-control-spacing * 4));
 }
-
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index eedcab13..ee24604e 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -82,7 +82,7 @@ a.plyr__control {
     border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px rgba(#000, 0.15);
-    color: var(--plyr-video-control-color);
+    color: var(--plyr-video-control-color-hover);
     display: none;
     left: 50%;
     padding: ceil($plyr-control-spacing * 1.5);
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss
index cb251831..074c27c1 100644
--- a/src/sass/lib/css-vars.scss
+++ b/src/sass/lib/css-vars.scss
@@ -1,6 +1,4 @@
-// Downloaded from https://github.com/malyw/css-vars
-
-//// VARIABLES ////
+// Downloaded from https://github.com/malyw/css-vars (and modified)
 
 // global map to be filled via variables
 $css-vars: ();
@@ -9,29 +7,16 @@ $css-vars: ();
 // so native CSS custom properties will be used instead of the Sass global map
 $css-vars-use-native: false !default;
 
-// enables the output of debug messages
-$css-vars-debug-log: false !default;
-
-//// FUNCTIONS ////
-
 ///
 // Assigns a variable to the global map
 ///
-@function _cssVarAssign($varName: null, $varValue: null) {
-    // CHECK PARAMS
-    @if ($varName==null) {
-        @error 'Variable name is expected, instead got: null';
-    }
-    @if ($varValue==null) {
-        @error 'Variable value is expected, instead got: null';
-    }
-
-    // assign to the global map
-    @if ($css-vars-debug-log and map-get($css-vars, $varName)) {
-        @debug "'#{$varName}' variable is reassigned";
-    }
-
-    @return map-merge($css-vars, ($varName: $varValue));
+@function css-var-assign($varName: null, $varValue: null) {
+    @return map-merge(
+        $css-vars,
+        (
+            $varName: $varValue,
+        )
+    );
 }
 
 ///
@@ -54,42 +39,28 @@ $css-vars-debug-log: false !default;
     }
 
     // PROCESS
-    $varName: nth($args, 1);
-    $varValue: map-get($css-vars, $varName);
-
-    @if ($css-vars-debug-log or not $css-vars-use-native) {
-        // Sass or debug
-        @if ($varValue==null) {
-            // variable is not provided so far
-            @if (length($args) ==2) {
-                // the default value is passed
-                @if ($css-vars-debug-log) {
-                    @debug "Provided default value is used for the variable: '#{$varName}'";
-                }
-                $varValue: nth($args, 2);
-            } @else if ($css-vars-debug-log) {
-                @debug "Variable '#{$varName}' is not assigned";
-                @if (not $css-vars-use-native) {
-                    @debug "The 'var(#{$varName}...)' usage will be skipped in the output CSS";
-                }
-            }
-        }
-    }
+    $var-name: nth($args, 1);
+    $var-value: map-get($css-vars, $var-name);
 
     @if ($css-vars-use-native) {
         // CSS variables
         // Native CSS: don't process function in case of native
         @return unquote('var(' + $args + ')');
     } @else {
+        @if ($var-value == null) {
+            // variable is not provided so far
+            @if (length($args) == 2) {
+                $var-value: nth($args, 2);
+            }
+        }
+
         // Sass: return value from the map
-        @return $varValue;
+        @return $var-value;
     }
 }
 
-//// MIXIN ////
-
 ///
-// CSS mixin to provide variables
+// SASS mixin to provide variables
 // E.G.:
 // @include css-vars((
 //    --color: rebeccapurple,
@@ -97,35 +68,33 @@ $css-vars-debug-log: false !default;
 //    --margin-top: calc(2vh + 20px)
 // ));
 ///
-@mixin css-vars($varMap: null) {
+@mixin css-vars($var-map: null) {
     // CHECK PARAMS
-    @if ($varMap==null) {
+    @if ($var-map == null) {
         @error 'Map of variables is expected, instead got: null';
     }
-    @if (type_of($varMap) !=map) {
-        @error 'Map of variables is expected, instead got another type passed: #{type_of($varMap)}';
+    @if (type_of($var-map) != map) {
+        @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
     }
 
     // PROCESS
-    @if ($css-vars-debug-log or not $css-vars-use-native) {
-        // Sass or debug
-        // merge variables and values to the global map (provides no output)
-        @each $varName, $varValue in $varMap {
-            $css-vars: _cssVarAssign($varName, $varValue) !global; // store in global variable
-        }
-    }
-
     @if ($css-vars-use-native) {
         // CSS variables
         // Native CSS: assign CSS custom properties to the global scope
         @at-root :root {
-            @each $varName, $varValue in $varMap {
-                @if (type_of($varValue) ==string) {
-                    #{$varName}: $varValue; // to prevent quotes interpolation
+            @each $var-name, $var-value in $var-map {
+                @if (type_of($var-value) == string) {
+                    #{$var-name}: $var-value; // to prevent quotes interpolation
                 } @else {
-                    #{$varName}: #{$varValue};
+                    #{$var-name}: #{$var-value};
                 }
             }
         }
+    } @else {
+        // Sass or debug
+        // merge variables and values to the global map (provides no output)
+        @each $var-name, $var-value in $var-map {
+            $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+        }
     }
 }
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index 5a2f4e82..c0867b85 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,7 +2,7 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #1aafff !default;
+$plyr-color-main: #fff !default;
 $plyr-color-gunmetal: #2f343d !default;
 $plyr-color-fiord: #4f5b5f !default;
 $plyr-color-lynch: #6b7d85 !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index 906744b2..0c88163d 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -9,7 +9,7 @@ $plyr-control-radius: 3px !default;
 
 $plyr-video-controls-bg: #000 !default;
 $plyr-video-control-color: #fff !default;
-$plyr-video-control-color-hover: #fff !default;
+$plyr-video-control-color-hover: #000 !default;
 $plyr-video-control-bg-hover: var(--plyr-color-main) !default;
 
 $plyr-audio-controls-bg: #fff !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index 79cb57de..e9ee2671 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -8,9 +8,9 @@ $plyr-font-size-small: 14px !default;
 $plyr-font-size-large: 18px !default;
 $plyr-font-size-xlarge: 21px !default;
 
-$plyr-font-size-time: $plyr-font-size-small !default;
+$plyr-font-size-time: var(--plyr-font-size-small) !default;
 $plyr-font-size-badge: 9px !default;
-$plyr-font-size-menu: $plyr-font-size-small !default;
+$plyr-font-size-menu: var(--plyr-font-size-small) !default;
 
 $plyr-font-weight-regular: 500 !default;
 $plyr-font-weight-bold: 600 !default;
@@ -18,3 +18,19 @@ $plyr-font-weight-bold: 600 !default;
 $plyr-line-height: 1.7 !default;
 
 $plyr-font-smoothing: false !default;
+
+@include css-vars(
+    (
+        --plyr-font-family: $plyr-font-family,
+        --plyr-font-size-base: $plyr-font-size-base,
+        --plyr-font-size-small: $plyr-font-size-small,
+        --plyr-font-size-large: $plyr-font-size-large,
+        --plyr-font-size-xlarge: $plyr-font-size-xlarge,
+        --plyr-font-size-time: $plyr-font-size-time,
+        --plyr-font-size-badge: $plyr-font-size-badge,
+        --plyr-font-size-menu: $plyr-font-size-menu,
+        --plyr-font-weight-regular: $plyr-font-weight-regular,
+        --plyr-font-weight-bold: $plyr-font-weight-bold,
+        --plyr-line-height: $plyr-line-height
+    )
+);
-- 
cgit v1.2.3


From dc2e012cc9dd617b704103327d15e5de85e6dde7 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 1 Jun 2019 20:01:09 +1000
Subject: Clean up

---
 src/js/plugins/previewThumbnails.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/js/plugins/previewThumbnails.js b/src/js/plugins/previewThumbnails.js
index b4714117..2d34fe46 100644
--- a/src/js/plugins/previewThumbnails.js
+++ b/src/js/plugins/previewThumbnails.js
@@ -2,7 +2,6 @@ import { createElement } from '../utils/elements';
 import { once } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
-import { extend } from '../utils/objects';
 import { formatTime } from '../utils/time';
 
 // Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
-- 
cgit v1.2.3


From d06881783d7c8a9faa5d902da5ec33bc74f3aa38 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 30 Mar 2020 17:04:43 +1100
Subject: Formatting fixes

---
 src/js/plugins/preview-thumbnails.js | 15 ++++++++++++---
 src/js/plugins/vimeo.js              | 17 ++++++++++-------
 src/js/utils/elements.js             |  2 +-
 src/js/utils/events.js               |  2 +-
 4 files changed, 24 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 290ce949..60033331 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -628,7 +628,10 @@ class PreviewThumbnails {
     }
 
     determineContainerAutoSizing() {
-        if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) {
+        if (
+            this.elements.thumb.imageContainer.clientHeight > 20 ||
+            this.elements.thumb.imageContainer.clientWidth > 20
+        ) {
             // This will prevent auto sizing in this.setThumbContainerSizeAndPos()
             this.sizeSpecifiedInCSS = true;
         }
@@ -640,10 +643,16 @@ class PreviewThumbnails {
             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) {
+        } 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) {
+        } 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`;
         }
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 010cf5f7..8f999153 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -201,13 +201,16 @@ const vimeo = {
                 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];
-                });
+                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];
+                    });
             },
         });
 
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index bdf18bfd..acff0dd9 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -221,7 +221,7 @@ export function hasClass(element, className) {
 
 // Element matches selector
 export function matches(element, selector) {
-    const {prototype} = Element;
+    const { prototype } = Element;
 
     function match() {
         return Array.from(document.querySelectorAll(selector)).includes(this);
diff --git a/src/js/utils/events.js b/src/js/utils/events.js
index 31571b2d..48300b6b 100644
--- a/src/js/utils/events.js
+++ b/src/js/utils/events.js
@@ -90,7 +90,7 @@ export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
     // Create and dispatch the event
     const event = new CustomEvent(type, {
         bubbles,
-        detail: { ...detail, plyr: this,},
+        detail: { ...detail, plyr: this },
     });
 
     // Dispatch the event
-- 
cgit v1.2.3


From 502d5977d79148957828cbf313b7ef4c9f31973f Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sat, 11 Apr 2020 16:23:14 +1000
Subject: Converted to 2 space indentation

---
 src/js/captions.js                                |  702 ++---
 src/js/config/defaults.js                         |  822 +++---
 src/js/config/states.js                           |    4 +-
 src/js/config/types.js                            |   28 +-
 src/js/console.js                                 |   34 +-
 src/js/controls.js                                | 3244 ++++++++++-----------
 src/js/fullscreen.js                              |  477 ++-
 src/js/html5.js                                   |  248 +-
 src/js/listeners.js                               | 1566 +++++-----
 src/js/media.js                                   |   96 +-
 src/js/plugins/ads.js                             | 1120 +++----
 src/js/plugins/preview-thumbnails.js              | 1181 ++++----
 src/js/plugins/vimeo.js                           |  738 ++---
 src/js/plugins/youtube.js                         |  790 ++---
 src/js/plyr.d.ts                                  |  952 +++---
 src/js/plyr.js                                    | 2116 +++++++-------
 src/js/source.js                                  |  274 +-
 src/js/storage.js                                 |  104 +-
 src/js/support.js                                 |  200 +-
 src/js/ui.js                                      |  513 ++--
 src/js/utils/animation.js                         |   46 +-
 src/js/utils/arrays.js                            |   16 +-
 src/js/utils/browser.js                           |   10 +-
 src/js/utils/elements.js                          |  336 +--
 src/js/utils/events.js                            |  144 +-
 src/js/utils/fetch.js                             |   58 +-
 src/js/utils/i18n.js                              |   50 +-
 src/js/utils/is.js                                |   78 +-
 src/js/utils/load-image.js                        |   18 +-
 src/js/utils/load-script.js                       |   10 +-
 src/js/utils/load-sprite.js                       |  104 +-
 src/js/utils/numbers.js                           |    2 +-
 src/js/utils/objects.js                           |   40 +-
 src/js/utils/promise.js                           |    6 +-
 src/js/utils/strings.js                           |   75 +-
 src/js/utils/style.js                             |  108 +-
 src/js/utils/time.js                              |   36 +-
 src/js/utils/urls.js                              |   36 +-
 src/sass/base.scss                                |   94 +-
 src/sass/components/badges.scss                   |   12 +-
 src/sass/components/captions.scss                 |   76 +-
 src/sass/components/control.scss                  |   63 +-
 src/sass/components/controls.scss                 |   66 +-
 src/sass/components/menus.scss                    |  348 +--
 src/sass/components/poster.scss                   |   26 +-
 src/sass/components/progress.scss                 |  130 +-
 src/sass/components/sliders.scss                  |  154 +-
 src/sass/components/times.scss                    |   18 +-
 src/sass/components/tooltips.scss                 |  108 +-
 src/sass/components/volume.scss                   |   28 +-
 src/sass/lib/animation.scss                       |   34 +-
 src/sass/lib/css-vars.scss                        |  110 +-
 src/sass/lib/functions.scss                       |    2 +-
 src/sass/lib/mixins.scss                          |  126 +-
 src/sass/plugins/ads.scss                         |   86 +-
 src/sass/plugins/preview-thumbnails.scss          |  118 -
 src/sass/plugins/preview-thumbnails/index.scss    |  108 +
 src/sass/plugins/preview-thumbnails/settings.scss |   15 +
 src/sass/plyr.scss                                |    2 +-
 src/sass/settings/badges.scss                     |    5 +-
 src/sass/settings/breakpoints.scss                |    7 +-
 src/sass/settings/captions.scss                   |   12 +-
 src/sass/settings/colors.scss                     |   38 +-
 src/sass/settings/controls.scss                   |   38 +-
 src/sass/settings/cosmetics.scss                  |    4 +-
 src/sass/settings/menus.scss                      |   17 +-
 src/sass/settings/progress.scss                   |   11 +-
 src/sass/settings/sliders.scss                    |   43 +-
 src/sass/settings/tooltips.scss                   |   12 +-
 src/sass/settings/type.scss                       |   39 +-
 src/sass/states/fullscreen.scss                   |   24 +-
 src/sass/types/audio.scss                         |   69 +-
 src/sass/types/video.scss                         |  206 +-
 src/sass/utils/animation.scss                     |    2 +-
 src/sass/utils/hidden.scss                        |   34 +-
 75 files changed, 9323 insertions(+), 9344 deletions(-)
 delete mode 100644 src/sass/plugins/preview-thumbnails.scss
 create mode 100644 src/sass/plugins/preview-thumbnails/index.scss
 create mode 100644 src/sass/plugins/preview-thumbnails/settings.scss

(limited to 'src')

diff --git a/src/js/captions.js b/src/js/captions.js
index 04da4651..0e6173ca 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -8,12 +8,12 @@ import support from './support';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
-    createElement,
-    emptyElement,
-    getAttributesFromSelector,
-    insertAfter,
-    removeElement,
-    toggleClass,
+  createElement,
+  emptyElement,
+  getAttributesFromSelector,
+  insertAfter,
+  removeElement,
+  toggleClass,
 } from './utils/elements';
 import { on, triggerEvent } from './utils/events';
 import fetch from './utils/fetch';
@@ -23,371 +23,371 @@ import { getHTML } from './utils/strings';
 import { parseUrl } from './utils/urls';
 
 const captions = {
-    // 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);
-                        });
-                }
-            });
-        }
-
-        // 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
-
-        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();
-
-        // Use first browser language when language is 'auto'
-        if (language === 'auto') {
-            [language] = languages;
-        }
-
-        let active = this.storage.get('captions');
-        if (!is.boolean(active)) {
-            ({ active } = this.config.captions);
-        }
-
-        Object.assign(this.captions, {
-            toggled: false,
-            active,
-            language,
-            languages,
-        });
-
-        // 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));
-        }
-
-        // Update available languages in list next tick (the event must not be triggered before the listeners)
-        setTimeout(captions.update.bind(this), 0);
-    },
-
-    // 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));
-
-        // 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);
-                    // 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
-                    // 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);
-        }
+  // 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);
 
-        // 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')
+          url !== null &&
+          url.hostname !== window.location.href.hostname &&
+          ['http:', 'https:'].includes(url.protocol)
         ) {
-            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);
-
-                // Override user preferences to avoid switching languages if a matching track is added
-                this.captions.language = track.language;
-
-                // Set caption, but don't store in localStorage as user preference
-                captions.set.call(this, tracks.indexOf(track));
-                return;
-            }
-
-            // Toggle button if it's enabled
-            if (this.elements.buttons.captions) {
-                this.elements.buttons.captions.pressed = active;
-            }
-
-            // Add class hook
-            toggleClass(this.elements.container, activeClass, active);
-
-            this.captions.toggled = active;
-
-            // Update settings menu
-            controls.updateSetting.call(this, 'captions');
-
-            // Trigger event (not used internally)
-            triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
-        }
-    },
-
-    // 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);
-
-        // Disable captions if setting to -1
-        if (index === -1) {
-            captions.toggle.call(this, false, passive);
-            return;
-        }
-
-        if (!is.number(index)) {
-            this.debug.warn('Invalid caption argument', index);
-            return;
-        }
-
-        if (!(index in tracks)) {
-            this.debug.warn('Track not found', index);
-            return;
-        }
-
-        if (this.captions.currentTrack !== index) {
-            this.captions.currentTrack = index;
-            const track = tracks[index];
-            const { language } = track || {};
-
-            // Store reference to node for invalidation on remove
-            this.captions.currentTrackNode = track;
-
-            // Update settings menu
-            controls.updateSetting.call(this, 'captions');
-
-            // When passive, don't override user preferences
-            if (!passive) {
-                this.captions.language = language;
-                this.storage.set({ language });
-            }
-
-            // Handle Vimeo captions
-            if (this.isVimeo) {
-                this.embed.enableTextTrack(language);
-            }
-
-            // Trigger event
-            triggerEvent.call(this, this.media, 'languagechange');
-        }
-
-        // Show captions
-        captions.toggle.call(this, true, passive);
-
-        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);
-        }
-    },
-
-    // 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;
+          fetch(src, 'blob')
+            .then(blob => {
+              track.setAttribute('src', window.URL.createObjectURL(blob));
+            })
+            .catch(() => {
+              removeElement(track);
+            });
         }
-        // Normalize
-        const language = input.toLowerCase();
-        this.captions.language = language;
-
-        // Set currentTrack
-        const tracks = captions.getTracks.call(this);
-        const track = captions.findTrack.call(this, [language]);
-        captions.set.call(this, tracks.indexOf(track), passive);
-    },
-
-    // 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));
-    },
-
-    // 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;
-
-        languages.every(language => {
-            track = sorted.find(t => t.language === language);
-            return !track; // Break iteration if there is a match
+      });
+    }
+
+    // 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
+
+    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();
+
+    // Use first browser language when language is 'auto'
+    if (language === 'auto') {
+      [language] = languages;
+    }
+
+    let active = this.storage.get('captions');
+    if (!is.boolean(active)) {
+      ({ active } = this.config.captions);
+    }
+
+    Object.assign(this.captions, {
+      toggled: false,
+      active,
+      language,
+      languages,
+    });
+
+    // 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));
+    }
+
+    // Update available languages in list next tick (the event must not be triggered before the listeners)
+    setTimeout(captions.update.bind(this), 0);
+  },
+
+  // 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));
+
+    // 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);
+          // 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
+          // 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 match is found but is required, get first
-        return track || (force ? sorted[0] : undefined);
-    },
-
-    // Get the current track
-    getCurrentTrack() {
-        return captions.getTracks.call(this)[this.currentTrack];
-    },
-
-    // Get UI label for track
-    getLabel(track) {
-        let currentTrack = track;
+        // Override user preferences to avoid switching languages if a matching track is added
+        this.captions.language = track.language;
 
-        if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
-            currentTrack = captions.getCurrentTrack.call(this);
-        }
+        // Set caption, but don't store in localStorage as user preference
+        captions.set.call(this, tracks.indexOf(track));
+        return;
+      }
 
-        if (is.track(currentTrack)) {
-            if (!is.empty(currentTrack.label)) {
-                return currentTrack.label;
-            }
+      // Toggle button if it's enabled
+      if (this.elements.buttons.captions) {
+        this.elements.buttons.captions.pressed = active;
+      }
 
-            if (!is.empty(currentTrack.language)) {
-                return track.language.toUpperCase();
-            }
+      // Add class hook
+      toggleClass(this.elements.container, activeClass, active);
 
-            return i18n.get('enabled', this.config);
-        }
+      this.captions.toggled = active;
 
-        return i18n.get('disabled', this.config);
-    },
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
 
-    // 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;
-        }
+      // Trigger event (not used internally)
+      triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
+    }
+  },
 
-        if (!is.element(this.elements.captions)) {
-            this.debug.warn('No captions element to render to');
-            return;
-        }
+  // 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);
 
-        // Only accept array or empty input
-        if (!is.nullOrUndefined(input) && !Array.isArray(input)) {
-            this.debug.warn('updateCues: Invalid input', input);
-            return;
-        }
+    // Disable captions if setting to -1
+    if (index === -1) {
+      captions.toggle.call(this, false, passive);
+      return;
+    }
 
-        let cues = input;
+    if (!is.number(index)) {
+      this.debug.warn('Invalid caption argument', index);
+      return;
+    }
 
-        // Get cues from track
-        if (!cues) {
-            const track = captions.getCurrentTrack.call(this);
+    if (!(index in tracks)) {
+      this.debug.warn('Track not found', index);
+      return;
+    }
 
-            cues = Array.from((track || {}).activeCues || [])
-                .map(cue => cue.getCueAsHTML())
-                .map(getHTML);
-        }
+    if (this.captions.currentTrack !== index) {
+      this.captions.currentTrack = index;
+      const track = tracks[index];
+      const { language } = track || {};
 
-        // Set new caption text
-        const content = cues.map(cueText => cueText.trim()).join('\n');
-        const changed = content !== this.elements.captions.innerHTML;
+      // Store reference to node for invalidation on remove
+      this.captions.currentTrackNode = track;
 
-        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);
+      // Update settings menu
+      controls.updateSetting.call(this, 'captions');
 
-            // Trigger event
-            triggerEvent.call(this, this.media, 'cuechange');
-        }
-    },
+      // When passive, don't override user preferences
+      if (!passive) {
+        this.captions.language = language;
+        this.storage.set({ language });
+      }
+
+      // Handle Vimeo captions
+      if (this.isVimeo) {
+        this.embed.enableTextTrack(language);
+      }
+
+      // Trigger event
+      triggerEvent.call(this, this.media, 'languagechange');
+    }
+
+    // Show captions
+    captions.toggle.call(this, true, passive);
+
+    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);
+    }
+  },
+
+  // 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;
+
+    // Set currentTrack
+    const tracks = captions.getTracks.call(this);
+    const track = captions.findTrack.call(this, [language]);
+    captions.set.call(this, tracks.indexOf(track), passive);
+  },
+
+  // 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));
+  },
+
+  // 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;
+
+    languages.every(language => {
+      track = sorted.find(t => t.language === language);
+      return !track; // Break iteration if there is a match
+    });
+
+    // If no match is found but is required, get first
+    return track || (force ? sorted[0] : undefined);
+  },
+
+  // Get the current track
+  getCurrentTrack() {
+    return captions.getTracks.call(this)[this.currentTrack];
+  },
+
+  // Get UI label for track
+  getLabel(track) {
+    let currentTrack = track;
+
+    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;
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index c299a3c9..bd4052be 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -3,437 +3,437 @@
 // ==========================================================================
 
 const defaults = {
-    // Disable
+  // 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.5.10/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)
+  },
+
+  // Local storage
+  storage: {
     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.5.10/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,
+    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',
     },
+  },
 
-    // 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],
+  // 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/v2/video/{0}.json',
     },
-
-    // Keyboard shortcut settings
-    keyboard: {
-        focused: true,
-        global: false,
+    youtube: {
+      sdk: 'https://www.youtube.com/iframe_api',
+      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
     },
-
-    // Display tooltips
-    tooltips: {
-        controls: false,
-        seek: true,
+    googleIMA: {
+      sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
     },
-
-    // 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,
+  },
+
+  // 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',
     },
-
-    // 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)
+    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"]',
     },
-
-    // Local storage
-    storage: {
-        enabled: true,
-        key: 'plyr',
+    inputs: {
+      seek: '[data-plyr="seek"]',
+      volume: '[data-plyr="volume"]',
+      speed: '[data-plyr="speed"]',
+      language: '[data-plyr="language"]',
+      quality: '[data-plyr="quality"]',
     },
-
-    // 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',
-        },
+    display: {
+      currentTime: '.plyr__time--current',
+      duration: '.plyr__time--duration',
+      buffer: '.plyr__progress__buffer',
+      loop: '.plyr__progress__loop', // Used later
+      volume: '.plyr__volume--display',
     },
-
-    // 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/v2/video/{0}.json',
-        },
-        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',
-        },
+    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',
     },
-
-    // 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,
+    menu: {
+      value: 'plyr__menu__value',
+      badge: 'plyr__badge',
+      open: 'plyr--menu-open',
     },
-
-    // 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',
+    captions: {
+      enabled: 'plyr--captions-enabled',
+      active: 'plyr--captions-active',
     },
-
-    // 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',
-        },
+    fullscreen: {
+      enabled: 'plyr--fullscreen-enabled',
+      fallback: 'plyr--fullscreen-fallback',
     },
-
-    // Embed attributes
-    attributes: {
-        embed: {
-            provider: 'data-plyr-provider',
-            id: 'data-plyr-embed-id',
-        },
+    pip: {
+      supported: 'plyr--pip-supported',
+      active: 'plyr--pip-active',
     },
-
-    // Advertisements plugin
-    // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
-    ads: {
-        enabled: false,
-        publisherId: '',
-        tagUrl: '',
+    airplay: {
+      supported: 'plyr--airplay-supported',
+      active: 'plyr--airplay-active',
     },
-
-    // Preview Thumbnails plugin
+    tabFocus: 'plyr__tab-focus',
     previewThumbnails: {
-        enabled: false,
-        src: '',
+      // 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',
     },
+  },
 
-    // Vimeo plugin
-    vimeo: {
-        byline: false,
-        portrait: false,
-        title: false,
-        speed: true,
-        transparent: false,
-        // These settings require a pro or premium account to work
-        sidedock: false,
-        controls: false,
-        // Custom settings from Plyr
-        referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
-    },
-
-    // YouTube plugin
-    youtube: {
-        noCookie: false, // Whether to use an alternative version of YouTube without cookies
-        rel: 0, // No related vids
-        showinfo: 0, // Hide info
-        iv_load_policy: 3, // Hide annotations
-        modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
+  // 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,
+    // These settings require a pro or premium account to work
+    sidedock: false,
+    controls: false,
+    // Custom settings from Plyr
+    referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+  },
+
+  // YouTube plugin
+  youtube: {
+    noCookie: false, // Whether to use an alternative version of YouTube without cookies
+    rel: 0, // No related vids
+    showinfo: 0, // Hide info
+    iv_load_policy: 3, // Hide annotations
+    modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
+  },
 };
 
 export default defaults;
diff --git a/src/js/config/states.js b/src/js/config/states.js
index 7dd1476b..1c1618e4 100644
--- a/src/js/config/states.js
+++ b/src/js/config/states.js
@@ -3,8 +3,8 @@
 // ==========================================================================
 
 export const pip = {
-    active: 'picture-in-picture',
-    inactive: 'inline',
+  active: 'picture-in-picture',
+  inactive: 'inline',
 };
 
 export default { pip };
diff --git a/src/js/config/types.js b/src/js/config/types.js
index e0ccdaff..31e488eb 100644
--- a/src/js/config/types.js
+++ b/src/js/config/types.js
@@ -3,14 +3,14 @@
 // ==========================================================================
 
 export const providers = {
-    html5: 'html5',
-    youtube: 'youtube',
-    vimeo: 'vimeo',
+  html5: 'html5',
+  youtube: 'youtube',
+  vimeo: 'vimeo',
 };
 
 export const types = {
-    audio: 'audio',
-    video: 'video',
+  audio: 'audio',
+  video: 'video',
 };
 
 /**
@@ -18,17 +18,17 @@ export const types = {
  * @param {String} url
  */
 export function getProviderByUrl(url) {
-    // YouTube
-    if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) {
-        return providers.youtube;
-    }
+  // 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;
-    }
+  // Vimeo
+  if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
+    return providers.vimeo;
+  }
 
-    return null;
+  return null;
 }
 
 export default { providers, types };
diff --git a/src/js/console.js b/src/js/console.js
index e8099569..f9d734aa 100644
--- a/src/js/console.js
+++ b/src/js/console.js
@@ -5,26 +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 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 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 error() {
+    // eslint-disable-next-line no-console
+    return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;
+  }
 }
diff --git a/src/js/controls.js b/src/js/controls.js
index 37df497f..5bdb5b0a 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -12,18 +12,18 @@ import { repaint, transitionEndEvent } from './utils/animation';
 import { dedupe } from './utils/arrays';
 import browser from './utils/browser';
 import {
-    createElement,
-    emptyElement,
-    getAttributesFromSelector,
-    getElement,
-    getElements,
-    hasClass,
-    matches,
-    removeElement,
-    setAttributes,
-    setFocus,
-    toggleClass,
-    toggleHidden,
+  createElement,
+  emptyElement,
+  getAttributesFromSelector,
+  getElement,
+  getElements,
+  hasClass,
+  matches,
+  removeElement,
+  setAttributes,
+  setFocus,
+  toggleClass,
+  toggleHidden,
 } from './utils/elements';
 import { off, on } from './utils/events';
 import i18n from './utils/i18n';
@@ -35,917 +35,915 @@ import { formatTime, getHours } from './utils/time';
 
 // TODO: Don't export a massive object - break down and create class
 const controls = {
-    // Get icon URL
-    getIconUrl() {
-        const url = new URL(this.config.iconUrl, window.location);
-        const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody);
-
-        return {
-            url: this.config.iconUrl,
-            cors,
-        };
-    },
-
-    // Find the UI controls
-    findElements() {
-        try {
-            this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper);
-
-            // Buttons
-            this.elements.buttons = {
-                play: getElements.call(this, this.config.selectors.buttons.play),
-                pause: getElement.call(this, this.config.selectors.buttons.pause),
-                restart: getElement.call(this, this.config.selectors.buttons.restart),
-                rewind: getElement.call(this, this.config.selectors.buttons.rewind),
-                fastForward: getElement.call(this, this.config.selectors.buttons.fastForward),
-                mute: getElement.call(this, this.config.selectors.buttons.mute),
-                pip: getElement.call(this, this.config.selectors.buttons.pip),
-                airplay: getElement.call(this, this.config.selectors.buttons.airplay),
-                settings: getElement.call(this, this.config.selectors.buttons.settings),
-                captions: getElement.call(this, this.config.selectors.buttons.captions),
-                fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen),
-            };
-
-            // Progress
-            this.elements.progress = getElement.call(this, this.config.selectors.progress);
-
-            // Inputs
-            this.elements.inputs = {
-                seek: getElement.call(this, this.config.selectors.inputs.seek),
-                volume: getElement.call(this, this.config.selectors.inputs.volume),
-            };
-
-            // Display
-            this.elements.display = {
-                buffer: getElement.call(this, this.config.selectors.display.buffer),
-                currentTime: getElement.call(this, this.config.selectors.display.currentTime),
-                duration: getElement.call(this, this.config.selectors.display.duration),
-            };
-
-            // Seek tooltip
-            if (is.element(this.elements.progress)) {
-                this.elements.display.seekTooltip = this.elements.progress.querySelector(
-                    `.${this.config.classNames.tooltip}`,
-                );
-            }
-
-            return true;
-        } catch (error) {
-            // Log it
-            this.debug.warn('It looks like there is a problem with your custom controls HTML', error);
-
-            // Restore native video controls
-            this.toggleNativeControls(true);
-
-            return false;
-        }
-    },
-
-    // Create <svg> icon
-    createIcon(type, attributes) {
-        const namespace = 'http://www.w3.org/2000/svg';
-        const iconUrl = controls.getIconUrl.call(this);
-        const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
-        // Create <svg>
-        const icon = document.createElementNS(namespace, 'svg');
-        setAttributes(
-            icon,
-            extend(attributes, {
-                'aria-hidden': 'true',
-                focusable: 'false',
-            }),
-        );
-
-        // Create the <use> to reference sprite
-        const use = document.createElementNS(namespace, 'use');
-        const path = `${iconPath}-${type}`;
-
-        // Set `href` attributes
-        // https://github.com/sampotts/plyr/issues/460
-        // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
-        if ('href' in use) {
-            use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
-        }
-
-        // Always set the older attribute even though it's "deprecated" (it'll be around for ages)
-        use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
-
-        // Add <use> to <svg>
-        icon.appendChild(use);
-
-        return icon;
-    },
-
-    // Create hidden text label
-    createLabel(key, attr = {}) {
-        const text = i18n.get(key, this.config);
-        const attributes = { ...attr, class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ') };
-
-        return createElement('span', attributes, text);
-    },
-
-    // Create a badge
-    createBadge(text) {
-        if (is.empty(text)) {
-            return null;
-        }
-
-        const badge = createElement('span', {
-            class: this.config.classNames.menu.value,
+  // Get icon URL
+  getIconUrl() {
+    const url = new URL(this.config.iconUrl, window.location);
+    const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody);
+
+    return {
+      url: this.config.iconUrl,
+      cors,
+    };
+  },
+
+  // Find the UI controls
+  findElements() {
+    try {
+      this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper);
+
+      // Buttons
+      this.elements.buttons = {
+        play: getElements.call(this, this.config.selectors.buttons.play),
+        pause: getElement.call(this, this.config.selectors.buttons.pause),
+        restart: getElement.call(this, this.config.selectors.buttons.restart),
+        rewind: getElement.call(this, this.config.selectors.buttons.rewind),
+        fastForward: getElement.call(this, this.config.selectors.buttons.fastForward),
+        mute: getElement.call(this, this.config.selectors.buttons.mute),
+        pip: getElement.call(this, this.config.selectors.buttons.pip),
+        airplay: getElement.call(this, this.config.selectors.buttons.airplay),
+        settings: getElement.call(this, this.config.selectors.buttons.settings),
+        captions: getElement.call(this, this.config.selectors.buttons.captions),
+        fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen),
+      };
+
+      // Progress
+      this.elements.progress = getElement.call(this, this.config.selectors.progress);
+
+      // Inputs
+      this.elements.inputs = {
+        seek: getElement.call(this, this.config.selectors.inputs.seek),
+        volume: getElement.call(this, this.config.selectors.inputs.volume),
+      };
+
+      // Display
+      this.elements.display = {
+        buffer: getElement.call(this, this.config.selectors.display.buffer),
+        currentTime: getElement.call(this, this.config.selectors.display.currentTime),
+        duration: getElement.call(this, this.config.selectors.display.duration),
+      };
+
+      // Seek tooltip
+      if (is.element(this.elements.progress)) {
+        this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`);
+      }
+
+      return true;
+    } catch (error) {
+      // Log it
+      this.debug.warn('It looks like there is a problem with your custom controls HTML', error);
+
+      // Restore native video controls
+      this.toggleNativeControls(true);
+
+      return false;
+    }
+  },
+
+  // Create <svg> icon
+  createIcon(type, attributes) {
+    const namespace = 'http://www.w3.org/2000/svg';
+    const iconUrl = controls.getIconUrl.call(this);
+    const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
+    // Create <svg>
+    const icon = document.createElementNS(namespace, 'svg');
+    setAttributes(
+      icon,
+      extend(attributes, {
+        'aria-hidden': 'true',
+        focusable: 'false',
+      }),
+    );
+
+    // Create the <use> to reference sprite
+    const use = document.createElementNS(namespace, 'use');
+    const path = `${iconPath}-${type}`;
+
+    // Set `href` attributes
+    // https://github.com/sampotts/plyr/issues/460
+    // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
+    if ('href' in use) {
+      use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
+    }
+
+    // Always set the older attribute even though it's "deprecated" (it'll be around for ages)
+    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path);
+
+    // Add <use> to <svg>
+    icon.appendChild(use);
+
+    return icon;
+  },
+
+  // Create hidden text label
+  createLabel(key, attr = {}) {
+    const text = i18n.get(key, this.config);
+    const attributes = { ...attr, class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ') };
+
+    return createElement('span', attributes, text);
+  },
+
+  // Create a badge
+  createBadge(text) {
+    if (is.empty(text)) {
+      return null;
+    }
+
+    const badge = createElement('span', {
+      class: this.config.classNames.menu.value,
+    });
+
+    badge.appendChild(
+      createElement(
+        'span',
+        {
+          class: this.config.classNames.menu.badge,
+        },
+        text,
+      ),
+    );
+
+    return badge;
+  },
+
+  // Create a <button>
+  createButton(buttonType, attr) {
+    const attributes = extend({}, attr);
+    let type = toCamelCase(buttonType);
+
+    const props = {
+      element: 'button',
+      toggle: false,
+      label: null,
+      icon: null,
+      labelPressed: null,
+      iconPressed: null,
+    };
+
+    ['element', 'icon', 'label'].forEach(key => {
+      if (Object.keys(attributes).includes(key)) {
+        props[key] = attributes[key];
+        delete attributes[key];
+      }
+    });
+
+    // Default to 'button' type to prevent form submission
+    if (props.element === 'button' && !Object.keys(attributes).includes('type')) {
+      attributes.type = 'button';
+    }
+
+    // Set class name
+    if (Object.keys(attributes).includes('class')) {
+      if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
+        extend(attributes, {
+          class: `${attributes.class} ${this.config.classNames.control}`,
         });
-
-        badge.appendChild(
-            createElement(
-                'span',
-                {
-                    class: this.config.classNames.menu.badge,
-                },
-                text,
-            ),
-        );
-
-        return badge;
-    },
-
-    // Create a <button>
-    createButton(buttonType, attr) {
-        const attributes = extend({}, attr);
-        let type = toCamelCase(buttonType);
-
-        const props = {
-            element: 'button',
-            toggle: false,
-            label: null,
-            icon: null,
-            labelPressed: null,
-            iconPressed: null,
-        };
-
-        ['element', 'icon', 'label'].forEach(key => {
-            if (Object.keys(attributes).includes(key)) {
-                props[key] = attributes[key];
-                delete attributes[key];
-            }
-        });
-
-        // Default to 'button' type to prevent form submission
-        if (props.element === 'button' && !Object.keys(attributes).includes('type')) {
-            attributes.type = 'button';
-        }
-
-        // Set class name
-        if (Object.keys(attributes).includes('class')) {
-            if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
-                extend(attributes, {
-                    class: `${attributes.class} ${this.config.classNames.control}`,
-                });
-            }
+      }
+    } else {
+      attributes.class = this.config.classNames.control;
+    }
+
+    // Large play button
+    switch (buttonType) {
+      case 'play':
+        props.toggle = true;
+        props.label = 'play';
+        props.labelPressed = 'pause';
+        props.icon = 'play';
+        props.iconPressed = 'pause';
+        break;
+
+      case 'mute':
+        props.toggle = true;
+        props.label = 'mute';
+        props.labelPressed = 'unmute';
+        props.icon = 'volume';
+        props.iconPressed = 'muted';
+        break;
+
+      case 'captions':
+        props.toggle = true;
+        props.label = 'enableCaptions';
+        props.labelPressed = 'disableCaptions';
+        props.icon = 'captions-off';
+        props.iconPressed = 'captions-on';
+        break;
+
+      case 'fullscreen':
+        props.toggle = true;
+        props.label = 'enterFullscreen';
+        props.labelPressed = 'exitFullscreen';
+        props.icon = 'enter-fullscreen';
+        props.iconPressed = 'exit-fullscreen';
+        break;
+
+      case 'play-large':
+        attributes.class += ` ${this.config.classNames.control}--overlaid`;
+        type = 'play';
+        props.label = 'play';
+        props.icon = 'play';
+        break;
+
+      default:
+        if (is.empty(props.label)) {
+          props.label = type;
+        }
+        if (is.empty(props.icon)) {
+          props.icon = buttonType;
+        }
+    }
+
+    const button = createElement(props.element);
+
+    // Setup toggle icon and labels
+    if (props.toggle) {
+      // Icon
+      button.appendChild(
+        controls.createIcon.call(this, props.iconPressed, {
+          class: 'icon--pressed',
+        }),
+      );
+      button.appendChild(
+        controls.createIcon.call(this, props.icon, {
+          class: 'icon--not-pressed',
+        }),
+      );
+
+      // Label/Tooltip
+      button.appendChild(
+        controls.createLabel.call(this, props.labelPressed, {
+          class: 'label--pressed',
+        }),
+      );
+      button.appendChild(
+        controls.createLabel.call(this, props.label, {
+          class: 'label--not-pressed',
+        }),
+      );
+    } else {
+      button.appendChild(controls.createIcon.call(this, props.icon));
+      button.appendChild(controls.createLabel.call(this, props.label));
+    }
+
+    // Merge and set attributes
+    extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes));
+    setAttributes(button, attributes);
+
+    // We have multiple play buttons
+    if (type === 'play') {
+      if (!is.array(this.elements.buttons[type])) {
+        this.elements.buttons[type] = [];
+      }
+
+      this.elements.buttons[type].push(button);
+    } else {
+      this.elements.buttons[type] = button;
+    }
+
+    return button;
+  },
+
+  // Create an <input type='range'>
+  createRange(type, attributes) {
+    // Seek input
+    const input = createElement(
+      'input',
+      extend(
+        getAttributesFromSelector(this.config.selectors.inputs[type]),
+        {
+          type: 'range',
+          min: 0,
+          max: 100,
+          step: 0.01,
+          value: 0,
+          autocomplete: 'off',
+          // A11y fixes for https://github.com/sampotts/plyr/issues/905
+          role: 'slider',
+          'aria-label': i18n.get(type, this.config),
+          'aria-valuemin': 0,
+          'aria-valuemax': 100,
+          'aria-valuenow': 0,
+        },
+        attributes,
+      ),
+    );
+
+    this.elements.inputs[type] = input;
+
+    // Set the fill for webkit now
+    controls.updateRangeFill.call(this, input);
+
+    // Improve support on touch devices
+    RangeTouch.setup(input);
+
+    return input;
+  },
+
+  // Create a <progress>
+  createProgress(type, attributes) {
+    const progress = createElement(
+      'progress',
+      extend(
+        getAttributesFromSelector(this.config.selectors.display[type]),
+        {
+          min: 0,
+          max: 100,
+          value: 0,
+          role: 'progressbar',
+          'aria-hidden': true,
+        },
+        attributes,
+      ),
+    );
+
+    // Create the label inside
+    if (type !== 'volume') {
+      progress.appendChild(createElement('span', null, '0'));
+
+      const suffixKey = {
+        played: 'played',
+        buffer: 'buffered',
+      }[type];
+      const suffix = suffixKey ? i18n.get(suffixKey, this.config) : '';
+
+      progress.innerText = `% ${suffix.toLowerCase()}`;
+    }
+
+    this.elements.display[type] = progress;
+
+    return progress;
+  },
+
+  // Create time display
+  createTime(type, attrs) {
+    const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);
+
+    const container = createElement(
+      'div',
+      extend(attributes, {
+        class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
+        'aria-label': i18n.get(type, this.config),
+      }),
+      '00:00',
+    );
+
+    // Reference for updates
+    this.elements.display[type] = container;
+
+    return container;
+  },
+
+  // Bind keyboard shortcuts for a menu item
+  // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
+  bindMenuItemShortcuts(menuItem, type) {
+    // Navigate through menus via arrow keys and space
+    on.call(
+      this,
+      menuItem,
+      'keydown keyup',
+      event => {
+        // We only care about space and ⬆️ ⬇️️ ➡️
+        if (![32, 38, 39, 40].includes(event.which)) {
+          return;
+        }
+
+        // Prevent play / seek
+        event.preventDefault();
+        event.stopPropagation();
+
+        // We're just here to prevent the keydown bubbling
+        if (event.type === 'keydown') {
+          return;
+        }
+
+        const isRadioButton = matches(menuItem, '[role="menuitemradio"]');
+
+        // Show the respective menu
+        if (!isRadioButton && [32, 39].includes(event.which)) {
+          controls.showMenuPanel.call(this, type, true);
         } else {
-            attributes.class = this.config.classNames.control;
-        }
+          let target;
 
-        // Large play button
-        switch (buttonType) {
-            case 'play':
-                props.toggle = true;
-                props.label = 'play';
-                props.labelPressed = 'pause';
-                props.icon = 'play';
-                props.iconPressed = 'pause';
-                break;
-
-            case 'mute':
-                props.toggle = true;
-                props.label = 'mute';
-                props.labelPressed = 'unmute';
-                props.icon = 'volume';
-                props.iconPressed = 'muted';
-                break;
-
-            case 'captions':
-                props.toggle = true;
-                props.label = 'enableCaptions';
-                props.labelPressed = 'disableCaptions';
-                props.icon = 'captions-off';
-                props.iconPressed = 'captions-on';
-                break;
-
-            case 'fullscreen':
-                props.toggle = true;
-                props.label = 'enterFullscreen';
-                props.labelPressed = 'exitFullscreen';
-                props.icon = 'enter-fullscreen';
-                props.iconPressed = 'exit-fullscreen';
-                break;
-
-            case 'play-large':
-                attributes.class += ` ${this.config.classNames.control}--overlaid`;
-                type = 'play';
-                props.label = 'play';
-                props.icon = 'play';
-                break;
-
-            default:
-                if (is.empty(props.label)) {
-                    props.label = type;
-                }
-                if (is.empty(props.icon)) {
-                    props.icon = buttonType;
-                }
-        }
+          if (event.which !== 32) {
+            if (event.which === 40 || (isRadioButton && event.which === 39)) {
+              target = menuItem.nextElementSibling;
 
-        const button = createElement(props.element);
+              if (!is.element(target)) {
+                target = menuItem.parentNode.firstElementChild;
+              }
+            } else {
+              target = menuItem.previousElementSibling;
 
-        // Setup toggle icon and labels
-        if (props.toggle) {
-            // Icon
-            button.appendChild(
-                controls.createIcon.call(this, props.iconPressed, {
-                    class: 'icon--pressed',
-                }),
-            );
-            button.appendChild(
-                controls.createIcon.call(this, props.icon, {
-                    class: 'icon--not-pressed',
-                }),
-            );
-
-            // Label/Tooltip
-            button.appendChild(
-                controls.createLabel.call(this, props.labelPressed, {
-                    class: 'label--pressed',
-                }),
-            );
-            button.appendChild(
-                controls.createLabel.call(this, props.label, {
-                    class: 'label--not-pressed',
-                }),
-            );
-        } else {
-            button.appendChild(controls.createIcon.call(this, props.icon));
-            button.appendChild(controls.createLabel.call(this, props.label));
-        }
-
-        // Merge and set attributes
-        extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes));
-        setAttributes(button, attributes);
-
-        // We have multiple play buttons
-        if (type === 'play') {
-            if (!is.array(this.elements.buttons[type])) {
-                this.elements.buttons[type] = [];
+              if (!is.element(target)) {
+                target = menuItem.parentNode.lastElementChild;
+              }
             }
 
-            this.elements.buttons[type].push(button);
-        } else {
-            this.elements.buttons[type] = button;
+            setFocus.call(this, target, true);
+          }
         }
+      },
+      false,
+    );
+
+    // Enter will fire a `click` event but we still need to manage focus
+    // So we bind to keyup which fires after and set focus here
+    on.call(this, menuItem, 'keyup', event => {
+      if (event.which !== 13) {
+        return;
+      }
 
-        return button;
-    },
-
-    // Create an <input type='range'>
-    createRange(type, attributes) {
-        // Seek input
-        const input = createElement(
-            'input',
-            extend(
-                getAttributesFromSelector(this.config.selectors.inputs[type]),
-                {
-                    type: 'range',
-                    min: 0,
-                    max: 100,
-                    step: 0.01,
-                    value: 0,
-                    autocomplete: 'off',
-                    // A11y fixes for https://github.com/sampotts/plyr/issues/905
-                    role: 'slider',
-                    'aria-label': i18n.get(type, this.config),
-                    'aria-valuemin': 0,
-                    'aria-valuemax': 100,
-                    'aria-valuenow': 0,
-                },
-                attributes,
-            ),
-        );
-
-        this.elements.inputs[type] = input;
-
-        // Set the fill for webkit now
-        controls.updateRangeFill.call(this, input);
-
-        // Improve support on touch devices
-        RangeTouch.setup(input);
-
-        return input;
-    },
-
-    // Create a <progress>
-    createProgress(type, attributes) {
-        const progress = createElement(
-            'progress',
-            extend(
-                getAttributesFromSelector(this.config.selectors.display[type]),
-                {
-                    min: 0,
-                    max: 100,
-                    value: 0,
-                    role: 'progressbar',
-                    'aria-hidden': true,
-                },
-                attributes,
-            ),
-        );
-
-        // Create the label inside
-        if (type !== 'volume') {
-            progress.appendChild(createElement('span', null, '0'));
-
-            const suffixKey = {
-                played: 'played',
-                buffer: 'buffered',
-            }[type];
-            const suffix = suffixKey ? i18n.get(suffixKey, this.config) : '';
-
-            progress.innerText = `% ${suffix.toLowerCase()}`;
-        }
-
-        this.elements.display[type] = progress;
-
-        return progress;
-    },
-
-    // Create time display
-    createTime(type, attrs) {
-        const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);
-
-        const container = createElement(
-            'div',
-            extend(attributes, {
-                class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
-                'aria-label': i18n.get(type, this.config),
-            }),
-            '00:00',
-        );
-
-        // Reference for updates
-        this.elements.display[type] = container;
-
-        return container;
-    },
-
-    // Bind keyboard shortcuts for a menu item
-    // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
-    bindMenuItemShortcuts(menuItem, type) {
-        // Navigate through menus via arrow keys and space
-        on.call(
-            this,
-            menuItem,
-            'keydown keyup',
-            event => {
-                // We only care about space and ⬆️ ⬇️️ ➡️
-                if (![32, 38, 39, 40].includes(event.which)) {
-                    return;
-                }
-
-                // Prevent play / seek
-                event.preventDefault();
-                event.stopPropagation();
-
-                // We're just here to prevent the keydown bubbling
-                if (event.type === 'keydown') {
-                    return;
-                }
-
-                const isRadioButton = matches(menuItem, '[role="menuitemradio"]');
-
-                // Show the respective menu
-                if (!isRadioButton && [32, 39].includes(event.which)) {
-                    controls.showMenuPanel.call(this, type, true);
-                } else {
-                    let target;
-
-                    if (event.which !== 32) {
-                        if (event.which === 40 || (isRadioButton && event.which === 39)) {
-                            target = menuItem.nextElementSibling;
-
-                            if (!is.element(target)) {
-                                target = menuItem.parentNode.firstElementChild;
-                            }
-                        } else {
-                            target = menuItem.previousElementSibling;
-
-                            if (!is.element(target)) {
-                                target = menuItem.parentNode.lastElementChild;
-                            }
-                        }
-
-                        setFocus.call(this, target, true);
-                    }
-                }
-            },
-            false,
-        );
-
-        // Enter will fire a `click` event but we still need to manage focus
-        // So we bind to keyup which fires after and set focus here
-        on.call(this, menuItem, 'keyup', event => {
-            if (event.which !== 13) {
-                return;
-            }
+      controls.focusFirstMenuItem.call(this, null, true);
+    });
+  },
 
-            controls.focusFirstMenuItem.call(this, null, true);
+  // Create a settings menu item
+  createMenuItem({ value, list, type, title, badge = null, checked = false }) {
+    const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);
+
+    const menuItem = createElement(
+      'button',
+      extend(attributes, {
+        type: 'button',
+        role: 'menuitemradio',
+        class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(),
+        'aria-checked': checked,
+        value,
+      }),
+    );
+
+    const flex = createElement('span');
+
+    // We have to set as HTML incase of special characters
+    flex.innerHTML = title;
+
+    if (is.element(badge)) {
+      flex.appendChild(badge);
+    }
+
+    menuItem.appendChild(flex);
+
+    // Replicate radio button behaviour
+    Object.defineProperty(menuItem, 'checked', {
+      enumerable: true,
+      get() {
+        return menuItem.getAttribute('aria-checked') === 'true';
+      },
+      set(check) {
+        // Ensure exclusivity
+        if (check) {
+          Array.from(menuItem.parentNode.children)
+            .filter(node => matches(node, '[role="menuitemradio"]'))
+            .forEach(node => node.setAttribute('aria-checked', 'false'));
+        }
+
+        menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
+      },
+    });
+
+    this.listeners.bind(
+      menuItem,
+      'click keyup',
+      event => {
+        if (is.keyboardEvent(event) && event.which !== 32) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        menuItem.checked = true;
+
+        switch (type) {
+          case 'language':
+            this.currentTrack = Number(value);
+            break;
+
+          case 'quality':
+            this.quality = value;
+            break;
+
+          case 'speed':
+            this.speed = parseFloat(value);
+            break;
+
+          default:
+            break;
+        }
+
+        controls.showMenuPanel.call(this, 'home', is.keyboardEvent(event));
+      },
+      type,
+      false,
+    );
+
+    controls.bindMenuItemShortcuts.call(this, menuItem, type);
+
+    list.appendChild(menuItem);
+  },
+
+  // Format a time for display
+  formatTime(time = 0, inverted = false) {
+    // Bail if the value isn't a number
+    if (!is.number(time)) {
+      return time;
+    }
+
+    // Always display hours if duration is over an hour
+    const forceHours = getHours(this.duration) > 0;
+
+    return formatTime(time, forceHours, inverted);
+  },
+
+  // Update the displayed time
+  updateTimeDisplay(target = null, time = 0, inverted = false) {
+    // Bail if there's no element to display or the value isn't a number
+    if (!is.element(target) || !is.number(time)) {
+      return;
+    }
+
+    // eslint-disable-next-line no-param-reassign
+    target.innerText = controls.formatTime(time, inverted);
+  },
+
+  // Update volume UI and storage
+  updateVolume() {
+    if (!this.supported.ui) {
+      return;
+    }
+
+    // Update range
+    if (is.element(this.elements.inputs.volume)) {
+      controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
+    }
+
+    // Update mute state
+    if (is.element(this.elements.buttons.mute)) {
+      this.elements.buttons.mute.pressed = this.muted || this.volume === 0;
+    }
+  },
+
+  // Update seek value and lower fill
+  setRange(target, value = 0) {
+    if (!is.element(target)) {
+      return;
+    }
+
+    // eslint-disable-next-line
+    target.value = value;
+
+    // Webkit range fill
+    controls.updateRangeFill.call(this, target);
+  },
+
+  // Update <progress> elements
+  updateProgress(event) {
+    if (!this.supported.ui || !is.event(event)) {
+      return;
+    }
+
+    let value = 0;
+
+    const setProgress = (target, input) => {
+      const val = is.number(input) ? input : 0;
+      const progress = is.element(target) ? target : this.elements.display.buffer;
+
+      // Update value and label
+      if (is.element(progress)) {
+        progress.value = val;
+
+        // Update text label inside
+        const label = progress.getElementsByTagName('span')[0];
+        if (is.element(label)) {
+          label.childNodes[0].nodeValue = val;
+        }
+      }
+    };
+
+    if (event) {
+      switch (event.type) {
+        // Video playing
+        case 'timeupdate':
+        case 'seeking':
+        case 'seeked':
+          value = getPercentage(this.currentTime, this.duration);
+
+          // Set seek range value only if it's a 'natural' time event
+          if (event.type === 'timeupdate') {
+            controls.setRange.call(this, this.elements.inputs.seek, value);
+          }
+
+          break;
+
+        // Check buffer status
+        case 'playing':
+        case 'progress':
+          setProgress(this.elements.display.buffer, this.buffered * 100);
+
+          break;
+
+        default:
+          break;
+      }
+    }
+  },
+
+  // Webkit polyfill for lower fill range
+  updateRangeFill(target) {
+    // Get range from event if event passed
+    const range = is.event(target) ? target.target : target;
+
+    // Needs to be a valid <input type='range'>
+    if (!is.element(range) || range.getAttribute('type') !== 'range') {
+      return;
+    }
+
+    // Set aria values for https://github.com/sampotts/plyr/issues/905
+    if (matches(range, this.config.selectors.inputs.seek)) {
+      range.setAttribute('aria-valuenow', this.currentTime);
+      const currentTime = controls.formatTime(this.currentTime);
+      const duration = controls.formatTime(this.duration);
+      const format = i18n.get('seekLabel', this.config);
+      range.setAttribute(
+        'aria-valuetext',
+        format.replace('{currentTime}', currentTime).replace('{duration}', duration),
+      );
+    } else if (matches(range, this.config.selectors.inputs.volume)) {
+      const percent = range.value * 100;
+      range.setAttribute('aria-valuenow', percent);
+      range.setAttribute('aria-valuetext', `${percent.toFixed(1)}%`);
+    } else {
+      range.setAttribute('aria-valuenow', range.value);
+    }
+
+    // WebKit only
+    if (!browser.isWebkit) {
+      return;
+    }
+
+    // Set CSS custom property
+    range.style.setProperty('--value', `${(range.value / range.max) * 100}%`);
+  },
+
+  // Update hover tooltip for seeking
+  updateSeekTooltip(event) {
+    // Bail if setting not true
+    if (
+      !this.config.tooltips.seek ||
+      !is.element(this.elements.inputs.seek) ||
+      !is.element(this.elements.display.seekTooltip) ||
+      this.duration === 0
+    ) {
+      return;
+    }
+
+    const visible = `${this.config.classNames.tooltip}--visible`;
+    const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
+
+    // Hide on touch
+    if (this.touch) {
+      toggle(false);
+      return;
+    }
+
+    // Determine percentage, if already visible
+    let percent = 0;
+    const clientRect = this.elements.progress.getBoundingClientRect();
+
+    if (is.event(event)) {
+      percent = (100 / clientRect.width) * (event.pageX - clientRect.left);
+    } else if (hasClass(this.elements.display.seekTooltip, visible)) {
+      percent = parseFloat(this.elements.display.seekTooltip.style.left, 10);
+    } else {
+      return;
+    }
+
+    // Set bounds
+    if (percent < 0) {
+      percent = 0;
+    } else if (percent > 100) {
+      percent = 100;
+    }
+
+    // Display the time a click would seek to
+    controls.updateTimeDisplay.call(this, this.elements.display.seekTooltip, (this.duration / 100) * percent);
+
+    // Set position
+    this.elements.display.seekTooltip.style.left = `${percent}%`;
+
+    // Show/hide the tooltip
+    // If the event is a moues in/out and percentage is inside bounds
+    if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
+      toggle(event.type === 'mouseenter');
+    }
+  },
+
+  // Handle time change event
+  timeUpdate(event) {
+    // Only invert if only one time element is displayed and used for both duration and currentTime
+    const invert = !is.element(this.elements.display.duration) && this.config.invertTime;
+
+    // Duration
+    controls.updateTimeDisplay.call(
+      this,
+      this.elements.display.currentTime,
+      invert ? this.duration - this.currentTime : this.currentTime,
+      invert,
+    );
+
+    // Ignore updates while seeking
+    if (event && event.type === 'timeupdate' && this.media.seeking) {
+      return;
+    }
+
+    // Playing progress
+    controls.updateProgress.call(this, event);
+  },
+
+  // Show the duration on metadataloaded or durationchange events
+  durationUpdate() {
+    // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false
+    if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) {
+      return;
+    }
+
+    // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.
+    // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415
+    // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062
+    // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338
+    if (this.duration >= 2 ** 32) {
+      toggleHidden(this.elements.display.currentTime, true);
+      toggleHidden(this.elements.progress, true);
+      return;
+    }
+
+    // Update ARIA values
+    if (is.element(this.elements.inputs.seek)) {
+      this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
+    }
+
+    // If there's a spot to display duration
+    const hasDuration = is.element(this.elements.display.duration);
+
+    // If there's only one time display, display duration there
+    if (!hasDuration && this.config.displayDuration && this.paused) {
+      controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);
+    }
+
+    // If there's a duration element, update content
+    if (hasDuration) {
+      controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
+    }
+
+    // Update the tooltip (if visible)
+    controls.updateSeekTooltip.call(this);
+  },
+
+  // Hide/show a tab
+  toggleMenuButton(setting, toggle) {
+    toggleHidden(this.elements.settings.buttons[setting], !toggle);
+  },
+
+  // Update the selected setting
+  updateSetting(setting, container, input) {
+    const pane = this.elements.settings.panels[setting];
+    let value = null;
+    let list = container;
+
+    if (setting === 'captions') {
+      value = this.currentTrack;
+    } else {
+      value = !is.empty(input) ? input : this[setting];
+
+      // Get default
+      if (is.empty(value)) {
+        value = this.config[setting].default;
+      }
+
+      // Unsupported value
+      if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
+        this.debug.warn(`Unsupported value of '${value}' for ${setting}`);
+        return;
+      }
+
+      // Disabled value
+      if (!this.config[setting].options.includes(value)) {
+        this.debug.warn(`Disabled value of '${value}' for ${setting}`);
+        return;
+      }
+    }
+
+    // Get the list if we need to
+    if (!is.element(list)) {
+      list = pane && pane.querySelector('[role="menu"]');
+    }
+
+    // If there's no list it means it's not been rendered...
+    if (!is.element(list)) {
+      return;
+    }
+
+    // Update the label
+    const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`);
+    label.innerHTML = controls.getLabel.call(this, setting, value);
+
+    // Find the radio option and check it
+    const target = list && list.querySelector(`[value="${value}"]`);
+
+    if (is.element(target)) {
+      target.checked = true;
+    }
+  },
+
+  // Translate a value into a nice label
+  getLabel(setting, value) {
+    switch (setting) {
+      case 'speed':
+        return value === 1 ? i18n.get('normal', this.config) : `${value}&times;`;
+
+      case 'quality':
+        if (is.number(value)) {
+          const label = i18n.get(`qualityLabel.${value}`, this.config);
+
+          if (!label.length) {
+            return `${value}p`;
+          }
+
+          return label;
+        }
+
+        return toTitleCase(value);
+
+      case 'captions':
+        return captions.getLabel.call(this);
+
+      default:
+        return null;
+    }
+  },
+
+  // Set the quality menu
+  setQualityMenu(options) {
+    // Menu required
+    if (!is.element(this.elements.settings.panels.quality)) {
+      return;
+    }
+
+    const type = 'quality';
+    const list = this.elements.settings.panels.quality.querySelector('[role="menu"]');
+
+    // Set options if passed and filter based on uniqueness and config
+    if (is.array(options)) {
+      this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));
+    }
+
+    // Toggle the pane and tab
+    const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;
+    controls.toggleMenuButton.call(this, type, toggle);
+
+    // Empty the menu
+    emptyElement(list);
+
+    // Check if we need to toggle the parent
+    controls.checkMenu.call(this);
+
+    // If we're hiding, nothing more to do
+    if (!toggle) {
+      return;
+    }
+
+    // Get the badge HTML for HD, 4K etc
+    const getBadge = quality => {
+      const label = i18n.get(`qualityBadge.${quality}`, this.config);
+
+      if (!label.length) {
+        return null;
+      }
+
+      return controls.createBadge.call(this, label);
+    };
+
+    // Sort options by the config and then render options
+    this.options.quality
+      .sort((a, b) => {
+        const sorting = this.config.quality.options;
+        return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
+      })
+      .forEach(quality => {
+        controls.createMenuItem.call(this, {
+          value: quality,
+          list,
+          type,
+          title: controls.getLabel.call(this, 'quality', quality),
+          badge: getBadge(quality),
         });
-    },
-
-    // Create a settings menu item
-    createMenuItem({ value, list, type, title, badge = null, checked = false }) {
-        const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]);
-
-        const menuItem = createElement(
-            'button',
-            extend(attributes, {
-                type: 'button',
-                role: 'menuitemradio',
-                class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(),
-                'aria-checked': checked,
-                value,
-            }),
-        );
-
-        const flex = createElement('span');
-
-        // We have to set as HTML incase of special characters
-        flex.innerHTML = title;
-
-        if (is.element(badge)) {
-            flex.appendChild(badge);
-        }
-
-        menuItem.appendChild(flex);
-
-        // Replicate radio button behaviour
-        Object.defineProperty(menuItem, 'checked', {
-            enumerable: true,
-            get() {
-                return menuItem.getAttribute('aria-checked') === 'true';
-            },
-            set(check) {
-                // Ensure exclusivity
-                if (check) {
-                    Array.from(menuItem.parentNode.children)
-                        .filter(node => matches(node, '[role="menuitemradio"]'))
-                        .forEach(node => node.setAttribute('aria-checked', 'false'));
-                }
-
-                menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
-            },
-        });
-
-        this.listeners.bind(
-            menuItem,
-            'click keyup',
-            event => {
-                if (is.keyboardEvent(event) && event.which !== 32) {
-                    return;
-                }
-
-                event.preventDefault();
-                event.stopPropagation();
-
-                menuItem.checked = true;
-
-                switch (type) {
-                    case 'language':
-                        this.currentTrack = Number(value);
-                        break;
-
-                    case 'quality':
-                        this.quality = value;
-                        break;
-
-                    case 'speed':
-                        this.speed = parseFloat(value);
-                        break;
-
-                    default:
-                        break;
-                }
-
-                controls.showMenuPanel.call(this, 'home', is.keyboardEvent(event));
-            },
-            type,
-            false,
-        );
-
-        controls.bindMenuItemShortcuts.call(this, menuItem, type);
-
-        list.appendChild(menuItem);
-    },
-
-    // Format a time for display
-    formatTime(time = 0, inverted = false) {
-        // Bail if the value isn't a number
-        if (!is.number(time)) {
-            return time;
-        }
-
-        // Always display hours if duration is over an hour
-        const forceHours = getHours(this.duration) > 0;
-
-        return formatTime(time, forceHours, inverted);
-    },
-
-    // Update the displayed time
-    updateTimeDisplay(target = null, time = 0, inverted = false) {
-        // Bail if there's no element to display or the value isn't a number
-        if (!is.element(target) || !is.number(time)) {
-            return;
-        }
-
-        // eslint-disable-next-line no-param-reassign
-        target.innerText = controls.formatTime(time, inverted);
-    },
-
-    // Update volume UI and storage
-    updateVolume() {
-        if (!this.supported.ui) {
-            return;
-        }
-
-        // Update range
-        if (is.element(this.elements.inputs.volume)) {
-            controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
-        }
-
-        // Update mute state
-        if (is.element(this.elements.buttons.mute)) {
-            this.elements.buttons.mute.pressed = this.muted || this.volume === 0;
-        }
-    },
-
-    // Update seek value and lower fill
-    setRange(target, value = 0) {
-        if (!is.element(target)) {
-            return;
-        }
-
-        // eslint-disable-next-line
-        target.value = value;
-
-        // Webkit range fill
-        controls.updateRangeFill.call(this, target);
-    },
-
-    // Update <progress> elements
-    updateProgress(event) {
-        if (!this.supported.ui || !is.event(event)) {
-            return;
-        }
-
-        let value = 0;
-
-        const setProgress = (target, input) => {
-            const val = is.number(input) ? input : 0;
-            const progress = is.element(target) ? target : this.elements.display.buffer;
-
-            // Update value and label
-            if (is.element(progress)) {
-                progress.value = val;
-
-                // Update text label inside
-                const label = progress.getElementsByTagName('span')[0];
-                if (is.element(label)) {
-                    label.childNodes[0].nodeValue = val;
-                }
-            }
-        };
-
-        if (event) {
-            switch (event.type) {
-                // Video playing
-                case 'timeupdate':
-                case 'seeking':
-                case 'seeked':
-                    value = getPercentage(this.currentTime, this.duration);
-
-                    // Set seek range value only if it's a 'natural' time event
-                    if (event.type === 'timeupdate') {
-                        controls.setRange.call(this, this.elements.inputs.seek, value);
-                    }
-
-                    break;
-
-                // Check buffer status
-                case 'playing':
-                case 'progress':
-                    setProgress(this.elements.display.buffer, this.buffered * 100);
-
-                    break;
-
-                default:
-                    break;
-            }
-        }
-    },
-
-    // Webkit polyfill for lower fill range
-    updateRangeFill(target) {
-        // Get range from event if event passed
-        const range = is.event(target) ? target.target : target;
-
-        // Needs to be a valid <input type='range'>
-        if (!is.element(range) || range.getAttribute('type') !== 'range') {
-            return;
-        }
-
-        // Set aria values for https://github.com/sampotts/plyr/issues/905
-        if (matches(range, this.config.selectors.inputs.seek)) {
-            range.setAttribute('aria-valuenow', this.currentTime);
-            const currentTime = controls.formatTime(this.currentTime);
-            const duration = controls.formatTime(this.duration);
-            const format = i18n.get('seekLabel', this.config);
-            range.setAttribute(
-                'aria-valuetext',
-                format.replace('{currentTime}', currentTime).replace('{duration}', duration),
-            );
-        } else if (matches(range, this.config.selectors.inputs.volume)) {
-            const percent = range.value * 100;
-            range.setAttribute('aria-valuenow', percent);
-            range.setAttribute('aria-valuetext', `${percent.toFixed(1)}%`);
-        } else {
-            range.setAttribute('aria-valuenow', range.value);
-        }
-
-        // WebKit only
-        if (!browser.isWebkit) {
-            return;
-        }
-
-        // Set CSS custom property
-        range.style.setProperty('--value', `${(range.value / range.max) * 100}%`);
-    },
-
-    // Update hover tooltip for seeking
-    updateSeekTooltip(event) {
-        // Bail if setting not true
-        if (
-            !this.config.tooltips.seek ||
-            !is.element(this.elements.inputs.seek) ||
-            !is.element(this.elements.display.seekTooltip) ||
-            this.duration === 0
-        ) {
-            return;
-        }
-
-        const visible = `${this.config.classNames.tooltip}--visible`;
-        const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
-
-        // Hide on touch
-        if (this.touch) {
-            toggle(false);
-            return;
-        }
-
-        // Determine percentage, if already visible
-        let percent = 0;
-        const clientRect = this.elements.progress.getBoundingClientRect();
-
-        if (is.event(event)) {
-            percent = (100 / clientRect.width) * (event.pageX - clientRect.left);
-        } else if (hasClass(this.elements.display.seekTooltip, visible)) {
-            percent = parseFloat(this.elements.display.seekTooltip.style.left, 10);
-        } else {
-            return;
-        }
-
-        // Set bounds
-        if (percent < 0) {
-            percent = 0;
-        } else if (percent > 100) {
-            percent = 100;
-        }
-
-        // Display the time a click would seek to
-        controls.updateTimeDisplay.call(this, this.elements.display.seekTooltip, (this.duration / 100) * percent);
-
-        // Set position
-        this.elements.display.seekTooltip.style.left = `${percent}%`;
-
-        // Show/hide the tooltip
-        // If the event is a moues in/out and percentage is inside bounds
-        if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) {
-            toggle(event.type === 'mouseenter');
-        }
-    },
-
-    // Handle time change event
-    timeUpdate(event) {
-        // Only invert if only one time element is displayed and used for both duration and currentTime
-        const invert = !is.element(this.elements.display.duration) && this.config.invertTime;
-
-        // Duration
-        controls.updateTimeDisplay.call(
-            this,
-            this.elements.display.currentTime,
-            invert ? this.duration - this.currentTime : this.currentTime,
-            invert,
-        );
-
-        // Ignore updates while seeking
-        if (event && event.type === 'timeupdate' && this.media.seeking) {
-            return;
-        }
-
-        // Playing progress
-        controls.updateProgress.call(this, event);
-    },
-
-    // Show the duration on metadataloaded or durationchange events
-    durationUpdate() {
-        // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false
-        if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) {
-            return;
-        }
-
-        // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar.
-        // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415
-        // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062
-        // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338
-        if (this.duration >= 2 ** 32) {
-            toggleHidden(this.elements.display.currentTime, true);
-            toggleHidden(this.elements.progress, true);
-            return;
-        }
-
-        // Update ARIA values
-        if (is.element(this.elements.inputs.seek)) {
-            this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration);
-        }
-
-        // If there's a spot to display duration
-        const hasDuration = is.element(this.elements.display.duration);
-
-        // If there's only one time display, display duration there
-        if (!hasDuration && this.config.displayDuration && this.paused) {
-            controls.updateTimeDisplay.call(this, this.elements.display.currentTime, this.duration);
-        }
+      });
 
-        // If there's a duration element, update content
-        if (hasDuration) {
-            controls.updateTimeDisplay.call(this, this.elements.display.duration, this.duration);
-        }
-
-        // Update the tooltip (if visible)
-        controls.updateSeekTooltip.call(this);
-    },
-
-    // Hide/show a tab
-    toggleMenuButton(setting, toggle) {
-        toggleHidden(this.elements.settings.buttons[setting], !toggle);
-    },
-
-    // Update the selected setting
-    updateSetting(setting, container, input) {
-        const pane = this.elements.settings.panels[setting];
-        let value = null;
-        let list = container;
-
-        if (setting === 'captions') {
-            value = this.currentTrack;
-        } else {
-            value = !is.empty(input) ? input : this[setting];
-
-            // Get default
-            if (is.empty(value)) {
-                value = this.config[setting].default;
-            }
-
-            // Unsupported value
-            if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) {
-                this.debug.warn(`Unsupported value of '${value}' for ${setting}`);
-                return;
-            }
-
-            // Disabled value
-            if (!this.config[setting].options.includes(value)) {
-                this.debug.warn(`Disabled value of '${value}' for ${setting}`);
-                return;
-            }
-        }
-
-        // Get the list if we need to
-        if (!is.element(list)) {
-            list = pane && pane.querySelector('[role="menu"]');
-        }
-
-        // If there's no list it means it's not been rendered...
-        if (!is.element(list)) {
-            return;
-        }
-
-        // Update the label
-        const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`);
-        label.innerHTML = controls.getLabel.call(this, setting, value);
-
-        // Find the radio option and check it
-        const target = list && list.querySelector(`[value="${value}"]`);
-
-        if (is.element(target)) {
-            target.checked = true;
-        }
-    },
+    controls.updateSetting.call(this, type, list);
+  },
 
-    // Translate a value into a nice label
-    getLabel(setting, value) {
-        switch (setting) {
-            case 'speed':
-                return value === 1 ? i18n.get('normal', this.config) : `${value}&times;`;
-
-            case 'quality':
-                if (is.number(value)) {
-                    const label = i18n.get(`qualityLabel.${value}`, this.config);
-
-                    if (!label.length) {
-                        return `${value}p`;
-                    }
-
-                    return label;
-                }
-
-                return toTitleCase(value);
-
-            case 'captions':
-                return captions.getLabel.call(this);
-
-            default:
-                return null;
-        }
-    },
-
-    // Set the quality menu
-    setQualityMenu(options) {
-        // Menu required
-        if (!is.element(this.elements.settings.panels.quality)) {
-            return;
-        }
-
-        const type = 'quality';
-        const list = this.elements.settings.panels.quality.querySelector('[role="menu"]');
-
-        // Set options if passed and filter based on uniqueness and config
-        if (is.array(options)) {
-            this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality));
-        }
-
-        // Toggle the pane and tab
-        const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1;
-        controls.toggleMenuButton.call(this, type, toggle);
-
-        // Empty the menu
-        emptyElement(list);
-
-        // Check if we need to toggle the parent
-        controls.checkMenu.call(this);
-
-        // If we're hiding, nothing more to do
-        if (!toggle) {
-            return;
-        }
-
-        // Get the badge HTML for HD, 4K etc
-        const getBadge = quality => {
-            const label = i18n.get(`qualityBadge.${quality}`, this.config);
-
-            if (!label.length) {
-                return null;
-            }
-
-            return controls.createBadge.call(this, label);
-        };
-
-        // Sort options by the config and then render options
-        this.options.quality
-            .sort((a, b) => {
-                const sorting = this.config.quality.options;
-                return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1;
-            })
-            .forEach(quality => {
-                controls.createMenuItem.call(this, {
-                    value: quality,
-                    list,
-                    type,
-                    title: controls.getLabel.call(this, 'quality', quality),
-                    badge: getBadge(quality),
-                });
-            });
-
-        controls.updateSetting.call(this, type, list);
-    },
-
-    // Set the looping options
-    /* setLoopMenu() {
+  // Set the looping options
+  /* setLoopMenu() {
         // Menu required
         if (!is.element(this.elements.settings.panels.loop)) {
             return;
@@ -988,768 +986,768 @@ const controls = {
         });
     }, */
 
-    // Get current selected caption language
-    // TODO: rework this to user the getter in the API?
-
-    // Set a list of available captions languages
-    setCaptionsMenu() {
-        // Menu required
-        if (!is.element(this.elements.settings.panels.captions)) {
-            return;
-        }
-
-        // TODO: Captions or language? Currently it's mixed
-        const type = 'captions';
-        const list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
-        const tracks = captions.getTracks.call(this);
-        const toggle = Boolean(tracks.length);
-
-        // Toggle the pane and tab
-        controls.toggleMenuButton.call(this, type, toggle);
-
-        // Empty the menu
-        emptyElement(list);
-
-        // Check if we need to toggle the parent
-        controls.checkMenu.call(this);
-
-        // If there's no captions, bail
-        if (!toggle) {
-            return;
-        }
-
-        // Generate options data
-        const options = tracks.map((track, value) => ({
-            value,
-            checked: this.captions.toggled && this.currentTrack === value,
-            title: captions.getLabel.call(this, track),
-            badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
-            list,
-            type: 'language',
-        }));
-
-        // Add the "Disabled" option to turn off captions
-        options.unshift({
-            value: -1,
-            checked: !this.captions.toggled,
-            title: i18n.get('disabled', this.config),
-            list,
-            type: 'language',
-        });
-
-        // Generate options
-        options.forEach(controls.createMenuItem.bind(this));
-
-        controls.updateSetting.call(this, type, list);
-    },
-
-    // Set a list of available captions languages
-    setSpeedMenu() {
-        // Menu required
-        if (!is.element(this.elements.settings.panels.speed)) {
-            return;
-        }
-
-        const type = 'speed';
-        const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
-
-        // Filter out invalid speeds
-        this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
-
-        // Toggle the pane and tab
-        const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
-        controls.toggleMenuButton.call(this, type, toggle);
-
-        // Empty the menu
-        emptyElement(list);
-
-        // Check if we need to toggle the parent
-        controls.checkMenu.call(this);
-
-        // If we're hiding, nothing more to do
-        if (!toggle) {
-            return;
-        }
-
-        // Create items
-        this.options.speed.forEach(speed => {
-            controls.createMenuItem.call(this, {
-                value: speed,
-                list,
-                type,
-                title: controls.getLabel.call(this, 'speed', speed),
-            });
+  // Get current selected caption language
+  // TODO: rework this to user the getter in the API?
+
+  // Set a list of available captions languages
+  setCaptionsMenu() {
+    // Menu required
+    if (!is.element(this.elements.settings.panels.captions)) {
+      return;
+    }
+
+    // TODO: Captions or language? Currently it's mixed
+    const type = 'captions';
+    const list = this.elements.settings.panels.captions.querySelector('[role="menu"]');
+    const tracks = captions.getTracks.call(this);
+    const toggle = Boolean(tracks.length);
+
+    // Toggle the pane and tab
+    controls.toggleMenuButton.call(this, type, toggle);
+
+    // Empty the menu
+    emptyElement(list);
+
+    // Check if we need to toggle the parent
+    controls.checkMenu.call(this);
+
+    // If there's no captions, bail
+    if (!toggle) {
+      return;
+    }
+
+    // Generate options data
+    const options = tracks.map((track, value) => ({
+      value,
+      checked: this.captions.toggled && this.currentTrack === value,
+      title: captions.getLabel.call(this, track),
+      badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()),
+      list,
+      type: 'language',
+    }));
+
+    // Add the "Disabled" option to turn off captions
+    options.unshift({
+      value: -1,
+      checked: !this.captions.toggled,
+      title: i18n.get('disabled', this.config),
+      list,
+      type: 'language',
+    });
+
+    // Generate options
+    options.forEach(controls.createMenuItem.bind(this));
+
+    controls.updateSetting.call(this, type, list);
+  },
+
+  // Set a list of available captions languages
+  setSpeedMenu() {
+    // Menu required
+    if (!is.element(this.elements.settings.panels.speed)) {
+      return;
+    }
+
+    const type = 'speed';
+    const list = this.elements.settings.panels.speed.querySelector('[role="menu"]');
+
+    // Filter out invalid speeds
+    this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed);
+
+    // Toggle the pane and tab
+    const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1;
+    controls.toggleMenuButton.call(this, type, toggle);
+
+    // Empty the menu
+    emptyElement(list);
+
+    // Check if we need to toggle the parent
+    controls.checkMenu.call(this);
+
+    // If we're hiding, nothing more to do
+    if (!toggle) {
+      return;
+    }
+
+    // Create items
+    this.options.speed.forEach(speed => {
+      controls.createMenuItem.call(this, {
+        value: speed,
+        list,
+        type,
+        title: controls.getLabel.call(this, 'speed', speed),
+      });
+    });
+
+    controls.updateSetting.call(this, type, list);
+  },
+
+  // Check if we need to hide/show the settings menu
+  checkMenu() {
+    const { buttons } = this.elements.settings;
+    const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);
+
+    toggleHidden(this.elements.settings.menu, !visible);
+  },
+
+  // Focus the first menu item in a given (or visible) menu
+  focusFirstMenuItem(pane, tabFocus = false) {
+    if (this.elements.settings.popup.hidden) {
+      return;
+    }
+
+    let target = pane;
+
+    if (!is.element(target)) {
+      target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
+    }
+
+    const firstItem = target.querySelector('[role^="menuitem"]');
+
+    setFocus.call(this, firstItem, tabFocus);
+  },
+
+  // Show/hide menu
+  toggleMenu(input) {
+    const { popup } = this.elements.settings;
+    const button = this.elements.buttons.settings;
+
+    // Menu and button are required
+    if (!is.element(popup) || !is.element(button)) {
+      return;
+    }
+
+    // True toggle by default
+    const { hidden } = popup;
+    let show = hidden;
+
+    if (is.boolean(input)) {
+      show = input;
+    } else if (is.keyboardEvent(input) && input.which === 27) {
+      show = false;
+    } else if (is.event(input)) {
+      // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
+      // Element in the shadowDOM. The path, if available, is complete.
+      const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;
+      const isMenuItem = popup.contains(target);
+
+      // If the click was inside the menu or if the click
+      // wasn't the button or menu item and we're trying to
+      // show the menu (a doc click shouldn't show the menu)
+      if (isMenuItem || (!isMenuItem && input.target !== button && show)) {
+        return;
+      }
+    }
+
+    // Set button attributes
+    button.setAttribute('aria-expanded', show);
+
+    // Show the actual popup
+    toggleHidden(popup, !show);
+
+    // Add class hook
+    toggleClass(this.elements.container, this.config.classNames.menu.open, show);
+
+    // Focus the first item if key interaction
+    if (show && is.keyboardEvent(input)) {
+      controls.focusFirstMenuItem.call(this, null, true);
+    } else if (!show && !hidden) {
+      // If closing, re-focus the button
+      setFocus.call(this, button, is.keyboardEvent(input));
+    }
+  },
+
+  // Get the natural size of a menu panel
+  getMenuSize(tab) {
+    const clone = tab.cloneNode(true);
+    clone.style.position = 'absolute';
+    clone.style.opacity = 0;
+    clone.removeAttribute('hidden');
+
+    // Append to parent so we get the "real" size
+    tab.parentNode.appendChild(clone);
+
+    // Get the sizes before we remove
+    const width = clone.scrollWidth;
+    const height = clone.scrollHeight;
+
+    // Remove from the DOM
+    removeElement(clone);
+
+    return {
+      width,
+      height,
+    };
+  },
+
+  // Show a panel in the menu
+  showMenuPanel(type = '', tabFocus = false) {
+    const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
+
+    // Nothing to show, bail
+    if (!is.element(target)) {
+      return;
+    }
+
+    // Hide all other panels
+    const container = target.parentNode;
+    const current = Array.from(container.children).find(node => !node.hidden);
+
+    // If we can do fancy animations, we'll animate the height/width
+    if (support.transitions && !support.reducedMotion) {
+      // Set the current width as a base
+      container.style.width = `${current.scrollWidth}px`;
+      container.style.height = `${current.scrollHeight}px`;
+
+      // Get potential sizes
+      const size = controls.getMenuSize.call(this, target);
+
+      // Restore auto height/width
+      const restore = event => {
+        // We're only bothered about height and width on the container
+        if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
+          return;
+        }
+
+        // Revert back to auto
+        container.style.width = '';
+        container.style.height = '';
+
+        // Only listen once
+        off.call(this, container, transitionEndEvent, restore);
+      };
+
+      // Listen for the transition finishing and restore auto height/width
+      on.call(this, container, transitionEndEvent, restore);
+
+      // Set dimensions to target
+      container.style.width = `${size.width}px`;
+      container.style.height = `${size.height}px`;
+    }
+
+    // Set attributes on current tab
+    toggleHidden(current, true);
+
+    // Set attributes on target
+    toggleHidden(target, false);
+
+    // Focus the first item
+    controls.focusFirstMenuItem.call(this, target, tabFocus);
+  },
+
+  // Set the download URL
+  setDownloadUrl() {
+    const button = this.elements.buttons.download;
+
+    // Bail if no button
+    if (!is.element(button)) {
+      return;
+    }
+
+    // Set attribute
+    button.setAttribute('href', this.download);
+  },
+
+  // Build the default HTML
+  create(data) {
+    const {
+      bindMenuItemShortcuts,
+      createButton,
+      createProgress,
+      createRange,
+      createTime,
+      setQualityMenu,
+      setSpeedMenu,
+      showMenuPanel,
+    } = controls;
+    this.elements.controls = null;
+
+    // Larger overlaid play button
+    if (this.config.controls.includes('play-large')) {
+      this.elements.container.appendChild(createButton.call(this, 'play-large'));
+    }
+
+    // Create the container
+    const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
+    this.elements.controls = container;
+
+    // Default item attributes
+    const defaultAttributes = { class: 'plyr__controls__item' };
+
+    // Loop through controls in order
+    dedupe(this.config.controls).forEach(control => {
+      // Restart button
+      if (control === 'restart') {
+        container.appendChild(createButton.call(this, 'restart', defaultAttributes));
+      }
+
+      // Rewind button
+      if (control === 'rewind') {
+        container.appendChild(createButton.call(this, 'rewind', defaultAttributes));
+      }
+
+      // Play/Pause button
+      if (control === 'play') {
+        container.appendChild(createButton.call(this, 'play', defaultAttributes));
+      }
+
+      // Fast forward button
+      if (control === 'fast-forward') {
+        container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));
+      }
+
+      // Progress
+      if (control === 'progress') {
+        const progressContainer = createElement('div', {
+          class: `${defaultAttributes.class} plyr__progress__container`,
         });
 
-        controls.updateSetting.call(this, type, list);
-    },
+        const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
 
-    // Check if we need to hide/show the settings menu
-    checkMenu() {
-        const { buttons } = this.elements.settings;
-        const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden);
+        // Seek range slider
+        progress.appendChild(
+          createRange.call(this, 'seek', {
+            id: `plyr-seek-${data.id}`,
+          }),
+        );
 
-        toggleHidden(this.elements.settings.menu, !visible);
-    },
+        // Buffer progress
+        progress.appendChild(createProgress.call(this, 'buffer'));
 
-    // Focus the first menu item in a given (or visible) menu
-    focusFirstMenuItem(pane, tabFocus = false) {
-        if (this.elements.settings.popup.hidden) {
-            return;
-        }
+        // TODO: Add loop display indicator
 
-        let target = pane;
+        // Seek tooltip
+        if (this.config.tooltips.seek) {
+          const tooltip = createElement(
+            'span',
+            {
+              class: this.config.classNames.tooltip,
+            },
+            '00:00',
+          );
 
-        if (!is.element(target)) {
-            target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
+          progress.appendChild(tooltip);
+          this.elements.display.seekTooltip = tooltip;
         }
 
-        const firstItem = target.querySelector('[role^="menuitem"]');
-
-        setFocus.call(this, firstItem, tabFocus);
-    },
+        this.elements.progress = progress;
+        progressContainer.appendChild(this.elements.progress);
+        container.appendChild(progressContainer);
+      }
 
-    // Show/hide menu
-    toggleMenu(input) {
-        const { popup } = this.elements.settings;
-        const button = this.elements.buttons.settings;
-
-        // Menu and button are required
-        if (!is.element(popup) || !is.element(button)) {
-            return;
-        }
+      // Media current time display
+      if (control === 'current-time') {
+        container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));
+      }
 
-        // True toggle by default
-        const { hidden } = popup;
-        let show = hidden;
-
-        if (is.boolean(input)) {
-            show = input;
-        } else if (is.keyboardEvent(input) && input.which === 27) {
-            show = false;
-        } else if (is.event(input)) {
-            // If Plyr is in a shadowDOM, the event target is set to the component, instead of the
-            // Element in the shadowDOM. The path, if available, is complete.
-            const target = is.function(input.composedPath) ? input.composedPath()[0] : input.target;
-            const isMenuItem = popup.contains(target);
-
-            // If the click was inside the menu or if the click
-            // wasn't the button or menu item and we're trying to
-            // show the menu (a doc click shouldn't show the menu)
-            if (isMenuItem || (!isMenuItem && input.target !== button && show)) {
-                return;
-            }
-        }
+      // Media duration display
+      if (control === 'duration') {
+        container.appendChild(createTime.call(this, 'duration', defaultAttributes));
+      }
 
-        // Set button attributes
-        button.setAttribute('aria-expanded', show);
+      // Volume controls
+      if (control === 'mute' || control === 'volume') {
+        let { volume } = this.elements;
 
-        // Show the actual popup
-        toggleHidden(popup, !show);
+        // Create the volume container if needed
+        if (!is.element(volume) || !container.contains(volume)) {
+          volume = createElement(
+            'div',
+            extend({}, defaultAttributes, {
+              class: `${defaultAttributes.class} plyr__volume`.trim(),
+            }),
+          );
 
-        // Add class hook
-        toggleClass(this.elements.container, this.config.classNames.menu.open, show);
+          this.elements.volume = volume;
 
-        // Focus the first item if key interaction
-        if (show && is.keyboardEvent(input)) {
-            controls.focusFirstMenuItem.call(this, null, true);
-        } else if (!show && !hidden) {
-            // If closing, re-focus the button
-            setFocus.call(this, button, is.keyboardEvent(input));
+          container.appendChild(volume);
         }
-    },
-
-    // Get the natural size of a menu panel
-    getMenuSize(tab) {
-        const clone = tab.cloneNode(true);
-        clone.style.position = 'absolute';
-        clone.style.opacity = 0;
-        clone.removeAttribute('hidden');
-
-        // Append to parent so we get the "real" size
-        tab.parentNode.appendChild(clone);
-
-        // Get the sizes before we remove
-        const width = clone.scrollWidth;
-        const height = clone.scrollHeight;
-
-        // Remove from the DOM
-        removeElement(clone);
-
-        return {
-            width,
-            height,
-        };
-    },
-
-    // Show a panel in the menu
-    showMenuPanel(type = '', tabFocus = false) {
-        const target = this.elements.container.querySelector(`#plyr-settings-${this.id}-${type}`);
 
-        // Nothing to show, bail
-        if (!is.element(target)) {
-            return;
+        // Toggle mute button
+        if (control === 'mute') {
+          volume.appendChild(createButton.call(this, 'mute'));
         }
 
-        // Hide all other panels
-        const container = target.parentNode;
-        const current = Array.from(container.children).find(node => !node.hidden);
+        // Volume range control
+        // Ignored on iOS as it's handled globally
+        // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
+        if (control === 'volume' && !browser.isIos) {
+          // Set the attributes
+          const attributes = {
+            max: 1,
+            step: 0.05,
+            value: this.config.volume,
+          };
 
-        // If we can do fancy animations, we'll animate the height/width
-        if (support.transitions && !support.reducedMotion) {
-            // Set the current width as a base
-            container.style.width = `${current.scrollWidth}px`;
-            container.style.height = `${current.scrollHeight}px`;
+          // Create the volume range slider
+          volume.appendChild(
+            createRange.call(
+              this,
+              'volume',
+              extend(attributes, {
+                id: `plyr-volume-${data.id}`,
+              }),
+            ),
+          );
+        }
+      }
+
+      // Toggle captions button
+      if (control === 'captions') {
+        container.appendChild(createButton.call(this, 'captions', defaultAttributes));
+      }
+
+      // Settings button / menu
+      if (control === 'settings' && !is.empty(this.config.settings)) {
+        const wrapper = createElement(
+          'div',
+          extend({}, defaultAttributes, {
+            class: `${defaultAttributes.class} plyr__menu`.trim(),
+            hidden: '',
+          }),
+        );
 
-            // Get potential sizes
-            const size = controls.getMenuSize.call(this, target);
+        wrapper.appendChild(
+          createButton.call(this, 'settings', {
+            'aria-haspopup': true,
+            'aria-controls': `plyr-settings-${data.id}`,
+            'aria-expanded': false,
+          }),
+        );
 
-            // Restore auto height/width
-            const restore = event => {
-                // We're only bothered about height and width on the container
-                if (event.target !== container || !['width', 'height'].includes(event.propertyName)) {
-                    return;
-                }
+        const popup = createElement('div', {
+          class: 'plyr__menu__container',
+          id: `plyr-settings-${data.id}`,
+          hidden: '',
+        });
 
-                // Revert back to auto
-                container.style.width = '';
-                container.style.height = '';
+        const inner = createElement('div');
 
-                // Only listen once
-                off.call(this, container, transitionEndEvent, restore);
-            };
+        const home = createElement('div', {
+          id: `plyr-settings-${data.id}-home`,
+        });
 
-            // Listen for the transition finishing and restore auto height/width
-            on.call(this, container, transitionEndEvent, restore);
+        // Create the menu
+        const menu = createElement('div', {
+          role: 'menu',
+        });
 
-            // Set dimensions to target
-            container.style.width = `${size.width}px`;
-            container.style.height = `${size.height}px`;
-        }
+        home.appendChild(menu);
+        inner.appendChild(home);
+        this.elements.settings.panels.home = home;
 
-        // Set attributes on current tab
-        toggleHidden(current, true);
+        // Build the menu items
+        this.config.settings.forEach(type => {
+          // TODO: bundle this with the createMenuItem helper and bindings
+          const menuItem = createElement(
+            'button',
+            extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {
+              type: 'button',
+              class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,
+              role: 'menuitem',
+              'aria-haspopup': true,
+              hidden: '',
+            }),
+          );
 
-        // Set attributes on target
-        toggleHidden(target, false);
+          // Bind menu shortcuts for keyboard users
+          bindMenuItemShortcuts.call(this, menuItem, type);
 
-        // Focus the first item
-        controls.focusFirstMenuItem.call(this, target, tabFocus);
-    },
+          // Show menu on click
+          on.call(this, menuItem, 'click', () => {
+            showMenuPanel.call(this, type, false);
+          });
 
-    // Set the download URL
-    setDownloadUrl() {
-        const button = this.elements.buttons.download;
+          const flex = createElement('span', null, i18n.get(type, this.config));
 
-        // Bail if no button
-        if (!is.element(button)) {
-            return;
-        }
-
-        // Set attribute
-        button.setAttribute('href', this.download);
-    },
-
-    // Build the default HTML
-    create(data) {
-        const {
-            bindMenuItemShortcuts,
-            createButton,
-            createProgress,
-            createRange,
-            createTime,
-            setQualityMenu,
-            setSpeedMenu,
-            showMenuPanel,
-        } = controls;
-        this.elements.controls = null;
-
-        // Larger overlaid play button
-        if (this.config.controls.includes('play-large')) {
-            this.elements.container.appendChild(createButton.call(this, 'play-large'));
-        }
-
-        // Create the container
-        const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
-        this.elements.controls = container;
+          const value = createElement('span', {
+            class: this.config.classNames.menu.value,
+          });
 
-        // Default item attributes
-        const defaultAttributes = { class: 'plyr__controls__item' };
+          // Speed contains HTML entities
+          value.innerHTML = data[type];
 
-        // Loop through controls in order
-        dedupe(this.config.controls).forEach(control => {
-            // Restart button
-            if (control === 'restart') {
-                container.appendChild(createButton.call(this, 'restart', defaultAttributes));
-            }
+          flex.appendChild(value);
+          menuItem.appendChild(flex);
+          menu.appendChild(menuItem);
 
-            // Rewind button
-            if (control === 'rewind') {
-                container.appendChild(createButton.call(this, 'rewind', defaultAttributes));
-            }
+          // Build the panes
+          const pane = createElement('div', {
+            id: `plyr-settings-${data.id}-${type}`,
+            hidden: '',
+          });
 
-            // Play/Pause button
-            if (control === 'play') {
-                container.appendChild(createButton.call(this, 'play', defaultAttributes));
-            }
+          // Back button
+          const backButton = createElement('button', {
+            type: 'button',
+            class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,
+          });
 
-            // Fast forward button
-            if (control === 'fast-forward') {
-                container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));
-            }
+          // Visible label
+          backButton.appendChild(
+            createElement(
+              'span',
+              {
+                'aria-hidden': true,
+              },
+              i18n.get(type, this.config),
+            ),
+          );
 
-            // Progress
-            if (control === 'progress') {
-                const progressContainer = createElement('div', {
-                    class: `${defaultAttributes.class} plyr__progress__container`,
-                });
-
-                const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
-
-                // Seek range slider
-                progress.appendChild(
-                    createRange.call(this, 'seek', {
-                        id: `plyr-seek-${data.id}`,
-                    }),
-                );
-
-                // Buffer progress
-                progress.appendChild(createProgress.call(this, 'buffer'));
-
-                // TODO: Add loop display indicator
-
-                // Seek tooltip
-                if (this.config.tooltips.seek) {
-                    const tooltip = createElement(
-                        'span',
-                        {
-                            class: this.config.classNames.tooltip,
-                        },
-                        '00:00',
-                    );
-
-                    progress.appendChild(tooltip);
-                    this.elements.display.seekTooltip = tooltip;
-                }
-
-                this.elements.progress = progress;
-                progressContainer.appendChild(this.elements.progress);
-                container.appendChild(progressContainer);
-            }
+          // Screen reader label
+          backButton.appendChild(
+            createElement(
+              'span',
+              {
+                class: this.config.classNames.hidden,
+              },
+              i18n.get('menuBack', this.config),
+            ),
+          );
 
-            // Media current time display
-            if (control === 'current-time') {
-                container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));
-            }
+          // Go back via keyboard
+          on.call(
+            this,
+            pane,
+            'keydown',
+            event => {
+              // We only care about <-
+              if (event.which !== 37) {
+                return;
+              }
 
-            // Media duration display
-            if (control === 'duration') {
-                container.appendChild(createTime.call(this, 'duration', defaultAttributes));
-            }
+              // Prevent seek
+              event.preventDefault();
+              event.stopPropagation();
 
-            // Volume controls
-            if (control === 'mute' || control === 'volume') {
-                let { volume } = this.elements;
-
-                // Create the volume container if needed
-                if (!is.element(volume) || !container.contains(volume)) {
-                    volume = createElement(
-                        'div',
-                        extend({}, defaultAttributes, {
-                            class: `${defaultAttributes.class} plyr__volume`.trim(),
-                        }),
-                    );
-
-                    this.elements.volume = volume;
-
-                    container.appendChild(volume);
-                }
-
-                // Toggle mute button
-                if (control === 'mute') {
-                    volume.appendChild(createButton.call(this, 'mute'));
-                }
-
-                // Volume range control
-                // Ignored on iOS as it's handled globally
-                // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-                if (control === 'volume' && !browser.isIos) {
-                    // Set the attributes
-                    const attributes = {
-                        max: 1,
-                        step: 0.05,
-                        value: this.config.volume,
-                    };
-
-                    // Create the volume range slider
-                    volume.appendChild(
-                        createRange.call(
-                            this,
-                            'volume',
-                            extend(attributes, {
-                                id: `plyr-volume-${data.id}`,
-                            }),
-                        ),
-                    );
-                }
-            }
+              // Show the respective menu
+              showMenuPanel.call(this, 'home', true);
+            },
+            false,
+          );
 
-            // Toggle captions button
-            if (control === 'captions') {
-                container.appendChild(createButton.call(this, 'captions', defaultAttributes));
-            }
+          // Go back via button click
+          on.call(this, backButton, 'click', () => {
+            showMenuPanel.call(this, 'home', false);
+          });
 
-            // Settings button / menu
-            if (control === 'settings' && !is.empty(this.config.settings)) {
-                const wrapper = createElement(
-                    'div',
-                    extend({}, defaultAttributes, {
-                        class: `${defaultAttributes.class} plyr__menu`.trim(),
-                        hidden: '',
-                    }),
-                );
-
-                wrapper.appendChild(
-                    createButton.call(this, 'settings', {
-                        'aria-haspopup': true,
-                        'aria-controls': `plyr-settings-${data.id}`,
-                        'aria-expanded': false,
-                    }),
-                );
-
-                const popup = createElement('div', {
-                    class: 'plyr__menu__container',
-                    id: `plyr-settings-${data.id}`,
-                    hidden: '',
-                });
-
-                const inner = createElement('div');
-
-                const home = createElement('div', {
-                    id: `plyr-settings-${data.id}-home`,
-                });
-
-                // Create the menu
-                const menu = createElement('div', {
-                    role: 'menu',
-                });
-
-                home.appendChild(menu);
-                inner.appendChild(home);
-                this.elements.settings.panels.home = home;
-
-                // Build the menu items
-                this.config.settings.forEach(type => {
-                    // TODO: bundle this with the createMenuItem helper and bindings
-                    const menuItem = createElement(
-                        'button',
-                        extend(getAttributesFromSelector(this.config.selectors.buttons.settings), {
-                            type: 'button',
-                            class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`,
-                            role: 'menuitem',
-                            'aria-haspopup': true,
-                            hidden: '',
-                        }),
-                    );
-
-                    // Bind menu shortcuts for keyboard users
-                    bindMenuItemShortcuts.call(this, menuItem, type);
-
-                    // Show menu on click
-                    on.call(this, menuItem, 'click', () => {
-                        showMenuPanel.call(this, type, false);
-                    });
-
-                    const flex = createElement('span', null, i18n.get(type, this.config));
-
-                    const value = createElement('span', {
-                        class: this.config.classNames.menu.value,
-                    });
-
-                    // Speed contains HTML entities
-                    value.innerHTML = data[type];
-
-                    flex.appendChild(value);
-                    menuItem.appendChild(flex);
-                    menu.appendChild(menuItem);
-
-                    // Build the panes
-                    const pane = createElement('div', {
-                        id: `plyr-settings-${data.id}-${type}`,
-                        hidden: '',
-                    });
-
-                    // Back button
-                    const backButton = createElement('button', {
-                        type: 'button',
-                        class: `${this.config.classNames.control} ${this.config.classNames.control}--back`,
-                    });
-
-                    // Visible label
-                    backButton.appendChild(
-                        createElement(
-                            'span',
-                            {
-                                'aria-hidden': true,
-                            },
-                            i18n.get(type, this.config),
-                        ),
-                    );
-
-                    // Screen reader label
-                    backButton.appendChild(
-                        createElement(
-                            'span',
-                            {
-                                class: this.config.classNames.hidden,
-                            },
-                            i18n.get('menuBack', this.config),
-                        ),
-                    );
-
-                    // Go back via keyboard
-                    on.call(
-                        this,
-                        pane,
-                        'keydown',
-                        event => {
-                            // We only care about <-
-                            if (event.which !== 37) {
-                                return;
-                            }
-
-                            // Prevent seek
-                            event.preventDefault();
-                            event.stopPropagation();
-
-                            // Show the respective menu
-                            showMenuPanel.call(this, 'home', true);
-                        },
-                        false,
-                    );
-
-                    // Go back via button click
-                    on.call(this, backButton, 'click', () => {
-                        showMenuPanel.call(this, 'home', false);
-                    });
-
-                    // Add to pane
-                    pane.appendChild(backButton);
-
-                    // Menu
-                    pane.appendChild(
-                        createElement('div', {
-                            role: 'menu',
-                        }),
-                    );
-
-                    inner.appendChild(pane);
-
-                    this.elements.settings.buttons[type] = menuItem;
-                    this.elements.settings.panels[type] = pane;
-                });
-
-                popup.appendChild(inner);
-                wrapper.appendChild(popup);
-                container.appendChild(wrapper);
-
-                this.elements.settings.popup = popup;
-                this.elements.settings.menu = wrapper;
-            }
+          // Add to pane
+          pane.appendChild(backButton);
 
-            // Picture in picture button
-            if (control === 'pip' && support.pip) {
-                container.appendChild(createButton.call(this, 'pip', defaultAttributes));
-            }
+          // Menu
+          pane.appendChild(
+            createElement('div', {
+              role: 'menu',
+            }),
+          );
 
-            // Airplay button
-            if (control === 'airplay' && support.airplay) {
-                container.appendChild(createButton.call(this, 'airplay', defaultAttributes));
-            }
+          inner.appendChild(pane);
 
-            // Download button
-            if (control === 'download') {
-                const attributes = extend({}, defaultAttributes, {
-                    element: 'a',
-                    href: this.download,
-                    target: '_blank',
-                });
-
-                // Set download attribute for HTML5 only
-                if (this.isHTML5) {
-                    attributes.download = '';
-                }
-
-                const { download } = this.config.urls;
-
-                if (!is.url(download) && this.isEmbed) {
-                    extend(attributes, {
-                        icon: `logo-${this.provider}`,
-                        label: this.provider,
-                    });
-                }
-
-                container.appendChild(createButton.call(this, 'download', attributes));
-            }
+          this.elements.settings.buttons[type] = menuItem;
+          this.elements.settings.panels[type] = pane;
+        });
 
-            // Toggle fullscreen button
-            if (control === 'fullscreen') {
-                container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));
-            }
+        popup.appendChild(inner);
+        wrapper.appendChild(popup);
+        container.appendChild(wrapper);
+
+        this.elements.settings.popup = popup;
+        this.elements.settings.menu = wrapper;
+      }
+
+      // Picture in picture button
+      if (control === 'pip' && support.pip) {
+        container.appendChild(createButton.call(this, 'pip', defaultAttributes));
+      }
+
+      // Airplay button
+      if (control === 'airplay' && support.airplay) {
+        container.appendChild(createButton.call(this, 'airplay', defaultAttributes));
+      }
+
+      // Download button
+      if (control === 'download') {
+        const attributes = extend({}, defaultAttributes, {
+          element: 'a',
+          href: this.download,
+          target: '_blank',
         });
 
-        // Set available quality levels
+        // Set download attribute for HTML5 only
         if (this.isHTML5) {
-            setQualityMenu.call(this, html5.getQualityOptions.call(this));
-        }
-
-        setSpeedMenu.call(this);
-
-        return container;
-    },
-
-    // Insert controls
-    inject() {
-        // Sprite
-        if (this.config.loadSprite) {
-            const icon = controls.getIconUrl.call(this);
-
-            // Only load external sprite using AJAX
-            if (icon.cors) {
-                loadSprite(icon.url, 'sprite-plyr');
-            }
-        }
-
-        // Create a unique ID
-        this.id = Math.floor(Math.random() * 10000);
-
-        // Null by default
-        let container = null;
-        this.elements.controls = null;
-
-        // Set template properties
-        const props = {
-            id: this.id,
-            seektime: this.config.seekTime,
-            title: this.config.title,
-        };
-        let update = true;
-
-        // If function, run it and use output
-        if (is.function(this.config.controls)) {
-            this.config.controls = this.config.controls.call(this, props);
-        }
-
-        // Convert falsy controls to empty array (primarily for empty strings)
-        if (!this.config.controls) {
-            this.config.controls = [];
-        }
-
-        if (is.element(this.config.controls) || is.string(this.config.controls)) {
-            // HTMLElement or Non-empty string passed as the option
-            container = this.config.controls;
-        } else {
-            // Create controls
-            container = controls.create.call(this, {
-                id: this.id,
-                seektime: this.config.seekTime,
-                speed: this.speed,
-                quality: this.quality,
-                captions: captions.getLabel.call(this),
-                // TODO: Looping
-                // loop: 'None',
-            });
-            update = false;
-        }
-
-        // Replace props with their value
-        const replace = input => {
-            let result = input;
-
-            Object.entries(props).forEach(([key, value]) => {
-                result = replaceAll(result, `{${key}}`, value);
-            });
-
-            return result;
-        };
-
-        // Update markup
-        if (update) {
-            if (is.string(this.config.controls)) {
-                container = replace(container);
-            } else if (is.element(container)) {
-                container.innerHTML = replace(container.innerHTML);
-            }
-        }
-
-        // Controls container
-        let target;
-
-        // Inject to custom location
-        if (is.string(this.config.selectors.controls.container)) {
-            target = document.querySelector(this.config.selectors.controls.container);
-        }
-
-        // Inject into the container by default
-        if (!is.element(target)) {
-            target = this.elements.container;
-        }
-
-        // Inject controls HTML (needs to be before captions, hence "afterbegin")
-        const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
-        target[insertMethod]('afterbegin', container);
-
-        // Find the elements if need be
-        if (!is.element(this.elements.controls)) {
-            controls.findElements.call(this);
-        }
-
-        // Add pressed property to buttons
-        if (!is.empty(this.elements.buttons)) {
-            const addProperty = button => {
-                const className = this.config.classNames.controlPressed;
-                Object.defineProperty(button, 'pressed', {
-                    enumerable: true,
-                    get() {
-                        return hasClass(button, className);
-                    },
-                    set(pressed = false) {
-                        toggleClass(button, className, pressed);
-                    },
-                });
-            };
-
-            // Toggle classname when pressed property is set
-            Object.values(this.elements.buttons)
-                .filter(Boolean)
-                .forEach(button => {
-                    if (is.array(button) || is.nodeList(button)) {
-                        Array.from(button)
-                            .filter(Boolean)
-                            .forEach(addProperty);
-                    } else {
-                        addProperty(button);
-                    }
-                });
-        }
-
-        // Edge sometimes doesn't finish the paint so force a repaint
-        if (browser.isEdge) {
-            repaint(target);
-        }
-
-        // Setup tooltips
-        if (this.config.tooltips.controls) {
-            const { classNames, selectors } = this.config;
-            const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;
-            const labels = getElements.call(this, selector);
-
-            Array.from(labels).forEach(label => {
-                toggleClass(label, this.config.classNames.hidden, false);
-                toggleClass(label, this.config.classNames.tooltip, true);
-            });
-        }
-    },
+          attributes.download = '';
+        }
+
+        const { download } = this.config.urls;
+
+        if (!is.url(download) && this.isEmbed) {
+          extend(attributes, {
+            icon: `logo-${this.provider}`,
+            label: this.provider,
+          });
+        }
+
+        container.appendChild(createButton.call(this, 'download', attributes));
+      }
+
+      // Toggle fullscreen button
+      if (control === 'fullscreen') {
+        container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));
+      }
+    });
+
+    // Set available quality levels
+    if (this.isHTML5) {
+      setQualityMenu.call(this, html5.getQualityOptions.call(this));
+    }
+
+    setSpeedMenu.call(this);
+
+    return container;
+  },
+
+  // Insert controls
+  inject() {
+    // Sprite
+    if (this.config.loadSprite) {
+      const icon = controls.getIconUrl.call(this);
+
+      // Only load external sprite using AJAX
+      if (icon.cors) {
+        loadSprite(icon.url, 'sprite-plyr');
+      }
+    }
+
+    // Create a unique ID
+    this.id = Math.floor(Math.random() * 10000);
+
+    // Null by default
+    let container = null;
+    this.elements.controls = null;
+
+    // Set template properties
+    const props = {
+      id: this.id,
+      seektime: this.config.seekTime,
+      title: this.config.title,
+    };
+    let update = true;
+
+    // If function, run it and use output
+    if (is.function(this.config.controls)) {
+      this.config.controls = this.config.controls.call(this, props);
+    }
+
+    // Convert falsy controls to empty array (primarily for empty strings)
+    if (!this.config.controls) {
+      this.config.controls = [];
+    }
+
+    if (is.element(this.config.controls) || is.string(this.config.controls)) {
+      // HTMLElement or Non-empty string passed as the option
+      container = this.config.controls;
+    } else {
+      // Create controls
+      container = controls.create.call(this, {
+        id: this.id,
+        seektime: this.config.seekTime,
+        speed: this.speed,
+        quality: this.quality,
+        captions: captions.getLabel.call(this),
+        // TODO: Looping
+        // loop: 'None',
+      });
+      update = false;
+    }
+
+    // Replace props with their value
+    const replace = input => {
+      let result = input;
+
+      Object.entries(props).forEach(([key, value]) => {
+        result = replaceAll(result, `{${key}}`, value);
+      });
+
+      return result;
+    };
+
+    // Update markup
+    if (update) {
+      if (is.string(this.config.controls)) {
+        container = replace(container);
+      } else if (is.element(container)) {
+        container.innerHTML = replace(container.innerHTML);
+      }
+    }
+
+    // Controls container
+    let target;
+
+    // Inject to custom location
+    if (is.string(this.config.selectors.controls.container)) {
+      target = document.querySelector(this.config.selectors.controls.container);
+    }
+
+    // Inject into the container by default
+    if (!is.element(target)) {
+      target = this.elements.container;
+    }
+
+    // Inject controls HTML (needs to be before captions, hence "afterbegin")
+    const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML';
+    target[insertMethod]('afterbegin', container);
+
+    // Find the elements if need be
+    if (!is.element(this.elements.controls)) {
+      controls.findElements.call(this);
+    }
+
+    // Add pressed property to buttons
+    if (!is.empty(this.elements.buttons)) {
+      const addProperty = button => {
+        const className = this.config.classNames.controlPressed;
+        Object.defineProperty(button, 'pressed', {
+          enumerable: true,
+          get() {
+            return hasClass(button, className);
+          },
+          set(pressed = false) {
+            toggleClass(button, className, pressed);
+          },
+        });
+      };
+
+      // Toggle classname when pressed property is set
+      Object.values(this.elements.buttons)
+        .filter(Boolean)
+        .forEach(button => {
+          if (is.array(button) || is.nodeList(button)) {
+            Array.from(button)
+              .filter(Boolean)
+              .forEach(addProperty);
+          } else {
+            addProperty(button);
+          }
+        });
+    }
+
+    // Edge sometimes doesn't finish the paint so force a repaint
+    if (browser.isEdge) {
+      repaint(target);
+    }
+
+    // Setup tooltips
+    if (this.config.tooltips.controls) {
+      const { classNames, selectors } = this.config;
+      const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`;
+      const labels = getElements.call(this, selector);
+
+      Array.from(labels).forEach(label => {
+        toggleClass(label, this.config.classNames.hidden, false);
+        toggleClass(label, this.config.classNames.tooltip, true);
+      });
+    }
+  },
 };
 
 export default controls;
diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js
index 4d3c89ac..9d433c80 100644
--- a/src/js/fullscreen.js
+++ b/src/js/fullscreen.js
@@ -11,283 +11,280 @@ import is from './utils/is';
 import { silencePromise } from './utils/promise';
 
 class Fullscreen {
-    constructor(player) {
-        // Keep reference to parent
-        this.player = player;
-
-        // 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';
-
-        // 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.toggle();
-        });
-
-        // Tap focus when in fullscreen
-        on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));
-
-        // Update the UI
-        this.update();
+  constructor(player) {
+    // Keep reference to parent
+    this.player = player;
+
+    // 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';
+
+    // 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.toggle();
+    });
+
+    // Tap focus when in fullscreen
+    on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));
+
+    // Update the UI
+    this.update();
+  }
+
+  // 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 '';
     }
 
-    // Determine if native supported
-    static get native() {
-        return !!(
-            document.fullscreenEnabled ||
-            document.webkitFullscreenEnabled ||
-            document.mozFullScreenEnabled ||
-            document.msFullscreenEnabled
-        );
+    // 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;
     }
 
-    // If we're actually using native
-    get usingNative() {
-        return Fullscreen.native && !this.forceFallback;
+    // Fallback using classname
+    if (!Fullscreen.native || this.forceFallback) {
+      return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
     }
 
-    // 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'];
+    const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
 
-        prefixes.some(pre => {
-            if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {
-                value = pre;
-                return true;
-            }
+    return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
+  }
 
-            return false;
-        });
+  // Get target element
+  get target() {
+    return browser.isIos && this.player.config.fullscreen.iosNative
+      ? this.player.media
+      : this.player.elements.container;
+  }
 
-        return value;
+  onChange() {
+    if (!this.enabled) {
+      return;
     }
 
-    static get property() {
-        return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
+    // Update toggle button
+    const button = this.player.elements.buttons.fullscreen;
+    if (is.element(button)) {
+      button.pressed = this.active;
     }
 
-    // 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
-        );
+    // Trigger an event
+    triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+  }
+
+  toggleFallback(toggle = false) {
+    // Store or restore scroll position
+    if (toggle) {
+      this.scrollPosition = {
+        x: window.scrollX || 0,
+        y: window.scrollY || 0,
+      };
+    } else {
+      window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
     }
 
-    // Get active state
-    get active() {
-        if (!this.enabled) {
-            return false;
-        }
+    // Toggle scroll
+    document.body.style.overflow = toggle ? 'hidden' : '';
 
-        // Fallback using classname
-        if (!Fullscreen.native || this.forceFallback) {
-            return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
-        }
+    // Toggle class hook
+    toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle);
 
-        const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
+    // Force full viewport on iPhone X+
+    if (browser.isIos) {
+      let viewport = document.head.querySelector('meta[name="viewport"]');
+      const property = 'viewport-fit=cover';
 
-        return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
-    }
+      // Inject the viewport meta if required
+      if (!viewport) {
+        viewport = document.createElement('meta');
+        viewport.setAttribute('name', 'viewport');
+      }
 
-    // Get target element
-    get target() {
-        return browser.isIos && this.player.config.fullscreen.iosNative
-            ? this.player.media
-            : this.player.elements.container;
-    }
+      // Check if the property already exists
+      const hasProperty = is.string(viewport.content) && viewport.content.includes(property);
 
-    onChange() {
-        if (!this.enabled) {
-            return;
-        }
+      if (toggle) {
+        this.cleanupViewport = !hasProperty;
 
-        // Update toggle button
-        const button = this.player.elements.buttons.fullscreen;
-        if (is.element(button)) {
-            button.pressed = this.active;
+        if (!hasProperty) {
+          viewport.content += `,${property}`;
         }
-
-        // Trigger an event
-        triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
+      } else if (this.cleanupViewport) {
+        viewport.content = viewport.content
+          .split(',')
+          .filter(part => part.trim() !== property)
+          .join(',');
+      }
     }
 
-    toggleFallback(toggle = false) {
-        // Store or restore scroll position
-        if (toggle) {
-            this.scrollPosition = {
-                x: window.scrollX || 0,
-                y: window.scrollY || 0,
-            };
-        } else {
-            window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
-        }
-
-        // Toggle scroll
-        document.body.style.overflow = toggle ? 'hidden' : '';
-
-        // Toggle class hook
-        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
+    this.onChange();
+  }
 
-        // Toggle button and fire events
-        this.onChange();
+  // Trap focus inside container
+  trapFocus(event) {
+    // Bail if iOS, not active, not the tab key
+    if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
+      return;
     }
 
-    // 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;
-        }
-
-        // 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();
-        }
+    // 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');
-        }
-
-        // Add styling hook to show button
-        toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
+  }
+
+  // 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');
     }
 
-    // Make an element fullscreen
-    enter() {
-        if (!this.enabled) {
-            return;
-        }
+    // Add styling hook to show button
+    toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
+  }
 
-        // iOS native fullscreen doesn't need the request step
-        if (browser.isIos && this.player.config.fullscreen.iosNative) {
-            this.target.webkitEnterFullscreen();
-        } else if (!Fullscreen.native || this.forceFallback) {
-            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}`]();
-        }
+  // Make an element fullscreen
+  enter() {
+    if (!this.enabled) {
+      return;
     }
 
-    // Bail from fullscreen
-    exit() {
-        if (!this.enabled) {
-            return;
-        }
+    // iOS native fullscreen doesn't need the request step
+    if (browser.isIos && this.player.config.fullscreen.iosNative) {
+      this.target.webkitEnterFullscreen();
+    } else if (!Fullscreen.native || this.forceFallback) {
+      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}`]();
+    }
+  }
 
-        // 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}`]();
-        }
+  // Bail from fullscreen
+  exit() {
+    if (!this.enabled) {
+      return;
     }
 
-    // Toggle state
-    toggle() {
-        if (!this.active) {
-            this.enter();
-        } else {
-            this.exit();
-        }
+    // 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}`]();
+    }
+  }
+
+  // Toggle state
+  toggle() {
+    if (!this.active) {
+      this.enter();
+    } else {
+      this.exit();
     }
+  }
 }
 
 export default Fullscreen;
diff --git a/src/js/html5.js b/src/js/html5.js
index 6e8c6483..658abf15 100644
--- a/src/js/html5.js
+++ b/src/js/html5.js
@@ -10,138 +10,138 @@ import { silencePromise } from './utils/promise';
 import { setAspectRatio } from './utils/style';
 
 const html5 = {
-    getSources() {
-        if (!this.isHTML5) {
-            return [];
+  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;
         }
 
-        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) {
+        // 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();
+          }
         }
 
-        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,
-                });
-            },
+        // Trigger change event
+        triggerEvent.call(player, player.media, 'qualitychange', false, {
+          quality: input,
         });
-    },
-
-    // Cancel current network requests
+      },
+    });
+  },
+
+  // 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
-    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();
+    this.media.load();
 
-        // Debugging
-        this.debug.log('Cancelled network requests');
-    },
+    // Debugging
+    this.debug.log('Cancelled network requests');
+  },
 };
 
 export default html5;
diff --git a/src/js/listeners.js b/src/js/listeners.js
index cd468083..e4c3c132 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -13,142 +13,142 @@ import { silencePromise } from './utils/promise';
 import { getAspectRatio, setAspectRatio } from './utils/style';
 
 class Listeners {
-    constructor(player) {
-        this.player = player;
-        this.lastKey = null;
-        this.focusTimer = null;
-        this.lastKeyDown = null;
-
-        this.handleKey = this.handleKey.bind(this);
-        this.toggleMenu = this.toggleMenu.bind(this);
-        this.setTabFocus = this.setTabFocus.bind(this);
-        this.firstTouch = this.firstTouch.bind(this);
+  constructor(player) {
+    this.player = player;
+    this.lastKey = null;
+    this.focusTimer = null;
+    this.lastKeyDown = null;
+
+    this.handleKey = this.handleKey.bind(this);
+    this.toggleMenu = this.toggleMenu.bind(this);
+    this.setTabFocus = this.setTabFocus.bind(this);
+    this.firstTouch = this.firstTouch.bind(this);
+  }
+
+  // Handle key presses
+  handleKey(event) {
+    const { player } = this;
+    const { elements } = player;
+    const code = event.keyCode ? event.keyCode : event.which;
+    const pressed = event.type === 'keydown';
+    const repeat = pressed && code === this.lastKey;
+
+    // Bail if a modifier key is set
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
     }
 
-    // Handle key presses
-    handleKey(event) {
-        const { player } = this;
-        const { elements } = player;
-        const code = event.keyCode ? event.keyCode : event.which;
-        const pressed = event.type === 'keydown';
-        const repeat = pressed && code === this.lastKey;
-
-        // Bail if a modifier key is set
-        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
-            return;
-        }
+    // If the event is bubbled from the media element
+    // Firefox doesn't get the keycode for whatever reason
+    if (!is.number(code)) {
+      return;
+    }
 
-        // If the event is bubbled from the media element
-        // Firefox doesn't get the keycode for whatever reason
-        if (!is.number(code)) {
-            return;
+    // Seek by the number keys
+    const seekByKey = () => {
+      // Divide the max duration into 10th's and times by the number value
+      player.currentTime = (player.duration / 10) * (code - 48);
+    };
+
+    // Handle the key on keydown
+    // Reset on keyup
+    if (pressed) {
+      // Check focused element
+      // and if the focused element is not editable (e.g. text input)
+      // and any that accept key input http://webaim.org/techniques/keyboard/
+      const focused = document.activeElement;
+      if (is.element(focused)) {
+        const { editable } = player.config.selectors;
+        const { seek } = elements.inputs;
+
+        if (focused !== seek && matches(focused, editable)) {
+          return;
         }
 
-        // Seek by the number keys
-        const seekByKey = () => {
-            // Divide the max duration into 10th's and times by the number value
-            player.currentTime = (player.duration / 10) * (code - 48);
-        };
-
-        // Handle the key on keydown
-        // Reset on keyup
-        if (pressed) {
-            // Check focused element
-            // and if the focused element is not editable (e.g. text input)
-            // and any that accept key input http://webaim.org/techniques/keyboard/
-            const focused = document.activeElement;
-            if (is.element(focused)) {
-                const { editable } = player.config.selectors;
-                const { seek } = elements.inputs;
-
-                if (focused !== seek && matches(focused, editable)) {
-                    return;
-                }
-
-                if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
-                    return;
-                }
-            }
-
-            // Which keycodes should we prevent default
-            const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
-
-            // If the code is found prevent default (e.g. prevent scrolling for arrows)
-            if (preventDefault.includes(code)) {
-                event.preventDefault();
-                event.stopPropagation();
-            }
-
-            switch (code) {
-                case 48:
-                case 49:
-                case 50:
-                case 51:
-                case 52:
-                case 53:
-                case 54:
-                case 55:
-                case 56:
-                case 57:
-                    // 0-9
-                    if (!repeat) {
-                        seekByKey();
-                    }
-                    break;
-
-                case 32:
-                case 75:
-                    // Space and K key
-                    if (!repeat) {
-                        silencePromise(player.togglePlay());
-                    }
-                    break;
-
-                case 38:
-                    // Arrow up
-                    player.increaseVolume(0.1);
-                    break;
-
-                case 40:
-                    // Arrow down
-                    player.decreaseVolume(0.1);
-                    break;
-
-                case 77:
-                    // M key
-                    if (!repeat) {
-                        player.muted = !player.muted;
-                    }
-                    break;
-
-                case 39:
-                    // Arrow forward
-                    player.forward();
-                    break;
-
-                case 37:
-                    // Arrow back
-                    player.rewind();
-                    break;
-
-                case 70:
-                    // F key
-                    player.fullscreen.toggle();
-                    break;
-
-                case 67:
-                    // C key
-                    if (!repeat) {
-                        player.toggleCaptions();
-                    }
-                    break;
-
-                case 76:
-                    // L key
-                    player.loop = !player.loop;
-                    break;
-
-                /* case 73:
+        if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) {
+          return;
+        }
+      }
+
+      // Which keycodes should we prevent default
+      const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79];
+
+      // If the code is found prevent default (e.g. prevent scrolling for arrows)
+      if (preventDefault.includes(code)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+
+      switch (code) {
+        case 48:
+        case 49:
+        case 50:
+        case 51:
+        case 52:
+        case 53:
+        case 54:
+        case 55:
+        case 56:
+        case 57:
+          // 0-9
+          if (!repeat) {
+            seekByKey();
+          }
+          break;
+
+        case 32:
+        case 75:
+          // Space and K key
+          if (!repeat) {
+            silencePromise(player.togglePlay());
+          }
+          break;
+
+        case 38:
+          // Arrow up
+          player.increaseVolume(0.1);
+          break;
+
+        case 40:
+          // Arrow down
+          player.decreaseVolume(0.1);
+          break;
+
+        case 77:
+          // M key
+          if (!repeat) {
+            player.muted = !player.muted;
+          }
+          break;
+
+        case 39:
+          // Arrow forward
+          player.forward();
+          break;
+
+        case 37:
+          // Arrow back
+          player.rewind();
+          break;
+
+        case 70:
+          // F key
+          player.fullscreen.toggle();
+          break;
+
+        case 67:
+          // C key
+          if (!repeat) {
+            player.toggleCaptions();
+          }
+          break;
+
+        case 76:
+          // L key
+          player.loop = !player.loop;
+          break;
+
+        /* case 73:
                     this.setLoop('start');
                     break;
 
@@ -160,716 +160,716 @@ class Listeners {
                     this.setLoop('end');
                     break; */
 
-                default:
-                    break;
-            }
+        default:
+          break;
+      }
 
-            // Escape is handle natively when in full screen
-            // So we only need to worry about non native
-            if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) {
-                player.fullscreen.toggle();
-            }
+      // Escape is handle natively when in full screen
+      // So we only need to worry about non native
+      if (code === 27 && !player.fullscreen.usingNative && player.fullscreen.active) {
+        player.fullscreen.toggle();
+      }
 
-            // Store last code for next cycle
-            this.lastKey = code;
-        } else {
-            this.lastKey = null;
-        }
+      // Store last code for next cycle
+      this.lastKey = code;
+    } else {
+      this.lastKey = null;
     }
+  }
 
-    // Toggle menu
-    toggleMenu(event) {
-        controls.toggleMenu.call(this.player, event);
-    }
+  // Toggle menu
+  toggleMenu(event) {
+    controls.toggleMenu.call(this.player, event);
+  }
 
-    // Device is touch enabled
-    firstTouch() {
-        const { player } = this;
-        const { elements } = player;
+  // Device is touch enabled
+  firstTouch() {
+    const { player } = this;
+    const { elements } = player;
 
-        player.touch = true;
+    player.touch = true;
 
-        // Add touch class
-        toggleClass(elements.container, player.config.classNames.isTouch, true);
-    }
+    // Add touch class
+    toggleClass(elements.container, player.config.classNames.isTouch, true);
+  }
 
-    setTabFocus(event) {
-        const { player } = this;
-        const { elements } = player;
+  setTabFocus(event) {
+    const { player } = this;
+    const { elements } = player;
 
-        clearTimeout(this.focusTimer);
+    clearTimeout(this.focusTimer);
 
-        // Ignore any key other than tab
-        if (event.type === 'keydown' && event.which !== 9) {
-            return;
-        }
-
-        // Store reference to event timeStamp
-        if (event.type === 'keydown') {
-            this.lastKeyDown = event.timeStamp;
-        }
-
-        // Remove current classes
-        const removeCurrent = () => {
-            const className = player.config.classNames.tabFocus;
-            const current = getElements.call(player, `.${className}`);
-            toggleClass(current, className, false);
-        };
-
-        // Determine if a key was pressed to trigger this event
-        const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20;
-
-        // Ignore focus events if a key was pressed prior
-        if (event.type === 'focus' && !wasKeyDown) {
-            return;
-        }
-
-        // Remove all current
-        removeCurrent();
-
-        // Delay the adding of classname until the focus has changed
-        // This event fires before the focusin event
-        this.focusTimer = setTimeout(() => {
-            const focused = document.activeElement;
-
-            // Ignore if current focus element isn't inside the player
-            if (!elements.container.contains(focused)) {
-                return;
-            }
-
-            toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
-        }, 10);
+    // Ignore any key other than tab
+    if (event.type === 'keydown' && event.which !== 9) {
+      return;
     }
 
-    // Global window & document listeners
-    global(toggle = true) {
-        const { player } = this;
-
-        // Keyboard shortcuts
-        if (player.config.keyboard.global) {
-            toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);
-        }
+    // Store reference to event timeStamp
+    if (event.type === 'keydown') {
+      this.lastKeyDown = event.timeStamp;
+    }
 
-        // Click anywhere closes menu
-        toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);
+    // Remove current classes
+    const removeCurrent = () => {
+      const className = player.config.classNames.tabFocus;
+      const current = getElements.call(player, `.${className}`);
+      toggleClass(current, className, false);
+    };
 
-        // Detect touch by events
-        once.call(player, document.body, 'touchstart', this.firstTouch);
+    // Determine if a key was pressed to trigger this event
+    const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20;
 
-        // Tab focus detection
-        toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+    // Ignore focus events if a key was pressed prior
+    if (event.type === 'focus' && !wasKeyDown) {
+      return;
     }
 
-    // Container listeners
-    container() {
-        const { player } = this;
-        const { config, elements, timers } = player;
+    // Remove all current
+    removeCurrent();
 
-        // Keyboard shortcuts
-        if (!config.keyboard.global && config.keyboard.focused) {
-            on.call(player, elements.container, 'keydown keyup', this.handleKey, false);
-        }
+    // Delay the adding of classname until the focus has changed
+    // This event fires before the focusin event
+    this.focusTimer = setTimeout(() => {
+      const focused = document.activeElement;
 
-        // Toggle controls on mouse events and entering fullscreen
-        on.call(
-            player,
-            elements.container,
-            'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
-            event => {
-                const { controls: controlsElement } = elements;
-
-                // Remove button states for fullscreen
-                if (controlsElement && event.type === 'enterfullscreen') {
-                    controlsElement.pressed = false;
-                    controlsElement.hover = false;
-                }
-
-                // Show, then hide after a timeout unless another control event occurs
-                const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
-                let delay = 0;
-
-                if (show) {
-                    ui.toggleControls.call(player, true);
-                    // Use longer timeout for touch devices
-                    delay = player.touch ? 3000 : 2000;
-                }
-
-                // Clear timer
-                clearTimeout(timers.controls);
-
-                // Set new timer to prevent flicker when seeking
-                timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
-            },
-        );
+      // Ignore if current focus element isn't inside the player
+      if (!elements.container.contains(focused)) {
+        return;
+      }
 
-        // Set a gutter for Vimeo
-        const setGutter = (ratio, padding, toggle) => {
-            if (!player.isVimeo) {
-                return;
-            }
-
-            const target = player.elements.wrapper.firstChild;
-            const [, y] = ratio;
-            const [videoX, videoY] = getAspectRatio.call(player);
-
-            target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
-            target.style.margin = toggle ? '0 auto' : null;
-        };
-
-        // Resize on fullscreen change
-        const setPlayerSize = measure => {
-            // If we don't need to measure the viewport
-            if (!measure) {
-                return setAspectRatio.call(player);
-            }
-
-            const rect = elements.container.getBoundingClientRect();
-            const { width, height } = rect;
-
-            return setAspectRatio.call(player, `${width}:${height}`);
-        };
-
-        const resized = () => {
-            clearTimeout(timers.resized);
-            timers.resized = setTimeout(setPlayerSize, 50);
-        };
-
-        on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
-            const { target, usingNative } = player.fullscreen;
-
-            // Ignore events not from target
-            if (target !== elements.container) {
-                return;
-            }
-
-            // If it's not an embed and no ratio specified
-            if (!player.isEmbed && is.empty(player.config.ratio)) {
-                return;
-            }
-
-            const isEnter = event.type === 'enterfullscreen';
-            // Set the player size when entering fullscreen to viewport size
-            const { padding, ratio } = setPlayerSize(isEnter);
-
-            // Set Vimeo gutter
-            setGutter(ratio, padding, isEnter);
-
-            // If not using native fullscreen, we need to check for resizes of viewport
-            if (!usingNative) {
-                if (isEnter) {
-                    on.call(player, window, 'resize', resized);
-                } else {
-                    off.call(player, window, 'resize', resized);
-                }
-            }
-        });
-    }
+      toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
+    }, 10);
+  }
 
-    // Listen for media events
-    media() {
-        const { player } = this;
-        const { elements } = player;
+  // Global window & document listeners
+  global(toggle = true) {
+    const { player } = this;
 
-        // Time change on media
-        on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));
+    // Keyboard shortcuts
+    if (player.config.keyboard.global) {
+      toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false);
+    }
 
-        // Display duration
-        on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
-            controls.durationUpdate.call(player, event),
-        );
+    // Click anywhere closes menu
+    toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle);
 
-        // Handle the media finishing
-        on.call(player, player.media, 'ended', () => {
-            // Show poster on end
-            if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
-                // Restart
-                player.restart();
-
-                // Call pause otherwise IE11 will start playing the video again
-                player.pause();
-            }
-        });
-
-        // Check for buffer progress
-        on.call(player, player.media, 'progress playing seeking seeked', event =>
-            controls.updateProgress.call(player, event),
-        );
+    // Detect touch by events
+    once.call(player, document.body, 'touchstart', this.firstTouch);
 
-        // Handle volume changes
-        on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));
+    // Tab focus detection
+    toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+  }
 
-        // Handle play/pause
-        on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
-            ui.checkPlaying.call(player, event),
-        );
+  // Container listeners
+  container() {
+    const { player } = this;
+    const { config, elements, timers } = player;
 
-        // Loading state
-        on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
-
-        // Click video
-        if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
-            // Re-fetch the wrapper
-            const wrapper = getElement.call(player, `.${player.config.classNames.video}`);
-
-            // Bail if there's no wrapper (this should never happen)
-            if (!is.element(wrapper)) {
-                return;
-            }
-
-            // On click play, pause or restart
-            on.call(player, elements.container, 'click', event => {
-                const targets = [elements.container, wrapper];
-
-                // Ignore if click if not container or in video wrapper
-                if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
-                    return;
-                }
-
-                // Touch devices will just show controls (if hidden)
-                if (player.touch && player.config.hideControls) {
-                    return;
-                }
-
-                if (player.ended) {
-                    this.proxy(event, player.restart, 'restart');
-                    this.proxy(
-                        event,
-                        () => {
-                            silencePromise(player.play());
-                        },
-                        'play',
-                    );
-                } else {
-                    this.proxy(
-                        event,
-                        () => {
-                            silencePromise(player.togglePlay());
-                        },
-                        'play',
-                    );
-                }
-            });
-        }
+    // Keyboard shortcuts
+    if (!config.keyboard.global && config.keyboard.focused) {
+      on.call(player, elements.container, 'keydown keyup', this.handleKey, false);
+    }
 
-        // Disable right click
-        if (player.supported.ui && player.config.disableContextMenu) {
-            on.call(
-                player,
-                elements.wrapper,
-                'contextmenu',
-                event => {
-                    event.preventDefault();
-                },
-                false,
-            );
+    // Toggle controls on mouse events and entering fullscreen
+    on.call(
+      player,
+      elements.container,
+      'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
+      event => {
+        const { controls: controlsElement } = elements;
+
+        // Remove button states for fullscreen
+        if (controlsElement && event.type === 'enterfullscreen') {
+          controlsElement.pressed = false;
+          controlsElement.hover = false;
         }
 
-        // Volume change
-        on.call(player, player.media, 'volumechange', () => {
-            // Save to storage
-            player.storage.set({
-                volume: player.volume,
-                muted: player.muted,
-            });
-        });
-
-        // Speed change
-        on.call(player, player.media, 'ratechange', () => {
-            // Update UI
-            controls.updateSetting.call(player, 'speed');
-
-            // Save to storage
-            player.storage.set({ speed: player.speed });
-        });
-
-        // Quality change
-        on.call(player, player.media, 'qualitychange', event => {
-            // Update UI
-            controls.updateSetting.call(player, 'quality', null, event.detail.quality);
-        });
-
-        // Update download link when ready and if quality changes
-        on.call(player, player.media, 'ready qualitychange', () => {
-            controls.setDownloadUrl.call(player);
-        });
-
-        // Proxy events to container
-        // Bubble up key events for Edge
-        const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
-
-        on.call(player, player.media, proxyEvents, event => {
-            let { detail = {} } = event;
-
-            // Get error details from media
-            if (event.type === 'error') {
-                detail = player.media.error;
-            }
-
-            triggerEvent.call(player, elements.container, event.type, true, detail);
-        });
-    }
-
-    // Run default and custom handlers
-    proxy(event, defaultHandler, customHandlerKey) {
-        const { player } = this;
-        const customHandler = player.config.listeners[customHandlerKey];
-        const hasCustomHandler = is.function(customHandler);
-        let returned = true;
+        // Show, then hide after a timeout unless another control event occurs
+        const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
+        let delay = 0;
 
-        // Execute custom handler
-        if (hasCustomHandler) {
-            returned = customHandler.call(player, event);
+        if (show) {
+          ui.toggleControls.call(player, true);
+          // Use longer timeout for touch devices
+          delay = player.touch ? 3000 : 2000;
         }
 
-        // Only call default handler if not prevented in custom handler
-        if (returned !== false && is.function(defaultHandler)) {
-            defaultHandler.call(player, event);
+        // Clear timer
+        clearTimeout(timers.controls);
+
+        // Set new timer to prevent flicker when seeking
+        timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
+      },
+    );
+
+    // Set a gutter for Vimeo
+    const setGutter = (ratio, padding, toggle) => {
+      if (!player.isVimeo) {
+        return;
+      }
+
+      const target = player.elements.wrapper.firstChild;
+      const [, y] = ratio;
+      const [videoX, videoY] = getAspectRatio.call(player);
+
+      target.style.maxWidth = toggle ? `${(y / videoY) * videoX}px` : null;
+      target.style.margin = toggle ? '0 auto' : null;
+    };
+
+    // Resize on fullscreen change
+    const setPlayerSize = measure => {
+      // If we don't need to measure the viewport
+      if (!measure) {
+        return setAspectRatio.call(player);
+      }
+
+      const rect = elements.container.getBoundingClientRect();
+      const { width, height } = rect;
+
+      return setAspectRatio.call(player, `${width}:${height}`);
+    };
+
+    const resized = () => {
+      clearTimeout(timers.resized);
+      timers.resized = setTimeout(setPlayerSize, 50);
+    };
+
+    on.call(player, elements.container, 'enterfullscreen exitfullscreen', event => {
+      const { target, usingNative } = player.fullscreen;
+
+      // Ignore events not from target
+      if (target !== elements.container) {
+        return;
+      }
+
+      // If it's not an embed and no ratio specified
+      if (!player.isEmbed && is.empty(player.config.ratio)) {
+        return;
+      }
+
+      const isEnter = event.type === 'enterfullscreen';
+      // Set the player size when entering fullscreen to viewport size
+      const { padding, ratio } = setPlayerSize(isEnter);
+
+      // Set Vimeo gutter
+      setGutter(ratio, padding, isEnter);
+
+      // If not using native fullscreen, we need to check for resizes of viewport
+      if (!usingNative) {
+        if (isEnter) {
+          on.call(player, window, 'resize', resized);
+        } else {
+          off.call(player, window, 'resize', resized);
         }
-    }
-
-    // Trigger custom and default handlers
-    bind(element, type, defaultHandler, customHandlerKey, passive = true) {
-        const { player } = this;
-        const customHandler = player.config.listeners[customHandlerKey];
-        const hasCustomHandler = is.function(customHandler);
-
-        on.call(
-            player,
-            element,
-            type,
-            event => this.proxy(event, defaultHandler, customHandlerKey),
-            passive && !hasCustomHandler,
-        );
-    }
-
-    // Listen for control events
-    controls() {
-        const { player } = this;
-        const { elements } = player;
-        // IE doesn't support input event, so we fallback to change
-        const inputEvent = browser.isIE ? 'change' : 'input';
-
-        // Play/pause toggle
-        if (elements.buttons.play) {
-            Array.from(elements.buttons.play).forEach(button => {
-                this.bind(
-                    button,
-                    'click',
-                    () => {
-                        silencePromise(player.togglePlay());
-                    },
-                    'play',
-                );
-            });
+      }
+    });
+  }
+
+  // Listen for media events
+  media() {
+    const { player } = this;
+    const { elements } = player;
+
+    // Time change on media
+    on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event));
+
+    // Display duration
+    on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event =>
+      controls.durationUpdate.call(player, event),
+    );
+
+    // Handle the media finishing
+    on.call(player, player.media, 'ended', () => {
+      // Show poster on end
+      if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) {
+        // Restart
+        player.restart();
+
+        // Call pause otherwise IE11 will start playing the video again
+        player.pause();
+      }
+    });
+
+    // Check for buffer progress
+    on.call(player, player.media, 'progress playing seeking seeked', event =>
+      controls.updateProgress.call(player, event),
+    );
+
+    // Handle volume changes
+    on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event));
+
+    // Handle play/pause
+    on.call(player, player.media, 'playing play pause ended emptied timeupdate', event =>
+      ui.checkPlaying.call(player, event),
+    );
+
+    // Loading state
+    on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
+
+    // Click video
+    if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
+      // Re-fetch the wrapper
+      const wrapper = getElement.call(player, `.${player.config.classNames.video}`);
+
+      // Bail if there's no wrapper (this should never happen)
+      if (!is.element(wrapper)) {
+        return;
+      }
+
+      // On click play, pause or restart
+      on.call(player, elements.container, 'click', event => {
+        const targets = [elements.container, wrapper];
+
+        // Ignore if click if not container or in video wrapper
+        if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
+          return;
         }
 
-        // Pause
-        this.bind(elements.buttons.restart, 'click', player.restart, 'restart');
-
-        // Rewind
-        this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');
-
-        // Rewind
-        this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');
-
-        // Mute toggle
-        this.bind(
-            elements.buttons.mute,
-            'click',
-            () => {
-                player.muted = !player.muted;
-            },
-            'mute',
-        );
-
-        // Captions toggle
-        this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions());
-
-        // Download
-        this.bind(
-            elements.buttons.download,
-            'click',
-            () => {
-                triggerEvent.call(player, player.media, 'download');
-            },
-            'download',
-        );
+        // Touch devices will just show controls (if hidden)
+        if (player.touch && player.config.hideControls) {
+          return;
+        }
 
-        // Fullscreen toggle
-        this.bind(
-            elements.buttons.fullscreen,
-            'click',
+        if (player.ended) {
+          this.proxy(event, player.restart, 'restart');
+          this.proxy(
+            event,
             () => {
-                player.fullscreen.toggle();
+              silencePromise(player.play());
             },
-            'fullscreen',
-        );
-
-        // Picture-in-Picture
-        this.bind(
-            elements.buttons.pip,
-            'click',
+            'play',
+          );
+        } else {
+          this.proxy(
+            event,
             () => {
-                player.pip = 'toggle';
+              silencePromise(player.togglePlay());
             },
-            'pip',
-        );
+            'play',
+          );
+        }
+      });
+    }
 
-        // Airplay
-        this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');
+    // Disable right click
+    if (player.supported.ui && player.config.disableContextMenu) {
+      on.call(
+        player,
+        elements.wrapper,
+        'contextmenu',
+        event => {
+          event.preventDefault();
+        },
+        false,
+      );
+    }
 
-        // Settings menu - click toggle
-        this.bind(
-            elements.buttons.settings,
-            'click',
-            event => {
-                // Prevent the document click listener closing the menu
-                event.stopPropagation();
-                event.preventDefault();
-
-                controls.toggleMenu.call(player, event);
-            },
-            null,
-            false,
-        ); // Can't be passive as we're preventing default
+    // Volume change
+    on.call(player, player.media, 'volumechange', () => {
+      // Save to storage
+      player.storage.set({
+        volume: player.volume,
+        muted: player.muted,
+      });
+    });
+
+    // Speed change
+    on.call(player, player.media, 'ratechange', () => {
+      // Update UI
+      controls.updateSetting.call(player, 'speed');
+
+      // Save to storage
+      player.storage.set({ speed: player.speed });
+    });
+
+    // Quality change
+    on.call(player, player.media, 'qualitychange', event => {
+      // Update UI
+      controls.updateSetting.call(player, 'quality', null, event.detail.quality);
+    });
+
+    // Update download link when ready and if quality changes
+    on.call(player, player.media, 'ready qualitychange', () => {
+      controls.setDownloadUrl.call(player);
+    });
+
+    // Proxy events to container
+    // Bubble up key events for Edge
+    const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' ');
+
+    on.call(player, player.media, proxyEvents, event => {
+      let { detail = {} } = event;
+
+      // Get error details from media
+      if (event.type === 'error') {
+        detail = player.media.error;
+      }
+
+      triggerEvent.call(player, elements.container, event.type, true, detail);
+    });
+  }
+
+  // Run default and custom handlers
+  proxy(event, defaultHandler, customHandlerKey) {
+    const { player } = this;
+    const customHandler = player.config.listeners[customHandlerKey];
+    const hasCustomHandler = is.function(customHandler);
+    let returned = true;
+
+    // Execute custom handler
+    if (hasCustomHandler) {
+      returned = customHandler.call(player, event);
+    }
 
-        // Settings menu - keyboard toggle
-        // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
+    // Only call default handler if not prevented in custom handler
+    if (returned !== false && is.function(defaultHandler)) {
+      defaultHandler.call(player, event);
+    }
+  }
+
+  // Trigger custom and default handlers
+  bind(element, type, defaultHandler, customHandlerKey, passive = true) {
+    const { player } = this;
+    const customHandler = player.config.listeners[customHandlerKey];
+    const hasCustomHandler = is.function(customHandler);
+
+    on.call(
+      player,
+      element,
+      type,
+      event => this.proxy(event, defaultHandler, customHandlerKey),
+      passive && !hasCustomHandler,
+    );
+  }
+
+  // Listen for control events
+  controls() {
+    const { player } = this;
+    const { elements } = player;
+    // IE doesn't support input event, so we fallback to change
+    const inputEvent = browser.isIE ? 'change' : 'input';
+
+    // Play/pause toggle
+    if (elements.buttons.play) {
+      Array.from(elements.buttons.play).forEach(button => {
         this.bind(
-            elements.buttons.settings,
-            'keyup',
-            event => {
-                const code = event.which;
-
-                // We only care about space and return
-                if (![13, 32].includes(code)) {
-                    return;
-                }
-
-                // Because return triggers a click anyway, all we need to do is set focus
-                if (code === 13) {
-                    controls.focusFirstMenuItem.call(player, null, true);
-                    return;
-                }
-
-                // Prevent scroll
-                event.preventDefault();
-
-                // Prevent playing video (Firefox)
-                event.stopPropagation();
-
-                // Toggle menu
-                controls.toggleMenu.call(player, event);
-            },
-            null,
-            false, // Can't be passive as we're preventing default
+          button,
+          'click',
+          () => {
+            silencePromise(player.togglePlay());
+          },
+          'play',
         );
+      });
+    }
 
-        // Escape closes menu
-        this.bind(elements.settings.menu, 'keydown', event => {
-            if (event.which === 27) {
-                controls.toggleMenu.call(player, event);
-            }
-        });
-
-        // Set range input alternative "value", which matches the tooltip time (#954)
-        this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
-            const rect = elements.progress.getBoundingClientRect();
-            const percent = (100 / rect.width) * (event.pageX - rect.left);
-            event.currentTarget.setAttribute('seek-value', percent);
-        });
-
-        // Pause while seeking
-        this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
-            const seek = event.currentTarget;
-            const code = event.keyCode ? event.keyCode : event.which;
-            const attribute = 'play-on-seeked';
-
-            if (is.keyboardEvent(event) && code !== 39 && code !== 37) {
-                return;
-            }
-
-            // Record seek time so we can prevent hiding controls for a few seconds after seek
-            player.lastSeekTime = Date.now();
-
-            // Was playing before?
-            const play = seek.hasAttribute(attribute);
-            // Done seeking
-            const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
-
-            // If we're done seeking and it was playing, resume playback
-            if (play && done) {
-                seek.removeAttribute(attribute);
-                silencePromise(player.play());
-            } else if (!done && player.playing) {
-                seek.setAttribute(attribute, '');
-                player.pause();
-            }
-        });
-
-        // Fix range inputs on iOS
-        // Super weird iOS bug where after you interact with an <input type="range">,
-        // it takes over further interactions on the page. This is a hack
-        if (browser.isIos) {
-            const inputs = getElements.call(player, 'input[type="range"]');
-            Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
+    // Pause
+    this.bind(elements.buttons.restart, 'click', player.restart, 'restart');
+
+    // Rewind
+    this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind');
+
+    // Rewind
+    this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward');
+
+    // Mute toggle
+    this.bind(
+      elements.buttons.mute,
+      'click',
+      () => {
+        player.muted = !player.muted;
+      },
+      'mute',
+    );
+
+    // Captions toggle
+    this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions());
+
+    // Download
+    this.bind(
+      elements.buttons.download,
+      'click',
+      () => {
+        triggerEvent.call(player, player.media, 'download');
+      },
+      'download',
+    );
+
+    // Fullscreen toggle
+    this.bind(
+      elements.buttons.fullscreen,
+      'click',
+      () => {
+        player.fullscreen.toggle();
+      },
+      'fullscreen',
+    );
+
+    // Picture-in-Picture
+    this.bind(
+      elements.buttons.pip,
+      'click',
+      () => {
+        player.pip = 'toggle';
+      },
+      'pip',
+    );
+
+    // Airplay
+    this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay');
+
+    // Settings menu - click toggle
+    this.bind(
+      elements.buttons.settings,
+      'click',
+      event => {
+        // Prevent the document click listener closing the menu
+        event.stopPropagation();
+        event.preventDefault();
+
+        controls.toggleMenu.call(player, event);
+      },
+      null,
+      false,
+    ); // Can't be passive as we're preventing default
+
+    // Settings menu - keyboard toggle
+    // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143
+    this.bind(
+      elements.buttons.settings,
+      'keyup',
+      event => {
+        const code = event.which;
+
+        // We only care about space and return
+        if (![13, 32].includes(code)) {
+          return;
         }
 
-        // Seek
-        this.bind(
-            elements.inputs.seek,
-            inputEvent,
-            event => {
-                const seek = event.currentTarget;
-                // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
-                let seekTo = seek.getAttribute('seek-value');
-
-                if (is.empty(seekTo)) {
-                    seekTo = seek.value;
-                }
-
-                seek.removeAttribute('seek-value');
-
-                player.currentTime = (seekTo / seek.max) * player.duration;
-            },
-            'seek',
-        );
-
-        // Seek tooltip
-        this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>
-            controls.updateSeekTooltip.call(player, event),
-        );
-
-        // Preview thumbnails plugin
-        // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this
-        this.bind(elements.progress, 'mousemove touchmove', event => {
-            const { previewThumbnails } = player;
-
-            if (previewThumbnails && previewThumbnails.loaded) {
-                previewThumbnails.startMove(event);
-            }
-        });
-
-        // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
-        this.bind(elements.progress, 'mouseleave touchend click', () => {
-            const { previewThumbnails } = player;
-
-            if (previewThumbnails && previewThumbnails.loaded) {
-                previewThumbnails.endMove(false, true);
-            }
-        });
-
-        // Show scrubbing preview
-        this.bind(elements.progress, 'mousedown touchstart', event => {
-            const { previewThumbnails } = player;
-
-            if (previewThumbnails && previewThumbnails.loaded) {
-                previewThumbnails.startScrubbing(event);
-            }
-        });
-
-        this.bind(elements.progress, 'mouseup touchend', event => {
-            const { previewThumbnails } = player;
-
-            if (previewThumbnails && previewThumbnails.loaded) {
-                previewThumbnails.endScrubbing(event);
-            }
-        });
-
-        // Polyfill for lower fill in <input type="range"> for webkit
-        if (browser.isWebkit) {
-            Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
-                this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
-            });
+        // Because return triggers a click anyway, all we need to do is set focus
+        if (code === 13) {
+          controls.focusFirstMenuItem.call(player, null, true);
+          return;
         }
 
-        // Current time invert
-        // Only if one time element is used for both currentTime and duration
-        if (player.config.toggleInvert && !is.element(elements.display.duration)) {
-            this.bind(elements.display.currentTime, 'click', () => {
-                // Do nothing if we're at the start
-                if (player.currentTime === 0) {
-                    return;
-                }
-
-                player.config.invertTime = !player.config.invertTime;
+        // Prevent scroll
+        event.preventDefault();
+
+        // Prevent playing video (Firefox)
+        event.stopPropagation();
+
+        // Toggle menu
+        controls.toggleMenu.call(player, event);
+      },
+      null,
+      false, // Can't be passive as we're preventing default
+    );
+
+    // Escape closes menu
+    this.bind(elements.settings.menu, 'keydown', event => {
+      if (event.which === 27) {
+        controls.toggleMenu.call(player, event);
+      }
+    });
+
+    // Set range input alternative "value", which matches the tooltip time (#954)
+    this.bind(elements.inputs.seek, 'mousedown mousemove', event => {
+      const rect = elements.progress.getBoundingClientRect();
+      const percent = (100 / rect.width) * (event.pageX - rect.left);
+      event.currentTarget.setAttribute('seek-value', percent);
+    });
+
+    // Pause while seeking
+    this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => {
+      const seek = event.currentTarget;
+      const code = event.keyCode ? event.keyCode : event.which;
+      const attribute = 'play-on-seeked';
+
+      if (is.keyboardEvent(event) && code !== 39 && code !== 37) {
+        return;
+      }
+
+      // Record seek time so we can prevent hiding controls for a few seconds after seek
+      player.lastSeekTime = Date.now();
+
+      // Was playing before?
+      const play = seek.hasAttribute(attribute);
+      // Done seeking
+      const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
+
+      // If we're done seeking and it was playing, resume playback
+      if (play && done) {
+        seek.removeAttribute(attribute);
+        silencePromise(player.play());
+      } else if (!done && player.playing) {
+        seek.setAttribute(attribute, '');
+        player.pause();
+      }
+    });
+
+    // Fix range inputs on iOS
+    // Super weird iOS bug where after you interact with an <input type="range">,
+    // it takes over further interactions on the page. This is a hack
+    if (browser.isIos) {
+      const inputs = getElements.call(player, 'input[type="range"]');
+      Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target)));
+    }
 
-                controls.timeUpdate.call(player);
-            });
+    // Seek
+    this.bind(
+      elements.inputs.seek,
+      inputEvent,
+      event => {
+        const seek = event.currentTarget;
+        // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
+        let seekTo = seek.getAttribute('seek-value');
+
+        if (is.empty(seekTo)) {
+          seekTo = seek.value;
         }
 
-        // Volume
-        this.bind(
-            elements.inputs.volume,
-            inputEvent,
-            event => {
-                player.volume = event.target.value;
-            },
-            'volume',
-        );
-
-        // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
-        this.bind(elements.controls, 'mouseenter mouseleave', event => {
-            elements.controls.hover = !player.touch && event.type === 'mouseenter';
-        });
-
-        // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
-        this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
-            elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
-        });
-
-        // Show controls when they receive focus (e.g., when using keyboard tab key)
-        this.bind(elements.controls, 'focusin', () => {
-            const { config, timers } = player;
-
-            // Skip transition to prevent focus from scrolling the parent element
-            toggleClass(elements.controls, config.classNames.noTransition, true);
-
-            // Toggle
-            ui.toggleControls.call(player, true);
-
-            // Restore transition
-            setTimeout(() => {
-                toggleClass(elements.controls, config.classNames.noTransition, false);
-            }, 0);
-
-            // Delay a little more for mouse users
-            const delay = this.touch ? 3000 : 4000;
+        seek.removeAttribute('seek-value');
+
+        player.currentTime = (seekTo / seek.max) * player.duration;
+      },
+      'seek',
+    );
+
+    // Seek tooltip
+    this.bind(elements.progress, 'mouseenter mouseleave mousemove', event =>
+      controls.updateSeekTooltip.call(player, event),
+    );
+
+    // Preview thumbnails plugin
+    // TODO: Really need to work on some sort of plug-in wide event bus or pub-sub for this
+    this.bind(elements.progress, 'mousemove touchmove', event => {
+      const { previewThumbnails } = player;
+
+      if (previewThumbnails && previewThumbnails.loaded) {
+        previewThumbnails.startMove(event);
+      }
+    });
+
+    // Hide thumbnail preview - on mouse click, mouse leave, and video play/seek. All four are required, e.g., for buffering
+    this.bind(elements.progress, 'mouseleave touchend click', () => {
+      const { previewThumbnails } = player;
+
+      if (previewThumbnails && previewThumbnails.loaded) {
+        previewThumbnails.endMove(false, true);
+      }
+    });
+
+    // Show scrubbing preview
+    this.bind(elements.progress, 'mousedown touchstart', event => {
+      const { previewThumbnails } = player;
+
+      if (previewThumbnails && previewThumbnails.loaded) {
+        previewThumbnails.startScrubbing(event);
+      }
+    });
+
+    this.bind(elements.progress, 'mouseup touchend', event => {
+      const { previewThumbnails } = player;
+
+      if (previewThumbnails && previewThumbnails.loaded) {
+        previewThumbnails.endScrubbing(event);
+      }
+    });
+
+    // Polyfill for lower fill in <input type="range"> for webkit
+    if (browser.isWebkit) {
+      Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => {
+        this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target));
+      });
+    }
 
-            // Clear timer
-            clearTimeout(timers.controls);
+    // Current time invert
+    // Only if one time element is used for both currentTime and duration
+    if (player.config.toggleInvert && !is.element(elements.display.duration)) {
+      this.bind(elements.display.currentTime, 'click', () => {
+        // Do nothing if we're at the start
+        if (player.currentTime === 0) {
+          return;
+        }
 
-            // Hide again after delay
-            timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
-        });
+        player.config.invertTime = !player.config.invertTime;
 
-        // Mouse wheel for volume
-        this.bind(
-            elements.inputs.volume,
-            'wheel',
-            event => {
-                // Detect "natural" scroll - suppored on OS X Safari only
-                // Other browsers on OS X will be inverted until support improves
-                const inverted = event.webkitDirectionInvertedFromDevice;
-                // Get delta from event. Invert if `inverted` is true
-                const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
-                // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
-                const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
-
-                // Change the volume by 2%
-                player.increaseVolume(direction / 50);
-
-                // Don't break page scrolling at max and min
-                const { volume } = player.media;
-                if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
-                    event.preventDefault();
-                }
-            },
-            'volume',
-            false,
-        );
+        controls.timeUpdate.call(player);
+      });
     }
+
+    // Volume
+    this.bind(
+      elements.inputs.volume,
+      inputEvent,
+      event => {
+        player.volume = event.target.value;
+      },
+      'volume',
+    );
+
+    // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting)
+    this.bind(elements.controls, 'mouseenter mouseleave', event => {
+      elements.controls.hover = !player.touch && event.type === 'mouseenter';
+    });
+
+    // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
+    this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => {
+      elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
+    });
+
+    // Show controls when they receive focus (e.g., when using keyboard tab key)
+    this.bind(elements.controls, 'focusin', () => {
+      const { config, timers } = player;
+
+      // Skip transition to prevent focus from scrolling the parent element
+      toggleClass(elements.controls, config.classNames.noTransition, true);
+
+      // Toggle
+      ui.toggleControls.call(player, true);
+
+      // Restore transition
+      setTimeout(() => {
+        toggleClass(elements.controls, config.classNames.noTransition, false);
+      }, 0);
+
+      // Delay a little more for mouse users
+      const delay = this.touch ? 3000 : 4000;
+
+      // Clear timer
+      clearTimeout(timers.controls);
+
+      // Hide again after delay
+      timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay);
+    });
+
+    // Mouse wheel for volume
+    this.bind(
+      elements.inputs.volume,
+      'wheel',
+      event => {
+        // Detect "natural" scroll - suppored on OS X Safari only
+        // Other browsers on OS X will be inverted until support improves
+        const inverted = event.webkitDirectionInvertedFromDevice;
+        // Get delta from event. Invert if `inverted` is true
+        const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
+        // Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
+        const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);
+
+        // Change the volume by 2%
+        player.increaseVolume(direction / 50);
+
+        // Don't break page scrolling at max and min
+        const { volume } = player.media;
+        if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) {
+          event.preventDefault();
+        }
+      },
+      'volume',
+      false,
+    );
+  }
 }
 
 export default Listeners;
diff --git a/src/js/media.js b/src/js/media.js
index 8c08456d..936b4365 100644
--- a/src/js/media.js
+++ b/src/js/media.js
@@ -8,54 +8,54 @@ 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;
-        }
-
-        // Add type class
-        toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), 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) {
-            toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
-        }
-
-        // Inject the player wrapper
-        if (this.isVideo) {
-            // Create the wrapper div
-            this.elements.wrapper = createElement('div', {
-                class: this.config.classNames.video,
-            });
-
-            // Wrap the video in a container
-            wrap(this.media, this.elements.wrapper);
-
-            // Faux poster container
-            if (this.isEmbed) {
-                this.elements.poster = createElement('div', {
-                    class: this.config.classNames.poster,
-                });
-
-                this.elements.wrapper.appendChild(this.elements.poster);
-            }
-        }
-
-        if (this.isHTML5) {
-            html5.setup.call(this);
-        } else if (this.isYouTube) {
-            youtube.setup.call(this);
-        } else if (this.isVimeo) {
-            vimeo.setup.call(this);
-        }
-    },
+  // Setup media
+  setup() {
+    // If there's no media, bail
+    if (!this.media) {
+      this.debug.warn('No media element found!');
+      return;
+    }
+
+    // Add type class
+    toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), 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) {
+      toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
+    }
+
+    // Inject the player wrapper
+    if (this.isVideo) {
+      // Create the wrapper div
+      this.elements.wrapper = createElement('div', {
+        class: this.config.classNames.video,
+      });
+
+      // Wrap the video in a container
+      wrap(this.media, this.elements.wrapper);
+
+      // Faux poster container
+      if (this.isEmbed) {
+        this.elements.poster = createElement('div', {
+          class: this.config.classNames.poster,
+        });
+
+        this.elements.wrapper.appendChild(this.elements.poster);
+      }
+    }
+
+    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;
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js
index 9f1088fa..1a52ebce 100644
--- a/src/js/plugins/ads.js
+++ b/src/js/plugins/ads.js
@@ -16,629 +16,629 @@ import { formatTime } from '../utils/time';
 import { buildUrlParams } from '../utils/urls';
 
 const destroy = instance => {
-    // Destroy our adsManager
-    if (instance.manager) {
-        instance.manager.destroy();
-    }
+  // Destroy our adsManager
+  if (instance.manager) {
+    instance.manager.destroy();
+  }
 
-    // Destroy our adsManager
-    if (instance.elements.displayContainer) {
-        instance.elements.displayContainer.destroy();
-    }
+  // Destroy our adsManager
+  if (instance.elements.displayContainer) {
+    instance.elements.displayContainer.destroy();
+  }
 
-    instance.elements.container.remove();
+  instance.elements.container.remove();
 };
 
 class Ads {
-    /**
-     * Ads constructor.
-     * @param {Object} player
-     * @return {Ads}
-     */
-    constructor(player) {
-        this.player = player;
-        this.config = player.config.ads;
-        this.playing = false;
-        this.initialized = false;
-        this.elements = {
-            container: null,
-            displayContainer: null,
-        };
-        this.manager = null;
-        this.loader = null;
-        this.cuePoints = null;
-        this.events = {};
-        this.safetyTimer = null;
-        this.countdownTimer = null;
-
-        // Setup a promise to resolve when the IMA manager is ready
-        this.managerPromise = new Promise((resolve, reject) => {
-            // The ad is loaded and ready
-            this.on('loaded', resolve);
-
-            // Ads failed
-            this.on('error', reject);
-        });
-
-        this.load();
+  /**
+   * Ads constructor.
+   * @param {Object} player
+   * @return {Ads}
+   */
+  constructor(player) {
+    this.player = player;
+    this.config = player.config.ads;
+    this.playing = false;
+    this.initialized = false;
+    this.elements = {
+      container: null,
+      displayContainer: null,
+    };
+    this.manager = null;
+    this.loader = null;
+    this.cuePoints = null;
+    this.events = {};
+    this.safetyTimer = null;
+    this.countdownTimer = null;
+
+    // Setup a promise to resolve when the IMA manager is ready
+    this.managerPromise = new Promise((resolve, reject) => {
+      // The ad is loaded and ready
+      this.on('loaded', resolve);
+
+      // Ads failed
+      this.on('error', reject);
+    });
+
+    this.load();
+  }
+
+  get enabled() {
+    const { config } = this;
+
+    return (
+      this.player.isHTML5 &&
+      this.player.isVideo &&
+      config.enabled &&
+      (!is.empty(config.publisherId) || is.url(config.tagUrl))
+    );
+  }
+
+  /**
+   * Load the IMA SDK
+   */
+  load() {
+    if (!this.enabled) {
+      return;
     }
 
-    get enabled() {
-        const { config } = this;
-
-        return (
-            this.player.isHTML5 &&
-            this.player.isVideo &&
-            config.enabled &&
-            (!is.empty(config.publisherId) || is.url(config.tagUrl))
-        );
-    }
-
-    /**
-     * Load the IMA SDK
-     */
-    load() {
-        if (!this.enabled) {
-            return;
-        }
-
-        // Check if the Google IMA3 SDK is loaded or load it ourselves
-        if (!is.object(window.google) || !is.object(window.google.ima)) {
-            loadScript(this.player.config.urls.googleIMA.sdk)
-                .then(() => {
-                    this.ready();
-                })
-                .catch(() => {
-                    // Script failed to load or is blocked
-                    this.trigger('error', new Error('Google IMA SDK failed to load'));
-                });
-        } else {
-            this.ready();
-        }
-    }
-
-    /**
-     * Get the ads instance ready
-     */
-    ready() {
-        // Double check we're enabled
-        if (!this.enabled) {
-            destroy(this);
-        }
-
-        // Start ticking our safety timer. If the whole advertisement
-        // thing doesn't resolve within our set time; we bail
-        this.startSafetyTimer(12000, 'ready()');
-
-        // Clear the safety timer
-        this.managerPromise.then(() => {
-            this.clearSafetyTimer('onAdsManagerLoaded()');
+    // Check if the Google IMA3 SDK is loaded or load it ourselves
+    if (!is.object(window.google) || !is.object(window.google.ima)) {
+      loadScript(this.player.config.urls.googleIMA.sdk)
+        .then(() => {
+          this.ready();
+        })
+        .catch(() => {
+          // Script failed to load or is blocked
+          this.trigger('error', new Error('Google IMA SDK failed to load'));
         });
-
-        // Set listeners on the Plyr instance
-        this.listeners();
-
-        // Setup the IMA SDK
-        this.setupIMA();
+    } else {
+      this.ready();
     }
-
-    // Build the tag URL
-    get tagUrl() {
-        const { config } = this;
-
-        if (is.url(config.tagUrl)) {
-            return config.tagUrl;
-        }
-
-        const params = {
-            AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
-            AV_CHANNELID: '5a0458dc28a06145e4519d21',
-            AV_URL: window.location.hostname,
-            cb: Date.now(),
-            AV_WIDTH: 640,
-            AV_HEIGHT: 480,
-            AV_CDIM2: config.publisherId,
-        };
-
-        const base = 'https://go.aniview.com/api/adserver6/vast/';
-
-        return `${base}?${buildUrlParams(params)}`;
+  }
+
+  /**
+   * Get the ads instance ready
+   */
+  ready() {
+    // Double check we're enabled
+    if (!this.enabled) {
+      destroy(this);
     }
 
-    /**
-     * In order for the SDK to display ads for our video, we need to tell it where to put them,
-     * so here we define our ad container. This div is set up to render on top of the video player.
-     * Using the code below, we tell the SDK to render ads within that div. We also provide a
-     * handle to the content video player - the SDK will poll the current time of our player to
-     * properly place mid-rolls. After we create the ad display container, we initialize it. On
-     * mobile devices, this initialization is done as the result of a user action.
-     */
-    setupIMA() {
-        // Create the container for our advertisements
-        this.elements.container = createElement('div', {
-            class: this.player.config.classNames.ads,
-        });
-
-        this.player.elements.container.appendChild(this.elements.container);
-
-        // So we can run VPAID2
-        google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
-
-        // Set language
-        google.ima.settings.setLocale(this.player.config.ads.language);
+    // Start ticking our safety timer. If the whole advertisement
+    // thing doesn't resolve within our set time; we bail
+    this.startSafetyTimer(12000, 'ready()');
 
-        // Set playback for iOS10+
-        google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);
+    // Clear the safety timer
+    this.managerPromise.then(() => {
+      this.clearSafetyTimer('onAdsManagerLoaded()');
+    });
 
-        // We assume the adContainer is the video container of the plyr element that will house the ads
-        this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
+    // Set listeners on the Plyr instance
+    this.listeners();
 
-        // Create ads loader
-        this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
+    // Setup the IMA SDK
+    this.setupIMA();
+  }
 
-        // Listen and respond to ads loaded and error events
-        this.loader.addEventListener(
-            google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
-            event => this.onAdsManagerLoaded(event),
-            false,
-        );
-        this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
+  // Build the tag URL
+  get tagUrl() {
+    const { config } = this;
 
-        // Request video ads to be pre-loaded
-        this.requestAds();
+    if (is.url(config.tagUrl)) {
+      return config.tagUrl;
     }
 
-    /**
-     * Request advertisements
-     */
-    requestAds() {
-        const { container } = this.player.elements;
-
-        try {
-            // Request video ads
-            const request = new google.ima.AdsRequest();
-            request.adTagUrl = this.tagUrl;
-
-            // Specify the linear and nonlinear slot sizes. This helps the SDK
-            // to select the correct creative if multiple are returned
-            request.linearAdSlotWidth = container.offsetWidth;
-            request.linearAdSlotHeight = container.offsetHeight;
-            request.nonLinearAdSlotWidth = container.offsetWidth;
-            request.nonLinearAdSlotHeight = container.offsetHeight;
-
-            // We only overlay ads as we only support video.
-            request.forceNonLinearFullSlot = false;
-
-            // Mute based on current state
-            request.setAdWillPlayMuted(!this.player.muted);
-
-            this.loader.requestAds(request);
-        } catch (e) {
-            this.onAdError(e);
-        }
+    const params = {
+      AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
+      AV_CHANNELID: '5a0458dc28a06145e4519d21',
+      AV_URL: window.location.hostname,
+      cb: Date.now(),
+      AV_WIDTH: 640,
+      AV_HEIGHT: 480,
+      AV_CDIM2: config.publisherId,
+    };
+
+    const base = 'https://go.aniview.com/api/adserver6/vast/';
+
+    return `${base}?${buildUrlParams(params)}`;
+  }
+
+  /**
+   * In order for the SDK to display ads for our video, we need to tell it where to put them,
+   * so here we define our ad container. This div is set up to render on top of the video player.
+   * Using the code below, we tell the SDK to render ads within that div. We also provide a
+   * handle to the content video player - the SDK will poll the current time of our player to
+   * properly place mid-rolls. After we create the ad display container, we initialize it. On
+   * mobile devices, this initialization is done as the result of a user action.
+   */
+  setupIMA() {
+    // Create the container for our advertisements
+    this.elements.container = createElement('div', {
+      class: this.player.config.classNames.ads,
+    });
+
+    this.player.elements.container.appendChild(this.elements.container);
+
+    // So we can run VPAID2
+    google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED);
+
+    // Set language
+    google.ima.settings.setLocale(this.player.config.ads.language);
+
+    // Set playback for iOS10+
+    google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);
+
+    // We assume the adContainer is the video container of the plyr element that will house the ads
+    this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
+
+    // Create ads loader
+    this.loader = new google.ima.AdsLoader(this.elements.displayContainer);
+
+    // Listen and respond to ads loaded and error events
+    this.loader.addEventListener(
+      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
+      event => this.onAdsManagerLoaded(event),
+      false,
+    );
+    this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
+
+    // Request video ads to be pre-loaded
+    this.requestAds();
+  }
+
+  /**
+   * Request advertisements
+   */
+  requestAds() {
+    const { container } = this.player.elements;
+
+    try {
+      // Request video ads
+      const request = new google.ima.AdsRequest();
+      request.adTagUrl = this.tagUrl;
+
+      // Specify the linear and nonlinear slot sizes. This helps the SDK
+      // to select the correct creative if multiple are returned
+      request.linearAdSlotWidth = container.offsetWidth;
+      request.linearAdSlotHeight = container.offsetHeight;
+      request.nonLinearAdSlotWidth = container.offsetWidth;
+      request.nonLinearAdSlotHeight = container.offsetHeight;
+
+      // We only overlay ads as we only support video.
+      request.forceNonLinearFullSlot = false;
+
+      // Mute based on current state
+      request.setAdWillPlayMuted(!this.player.muted);
+
+      this.loader.requestAds(request);
+    } catch (e) {
+      this.onAdError(e);
+    }
+  }
+
+  /**
+   * Update the ad countdown
+   * @param {Boolean} start
+   */
+  pollCountdown(start = false) {
+    if (!start) {
+      clearInterval(this.countdownTimer);
+      this.elements.container.removeAttribute('data-badge-text');
+      return;
     }
 
-    /**
-     * Update the ad countdown
-     * @param {Boolean} start
-     */
-    pollCountdown(start = false) {
-        if (!start) {
-            clearInterval(this.countdownTimer);
-            this.elements.container.removeAttribute('data-badge-text');
-            return;
-        }
-
-        const update = () => {
-            const time = formatTime(Math.max(this.manager.getRemainingTime(), 0));
-            const label = `${i18n.get('advertisement', this.player.config)} - ${time}`;
-            this.elements.container.setAttribute('data-badge-text', label);
-        };
-
-        this.countdownTimer = setInterval(update, 100);
+    const update = () => {
+      const time = formatTime(Math.max(this.manager.getRemainingTime(), 0));
+      const label = `${i18n.get('advertisement', this.player.config)} - ${time}`;
+      this.elements.container.setAttribute('data-badge-text', label);
+    };
+
+    this.countdownTimer = setInterval(update, 100);
+  }
+
+  /**
+   * This method is called whenever the ads are ready inside the AdDisplayContainer
+   * @param {Event} adsManagerLoadedEvent
+   */
+  onAdsManagerLoaded(event) {
+    // Load could occur after a source change (race condition)
+    if (!this.enabled) {
+      return;
     }
 
-    /**
-     * This method is called whenever the ads are ready inside the AdDisplayContainer
-     * @param {Event} adsManagerLoadedEvent
-     */
-    onAdsManagerLoaded(event) {
-        // Load could occur after a source change (race condition)
-        if (!this.enabled) {
-            return;
-        }
+    // Get the ads manager
+    const settings = new google.ima.AdsRenderingSettings();
 
-        // Get the ads manager
-        const settings = new google.ima.AdsRenderingSettings();
+    // Tell the SDK to save and restore content video state on our behalf
+    settings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+    settings.enablePreloading = true;
 
-        // Tell the SDK to save and restore content video state on our behalf
-        settings.restoreCustomPlaybackStateOnAdBreakComplete = true;
-        settings.enablePreloading = true;
+    // The SDK is polling currentTime on the contentPlayback. And needs a duration
+    // so it can determine when to start the mid- and post-roll
+    this.manager = event.getAdsManager(this.player, settings);
 
-        // The SDK is polling currentTime on the contentPlayback. And needs a duration
-        // so it can determine when to start the mid- and post-roll
-        this.manager = event.getAdsManager(this.player, settings);
+    // Get the cue points for any mid-rolls by filtering out the pre- and post-roll
+    this.cuePoints = this.manager.getCuePoints();
 
-        // Get the cue points for any mid-rolls by filtering out the pre- and post-roll
-        this.cuePoints = this.manager.getCuePoints();
+    // Add listeners to the required events
+    // Advertisement error events
+    this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
 
-        // Add listeners to the required events
-        // Advertisement error events
-        this.manager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
+    // Advertisement regular events
+    Object.keys(google.ima.AdEvent.Type).forEach(type => {
+      this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
+    });
 
-        // Advertisement regular events
-        Object.keys(google.ima.AdEvent.Type).forEach(type => {
-            this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
-        });
+    // Resolve our adsManager
+    this.trigger('loaded');
+  }
 
-        // Resolve our adsManager
-        this.trigger('loaded');
-    }
+  addCuePoints() {
+    // Add advertisement cue's within the time line if available
+    if (!is.empty(this.cuePoints)) {
+      this.cuePoints.forEach(cuePoint => {
+        if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
+          const seekElement = this.player.elements.progress;
 
-    addCuePoints() {
-        // Add advertisement cue's within the time line if available
-        if (!is.empty(this.cuePoints)) {
-            this.cuePoints.forEach(cuePoint => {
-                if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
-                    const seekElement = this.player.elements.progress;
-
-                    if (is.element(seekElement)) {
-                        const cuePercentage = (100 / this.player.duration) * cuePoint;
-                        const cue = createElement('span', {
-                            class: this.player.config.classNames.cues,
-                        });
-
-                        cue.style.left = `${cuePercentage.toString()}%`;
-                        seekElement.appendChild(cue);
-                    }
-                }
+          if (is.element(seekElement)) {
+            const cuePercentage = (100 / this.player.duration) * cuePoint;
+            const cue = createElement('span', {
+              class: this.player.config.classNames.cues,
             });
-        }
-    }
 
-    /**
-     * This is where all the event handling takes place. Retrieve the ad from the event. Some
-     * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated
-     * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
-     * @param {Event} event
-     */
-    onAdEvent(event) {
-        const { container } = this.player.elements;
-        // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
-        // don't have ad object associated
-        const ad = event.getAd();
-        const adData = event.getAdData();
-
-        // Proxy event
-        const dispatchEvent = type => {
-            triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
-        };
-
-        // Bubble the event
-        dispatchEvent(event.type);
-
-        switch (event.type) {
-            case google.ima.AdEvent.Type.LOADED:
-                // This is the first event sent for an ad - it is possible to determine whether the
-                // ad is a video ad or an overlay
-                this.trigger('loaded');
-
-                // Start countdown
-                this.pollCountdown(true);
-
-                if (!ad.isLinear()) {
-                    // Position AdDisplayContainer correctly for overlay
-                    ad.width = container.offsetWidth;
-                    ad.height = container.offsetHeight;
-                }
-
-                // console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());
-                // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());
-
-                break;
-
-            case google.ima.AdEvent.Type.STARTED:
-                // Set volume to match player
-                this.manager.setVolume(this.player.volume);
-
-                break;
-
-            case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
-                // All ads for the current videos are done. We can now request new advertisements
-                // in case the video is re-played
-
-                // TODO: Example for what happens when a next video in a playlist would be loaded.
-                // So here we load a new video when all ads are done.
-                // Then we load new ads within a new adsManager. When the video
-                // Is started - after - the ads are loaded, then we get ads.
-                // You can also easily test cancelling and reloading by running
-                // player.ads.cancel() and player.ads.play from the console I guess.
-                // this.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', }, ],
-                // };
-
-                // TODO: So there is still this thing where a video should only be allowed to start
-                // playing when the IMA SDK is ready or has failed
-
-                if (this.player.ended) {
-                    this.loadAds();
-                } else {
-                    // The SDK won't allow new ads to be called without receiving a contentComplete()
-                    this.loader.contentComplete();
-                }
-
-                break;
-
-            case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
-                // This event indicates the ad has started - the video player can adjust the UI,
-                // for example display a pause button and remaining time. Fired when content should
-                // be paused. This usually happens right before an ad is about to cover the content
-
-                this.pauseContent();
-
-                break;
-
-            case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
-                // This event indicates the ad has finished - the video player can perform
-                // appropriate UI actions, such as removing the timer for remaining time detection.
-                // Fired when content should be resumed. This usually happens when an ad finishes
-                // or collapses
-
-                this.pollCountdown();
-
-                this.resumeContent();
-
-                break;
-
-            case google.ima.AdEvent.Type.LOG:
-                if (adData.adError) {
-                    this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);
-                }
-
-                break;
-
-            default:
-                break;
+            cue.style.left = `${cuePercentage.toString()}%`;
+            seekElement.appendChild(cue);
+          }
         }
+      });
     }
+  }
+
+  /**
+   * This is where all the event handling takes place. Retrieve the ad from the event. Some
+   * events (e.g. ALL_ADS_COMPLETED) don't have the ad object associated
+   * https://developers.google.com/interactive-media-ads/docs/sdks/html5/v3/apis#ima.AdEvent.Type
+   * @param {Event} event
+   */
+  onAdEvent(event) {
+    const { container } = this.player.elements;
+    // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
+    // don't have ad object associated
+    const ad = event.getAd();
+    const adData = event.getAdData();
+
+    // Proxy event
+    const dispatchEvent = type => {
+      triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
+    };
+
+    // Bubble the event
+    dispatchEvent(event.type);
+
+    switch (event.type) {
+      case google.ima.AdEvent.Type.LOADED:
+        // This is the first event sent for an ad - it is possible to determine whether the
+        // ad is a video ad or an overlay
+        this.trigger('loaded');
 
-    /**
-     * Any ad error handling comes through here
-     * @param {Event} event
-     */
-    onAdError(event) {
-        this.cancel();
-        this.player.debug.warn('Ads error', event);
-    }
-
-    /**
-     * Setup hooks for Plyr and window events. This ensures
-     * the mid- and post-roll launch at the correct time. And
-     * resize the advertisement when the player resizes
-     */
-    listeners() {
-        const { container } = this.player.elements;
-        let time;
-
-        this.player.on('canplay', () => {
-            this.addCuePoints();
-        });
-
-        this.player.on('ended', () => {
-            this.loader.contentComplete();
-        });
-
-        this.player.on('timeupdate', () => {
-            time = this.player.currentTime;
-        });
+        // Start countdown
+        this.pollCountdown(true);
 
-        this.player.on('seeked', () => {
-            const seekedTime = this.player.currentTime;
+        if (!ad.isLinear()) {
+          // Position AdDisplayContainer correctly for overlay
+          ad.width = container.offsetWidth;
+          ad.height = container.offsetHeight;
+        }
 
-            if (is.empty(this.cuePoints)) {
-                return;
-            }
+        // console.info('Ad type: ' + event.getAd().getAdPodInfo().getPodIndex());
+        // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());
+
+        break;
+
+      case google.ima.AdEvent.Type.STARTED:
+        // Set volume to match player
+        this.manager.setVolume(this.player.volume);
+
+        break;
+
+      case google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
+        // All ads for the current videos are done. We can now request new advertisements
+        // in case the video is re-played
+
+        // TODO: Example for what happens when a next video in a playlist would be loaded.
+        // So here we load a new video when all ads are done.
+        // Then we load new ads within a new adsManager. When the video
+        // Is started - after - the ads are loaded, then we get ads.
+        // You can also easily test cancelling and reloading by running
+        // player.ads.cancel() and player.ads.play from the console I guess.
+        // this.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', }, ],
+        // };
+
+        // TODO: So there is still this thing where a video should only be allowed to start
+        // playing when the IMA SDK is ready or has failed
+
+        if (this.player.ended) {
+          this.loadAds();
+        } else {
+          // The SDK won't allow new ads to be called without receiving a contentComplete()
+          this.loader.contentComplete();
+        }
 
-            this.cuePoints.forEach((cuePoint, index) => {
-                if (time < cuePoint && cuePoint < seekedTime) {
-                    this.manager.discardAdBreak();
-                    this.cuePoints.splice(index, 1);
-                }
-            });
-        });
+        break;
 
-        // Listen to the resizing of the window. And resize ad accordingly
-        // TODO: eventually implement ResizeObserver
-        window.addEventListener('resize', () => {
-            if (this.manager) {
-                this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
-            }
-        });
-    }
+      case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
+        // This event indicates the ad has started - the video player can adjust the UI,
+        // for example display a pause button and remaining time. Fired when content should
+        // be paused. This usually happens right before an ad is about to cover the content
 
-    /**
-     * Initialize the adsManager and start playing advertisements
-     */
-    play() {
-        const { container } = this.player.elements;
+        this.pauseContent();
 
-        if (!this.managerPromise) {
-            this.resumeContent();
-        }
+        break;
 
-        // Play the requested advertisement whenever the adsManager is ready
-        this.managerPromise
-            .then(() => {
-                // Set volume to match player
-                this.manager.setVolume(this.player.volume);
-
-                // Initialize the container. Must be done via a user action on mobile devices
-                this.elements.displayContainer.initialize();
-
-                try {
-                    if (!this.initialized) {
-                        // Initialize the ads manager. Ad rules playlist will start at this time
-                        this.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
-
-                        // Call play to start showing the ad. Single video and overlay ads will
-                        // start at this time; the call will be ignored for ad rules
-                        this.manager.start();
-                    }
-
-                    this.initialized = true;
-                } catch (adError) {
-                    // An error may be thrown if there was a problem with the
-                    // VAST response
-                    this.onAdError(adError);
-                }
-            })
-            .catch(() => {});
-    }
+      case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
+        // This event indicates the ad has finished - the video player can perform
+        // appropriate UI actions, such as removing the timer for remaining time detection.
+        // Fired when content should be resumed. This usually happens when an ad finishes
+        // or collapses
 
-    /**
-     * Resume our video
-     */
-    resumeContent() {
-        // Hide the advertisement container
-        this.elements.container.style.zIndex = '';
+        this.pollCountdown();
 
-        // Ad is stopped
-        this.playing = false;
+        this.resumeContent();
 
-        // Play video
-        silencePromise(this.player.media.play());
-    }
+        break;
 
-    /**
-     * Pause our video
-     */
-    pauseContent() {
-        // Show the advertisement container
-        this.elements.container.style.zIndex = 3;
+      case google.ima.AdEvent.Type.LOG:
+        if (adData.adError) {
+          this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);
+        }
 
-        // Ad is playing
-        this.playing = true;
+        break;
 
-        // Pause our video.
-        this.player.media.pause();
+      default:
+        break;
     }
-
-    /**
-     * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
-     * allowed to call new ads based on google policies, as they interpret this as an accidental
-     * video requests. https://developers.google.com/interactive-
-     * media-ads/docs/sdks/android/faq#8
-     */
-    cancel() {
-        // Pause our video
-        if (this.initialized) {
-            this.resumeContent();
+  }
+
+  /**
+   * Any ad error handling comes through here
+   * @param {Event} event
+   */
+  onAdError(event) {
+    this.cancel();
+    this.player.debug.warn('Ads error', event);
+  }
+
+  /**
+   * Setup hooks for Plyr and window events. This ensures
+   * the mid- and post-roll launch at the correct time. And
+   * resize the advertisement when the player resizes
+   */
+  listeners() {
+    const { container } = this.player.elements;
+    let time;
+
+    this.player.on('canplay', () => {
+      this.addCuePoints();
+    });
+
+    this.player.on('ended', () => {
+      this.loader.contentComplete();
+    });
+
+    this.player.on('timeupdate', () => {
+      time = this.player.currentTime;
+    });
+
+    this.player.on('seeked', () => {
+      const seekedTime = this.player.currentTime;
+
+      if (is.empty(this.cuePoints)) {
+        return;
+      }
+
+      this.cuePoints.forEach((cuePoint, index) => {
+        if (time < cuePoint && cuePoint < seekedTime) {
+          this.manager.discardAdBreak();
+          this.cuePoints.splice(index, 1);
         }
-
-        // Tell our instance that we're done for now
-        this.trigger('error');
-
-        // Re-create our adsManager
-        this.loadAds();
+      });
+    });
+
+    // Listen to the resizing of the window. And resize ad accordingly
+    // TODO: eventually implement ResizeObserver
+    window.addEventListener('resize', () => {
+      if (this.manager) {
+        this.manager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
+      }
+    });
+  }
+
+  /**
+   * Initialize the adsManager and start playing advertisements
+   */
+  play() {
+    const { container } = this.player.elements;
+
+    if (!this.managerPromise) {
+      this.resumeContent();
     }
 
-    /**
-     * Re-create our adsManager
-     */
-    loadAds() {
-        // Tell our adsManager to go bye bye
-        this.managerPromise
-            .then(() => {
-                // Destroy our adsManager
-                if (this.manager) {
-                    this.manager.destroy();
-                }
-
-                // Re-set our adsManager promises
-                this.managerPromise = new Promise(resolve => {
-                    this.on('loaded', resolve);
-                    this.player.debug.log(this.manager);
-                });
-                // Now that the manager has been destroyed set it to also be un-initialized
-                this.initialized = false;
-
-                // Now request some new advertisements
-                this.requestAds();
-            })
-            .catch(() => {});
-    }
+    // Play the requested advertisement whenever the adsManager is ready
+    this.managerPromise
+      .then(() => {
+        // Set volume to match player
+        this.manager.setVolume(this.player.volume);
 
-    /**
-     * Handles callbacks after an ad event was invoked
-     * @param {String} event - Event type
-     */
-    trigger(event, ...args) {
-        const handlers = this.events[event];
-
-        if (is.array(handlers)) {
-            handlers.forEach(handler => {
-                if (is.function(handler)) {
-                    handler.apply(this, args);
-                }
-            });
+        // Initialize the container. Must be done via a user action on mobile devices
+        this.elements.displayContainer.initialize();
+
+        try {
+          if (!this.initialized) {
+            // Initialize the ads manager. Ad rules playlist will start at this time
+            this.manager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL);
+
+            // Call play to start showing the ad. Single video and overlay ads will
+            // start at this time; the call will be ignored for ad rules
+            this.manager.start();
+          }
+
+          this.initialized = true;
+        } catch (adError) {
+          // An error may be thrown if there was a problem with the
+          // VAST response
+          this.onAdError(adError);
         }
+      })
+      .catch(() => {});
+  }
+
+  /**
+   * Resume our video
+   */
+  resumeContent() {
+    // Hide the advertisement container
+    this.elements.container.style.zIndex = '';
+
+    // Ad is stopped
+    this.playing = false;
+
+    // Play video
+    silencePromise(this.player.media.play());
+  }
+
+  /**
+   * Pause our video
+   */
+  pauseContent() {
+    // Show the advertisement container
+    this.elements.container.style.zIndex = 3;
+
+    // Ad is playing
+    this.playing = true;
+
+    // Pause our video.
+    this.player.media.pause();
+  }
+
+  /**
+   * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
+   * allowed to call new ads based on google policies, as they interpret this as an accidental
+   * video requests. https://developers.google.com/interactive-
+   * media-ads/docs/sdks/android/faq#8
+   */
+  cancel() {
+    // Pause our video
+    if (this.initialized) {
+      this.resumeContent();
     }
 
-    /**
-     * Add event listeners
-     * @param {String} event - Event type
-     * @param {Function} callback - Callback for when event occurs
-     * @return {Ads}
-     */
-    on(event, callback) {
-        if (!is.array(this.events[event])) {
-            this.events[event] = [];
+    // Tell our instance that we're done for now
+    this.trigger('error');
+
+    // Re-create our adsManager
+    this.loadAds();
+  }
+
+  /**
+   * Re-create our adsManager
+   */
+  loadAds() {
+    // Tell our adsManager to go bye bye
+    this.managerPromise
+      .then(() => {
+        // Destroy our adsManager
+        if (this.manager) {
+          this.manager.destroy();
         }
 
-        this.events[event].push(callback);
+        // Re-set our adsManager promises
+        this.managerPromise = new Promise(resolve => {
+          this.on('loaded', resolve);
+          this.player.debug.log(this.manager);
+        });
+        // Now that the manager has been destroyed set it to also be un-initialized
+        this.initialized = false;
 
-        return this;
+        // Now request some new advertisements
+        this.requestAds();
+      })
+      .catch(() => {});
+  }
+
+  /**
+   * Handles callbacks after an ad event was invoked
+   * @param {String} event - Event type
+   */
+  trigger(event, ...args) {
+    const handlers = this.events[event];
+
+    if (is.array(handlers)) {
+      handlers.forEach(handler => {
+        if (is.function(handler)) {
+          handler.apply(this, args);
+        }
+      });
     }
-
-    /**
-     * Setup a safety timer for when the ad network doesn't respond for whatever reason.
-     * The advertisement has 12 seconds to get its things together. We stop this timer when the
-     * advertisement is playing, or when a user action is required to start, then we clear the
-     * timer on ad ready
-     * @param {Number} time
-     * @param {String} from
-     */
-    startSafetyTimer(time, from) {
-        this.player.debug.log(`Safety timer invoked from: ${from}`);
-
-        this.safetyTimer = setTimeout(() => {
-            this.cancel();
-            this.clearSafetyTimer('startSafetyTimer()');
-        }, time);
+  }
+
+  /**
+   * Add event listeners
+   * @param {String} event - Event type
+   * @param {Function} callback - Callback for when event occurs
+   * @return {Ads}
+   */
+  on(event, callback) {
+    if (!is.array(this.events[event])) {
+      this.events[event] = [];
     }
 
-    /**
-     * Clear our safety timer(s)
-     * @param {String} from
-     */
-    clearSafetyTimer(from) {
-        if (!is.nullOrUndefined(this.safetyTimer)) {
-            this.player.debug.log(`Safety timer cleared from: ${from}`);
-
-            clearTimeout(this.safetyTimer);
-            this.safetyTimer = null;
-        }
+    this.events[event].push(callback);
+
+    return this;
+  }
+
+  /**
+   * Setup a safety timer for when the ad network doesn't respond for whatever reason.
+   * The advertisement has 12 seconds to get its things together. We stop this timer when the
+   * advertisement is playing, or when a user action is required to start, then we clear the
+   * timer on ad ready
+   * @param {Number} time
+   * @param {String} from
+   */
+  startSafetyTimer(time, from) {
+    this.player.debug.log(`Safety timer invoked from: ${from}`);
+
+    this.safetyTimer = setTimeout(() => {
+      this.cancel();
+      this.clearSafetyTimer('startSafetyTimer()');
+    }, time);
+  }
+
+  /**
+   * Clear our safety timer(s)
+   * @param {String} from
+   */
+  clearSafetyTimer(from) {
+    if (!is.nullOrUndefined(this.safetyTimer)) {
+      this.player.debug.log(`Safety timer cleared from: ${from}`);
+
+      clearTimeout(this.safetyTimer);
+      this.safetyTimer = null;
     }
+  }
 }
 
 export default Ads;
diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js
index 60033331..6ce53f28 100644
--- a/src/js/plugins/preview-thumbnails.js
+++ b/src/js/plugins/preview-thumbnails.js
@@ -6,50 +6,50 @@ 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(',');
-                }
-            }
-        });
+  const processedList = [];
+  const frames = vttDataString.split(/\r\n\r\n|\n\n|\r\r/);
 
-        if (result.text) {
-            processedList.push(result);
-        }
+  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(',');
+        }
+      }
     });
 
-    return processedList;
+    if (result.text) {
+      processedList.push(result);
+    }
+  });
+
+  return processedList;
 };
 
 /**
@@ -64,651 +64,646 @@ const parseVtt = vttDataString => {
  */
 
 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;
+  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;
-        }
+  /**
+   * 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.getThumbnails().then(() => {
-            if (!this.enabled) {
-                return;
-            }
+    this.elements = {
+      thumb: {},
+      scrubbing: {},
+    };
 
-            // Render DOM elements
-            this.render();
+    this.load();
+  }
 
-            // Check to see if thumb container size was specified manually in CSS
-            this.determineContainerAutoSizing();
+  get enabled() {
+    return this.player.isHTML5 && this.player.isVideo && this.player.config.previewThumbnails.enabled;
+  }
 
-            this.loaded = true;
-        });
+  load() {
+    // Toggle the regular seek tooltip
+    if (this.player.elements.display.seekTooltip) {
+      this.player.elements.display.seekTooltip.hidden = this.enabled;
     }
 
-    // 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);
+    if (!this.enabled) {
+      return;
+    }
 
-                this.player.debug.log('Preview thumbnails', this.thumbnails);
+    this.getThumbnails().then(() => {
+      if (!this.enabled) {
+        return;
+      }
 
-                resolve();
-            };
+      // Render DOM elements
+      this.render();
 
-            // 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);
-            }
-        });
-    }
+      // Check to see if thumb container size was specified manually in CSS
+      this.determineContainerAutoSizing();
 
-    // Process individual VTT file
-    getThumbnail(url) {
-        return new Promise(resolve => {
-            fetch(url).then(response => {
-                const thumbnail = {
-                    frames: parseVtt(response),
-                    height: null,
-                    urlPrefix: '',
-                };
+      this.loaded = true;
+    });
+  }
 
-                // 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 VTT files and parse them
+  getThumbnails() {
+    return new Promise(resolve => {
+      const { src } = this.player.config.previewThumbnails;
 
-                // Download the first frame, so that we can determine/set the height of this thumbnailsDef
-                const tempImage = new Image();
+      if (is.empty(src)) {
+        throw new Error('Missing previewThumbnails.src config attribute');
+      }
 
-                tempImage.onload = () => {
-                    thumbnail.height = tempImage.naturalHeight;
-                    thumbnail.width = tempImage.naturalWidth;
+      // Resolve promise
+      const sortAndResolve = () => {
+        // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
+        this.thumbnails.sort((x, y) => x.height - y.height);
 
-                    this.thumbnails.push(thumbnail);
+        this.player.debug.log('Preview thumbnails', this.thumbnails);
 
-                    resolve();
-                };
+        resolve();
+      };
 
-                tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
-            });
+      // Via callback()
+      if (is.function(src)) {
+        src(thumbnails => {
+          this.thumbnails = thumbnails;
+          sortAndResolve();
         });
-    }
-
-    startMove(event) {
-        if (!this.loaded) {
-            return;
-        }
-
-        if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
-            return;
-        }
+      }
+      // 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: '',
+        };
 
-        // Wait until media has a duration
-        if (!this.player.media.duration) {
-            return;
+        // 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);
         }
 
-        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;
-            }
+        // Download the first frame, so that we can determine/set the height of this thumbnailsDef
+        const tempImage = new Image();
 
-            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;
-            }
+        tempImage.onload = () => {
+          thumbnail.height = tempImage.naturalHeight;
+          thumbnail.width = tempImage.naturalWidth;
 
-            this.mousePosX = event.pageX;
+          this.thumbnails.push(thumbnail);
 
-            // Set time text inside image container
-            this.elements.thumb.time.innerText = formatTime(this.seekTime);
-        }
+          resolve();
+        };
 
-        // Download and show image
-        this.showImageAtCurrentTime();
-    }
+        tempImage.src = thumbnail.urlPrefix + thumbnail.frames[0].text;
+      });
+    });
+  }
 
-    endMove() {
-        this.toggleThumbContainer(false, true);
+  startMove(event) {
+    if (!this.loaded) {
+      return;
     }
 
-    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();
-            }
-        }
+    if (!is.event(event) || !['touchmove', 'mousemove'].includes(event.type)) {
+      return;
     }
 
-    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);
-                }
-            });
-        }
+    // Wait until media has a duration
+    if (!this.player.media.duration) {
+      return;
     }
 
-    /**
-     * 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);
-        });
+    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);
 
-        this.player.on('timeupdate', () => {
-            this.lastTime = this.player.media.currentTime;
-        });
-    }
+      if (this.seekTime < 0) {
+        // The mousemove fires for 10+px out to the left
+        this.seekTime = 0;
+      }
 
-    /**
-     * 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,
-        });
+      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;
+      }
 
-        // 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);
+      this.mousePosX = event.pageX;
 
-        // Create HTML element, parent+span: time text (e.g., 01:32:00)
-        const timeContainer = createElement('div', {
-            class: this.player.config.classNames.previewThumbnails.timeContainer,
-        });
+      // Set time text inside image container
+      this.elements.thumb.time.innerText = formatTime(this.seekTime);
+    }
 
-        this.elements.thumb.time = createElement('span', {}, '00:00');
-        timeContainer.appendChild(this.elements.thumb.time);
+    // Download and show image
+    this.showImageAtCurrentTime();
+  }
 
-        this.elements.thumb.container.appendChild(timeContainer);
+  endMove() {
+    this.toggleThumbContainer(false, true);
+  }
 
-        // Inject the whole thumb
-        if (is.element(this.player.elements.progress)) {
-            this.player.elements.progress.appendChild(this.elements.thumb.container);
-        }
+  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;
 
-        // 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);
-    }
+      // Wait until media has a duration
+      if (this.player.media.duration) {
+        this.toggleScrubbingContainer(true);
+        this.toggleThumbContainer(false, true);
 
-    destroy() {
-        if (this.elements.thumb.container) {
-            this.elements.thumb.container.remove();
-        }
-        if (this.elements.scrubbing.container) {
-            this.elements.scrubbing.container.remove();
-        }
+        // Download and show image
+        this.showImageAtCurrentTime();
+      }
     }
+  }
 
-    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;
+  endScrubbing() {
+    this.mouseDown = false;
 
-        // Show the thumb container if we're not scrubbing
+    // 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.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);
+          this.toggleScrubbingContainer(false);
         }
+      });
     }
+  }
 
-    // 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;
-            }
+  /**
+   * 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);
+    });
 
-            // 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);
-        }
-    }
+    this.player.on('seeked', () => {
+      this.toggleThumbContainer(false);
+    });
 
-    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);
+    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,
+    });
 
-        if (newImage) {
-            this.currentImageContainer.appendChild(previewImage);
-            this.currentImageElement = previewImage;
+    // 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);
 
-            if (!this.loadedImages.includes(thumbFilename)) {
-                this.loadedImages.push(thumbFilename);
-            }
-        }
+    // Create HTML element, parent+span: time text (e.g., 01:32:00)
+    const timeContainer = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.timeContainer,
+    });
 
-        // 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));
-    }
+    this.elements.thumb.time = createElement('span', {}, '00:00');
+    timeContainer.appendChild(this.elements.thumb.time);
 
-    // 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;
-            }
+    this.elements.thumb.container.appendChild(timeContainer);
 
-            const removeDelay = this.usingSprites ? 500 : 1000;
+    // Inject the whole thumb
+    if (is.element(this.player.elements.progress)) {
+      this.player.elements.progress.appendChild(this.elements.thumb.container);
+    }
 
-            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;
+    // Create HTML element: plyr__preview-scrubbing-container
+    this.elements.scrubbing.container = createElement('div', {
+      class: this.player.config.classNames.previewThumbnails.scrubbingContainer,
+    });
 
-                // This has to be set before the timeout - to prevent issues switching between hover and scrub
-                const { currentImageContainer } = this;
+    this.player.elements.wrapper.appendChild(this.elements.scrubbing.container);
+  }
 
-                setTimeout(() => {
-                    currentImageContainer.removeChild(image);
-                    this.player.debug.log(`Removing thumb: ${image.dataset.filename}`);
-                }, removeDelay);
-            }
-        });
+  destroy() {
+    if (this.elements.thumb.container) {
+      this.elements.thumb.container.remove();
     }
-
-    // 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 (this.elements.scrubbing.container) {
+      this.elements.scrubbing.container.remove();
     }
+  }
 
-    // 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);
-            }
-        }
+  showImageAtCurrentTime() {
+    if (this.mouseDown) {
+      this.setScrubbingContainerSize();
+    } else {
+      this.setThumbContainerSizeAndPos();
     }
 
-    get currentImageContainer() {
-        if (this.mouseDown) {
-            return this.elements.scrubbing.container;
-        }
+    // 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;
 
-        return this.elements.thumb.imageContainer;
+    // Show the thumb container if we're not scrubbing
+    if (!this.mouseDown) {
+      this.toggleThumbContainer(hasThumb);
     }
 
-    get usingSprites() {
-        return Object.keys(this.thumbnails[0].frames[0]).includes('w');
+    // No matching thumb found
+    if (!hasThumb) {
+      return;
     }
 
-    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;
-    }
+    // 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;
+      }
+    });
 
-    get thumbContainerHeight() {
-        if (this.mouseDown) {
-            const { height } = fitRatio(this.thumbAspectRatio, {
-                width: this.player.media.clientWidth,
-                height: this.player.media.clientHeight,
-            });
-            return height;
-        }
+    // 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;
 
-        // 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;
-        }
+        // This has to be set before the timeout - to prevent issues switching between hover and scrub
+        const { currentImageContainer } = this;
 
-        return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
-    }
+        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();
+                };
+              }
+            }
+          });
 
-    get currentImageElement() {
-        if (this.mouseDown) {
-            return this.currentScrubbingImageElement;
+          // If there are none to preload then we want to resolve immediately
+          if (!foundOne) {
+            resolve();
+          }
         }
+      }, 300);
+    });
+  }
 
-        return this.currentThumbnailImageElement;
-    }
-
-    set currentImageElement(element) {
-        if (this.mouseDown) {
-            this.currentScrubbingImageElement = element;
-        } else {
-            this.currentThumbnailImageElement = element;
-        }
-    }
+  // 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;
 
-    toggleThumbContainer(toggle = false, clearShowing = false) {
-        const className = this.player.config.classNames.previewThumbnails.thumbContainerShown;
-        this.elements.thumb.container.classList.toggle(className, toggle);
+      if (this.usingSprites) {
+        previewImageHeight = frame.h;
+      }
 
-        if (!toggle && clearShowing) {
-            this.showingThumb = null;
-            this.showingThumbFilename = null;
-        }
+      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);
+      }
     }
+  }
 
-    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;
-        }
+  get currentImageContainer() {
+    if (this.mouseDown) {
+      return this.elements.scrubbing.container;
     }
 
-    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;
-        }
-    }
+    return this.elements.thumb.imageContainer;
+  }
 
-    // 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`;
-        }
+  get usingSprites() {
+    return Object.keys(this.thumbnails[0].frames[0]).includes('w');
+  }
 
-        this.setThumbContainerPos();
+  get thumbAspectRatio() {
+    if (this.usingSprites) {
+      return this.thumbnails[0].frames[0].w / this.thumbnails[0].frames[0].h;
     }
 
-    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;
-        }
+    return this.thumbnails[0].width / this.thumbnails[0].height;
+  }
 
-        container.style.left = `${previewPos}px`;
+  get thumbContainerHeight() {
+    if (this.mouseDown) {
+      const { height } = fitRatio(this.thumbAspectRatio, {
+        width: this.player.media.clientWidth,
+        height: this.player.media.clientHeight,
+      });
+      return height;
     }
 
-    // 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`;
+    // 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;
     }
 
-    // Sprites need to be offset to the correct location
-    setImageSizeAndOffset(previewImage, frame) {
-        if (!this.usingSprites) {
-            return;
-        }
+    return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4);
+  }
 
-        // 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`;
+  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;
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 8f999153..0937d62d 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -17,392 +17,392 @@ import { buildUrlParams } from '../utils/urls';
 
 // Parse Vimeo ID from URL
 function parseId(url) {
-    if (is.empty(url)) {
-        return null;
-    }
+  if (is.empty(url)) {
+    return null;
+  }
 
-    if (is.number(Number(url))) {
-        return url;
-    }
+  if (is.number(Number(url))) {
+    return url;
+  }
 
-    const regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
-    return url.match(regex) ? RegExp.$2 : 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');
-    }
+  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() {
-        const player = this;
-
-        // Add embed class for responsive
-        toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
-
-        // Set speed options from config
-        player.options.speed = player.config.speed.options;
-
-        // Set intial ratio
-        setAspectRatio.call(player);
-
-        // 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);
-        }
-    },
-
-    // API Ready
-    ready() {
-        const player = this;
-        const config = player.config.vimeo;
-
-        // Get Vimeo params for the iframe
-        const params = buildUrlParams(
-            extend(
-                {},
-                {
-                    loop: player.config.loop.active,
-                    autoplay: player.autoplay,
-                    muted: player.muted,
-                    gesture: 'media',
-                    playsinline: !this.config.fullscreen.iosNative,
-                },
-                config,
-            ),
-        );
-
-        // 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('allowtransparency', '');
-        iframe.setAttribute('allow', 'autoplay');
-
-        // Set the referrer policy if required
-        if (!is.empty(config.referrerPolicy)) {
-            iframe.setAttribute('referrerPolicy', config.referrerPolicy);
-        }
-
-        // Get poster, if already set
-        const { poster } = player;
-        // Inject the package
-        const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
-        wrapper.appendChild(iframe);
-        player.media = replaceElement(wrapper, player.media);
-
-        // Get poster image
-        fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
-            if (is.empty(response)) {
-                return;
-            }
-
-            // Get the URL for thumbnail
-            const url = new URL(response[0].thumbnail_large);
-
-            // Get original image
-            url.pathname = `${url.pathname.split('_')[0]}.jpg`;
-
-            // Set and show poster
-            ui.setPoster.call(player, url.href).catch(() => {});
-        });
-
-        // Setup instance
-        // https://github.com/vimeo/player.js
-        player.embed = new window.Vimeo.Player(iframe, {
-            autopause: player.config.autopause,
-            muted: player.muted,
-        });
-
-        player.media.paused = true;
-        player.media.currentTime = 0;
-
-        // Disable native text track rendering
-        if (player.supported.ui) {
-            player.embed.disableTextTrack();
-        }
-
-        // Create a faux HTML5 API using the Vimeo API
-        player.media.play = () => {
-            assurePlaybackState.call(player, true);
-            return player.embed.play();
-        };
-
-        player.media.pause = () => {
-            assurePlaybackState.call(player, false);
-            return player.embed.pause();
-        };
-
-        player.media.stop = () => {
-            player.pause();
-            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
-
-                // Get current paused state and volume etc
-                const { embed, media, paused, volume } = player;
-                const restorePause = paused && !embed.hasPlayed;
-
-                // Set seeking state and trigger event
-                media.seeking = true;
-                triggerEvent.call(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
-                    });
-            },
-        });
-
-        // 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];
-                    });
-            },
-        });
-
-        // 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');
-                });
-            },
+  setup() {
+    const player = this;
+
+    // Add embed class for responsive
+    toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
+
+    // Set speed options from config
+    player.options.speed = player.config.speed.options;
+
+    // Set intial ratio
+    setAspectRatio.call(player);
+
+    // 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);
+    }
+  },
+
+  // API Ready
+  ready() {
+    const player = this;
+    const config = player.config.vimeo;
+
+    // Get Vimeo params for the iframe
+    const params = buildUrlParams(
+      extend(
+        {},
+        {
+          loop: player.config.loop.active,
+          autoplay: player.autoplay,
+          muted: player.muted,
+          gesture: 'media',
+          playsinline: !this.config.fullscreen.iosNative,
+        },
+        config,
+      ),
+    );
+
+    // 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);
+    }
 
-        // 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');
-                });
-            },
-        });
+    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('allowtransparency', '');
+    iframe.setAttribute('allow', 'autoplay');
+
+    // Set the referrer policy if required
+    if (!is.empty(config.referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+    }
 
-        // 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;
-                });
-            },
-        });
+    // Get poster, if already set
+    const { poster } = player;
+    // Inject the package
+    const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
+    wrapper.appendChild(iframe);
+    player.media = replaceElement(wrapper, player.media);
+
+    // Get poster image
+    fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
+      if (is.empty(response)) {
+        return;
+      }
+
+      // Get the URL for thumbnail
+      const url = new URL(response[0].thumbnail_large);
+
+      // Get original image
+      url.pathname = `${url.pathname.split('_')[0]}.jpg`;
+
+      // Set and show poster
+      ui.setPoster.call(player, url.href).catch(() => {});
+    });
+
+    // Setup instance
+    // https://github.com/vimeo/player.js
+    player.embed = new window.Vimeo.Player(iframe, {
+      autopause: player.config.autopause,
+      muted: player.muted,
+    });
+
+    player.media.paused = true;
+    player.media.currentTime = 0;
+
+    // Disable native text track rendering
+    if (player.supported.ui) {
+      player.embed.disableTextTrack();
+    }
 
-        // Source
-        let currentSrc;
+    // Create a faux HTML5 API using the Vimeo API
+    player.media.play = () => {
+      assurePlaybackState.call(player, true);
+      return player.embed.play();
+    };
+
+    player.media.pause = () => {
+      assurePlaybackState.call(player, false);
+      return player.embed.pause();
+    };
+
+    player.media.stop = () => {
+      player.pause();
+      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
+
+        // Get current paused state and volume etc
+        const { embed, media, paused, volume } = player;
+        const restorePause = paused && !embed.hasPlayed;
+
+        // Set seeking state and trigger event
+        media.seeking = true;
+        triggerEvent.call(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
+          });
+      },
+    });
+
+    // Playback speed
+    let speed = player.config.speed.selected;
+    Object.defineProperty(player.media, 'playbackRate', {
+      get() {
+        return speed;
+      },
+      set(input) {
         player.embed
-            .getVideoUrl()
-            .then(value => {
-                currentSrc = value;
-                controls.setDownloadUrl.call(player);
-            })
-            .catch(error => {
-                this.debug.warn(error);
-            });
-
-        Object.defineProperty(player.media, 'currentSrc', {
-            get() {
-                return currentSrc;
-            },
+          .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];
+          });
+      },
+    });
+
+    // 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');
         });
-
-        // Ended
-        Object.defineProperty(player.media, 'ended', {
-            get() {
-                return player.currentTime === player.duration;
-            },
-        });
-
-        // Set aspect ratio based on video size
-        Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
-            const [width, height] = dimensions;
-            player.embed.ratio = [width, height];
-            setAspectRatio.call(this);
+      },
+    });
+
+    // 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');
         });
-
-        // Set autopause
-        player.embed.setAutopause(player.config.autopause).then(state => {
-            player.config.autopause = state;
+      },
+    });
+
+    // 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;
         });
-
-        // Get title
-        player.embed.getVideoTitle().then(title => {
-            player.config.title = title;
-            ui.setTitle.call(this);
-        });
-
-        // Get current time
-        player.embed.getCurrentTime().then(value => {
-            currentTime = value;
-            triggerEvent.call(player, player.media, 'timeupdate');
-        });
-
-        // Get duration
-        player.embed.getDuration().then(value => {
-            player.media.duration = value;
-            triggerEvent.call(player, player.media, 'durationchange');
-        });
-
-        // Get captions
-        player.embed.getTextTracks().then(tracks => {
-            player.media.textTracks = tracks;
-            captions.setup.call(player);
-        });
-
-        player.embed.on('cuechange', ({ cues = [] }) => {
-            const strippedCues = cues.map(cue => stripHTML(cue.text));
-            captions.updateCues.call(player, strippedCues);
-        });
-
-        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');
-                }
-            });
-
-            if (is.element(player.embed.element) && player.supported.ui) {
-                const frame = player.embed.element;
-
-                // Fix keyboard focus issues
-                // https://github.com/sampotts/plyr/issues/317
-                frame.setAttribute('tabindex', -1);
-            }
-        });
-
-        player.embed.on('bufferstart', () => {
-            triggerEvent.call(player, player.media, 'waiting');
-        });
-
-        player.embed.on('bufferend', () => {
-            triggerEvent.call(player, player.media, 'playing');
-        });
-
-        player.embed.on('play', () => {
-            assurePlaybackState.call(player, true);
-            triggerEvent.call(player, player.media, 'playing');
-        });
-
-        player.embed.on('pause', () => {
-            assurePlaybackState.call(player, false);
-        });
-
-        player.embed.on('timeupdate', data => {
-            player.media.seeking = false;
-            currentTime = data.seconds;
-            triggerEvent.call(player, player.media, 'timeupdate');
-        });
-
-        player.embed.on('progress', data => {
-            player.media.buffered = data.percent;
-            triggerEvent.call(player, player.media, 'progress');
-
-            // Check all loaded
-            if (parseInt(data.percent, 10) === 1) {
-                triggerEvent.call(player, player.media, 'canplaythrough');
-            }
-
-            // 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');
-                }
-            });
-        });
-
-        player.embed.on('seeked', () => {
-            player.media.seeking = false;
-            triggerEvent.call(player, player.media, 'seeked');
-        });
-
-        player.embed.on('ended', () => {
-            player.media.paused = true;
-            triggerEvent.call(player, player.media, 'ended');
-        });
-
-        player.embed.on('error', detail => {
-            player.media.error = detail;
-            triggerEvent.call(player, player.media, 'error');
-        });
-
-        // Rebuild UI
-        setTimeout(() => ui.build.call(player), 0);
-    },
+      },
+    });
+
+    // Source
+    let currentSrc;
+    player.embed
+      .getVideoUrl()
+      .then(value => {
+        currentSrc = value;
+        controls.setDownloadUrl.call(player);
+      })
+      .catch(error => {
+        this.debug.warn(error);
+      });
+
+    Object.defineProperty(player.media, 'currentSrc', {
+      get() {
+        return currentSrc;
+      },
+    });
+
+    // Ended
+    Object.defineProperty(player.media, 'ended', {
+      get() {
+        return player.currentTime === player.duration;
+      },
+    });
+
+    // Set aspect ratio based on video size
+    Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
+      const [width, height] = dimensions;
+      player.embed.ratio = [width, height];
+      setAspectRatio.call(this);
+    });
+
+    // Set autopause
+    player.embed.setAutopause(player.config.autopause).then(state => {
+      player.config.autopause = state;
+    });
+
+    // Get title
+    player.embed.getVideoTitle().then(title => {
+      player.config.title = title;
+      ui.setTitle.call(this);
+    });
+
+    // Get current time
+    player.embed.getCurrentTime().then(value => {
+      currentTime = value;
+      triggerEvent.call(player, player.media, 'timeupdate');
+    });
+
+    // Get duration
+    player.embed.getDuration().then(value => {
+      player.media.duration = value;
+      triggerEvent.call(player, player.media, 'durationchange');
+    });
+
+    // Get captions
+    player.embed.getTextTracks().then(tracks => {
+      player.media.textTracks = tracks;
+      captions.setup.call(player);
+    });
+
+    player.embed.on('cuechange', ({ cues = [] }) => {
+      const strippedCues = cues.map(cue => stripHTML(cue.text));
+      captions.updateCues.call(player, strippedCues);
+    });
+
+    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');
+        }
+      });
+
+      if (is.element(player.embed.element) && player.supported.ui) {
+        const frame = player.embed.element;
+
+        // Fix keyboard focus issues
+        // https://github.com/sampotts/plyr/issues/317
+        frame.setAttribute('tabindex', -1);
+      }
+    });
+
+    player.embed.on('bufferstart', () => {
+      triggerEvent.call(player, player.media, 'waiting');
+    });
+
+    player.embed.on('bufferend', () => {
+      triggerEvent.call(player, player.media, 'playing');
+    });
+
+    player.embed.on('play', () => {
+      assurePlaybackState.call(player, true);
+      triggerEvent.call(player, player.media, 'playing');
+    });
+
+    player.embed.on('pause', () => {
+      assurePlaybackState.call(player, false);
+    });
+
+    player.embed.on('timeupdate', data => {
+      player.media.seeking = false;
+      currentTime = data.seconds;
+      triggerEvent.call(player, player.media, 'timeupdate');
+    });
+
+    player.embed.on('progress', data => {
+      player.media.buffered = data.percent;
+      triggerEvent.call(player, player.media, 'progress');
+
+      // Check all loaded
+      if (parseInt(data.percent, 10) === 1) {
+        triggerEvent.call(player, player.media, 'canplaythrough');
+      }
+
+      // 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');
+        }
+      });
+    });
+
+    player.embed.on('seeked', () => {
+      player.media.seeking = false;
+      triggerEvent.call(player, player.media, 'seeked');
+    });
+
+    player.embed.on('ended', () => {
+      player.media.paused = true;
+      triggerEvent.call(player, player.media, 'ended');
+    });
+
+    player.embed.on('error', detail => {
+      player.media.error = detail;
+      triggerEvent.call(player, player.media, 'error');
+    });
+
+    // Rebuild UI
+    setTimeout(() => ui.build.call(player), 0);
+  },
 };
 
 export default vimeo;
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 8c65b1dc..4de46395 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -15,426 +15,426 @@ import { setAspectRatio } from '../utils/style';
 
 // Parse YouTube ID from URL
 function parseId(url) {
-    if (is.empty(url)) {
-        return null;
-    }
+  if (is.empty(url)) {
+    return null;
+  }
 
-    const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
-    return url.match(regex) ? RegExp.$2 : url;
+  const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+  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');
-    }
+  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');
+  }
 }
 
 function getHost(config) {
-    if (config.noCookie) {
-        return 'https://www.youtube-nocookie.com';
-    }
+  if (config.noCookie) {
+    return 'https://www.youtube-nocookie.com';
+  }
 
-    if (window.location.protocol === 'http:') {
-        return 'http://www.youtube.com';
-    }
+  if (window.location.protocol === 'http:') {
+    return 'http://www.youtube.com';
+  }
 
-    // Use YouTube's default
-    return undefined;
+  // Use YouTube's default
+  return undefined;
 }
 
 const youtube = {
-    setup() {
-        // Add embed class for responsive
-        toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
-
-        // Setup API
-        if (is.object(window.YT) && is.function(window.YT.Player)) {
-            youtube.ready.call(this);
-        } else {
-            // Reference current global callback
-            const callback = window.onYouTubeIframeAPIReady;
-
-            // Set callback to process queue
-            window.onYouTubeIframeAPIReady = () => {
-                // Call global callback if set
-                if (is.function(callback)) {
-                    callback();
-                }
-
-                youtube.ready.call(this);
-            };
-
-            // Load the SDK
-            loadScript(this.config.urls.youtube.sdk).catch(error => {
-                this.debug.warn('YouTube API failed to load', error);
-            });
+  setup() {
+    // Add embed class for responsive
+    toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
+
+    // Setup API
+    if (is.object(window.YT) && is.function(window.YT.Player)) {
+      youtube.ready.call(this);
+    } else {
+      // Reference current global callback
+      const callback = window.onYouTubeIframeAPIReady;
+
+      // Set callback to process queue
+      window.onYouTubeIframeAPIReady = () => {
+        // Call global callback if set
+        if (is.function(callback)) {
+          callback();
         }
-    },
 
-    // Get the media title
-    getTitle(videoId) {
-        const url = format(this.config.urls.youtube.api, videoId);
+        youtube.ready.call(this);
+      };
 
-        fetch(url)
-            .then(data => {
-                if (is.object(data)) {
-                    const { title, height, width } = data;
+      // Load the SDK
+      loadScript(this.config.urls.youtube.sdk).catch(error => {
+        this.debug.warn('YouTube API failed to load', error);
+      });
+    }
+  },
 
-                    // Set title
-                    this.config.title = title;
-                    ui.setTitle.call(this);
+  // Get the media title
+  getTitle(videoId) {
+    const url = format(this.config.urls.youtube.api, videoId);
 
-                    // Set aspect ratio
-                    this.embed.ratio = [width, height];
-                }
+    fetch(url)
+      .then(data => {
+        if (is.object(data)) {
+          const { title, height, width } = data;
 
-                setAspectRatio.call(this);
-            })
-            .catch(() => {
-                // Set aspect ratio
-                setAspectRatio.call(this);
-            });
-    },
-
-    // API ready
-    ready() {
-        const player = this;
-        // Ignore already setup (race condition)
-        const currentId = player.media && player.media.getAttribute('id');
-        if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
-            return;
+          // Set title
+          this.config.title = title;
+          ui.setTitle.call(this);
+
+          // Set aspect ratio
+          this.embed.ratio = [width, height];
         }
 
-        // Get the source URL or ID
-        let source = player.media.getAttribute('src');
+        setAspectRatio.call(this);
+      })
+      .catch(() => {
+        // Set aspect ratio
+        setAspectRatio.call(this);
+      });
+  },
+
+  // API ready
+  ready() {
+    const player = this;
+    // Ignore already setup (race condition)
+    const currentId = player.media && player.media.getAttribute('id');
+    if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
+      return;
+    }
+
+    // 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(this.config.attributes.embed.id);
+    }
 
-        // Get from <div> if needed
-        if (is.empty(source)) {
-            source = player.media.getAttribute(this.config.attributes.embed.id);
+    // Replace the <iframe> with a <div> due to YouTube API issues
+    const videoId = parseId(source);
+    const id = generateId(player.provider);
+    // Get poster, if already set
+    const { poster } = player;
+    // Replace media element
+    const container = createElement('div', { id, poster });
+    player.media = replaceElement(container, player.media);
+
+    // Id to poster wrapper
+    const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
+
+    // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
+    loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
+      .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
+      .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
+      .then(image => ui.setPoster.call(player, image.src))
+      .then(src => {
+        // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
+        if (!src.includes('maxres')) {
+          player.elements.poster.style.backgroundSize = 'cover';
         }
+      })
+      .catch(() => {});
+
+    const config = player.config.youtube;
+
+    // Setup instance
+    // https://developers.google.com/youtube/iframe_api_reference
+    player.embed = new window.YT.Player(id, {
+      videoId,
+      host: getHost(config),
+      playerVars: extend(
+        {},
+        {
+          autoplay: player.config.autoplay ? 1 : 0, // Autoplay
+          hl: player.config.hl, // iframe interface language
+          controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
+          disablekb: 1, // Disable keyboard as we handle it
+          playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
+          // Captions are flaky on YouTube
+          cc_load_policy: player.captions.active ? 1 : 0,
+          cc_lang_pref: player.config.captions.language,
+          // Tracking for stats
+          widget_referrer: window ? window.location.href : null,
+        },
+        config,
+      ),
+      events: {
+        onError(event) {
+          // YouTube may fire onError twice, so only handle it once
+          if (!player.media.error) {
+            const code = event.data;
+            // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError
+            const message =
+              {
+                2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',
+                5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',
+                100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
+                101: 'The owner of the requested video does not allow it to be played in embedded players.',
+                150: 'The owner of the requested video does not allow it to be played in embedded players.',
+              }[code] || 'An unknown error occured';
+
+            player.media.error = { code, message };
+
+            triggerEvent.call(player, player.media, 'error');
+          }
+        },
+        onPlaybackRateChange(event) {
+          // Get the instance
+          const instance = event.target;
+
+          // Get current speed
+          player.media.playbackRate = instance.getPlaybackRate();
+
+          triggerEvent.call(player, player.media, 'ratechange');
+        },
+        onReady(event) {
+          // Bail if onReady has already been called. See issue #1108
+          if (is.function(player.media.play)) {
+            return;
+          }
+          // Get the instance
+          const instance = event.target;
+
+          // Get the title
+          youtube.getTitle.call(player, videoId);
+
+          // Create a faux HTML5 API using the YouTube API
+          player.media.play = () => {
+            assurePlaybackState.call(player, true);
+            instance.playVideo();
+          };
+
+          player.media.pause = () => {
+            assurePlaybackState.call(player, false);
+            instance.pauseVideo();
+          };
+
+          player.media.stop = () => {
+            instance.stopVideo();
+          };
+
+          player.media.duration = instance.getDuration();
+          player.media.paused = true;
+
+          // Seeking
+          player.media.currentTime = 0;
+          Object.defineProperty(player.media, 'currentTime', {
+            get() {
+              return Number(instance.getCurrentTime());
+            },
+            set(time) {
+              // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
+              if (player.paused && !player.embed.hasPlayed) {
+                player.embed.mute();
+              }
+
+              // Set seeking state and trigger event
+              player.media.seeking = true;
+              triggerEvent.call(player, player.media, 'seeking');
+
+              // Seek after events sent
+              instance.seekTo(time);
+            },
+          });
 
-        // Replace the <iframe> with a <div> due to YouTube API issues
-        const videoId = parseId(source);
-        const id = generateId(player.provider);
-        // Get poster, if already set
-        const { poster } = player;
-        // Replace media element
-        const container = createElement('div', { id, poster });
-        player.media = replaceElement(container, player.media);
-
-        // Id to poster wrapper
-        const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
-
-        // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
-        loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
-            .catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
-            .catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
-            .then(image => ui.setPoster.call(player, image.src))
-            .then(src => {
-                // If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
-                if (!src.includes('maxres')) {
-                    player.elements.poster.style.backgroundSize = 'cover';
-                }
-            })
-            .catch(() => {});
-
-        const config = player.config.youtube;
-
-        // Setup instance
-        // https://developers.google.com/youtube/iframe_api_reference
-        player.embed = new window.YT.Player(id, {
-            videoId,
-            host: getHost(config),
-            playerVars: extend(
-                {},
-                {
-                    autoplay: player.config.autoplay ? 1 : 0, // Autoplay
-                    hl: player.config.hl, // iframe interface language
-                    controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported
-                    disablekb: 1, // Disable keyboard as we handle it
-                    playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
-                    // Captions are flaky on YouTube
-                    cc_load_policy: player.captions.active ? 1 : 0,
-                    cc_lang_pref: player.config.captions.language,
-                    // Tracking for stats
-                    widget_referrer: window ? window.location.href : null,
-                },
-                config,
-            ),
-            events: {
-                onError(event) {
-                    // YouTube may fire onError twice, so only handle it once
-                    if (!player.media.error) {
-                        const code = event.data;
-                        // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError
-                        const message =
-                            {
-                                2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.',
-                                5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.',
-                                100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.',
-                                101: 'The owner of the requested video does not allow it to be played in embedded players.',
-                                150: 'The owner of the requested video does not allow it to be played in embedded players.',
-                            }[code] || 'An unknown error occured';
-
-                        player.media.error = { code, message };
-
-                        triggerEvent.call(player, player.media, 'error');
-                    }
-                },
-                onPlaybackRateChange(event) {
-                    // Get the instance
-                    const instance = event.target;
-
-                    // Get current speed
-                    player.media.playbackRate = instance.getPlaybackRate();
-
-                    triggerEvent.call(player, player.media, 'ratechange');
-                },
-                onReady(event) {
-                    // Bail if onReady has already been called. See issue #1108
-                    if (is.function(player.media.play)) {
-                        return;
-                    }
-                    // Get the instance
-                    const instance = event.target;
-
-                    // Get the title
-                    youtube.getTitle.call(player, videoId);
-
-                    // Create a faux HTML5 API using the YouTube API
-                    player.media.play = () => {
-                        assurePlaybackState.call(player, true);
-                        instance.playVideo();
-                    };
-
-                    player.media.pause = () => {
-                        assurePlaybackState.call(player, false);
-                        instance.pauseVideo();
-                    };
-
-                    player.media.stop = () => {
-                        instance.stopVideo();
-                    };
-
-                    player.media.duration = instance.getDuration();
-                    player.media.paused = true;
-
-                    // Seeking
-                    player.media.currentTime = 0;
-                    Object.defineProperty(player.media, 'currentTime', {
-                        get() {
-                            return Number(instance.getCurrentTime());
-                        },
-                        set(time) {
-                            // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet).
-                            if (player.paused && !player.embed.hasPlayed) {
-                                player.embed.mute();
-                            }
-
-                            // Set seeking state and trigger event
-                            player.media.seeking = true;
-                            triggerEvent.call(player, player.media, 'seeking');
-
-                            // Seek after events sent
-                            instance.seekTo(time);
-                        },
-                    });
-
-                    // Playback speed
-                    Object.defineProperty(player.media, 'playbackRate', {
-                        get() {
-                            return instance.getPlaybackRate();
-                        },
-                        set(input) {
-                            instance.setPlaybackRate(input);
-                        },
-                    });
-
-                    // Volume
-                    let { volume } = player.config;
-                    Object.defineProperty(player.media, 'volume', {
-                        get() {
-                            return volume;
-                        },
-                        set(input) {
-                            volume = input;
-                            instance.setVolume(volume * 100);
-                            triggerEvent.call(player, player.media, 'volumechange');
-                        },
-                    });
-
-                    // Muted
-                    let { muted } = player.config;
-                    Object.defineProperty(player.media, 'muted', {
-                        get() {
-                            return muted;
-                        },
-                        set(input) {
-                            const toggle = is.boolean(input) ? input : muted;
-                            muted = toggle;
-                            instance[toggle ? 'mute' : 'unMute']();
-                            triggerEvent.call(player, player.media, 'volumechange');
-                        },
-                    });
-
-                    // Source
-                    Object.defineProperty(player.media, 'currentSrc', {
-                        get() {
-                            return instance.getVideoUrl();
-                        },
-                    });
-
-                    // Ended
-                    Object.defineProperty(player.media, 'ended', {
-                        get() {
-                            return player.currentTime === player.duration;
-                        },
-                    });
-
-                    // Get available speeds
-                    const speeds = instance.getAvailablePlaybackRates();
-                    // Filter based on config
-                    player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
-
-                    // Set the tabindex to avoid focus entering iframe
-                    if (player.supported.ui) {
-                        player.media.setAttribute('tabindex', -1);
-                    }
-
-                    triggerEvent.call(player, player.media, 'timeupdate');
-                    triggerEvent.call(player, player.media, 'durationchange');
-
-                    // Reset timer
-                    clearInterval(player.timers.buffering);
-
-                    // Setup buffering
-                    player.timers.buffering = setInterval(() => {
-                        // Get loaded % from YouTube
-                        player.media.buffered = instance.getVideoLoadedFraction();
-
-                        // Trigger progress only when we actually buffer something
-                        if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
-                            triggerEvent.call(player, player.media, 'progress');
-                        }
-
-                        // Set last buffer point
-                        player.media.lastBuffered = player.media.buffered;
-
-                        // Bail if we're at 100%
-                        if (player.media.buffered === 1) {
-                            clearInterval(player.timers.buffering);
-
-                            // Trigger event
-                            triggerEvent.call(player, player.media, 'canplaythrough');
-                        }
-                    }, 200);
-
-                    // Rebuild UI
-                    setTimeout(() => ui.build.call(player), 50);
-                },
-                onStateChange(event) {
-                    // Get the instance
-                    const instance = event.target;
-
-                    // Reset timer
-                    clearInterval(player.timers.playing);
-
-                    const seeked = player.media.seeking && [1, 2].includes(event.data);
-
-                    if (seeked) {
-                        // Unset seeking and fire seeked event
-                        player.media.seeking = false;
-                        triggerEvent.call(player, player.media, 'seeked');
-                    }
-
-                    // Handle events
-                    // -1   Unstarted
-                    // 0    Ended
-                    // 1    Playing
-                    // 2    Paused
-                    // 3    Buffering
-                    // 5    Video cued
-                    switch (event.data) {
-                        case -1:
-                            // Update scrubber
-                            triggerEvent.call(player, player.media, 'timeupdate');
-
-                            // Get loaded % from YouTube
-                            player.media.buffered = instance.getVideoLoadedFraction();
-                            triggerEvent.call(player, player.media, 'progress');
-
-                            break;
-
-                        case 0:
-                            assurePlaybackState.call(player, false);
-
-                            // YouTube doesn't support loop for a single video, so mimick it.
-                            if (player.media.loop) {
-                                // YouTube needs a call to `stopVideo` before playing again
-                                instance.stopVideo();
-                                instance.playVideo();
-                            } else {
-                                triggerEvent.call(player, player.media, 'ended');
-                            }
-
-                            break;
-
-                        case 1:
-                            // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
-                            if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
-                                player.media.pause();
-                            } else {
-                                assurePlaybackState.call(player, true);
-
-                                triggerEvent.call(player, player.media, 'playing');
-
-                                // Poll to get playback progress
-                                player.timers.playing = setInterval(() => {
-                                    triggerEvent.call(player, player.media, 'timeupdate');
-                                }, 50);
-
-                                // Check duration again due to YouTube bug
-                                // https://github.com/sampotts/plyr/issues/374
-                                // https://code.google.com/p/gdata-issues/issues/detail?id=8690
-                                if (player.media.duration !== instance.getDuration()) {
-                                    player.media.duration = instance.getDuration();
-                                    triggerEvent.call(player, player.media, 'durationchange');
-                                }
-                            }
-
-                            break;
-
-                        case 2:
-                            // Restore audio (YouTube starts playing on seek if the video hasn't been played yet)
-                            if (!player.muted) {
-                                player.embed.unMute();
-                            }
-                            assurePlaybackState.call(player, false);
-
-                            break;
-
-                        case 3:
-                            // Trigger waiting event to add loading classes to container as the video buffers.
-                            triggerEvent.call(player, player.media, 'waiting');
-
-                            break;
-
-                        default:
-                            break;
-                    }
-
-                    triggerEvent.call(player, player.elements.container, 'statechange', false, {
-                        code: event.data,
-                    });
-                },
+          // Playback speed
+          Object.defineProperty(player.media, 'playbackRate', {
+            get() {
+              return instance.getPlaybackRate();
             },
-        });
-    },
+            set(input) {
+              instance.setPlaybackRate(input);
+            },
+          });
+
+          // Volume
+          let { volume } = player.config;
+          Object.defineProperty(player.media, 'volume', {
+            get() {
+              return volume;
+            },
+            set(input) {
+              volume = input;
+              instance.setVolume(volume * 100);
+              triggerEvent.call(player, player.media, 'volumechange');
+            },
+          });
+
+          // Muted
+          let { muted } = player.config;
+          Object.defineProperty(player.media, 'muted', {
+            get() {
+              return muted;
+            },
+            set(input) {
+              const toggle = is.boolean(input) ? input : muted;
+              muted = toggle;
+              instance[toggle ? 'mute' : 'unMute']();
+              triggerEvent.call(player, player.media, 'volumechange');
+            },
+          });
+
+          // Source
+          Object.defineProperty(player.media, 'currentSrc', {
+            get() {
+              return instance.getVideoUrl();
+            },
+          });
+
+          // Ended
+          Object.defineProperty(player.media, 'ended', {
+            get() {
+              return player.currentTime === player.duration;
+            },
+          });
+
+          // Get available speeds
+          const speeds = instance.getAvailablePlaybackRates();
+          // Filter based on config
+          player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
+
+          // Set the tabindex to avoid focus entering iframe
+          if (player.supported.ui) {
+            player.media.setAttribute('tabindex', -1);
+          }
+
+          triggerEvent.call(player, player.media, 'timeupdate');
+          triggerEvent.call(player, player.media, 'durationchange');
+
+          // Reset timer
+          clearInterval(player.timers.buffering);
+
+          // Setup buffering
+          player.timers.buffering = setInterval(() => {
+            // Get loaded % from YouTube
+            player.media.buffered = instance.getVideoLoadedFraction();
+
+            // Trigger progress only when we actually buffer something
+            if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
+              triggerEvent.call(player, player.media, 'progress');
+            }
+
+            // Set last buffer point
+            player.media.lastBuffered = player.media.buffered;
+
+            // Bail if we're at 100%
+            if (player.media.buffered === 1) {
+              clearInterval(player.timers.buffering);
+
+              // Trigger event
+              triggerEvent.call(player, player.media, 'canplaythrough');
+            }
+          }, 200);
+
+          // Rebuild UI
+          setTimeout(() => ui.build.call(player), 50);
+        },
+        onStateChange(event) {
+          // Get the instance
+          const instance = event.target;
+
+          // Reset timer
+          clearInterval(player.timers.playing);
+
+          const seeked = player.media.seeking && [1, 2].includes(event.data);
+
+          if (seeked) {
+            // Unset seeking and fire seeked event
+            player.media.seeking = false;
+            triggerEvent.call(player, player.media, 'seeked');
+          }
+
+          // Handle events
+          // -1   Unstarted
+          // 0    Ended
+          // 1    Playing
+          // 2    Paused
+          // 3    Buffering
+          // 5    Video cued
+          switch (event.data) {
+            case -1:
+              // Update scrubber
+              triggerEvent.call(player, player.media, 'timeupdate');
+
+              // Get loaded % from YouTube
+              player.media.buffered = instance.getVideoLoadedFraction();
+              triggerEvent.call(player, player.media, 'progress');
+
+              break;
+
+            case 0:
+              assurePlaybackState.call(player, false);
+
+              // YouTube doesn't support loop for a single video, so mimick it.
+              if (player.media.loop) {
+                // YouTube needs a call to `stopVideo` before playing again
+                instance.stopVideo();
+                instance.playVideo();
+              } else {
+                triggerEvent.call(player, player.media, 'ended');
+              }
+
+              break;
+
+            case 1:
+              // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet)
+              if (!player.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
+                player.media.pause();
+              } else {
+                assurePlaybackState.call(player, true);
+
+                triggerEvent.call(player, player.media, 'playing');
+
+                // Poll to get playback progress
+                player.timers.playing = setInterval(() => {
+                  triggerEvent.call(player, player.media, 'timeupdate');
+                }, 50);
+
+                // Check duration again due to YouTube bug
+                // https://github.com/sampotts/plyr/issues/374
+                // https://code.google.com/p/gdata-issues/issues/detail?id=8690
+                if (player.media.duration !== instance.getDuration()) {
+                  player.media.duration = instance.getDuration();
+                  triggerEvent.call(player, player.media, 'durationchange');
+                }
+              }
+
+              break;
+
+            case 2:
+              // Restore audio (YouTube starts playing on seek if the video hasn't been played yet)
+              if (!player.muted) {
+                player.embed.unMute();
+              }
+              assurePlaybackState.call(player, false);
+
+              break;
+
+            case 3:
+              // Trigger waiting event to add loading classes to container as the video buffers.
+              triggerEvent.call(player, player.media, 'waiting');
+
+              break;
+
+            default:
+              break;
+          }
+
+          triggerEvent.call(player, player.elements.container, 'statechange', false, {
+            code: event.data,
+          });
+        },
+      },
+    });
+  },
 };
 
 export default youtube;
diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts
index d68935b2..6c466002 100644
--- a/src/js/plyr.d.ts
+++ b/src/js/plyr.d.ts
@@ -7,614 +7,614 @@ export = Plyr;
 export as namespace Plyr;
 
 declare class Plyr {
+  /**
+   * Setup a new instance
+   */
+  static setup(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options): Plyr[];
+
+  /**
+   * Check for support
+   * @param mediaType
+   * @param provider
+   * @param playsInline Whether the player has the playsinline attribute (only applicable to iOS 10+)
+   */
+  static supported(mediaType?: Plyr.MediaType, provider?: Plyr.Provider, playsInline?: boolean): Plyr.Support;
+
+  constructor(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options);
+
+  /**
+   * Indicates if the current player is HTML5.
+   */
+  readonly isHTML5: boolean;
+
+  /**
+   * Indicates if the current player is an embedded player.
+   */
+  readonly isEmbed: boolean;
+
+  /**
+   * Indicates if the current player is playing.
+   */
+  readonly playing: boolean;
+
+  /**
+   * Indicates if the current player is paused.
+   */
+  readonly paused: boolean;
+
+  /**
+   * Indicates if the current player is stopped.
+   */
+  readonly stopped: boolean;
+
+  /**
+   * Indicates if the current player has finished playback.
+   */
+  readonly ended: boolean;
+
+  /**
+   * Returns a float between 0 and 1 indicating how much of the media is buffered
+   */
+  readonly buffered: number;
+
+  /**
+   * Gets or sets the currentTime for the player. The setter accepts a float in seconds.
+   */
+  currentTime: number;
+
+  /**
+   * Indicates if the current player is seeking.
+   */
+  readonly seeking: boolean;
+
+  /**
+   * Returns the duration for the current media.
+   */
+  readonly duration: number;
+
+  /**
+   * Gets or sets the volume for the player. The setter accepts a float between 0 and 1.
+   */
+  volume: number;
+
+  /**
+   * Gets or sets the muted state of the player. The setter accepts a boolean.
+   */
+  muted: boolean;
+
+  /**
+   * Indicates if the current media has an audio track.
+   */
+  readonly hasAudio: boolean;
+
+  /**
+   * 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.
+   */
+  speed: number;
+
+  /**
+   * Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.
+   */
+  quality: number;
+
+  /**
+   * Gets or sets the current loop state of the player.
+   */
+  loop: boolean;
+
+  /**
+   * Gets or sets the current source for the player.
+   */
+  source: Plyr.SourceInfo;
+
+  /**
+   * Gets or sets the current poster image URL for the player.
+   */
+  poster: string;
+
+  /**
+   * Gets or sets the autoplay state of the player.
+   */
+  autoplay: boolean;
+
+  /**
+   * Gets or sets the caption track by index. 1 means the track is missing or captions is not active
+   */
+  currentTrack: number;
+
+  /**
+   * Gets or sets the preferred captions language for the player. The setter accepts an ISO twoletter 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.
+   */
+  language: string;
+
+  /**
+   * Gets or sets the picture-in-picture state of the player. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+.
+   */
+  pip: boolean;
+
+  /**
+   * Gets or sets the aspect ratio for embedded players.
+   */
+  ratio?: string;
+
+  /**
+   * Returns the current video Provider
+   */
+  readonly provider: 'html5' | 'vimeo' | 'youtube';
+
+  /**
+   * Returns the native API for Vimeo or Youtube players
+   */
+  readonly embed?: any;
+
+  readonly fullscreen: Plyr.FullscreenControl;
+
+  /**
+   * Start playback.
+   * For HTML5 players, play() will return a Promise in some browsers - WebKit and Mozilla according to MDN at time of writing.
+   */
+  play(): Promise<void> | void;
+
+  /**
+   * Pause playback.
+   */
+  pause(): void;
+
+  /**
+   * Toggle playback, if no parameters are passed, it will toggle based on current status.
+   */
+  togglePlay(toggle?: boolean): boolean;
+
+  /**
+   * Stop playback and reset to start.
+   */
+  stop(): void;
+
+  /**
+   * Restart playback.
+   */
+  restart(): void;
+
+  /**
+   * Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used.
+   */
+  rewind(seekTime?: number): void;
+
+  /**
+   * Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.
+   */
+  forward(seekTime?: number): void;
+
+  /**
+   * Increase volume by the specified step. If no parameter is passed, the default step will be used.
+   */
+  increaseVolume(step?: number): void;
+
+  /**
+   * Increase volume by the specified step. If no parameter is passed, the default step will be used.
+   */
+  decreaseVolume(step?: number): void;
+
+  /**
+   * Toggle captions display. If no parameter is passed, it will toggle based on current status.
+   */
+  toggleCaptions(toggle?: boolean): void;
+
+  /**
+   * Trigger the airplay dialog on supported devices.
+   */
+  airplay(): void;
+
+  /**
+   * Toggle the controls (video only). Takes optional truthy value to force it on/off.
+   */
+  toggleControls(toggle: boolean): void;
+
+  /**
+   * Add an event listener for the specified event.
+   */
+  on(
+    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
+    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  ): void;
+
+  /**
+   * Add an event listener for the specified event once.
+   */
+  once(
+    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
+    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  ): void;
+
+  /**
+   * Remove an event listener for the specified event.
+   */
+  off(
+    event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
+    callback: (this: this, event: Plyr.PlyrEvent) => void,
+  ): void;
+
+  /**
+   * Check support for a mime type.
+   */
+  supports(type: string): boolean;
+
+  /**
+   * Destroy lib instance
+   */
+  destroy(): void;
+}
+
+declare namespace Plyr {
+  type MediaType = 'audio' | 'video';
+  type Provider = 'html5' | 'youtube' | 'vimeo';
+  type StandardEvent =
+    | 'progress'
+    | 'playing'
+    | 'play'
+    | 'pause'
+    | 'timeupdate'
+    | 'volumechange'
+    | 'seeking'
+    | 'seeked'
+    | 'ratechange'
+    | 'ended'
+    | 'enterfullscreen'
+    | 'exitfullscreen'
+    | 'captionsenabled'
+    | 'captionsdisabled'
+    | 'languagechange'
+    | 'controlshidden'
+    | 'controlsshown'
+    | 'ready';
+  type Html5Event =
+    | 'loadstart'
+    | 'loadeddata'
+    | 'loadedmetadata'
+    | 'canplay'
+    | 'canplaythrough'
+    | 'stalled'
+    | 'waiting'
+    | 'emptied'
+    | 'cuechange'
+    | 'error';
+  type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
+
+  interface FullscreenControl {
     /**
-     * Setup a new instance
+     * Indicates if the current player is in fullscreen mode.
      */
-    static setup(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options): Plyr[];
+    readonly active: boolean;
 
     /**
-     * Check for support
-     * @param mediaType
-     * @param provider
-     * @param playsInline Whether the player has the playsinline attribute (only applicable to iOS 10+)
+     * Indicates if the current player has fullscreen enabled.
      */
-    static supported(mediaType?: Plyr.MediaType, provider?: Plyr.Provider, playsInline?: boolean): Plyr.Support;
+    readonly enabled: boolean;
 
-    constructor(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options);
+    /**
+     * Enter fullscreen. If fullscreen is not supported, a fallback ""full window/viewport"" is used instead.
+     */
+    enter(): void;
 
     /**
-     * Indicates if the current player is HTML5.
+     * Exit fullscreen.
      */
-    readonly isHTML5: boolean;
+    exit(): void;
 
     /**
-     * Indicates if the current player is an embedded player.
+     * Toggle fullscreen.
      */
-    readonly isEmbed: boolean;
+    toggle(): void;
+  }
 
+  interface Options {
     /**
-     * Indicates if the current player is playing.
+     * 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.
      */
-    readonly playing: boolean;
+    enabled?: boolean;
 
     /**
-     * Indicates if the current player is paused.
+     * Display debugging information in the console
      */
-    readonly paused: boolean;
+    debug?: boolean;
 
     /**
-     * Indicates if the current player is stopped.
+     * 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 for more info on how the html needs to be structured.
+     * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
      */
-    readonly stopped: boolean;
+    controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
 
     /**
-     * Indicates if the current player has finished playback.
+     * If you're using the default controls are used then you can specify which settings to show in the menu
+     * Defaults to ['captions', 'quality', 'speed', 'loop']
      */
-    readonly ended: boolean;
+    settings?: string[];
 
     /**
-     * Returns a float between 0 and 1 indicating how much of the media is buffered
+     * Used for internationalization (i18n) of the text within the UI.
      */
-    readonly buffered: number;
+    i18n?: any;
 
     /**
-     * Gets or sets the currentTime for the player. The setter accepts a float in seconds.
+     * Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself.
      */
-    currentTime: number;
+    loadSprite?: boolean;
 
     /**
-     * Indicates if the current player is seeking.
+     * Specify a URL or path to the SVG sprite. See the SVG section for more info.
      */
-    readonly seeking: boolean;
+    iconUrl?: string;
 
     /**
-     * Returns the duration for the current media.
+     * 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.
      */
-    readonly duration: number;
+    iconPrefix?: string;
 
     /**
-     * Gets or sets the volume for the player. The setter accepts a float between 0 and 1.
+     * Specify a URL or path to a blank video file used to properly cancel network requests.
      */
-    volume: number;
+    blankUrl?: string;
 
     /**
-     * Gets or sets the muted state of the player. The setter accepts a boolean.
+     * 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.
      */
-    muted: boolean;
+    autoplay?: boolean;
 
     /**
-     * Indicates if the current media has an audio track.
+     * Only allow one player playing at once.
      */
-    readonly hasAudio: boolean;
+    autopause?: boolean;
 
     /**
-     * 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.
+     * The time, in seconds, to seek when a user hits fast forward or rewind.
      */
-    speed: number;
+    seekTime?: number;
 
     /**
-     * Gets or sets the quality for the player. The setter accepts a value from the options specified in your config.
+     * A number, between 0 and 1, representing the initial volume of the player.
      */
-    quality: number;
+    volume?: number;
 
     /**
-     * Gets or sets the current loop state of the player.
+     * Whether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.
      */
-    loop: boolean;
+    muted?: boolean;
 
     /**
-     * Gets or sets the current source for the player.
+     * Click (or tap) of the video container will toggle play/pause.
      */
-    source: Plyr.SourceInfo;
+    clickToPlay?: boolean;
 
     /**
-     * Gets or sets the current poster image URL for the player.
+     * Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.
      */
-    poster: string;
+    disableContextMenu?: boolean;
 
     /**
-     * Gets or sets the autoplay state of the player.
+     * 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.
      */
-    autoplay: boolean;
+    hideControls?: boolean;
 
     /**
-     * Gets or sets the caption track by index. 1 means the track is missing or captions is not active
+     * Reset the playback to the start once playback is complete.
      */
-    currentTrack: number;
+    resetOnEnd?: boolean;
 
     /**
-     * Gets or sets the preferred captions language for the player. The setter accepts an ISO twoletter 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.
+     * Enable keyboard shortcuts for focused players only or globally
      */
-    language: string;
+    keyboard?: KeyboardOptions;
 
     /**
-     * Gets or sets the picture-in-picture state of the player. This currently only supported on Safari 10+ on MacOS Sierra+ and iOS 10+.
+     * 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.
      */
-    pip: boolean;
+    tooltips?: TooltipOptions;
 
     /**
-     * Gets or sets the aspect ratio for embedded players.
+     * Specify a custom duration for media.
      */
-    ratio?: string;
+    duration?: number;
 
     /**
-     * Returns the current video Provider
+     * 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).
      */
-    readonly provider: 'html5' | 'vimeo' | 'youtube';
+    displayDuration?: boolean;
 
     /**
-     * Returns the native API for Vimeo or Youtube players
+     * Display the current time as a countdown rather than an incremental counter.
      */
-    readonly embed?: any;
+    invertTime?: boolean;
 
-    readonly fullscreen: Plyr.FullscreenControl;
+    /**
+     * Allow users to click to toggle the above.
+     */
+    toggleInvert?: boolean;
 
     /**
-     * Start playback.
-     * For HTML5 players, play() will return a Promise in some browsers - WebKit and Mozilla according to MDN at time of writing.
+     * 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.
      */
-    play(): Promise<void> | void;
+    listeners?: { [key: string]: (error: PlyrEvent) => void };
 
     /**
-     * Pause playback.
+     * 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).
      */
-    pause(): void;
+    captions?: CaptionOptions;
 
     /**
-     * Toggle playback, if no parameters are passed, it will toggle based on current status.
+     * 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)
      */
-    togglePlay(toggle?: boolean): boolean;
+    fullscreen?: FullScreenOptions;
 
     /**
-     * Stop playback and reset to start.
+     * The aspect ratio you want to use for embedded players.
      */
-    stop(): void;
+    ratio?: string;
+
+    /**
+     * enabled: Allow use of local storage to store user settings. key: The key name to use.
+     */
+    storage?: StorageOptions;
 
     /**
-     * Restart playback.
+     * 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.
      */
-    restart(): void;
+    speed?: SpeedOptions;
 
     /**
-     * Rewind playback by the specified seek time. If no parameter is passed, the default seek time will be used.
+     * Currently only supported by YouTube. default is the default quality level, determined by YouTube. options are the options to display.
      */
-    rewind(seekTime?: number): void;
+    quality?: QualityOptions;
 
     /**
-     * Fast forward by the specified seek time. If no parameter is passed, the default seek time will be used.
+     * 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.
      */
-    forward(seekTime?: number): void;
+    loop?: LoopOptions;
 
     /**
-     * Increase volume by the specified step. If no parameter is passed, the default step will be used.
+     * enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.
      */
-    increaseVolume(step?: number): void;
+    ads?: AdOptions;
 
     /**
-     * Increase volume by the specified step. If no parameter is passed, the default step will be used.
+     * Vimeo Player Options.
      */
-    decreaseVolume(step?: number): void;
+    vimeo?: object;
 
     /**
-     * Toggle captions display. If no parameter is passed, it will toggle based on current status.
+     * Youtube Player Options.
      */
-    toggleCaptions(toggle?: boolean): void;
+    youtube?: object;
+  }
+
+  interface QualityOptions {
+    default: number;
+    options: number[];
+  }
+
+  interface LoopOptions {
+    active: boolean;
+  }
+
+  interface AdOptions {
+    enabled: boolean;
+    publisherId: string;
+  }
+
+  interface SpeedOptions {
+    selected: number;
+    options: number[];
+  }
 
+  interface KeyboardOptions {
+    focused?: boolean;
+    global?: boolean;
+  }
+
+  interface TooltipOptions {
+    controls?: boolean;
+    seek?: boolean;
+  }
+
+  interface FullScreenOptions {
+    enabled?: boolean;
+    fallback?: boolean;
+    allowAudio?: boolean;
+    iosNative?: boolean;
+  }
+
+  interface CaptionOptions {
+    active?: boolean;
+    language?: string;
+    update?: boolean;
+  }
+
+  interface StorageOptions {
+    enabled?: boolean;
+    key?: string;
+  }
+
+  interface SourceInfo {
     /**
-     * Trigger the airplay dialog on supported devices.
+     * Note: YouTube and Vimeo are currently not supported as audio sources.
      */
-    airplay(): void;
+    type: MediaType;
 
     /**
-     * Toggle the controls (video only). Takes optional truthy value to force it on/off.
+     * Title of the new media. Used for the aria-label attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.
      */
-    toggleControls(toggle: boolean): void;
+    title?: string;
 
     /**
-     * Add an event listener for the specified event.
+     * 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.
      */
-    on(
-        event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-        callback: (this: this, event: Plyr.PlyrEvent) => void,
-    ): void;
+    sources: Source[];
 
     /**
-     * Add an event listener for the specified event once.
+     * The URL for the poster image (HTML5 video only).
      */
-    once(
-        event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-        callback: (this: this, event: Plyr.PlyrEvent) => void,
-    ): void;
+    poster?: string;
 
     /**
-     * Remove an event listener for the specified event.
+     * 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.
      */
-    off(
-        event: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent,
-        callback: (this: this, event: Plyr.PlyrEvent) => void,
-    ): void;
+    tracks?: Track[];
+  }
 
+  interface Source {
     /**
-     * Check support for a mime type.
+     * The URL of the media file (or YouTube/Vimeo URL).
      */
-    supports(type: string): boolean;
+    src: string;
+    /**
+     * The MIME type of the media file (if HTML5).
+     */
+    type?: string;
+    provider?: Provider;
+    size?: number;
+  }
 
+  type TrackKind = 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+  interface Track {
     /**
-     * Destroy lib instance
+     * Indicates how the text track is meant to be used
      */
-    destroy(): void;
-}
+    kind: TrackKind;
+    /**
+     * Indicates a user-readable title for the track
+     */
+    label: string;
+    /**
+     * The language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.
+     */
+    srcLang?: string;
+    /**
+     * The URL of the track (.vtt file).
+     */
+    src: string;
 
-declare namespace Plyr {
-    type MediaType = 'audio' | 'video';
-    type Provider = 'html5' | 'youtube' | 'vimeo';
-    type StandardEvent =
-        | 'progress'
-        | 'playing'
-        | 'play'
-        | 'pause'
-        | 'timeupdate'
-        | 'volumechange'
-        | 'seeking'
-        | 'seeked'
-        | 'ratechange'
-        | 'ended'
-        | 'enterfullscreen'
-        | 'exitfullscreen'
-        | 'captionsenabled'
-        | 'captionsdisabled'
-        | 'languagechange'
-        | 'controlshidden'
-        | 'controlsshown'
-        | 'ready';
-    type Html5Event =
-        | 'loadstart'
-        | 'loadeddata'
-        | 'loadedmetadata'
-        | 'canplay'
-        | 'canplaythrough'
-        | 'stalled'
-        | 'waiting'
-        | 'emptied'
-        | 'cuechange'
-        | 'error';
-    type YoutubeEvent = 'statechange' | 'qualitychange' | 'qualityrequested';
-
-    interface FullscreenControl {
-        /**
-         * Indicates if the current player is in fullscreen mode.
-         */
-        readonly active: boolean;
-
-        /**
-         * Indicates if the current player has fullscreen enabled.
-         */
-        readonly enabled: boolean;
-
-        /**
-         * Enter fullscreen. If fullscreen is not supported, a fallback ""full window/viewport"" is used instead.
-         */
-        enter(): void;
-
-        /**
-         * Exit fullscreen.
-         */
-        exit(): void;
-
-        /**
-         * Toggle fullscreen.
-         */
-        toggle(): void;
-    }
-
-    interface Options {
-        /**
-         * 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.
-         */
-        enabled?: boolean;
-
-        /**
-         * Display debugging information in the console
-         */
-        debug?: boolean;
-
-        /**
-         * 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 for more info on how the html needs to be structured.
-         * Defaults to ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen']
-         */
-        controls?: string[] | ((id: string, seektime: number, title: string) => unknown) | Element;
-
-        /**
-         * If you're using the default controls are used then you can specify which settings to show in the menu
-         * Defaults to ['captions', 'quality', 'speed', 'loop']
-         */
-        settings?: string[];
-
-        /**
-         * Used for internationalization (i18n) of the text within the UI.
-         */
-        i18n?: any;
-
-        /**
-         * Load the SVG sprite specified as the iconUrl option (if a URL). If false, it is assumed you are handling sprite loading yourself.
-         */
-        loadSprite?: boolean;
-
-        /**
-         * Specify a URL or path to the SVG sprite. See the SVG section for more info.
-         */
-        iconUrl?: string;
-
-        /**
-         * 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.
-         */
-        iconPrefix?: string;
-
-        /**
-         * Specify a URL or path to a blank video file used to properly cancel network requests.
-         */
-        blankUrl?: string;
-
-        /**
-         * 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.
-         */
-        autoplay?: boolean;
-
-        /**
-         * Only allow one player playing at once.
-         */
-        autopause?: boolean;
-
-        /**
-         * The time, in seconds, to seek when a user hits fast forward or rewind.
-         */
-        seekTime?: number;
-
-        /**
-         * A number, between 0 and 1, representing the initial volume of the player.
-         */
-        volume?: number;
-
-        /**
-         * Whether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.
-         */
-        muted?: boolean;
-
-        /**
-         * Click (or tap) of the video container will toggle play/pause.
-         */
-        clickToPlay?: boolean;
-
-        /**
-         * Disable right click menu on video to help as very primitive obfuscation to prevent downloads of content.
-         */
-        disableContextMenu?: boolean;
-
-        /**
-         * 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.
-         */
-        hideControls?: boolean;
-
-        /**
-         * Reset the playback to the start once playback is complete.
-         */
-        resetOnEnd?: boolean;
-
-        /**
-         * Enable keyboard shortcuts for focused players only or globally
-         */
-        keyboard?: KeyboardOptions;
-
-        /**
-         * 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.
-         */
-        tooltips?: TooltipOptions;
-
-        /**
-         * Specify a custom duration for media.
-         */
-        duration?: number;
-
-        /**
-         * 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).
-         */
-        displayDuration?: boolean;
-
-        /**
-         * Display the current time as a countdown rather than an incremental counter.
-         */
-        invertTime?: boolean;
-
-        /**
-         * Allow users to click to toggle the above.
-         */
-        toggleInvert?: boolean;
-
-        /**
-         * 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.
-         */
-        listeners?: { [key: string]: (error: PlyrEvent) => void };
-
-        /**
-         * 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).
-         */
-        captions?: CaptionOptions;
-
-        /**
-         * 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)
-         */
-        fullscreen?: FullScreenOptions;
-
-        /**
-         * The aspect ratio you want to use for embedded players.
-         */
-        ratio?: string;
-
-        /**
-         * enabled: Allow use of local storage to store user settings. key: The key name to use.
-         */
-        storage?: StorageOptions;
-
-        /**
-         * 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.
-         */
-        speed?: SpeedOptions;
-
-        /**
-         * Currently only supported by YouTube. default is the default quality level, determined by YouTube. options are the options to display.
-         */
-        quality?: QualityOptions;
-
-        /**
-         * 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.
-         */
-        loop?: LoopOptions;
-
-        /**
-         * enabled: Whether to enable vi.ai ads. publisherId: Your unique vi.ai publisher ID.
-         */
-        ads?: AdOptions;
-
-        /**
-         * Vimeo Player Options.
-         */
-        vimeo?: object;
-
-        /**
-         * Youtube Player Options.
-         */
-        youtube?: object;
-    }
-
-    interface QualityOptions {
-        default: number;
-        options: number[];
-    }
-
-    interface LoopOptions {
-        active: boolean;
-    }
-
-    interface AdOptions {
-        enabled: boolean;
-        publisherId: string;
-    }
-
-    interface SpeedOptions {
-        selected: number;
-        options: number[];
-    }
-
-    interface KeyboardOptions {
-        focused?: boolean;
-        global?: boolean;
-    }
-
-    interface TooltipOptions {
-        controls?: boolean;
-        seek?: boolean;
-    }
-
-    interface FullScreenOptions {
-        enabled?: boolean;
-        fallback?: boolean;
-        allowAudio?: boolean;
-        iosNative?: boolean;
-    }
-
-    interface CaptionOptions {
-        active?: boolean;
-        language?: string;
-        update?: boolean;
-    }
-
-    interface StorageOptions {
-        enabled?: boolean;
-        key?: string;
-    }
-
-    interface SourceInfo {
-        /**
-         * Note: YouTube and Vimeo are currently not supported as audio sources.
-         */
-        type: MediaType;
-
-        /**
-         * Title of the new media. Used for the aria-label attribute on the play button, and outer container. YouTube and Vimeo are populated automatically.
-         */
-        title?: string;
-
-        /**
-         * 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.
-         */
-        sources: Source[];
-
-        /**
-         * The URL for the poster image (HTML5 video only).
-         */
-        poster?: 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.
-         */
-        tracks?: Track[];
-    }
-
-    interface Source {
-        /**
-         * The URL of the media file (or YouTube/Vimeo URL).
-         */
-        src: string;
-        /**
-         * The MIME type of the media file (if HTML5).
-         */
-        type?: string;
-        provider?: Provider;
-        size?: number;
-    }
-
-    type TrackKind = 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
-    interface Track {
-        /**
-         * Indicates how the text track is meant to be used
-         */
-        kind: TrackKind;
-        /**
-         * Indicates a user-readable title for the track
-         */
-        label: string;
-        /**
-         * The language of the track text data. It must be a valid BCP 47 language tag. If the kind attribute is set to subtitles, then srclang must be defined.
-         */
-        srcLang?: string;
-        /**
-         * The URL of the track (.vtt file).
-         */
-        src: string;
-
-        default?: boolean;
-    }
-
-    interface PlyrEvent extends CustomEvent {
-        readonly detail: { readonly plyr: Plyr };
-    }
-
-    interface Support {
-        api: boolean;
-        ui: boolean;
-    }
+    default?: boolean;
+  }
+
+  interface PlyrEvent extends CustomEvent {
+    readonly detail: { readonly plyr: Plyr };
+  }
+
+  interface Support {
+    api: boolean;
+    ui: boolean;
+  }
 }
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 00b95a5f..c755e2be 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -37,748 +37,748 @@ import { parseUrl } from './utils/urls';
 
 // Plyr instance
 class Plyr {
-    constructor(target, options) {
-        this.timers = {};
-
-        // State
-        this.ready = false;
-        this.loading = false;
-        this.failed = false;
-
-        // Touch device
-        this.touch = support.touch;
-
-        // Set the media element
-        this.media = target;
-
-        // String selector passed
-        if (is.string(this.media)) {
-            this.media = document.querySelectorAll(this.media);
-        }
-
-        // jQuery, NodeList or Array passed, use first element
-        if ((window.jQuery && this.media instanceof jQuery) || is.nodeList(this.media) || is.array(this.media)) {
-            // eslint-disable-next-line
-            this.media = this.media[0];
-        }
-
-        // Set config
-        this.config = extend(
-            {},
-            defaults,
-            Plyr.defaults,
-            options || {},
-            (() => {
-                try {
-                    return JSON.parse(this.media.getAttribute('data-plyr-config'));
-                } catch (e) {
-                    return {};
-                }
-            })(),
-        );
-
-        // Elements cache
-        this.elements = {
-            container: null,
-            captions: null,
-            buttons: {},
-            display: {},
-            progress: {},
-            inputs: {},
-            settings: {
-                popup: null,
-                menu: null,
-                panels: {},
-                buttons: {},
-            },
-        };
-
-        // Captions
-        this.captions = {
-            active: null,
-            currentTrack: -1,
-            meta: new WeakMap(),
-        };
-
-        // Fullscreen
-        this.fullscreen = {
-            active: false,
-        };
-
-        // Options
-        this.options = {
-            speed: [],
-            quality: [],
-        };
-
-        // Debugging
-        // TODO: move to globals
-        this.debug = new Console(this.config.debug);
-
-        // Log config options and support
-        this.debug.log('Config', this.config);
-        this.debug.log('Support', support);
-
-        // We need an element to setup
-        if (is.nullOrUndefined(this.media) || !is.element(this.media)) {
-            this.debug.error('Setup failed: no suitable element passed');
-            return;
-        }
-
-        // Bail if the element is initialized
-        if (this.media.plyr) {
-            this.debug.warn('Target already setup');
-            return;
-        }
-
-        // Bail if not enabled
-        if (!this.config.enabled) {
-            this.debug.error('Setup failed: disabled by config');
-            return;
+  constructor(target, options) {
+    this.timers = {};
+
+    // State
+    this.ready = false;
+    this.loading = false;
+    this.failed = false;
+
+    // Touch device
+    this.touch = support.touch;
+
+    // Set the media element
+    this.media = target;
+
+    // String selector passed
+    if (is.string(this.media)) {
+      this.media = document.querySelectorAll(this.media);
+    }
+
+    // jQuery, NodeList or Array passed, use first element
+    if ((window.jQuery && this.media instanceof jQuery) || is.nodeList(this.media) || is.array(this.media)) {
+      // eslint-disable-next-line
+      this.media = this.media[0];
+    }
+
+    // Set config
+    this.config = extend(
+      {},
+      defaults,
+      Plyr.defaults,
+      options || {},
+      (() => {
+        try {
+          return JSON.parse(this.media.getAttribute('data-plyr-config'));
+        } catch (e) {
+          return {};
         }
+      })(),
+    );
+
+    // Elements cache
+    this.elements = {
+      container: null,
+      captions: null,
+      buttons: {},
+      display: {},
+      progress: {},
+      inputs: {},
+      settings: {
+        popup: null,
+        menu: null,
+        panels: {},
+        buttons: {},
+      },
+    };
+
+    // Captions
+    this.captions = {
+      active: null,
+      currentTrack: -1,
+      meta: new WeakMap(),
+    };
+
+    // Fullscreen
+    this.fullscreen = {
+      active: false,
+    };
+
+    // Options
+    this.options = {
+      speed: [],
+      quality: [],
+    };
+
+    // Debugging
+    // TODO: move to globals
+    this.debug = new Console(this.config.debug);
+
+    // Log config options and support
+    this.debug.log('Config', this.config);
+    this.debug.log('Support', support);
+
+    // We need an element to setup
+    if (is.nullOrUndefined(this.media) || !is.element(this.media)) {
+      this.debug.error('Setup failed: no suitable element passed');
+      return;
+    }
+
+    // Bail if the element is initialized
+    if (this.media.plyr) {
+      this.debug.warn('Target already setup');
+      return;
+    }
+
+    // Bail if not enabled
+    if (!this.config.enabled) {
+      this.debug.error('Setup failed: disabled by config');
+      return;
+    }
+
+    // Bail if disabled or no basic support
+    // You may want to disable certain UAs etc
+    if (!support.check().api) {
+      this.debug.error('Setup failed: no support');
+      return;
+    }
+
+    // Cache original element state for .destroy()
+    const clone = this.media.cloneNode(true);
+    clone.autoplay = false;
+    this.elements.original = clone;
+
+    // Set media type based on tag or data attribute
+    // Supported: video, audio, vimeo, youtube
+    const type = this.media.tagName.toLowerCase();
+    // Embed properties
+    let iframe = null;
+    let url = null;
+
+    // Different setup based on type
+    switch (type) {
+      case 'div':
+        // Find the frame
+        iframe = this.media.querySelector('iframe');
+
+        // <iframe> type
+        if (is.element(iframe)) {
+          // Detect provider
+          url = parseUrl(iframe.getAttribute('src'));
+          this.provider = getProviderByUrl(url.toString());
+
+          // Rework elements
+          this.elements.container = this.media;
+          this.media = iframe;
+
+          // Reset classname
+          this.elements.container.className = '';
+
+          // Get attributes from URL and set config
+          if (url.search.length) {
+            const truthy = ['1', 'true'];
+
+            if (truthy.includes(url.searchParams.get('autoplay'))) {
+              this.config.autoplay = true;
+            }
+            if (truthy.includes(url.searchParams.get('loop'))) {
+              this.config.loop.active = true;
+            }
 
-        // Bail if disabled or no basic support
-        // You may want to disable certain UAs etc
-        if (!support.check().api) {
-            this.debug.error('Setup failed: no support');
-            return;
-        }
-
-        // Cache original element state for .destroy()
-        const clone = this.media.cloneNode(true);
-        clone.autoplay = false;
-        this.elements.original = clone;
-
-        // Set media type based on tag or data attribute
-        // Supported: video, audio, vimeo, youtube
-        const type = this.media.tagName.toLowerCase();
-        // Embed properties
-        let iframe = null;
-        let url = null;
-
-        // Different setup based on type
-        switch (type) {
-            case 'div':
-                // Find the frame
-                iframe = this.media.querySelector('iframe');
-
-                // <iframe> type
-                if (is.element(iframe)) {
-                    // Detect provider
-                    url = parseUrl(iframe.getAttribute('src'));
-                    this.provider = getProviderByUrl(url.toString());
-
-                    // Rework elements
-                    this.elements.container = this.media;
-                    this.media = iframe;
-
-                    // Reset classname
-                    this.elements.container.className = '';
-
-                    // Get attributes from URL and set config
-                    if (url.search.length) {
-                        const truthy = ['1', 'true'];
-
-                        if (truthy.includes(url.searchParams.get('autoplay'))) {
-                            this.config.autoplay = true;
-                        }
-                        if (truthy.includes(url.searchParams.get('loop'))) {
-                            this.config.loop.active = true;
-                        }
-
-                        // TODO: replace fullscreen.iosNative with this playsinline config option
-                        // YouTube requires the playsinline in the URL
-                        if (this.isYouTube) {
-                            this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
-                            this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
-                        } else {
-                            this.config.playsinline = true;
-                        }
-                    }
-                } else {
-                    // <div> with attributes
-                    this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
-
-                    // Remove attribute
-                    this.media.removeAttribute(this.config.attributes.embed.provider);
-                }
-
-                // Unsupported or missing provider
-                if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
-                    this.debug.error('Setup failed: Invalid provider');
-                    return;
-                }
-
-                // Audio will come later for external providers
-                this.type = types.video;
-
-                break;
-
-            case 'video':
-            case 'audio':
-                this.type = type;
-                this.provider = providers.html5;
-
-                // Get config from attributes
-                if (this.media.hasAttribute('crossorigin')) {
-                    this.config.crossorigin = true;
-                }
-                if (this.media.hasAttribute('autoplay')) {
-                    this.config.autoplay = true;
-                }
-                if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) {
-                    this.config.playsinline = true;
-                }
-                if (this.media.hasAttribute('muted')) {
-                    this.config.muted = true;
-                }
-                if (this.media.hasAttribute('loop')) {
-                    this.config.loop.active = true;
-                }
-
-                break;
+            // TODO: replace fullscreen.iosNative with this playsinline config option
+            // YouTube requires the playsinline in the URL
+            if (this.isYouTube) {
+              this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
+              this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
+            } else {
+              this.config.playsinline = true;
+            }
+          }
+        } else {
+          // <div> with attributes
+          this.provider = this.media.getAttribute(this.config.attributes.embed.provider);
 
-            default:
-                this.debug.error('Setup failed: unsupported type');
-                return;
+          // Remove attribute
+          this.media.removeAttribute(this.config.attributes.embed.provider);
         }
 
-        // Check for support again but with type
-        this.supported = support.check(this.type, this.provider, this.config.playsinline);
-
-        // If no support for even API, bail
-        if (!this.supported.api) {
-            this.debug.error('Setup failed: no support');
-            return;
+        // Unsupported or missing provider
+        if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) {
+          this.debug.error('Setup failed: Invalid provider');
+          return;
         }
 
-        this.eventListeners = [];
+        // Audio will come later for external providers
+        this.type = types.video;
 
-        // Create listeners
-        this.listeners = new Listeners(this);
+        break;
 
-        // Setup local storage for user settings
-        this.storage = new Storage(this);
+      case 'video':
+      case 'audio':
+        this.type = type;
+        this.provider = providers.html5;
 
-        // Store reference
-        this.media.plyr = this;
-
-        // Wrap media
-        if (!is.element(this.elements.container)) {
-            this.elements.container = createElement('div', { tabindex: 0 });
-            wrap(this.media, this.elements.container);
+        // Get config from attributes
+        if (this.media.hasAttribute('crossorigin')) {
+          this.config.crossorigin = true;
         }
-
-        // Add style hook
-        ui.addStyleHook.call(this);
-
-        // Setup media
-        media.setup.call(this);
-
-        // Listen for events if debugging
-        if (this.config.debug) {
-            on.call(this, this.elements.container, this.config.events.join(' '), event => {
-                this.debug.log(`event: ${event.type}`);
-            });
+        if (this.media.hasAttribute('autoplay')) {
+          this.config.autoplay = true;
         }
-
-        // Setup interface
-        // If embed but not fully supported, build interface now to avoid flash of controls
-        if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
-            ui.build.call(this);
+        if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) {
+          this.config.playsinline = true;
         }
-
-        // Container listeners
-        this.listeners.container();
-
-        // Global listeners
-        this.listeners.global();
-
-        // Setup fullscreen
-        this.fullscreen = new Fullscreen(this);
-
-        // Setup ads if provided
-        if (this.config.ads.enabled) {
-            this.ads = new Ads(this);
-        }
-
-        // Autoplay if required
-        if (this.isHTML5 && this.config.autoplay) {
-            setTimeout(() => silencePromise(this.play()), 10);
+        if (this.media.hasAttribute('muted')) {
+          this.config.muted = true;
         }
-
-        // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
-        this.lastSeekTime = 0;
-
-        // Setup preview thumbnails if enabled
-        if (this.config.previewThumbnails.enabled) {
-            this.previewThumbnails = new PreviewThumbnails(this);
+        if (this.media.hasAttribute('loop')) {
+          this.config.loop.active = true;
         }
-    }
-
-    // ---------------------------------------
-    // API
-    // ---------------------------------------
-
-    /**
-     * Types and provider helpers
-     */
-    get isHTML5() {
-        return this.provider === providers.html5;
-    }
 
-    get isEmbed() {
-        return this.isYouTube || this.isVimeo;
-    }
-
-    get isYouTube() {
-        return this.provider === providers.youtube;
-    }
+        break;
 
-    get isVimeo() {
-        return this.provider === providers.vimeo;
+      default:
+        this.debug.error('Setup failed: unsupported type');
+        return;
     }
 
-    get isVideo() {
-        return this.type === types.video;
-    }
+    // Check for support again but with type
+    this.supported = support.check(this.type, this.provider, this.config.playsinline);
 
-    get isAudio() {
-        return this.type === types.audio;
+    // If no support for even API, bail
+    if (!this.supported.api) {
+      this.debug.error('Setup failed: no support');
+      return;
     }
 
-    /**
-     * Play the media, or play the advertisement (if they are not blocked)
-     */
-    play() {
-        if (!is.function(this.media.play)) {
-            return null;
-        }
+    this.eventListeners = [];
 
-        // Intecept play with ads
-        if (this.ads && this.ads.enabled) {
-            this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));
-        }
+    // Create listeners
+    this.listeners = new Listeners(this);
 
-        // Return the promise (for HTML5)
-        return this.media.play();
-    }
+    // Setup local storage for user settings
+    this.storage = new Storage(this);
 
-    /**
-     * Pause the media
-     */
-    pause() {
-        if (!this.playing || !is.function(this.media.pause)) {
-            return null;
-        }
+    // Store reference
+    this.media.plyr = this;
 
-        return this.media.pause();
+    // Wrap media
+    if (!is.element(this.elements.container)) {
+      this.elements.container = createElement('div', { tabindex: 0 });
+      wrap(this.media, this.elements.container);
     }
 
-    /**
-     * Get playing state
-     */
-    get playing() {
-        return Boolean(this.ready && !this.paused && !this.ended);
-    }
+    // Add style hook
+    ui.addStyleHook.call(this);
 
-    /**
-     * Get paused state
-     */
-    get paused() {
-        return Boolean(this.media.paused);
-    }
+    // Setup media
+    media.setup.call(this);
 
-    /**
-     * Get stopped state
-     */
-    get stopped() {
-        return Boolean(this.paused && this.currentTime === 0);
+    // Listen for events if debugging
+    if (this.config.debug) {
+      on.call(this, this.elements.container, this.config.events.join(' '), event => {
+        this.debug.log(`event: ${event.type}`);
+      });
     }
 
-    /**
-     * Get ended state
-     */
-    get ended() {
-        return Boolean(this.media.ended);
+    // Setup interface
+    // If embed but not fully supported, build interface now to avoid flash of controls
+    if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
+      ui.build.call(this);
     }
 
-    /**
-     * Toggle playback based on current status
-     * @param {Boolean} input
-     */
-    togglePlay(input) {
-        // Toggle based on current state if nothing passed
-        const toggle = is.boolean(input) ? input : !this.playing;
+    // Container listeners
+    this.listeners.container();
 
-        if (toggle) {
-            return this.play();
-        }
+    // Global listeners
+    this.listeners.global();
 
-        return this.pause();
-    }
+    // Setup fullscreen
+    this.fullscreen = new Fullscreen(this);
 
-    /**
-     * Stop playback
-     */
-    stop() {
-        if (this.isHTML5) {
-            this.pause();
-            this.restart();
-        } else if (is.function(this.media.stop)) {
-            this.media.stop();
-        }
+    // Setup ads if provided
+    if (this.config.ads.enabled) {
+      this.ads = new Ads(this);
     }
 
-    /**
-     * Restart playback
-     */
-    restart() {
-        this.currentTime = 0;
+    // Autoplay if required
+    if (this.isHTML5 && this.config.autoplay) {
+      setTimeout(() => silencePromise(this.play()), 10);
     }
 
-    /**
-     * Rewind
-     * @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
-     */
-    rewind(seekTime) {
-        this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;
-    }
+    // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
+    this.lastSeekTime = 0;
 
-    /**
-     * Fast forward
-     * @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
-     */
-    forward(seekTime) {
-        this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;
+    // Setup preview thumbnails if enabled
+    if (this.config.previewThumbnails.enabled) {
+      this.previewThumbnails = new PreviewThumbnails(this);
     }
+  }
 
-    /**
-     * Seek to a time
-     * @param {Number} input - where to seek to in seconds. Defaults to 0 (the start)
-     */
-    set currentTime(input) {
-        // Bail if media duration isn't available yet
-        if (!this.duration) {
-            return;
-        }
-
-        // Validate input
-        const inputIsValid = is.number(input) && input > 0;
+  // ---------------------------------------
+  // API
+  // ---------------------------------------
 
-        // Set
-        this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0;
+  /**
+   * Types and provider helpers
+   */
+  get isHTML5() {
+    return this.provider === providers.html5;
+  }
 
-        // Logging
-        this.debug.log(`Seeking to ${this.currentTime} seconds`);
-    }
+  get isEmbed() {
+    return this.isYouTube || this.isVimeo;
+  }
 
-    /**
-     * Get current time
-     */
-    get currentTime() {
-        return Number(this.media.currentTime);
-    }
+  get isYouTube() {
+    return this.provider === providers.youtube;
+  }
 
-    /**
-     * Get buffered
-     */
-    get buffered() {
-        const { buffered } = this.media;
+  get isVimeo() {
+    return this.provider === providers.vimeo;
+  }
 
-        // YouTube / Vimeo return a float between 0-1
-        if (is.number(buffered)) {
-            return buffered;
-        }
+  get isVideo() {
+    return this.type === types.video;
+  }
 
-        // HTML5
-        // TODO: Handle buffered chunks of the media
-        // (i.e. seek to another section buffers only that section)
-        if (buffered && buffered.length && this.duration > 0) {
-            return buffered.end(0) / this.duration;
-        }
+  get isAudio() {
+    return this.type === types.audio;
+  }
 
-        return 0;
+  /**
+   * Play the media, or play the advertisement (if they are not blocked)
+   */
+  play() {
+    if (!is.function(this.media.play)) {
+      return null;
     }
 
-    /**
-     * Get seeking status
-     */
-    get seeking() {
-        return Boolean(this.media.seeking);
-    }
+    // Intecept play with ads
+    if (this.ads && this.ads.enabled) {
+      this.ads.managerPromise.then(() => this.ads.play()).catch(() => silencePromise(this.media.play()));
+    }
+
+    // Return the promise (for HTML5)
+    return this.media.play();
+  }
+
+  /**
+   * Pause the media
+   */
+  pause() {
+    if (!this.playing || !is.function(this.media.pause)) {
+      return null;
+    }
+
+    return this.media.pause();
+  }
+
+  /**
+   * Get playing state
+   */
+  get playing() {
+    return Boolean(this.ready && !this.paused && !this.ended);
+  }
+
+  /**
+   * Get paused state
+   */
+  get paused() {
+    return Boolean(this.media.paused);
+  }
+
+  /**
+   * Get stopped state
+   */
+  get stopped() {
+    return Boolean(this.paused && this.currentTime === 0);
+  }
+
+  /**
+   * Get ended state
+   */
+  get ended() {
+    return Boolean(this.media.ended);
+  }
+
+  /**
+   * Toggle playback based on current status
+   * @param {Boolean} input
+   */
+  togglePlay(input) {
+    // Toggle based on current state if nothing passed
+    const toggle = is.boolean(input) ? input : !this.playing;
+
+    if (toggle) {
+      return this.play();
+    }
+
+    return this.pause();
+  }
+
+  /**
+   * Stop playback
+   */
+  stop() {
+    if (this.isHTML5) {
+      this.pause();
+      this.restart();
+    } else if (is.function(this.media.stop)) {
+      this.media.stop();
+    }
+  }
+
+  /**
+   * Restart playback
+   */
+  restart() {
+    this.currentTime = 0;
+  }
+
+  /**
+   * Rewind
+   * @param {Number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime
+   */
+  rewind(seekTime) {
+    this.currentTime -= is.number(seekTime) ? seekTime : this.config.seekTime;
+  }
+
+  /**
+   * Fast forward
+   * @param {Number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime
+   */
+  forward(seekTime) {
+    this.currentTime += is.number(seekTime) ? seekTime : this.config.seekTime;
+  }
+
+  /**
+   * Seek to a time
+   * @param {Number} input - where to seek to in seconds. Defaults to 0 (the start)
+   */
+  set currentTime(input) {
+    // Bail if media duration isn't available yet
+    if (!this.duration) {
+      return;
+    }
+
+    // Validate input
+    const inputIsValid = is.number(input) && input > 0;
+
+    // Set
+    this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0;
+
+    // Logging
+    this.debug.log(`Seeking to ${this.currentTime} seconds`);
+  }
+
+  /**
+   * Get current time
+   */
+  get currentTime() {
+    return Number(this.media.currentTime);
+  }
+
+  /**
+   * Get buffered
+   */
+  get buffered() {
+    const { buffered } = this.media;
+
+    // YouTube / Vimeo return a float between 0-1
+    if (is.number(buffered)) {
+      return buffered;
+    }
+
+    // HTML5
+    // TODO: Handle buffered chunks of the media
+    // (i.e. seek to another section buffers only that section)
+    if (buffered && buffered.length && this.duration > 0) {
+      return buffered.end(0) / this.duration;
+    }
+
+    return 0;
+  }
+
+  /**
+   * Get seeking status
+   */
+  get seeking() {
+    return Boolean(this.media.seeking);
+  }
+
+  /**
+   * Get the duration of the current media
+   */
+  get duration() {
+    // Faux duration set via config
+    const fauxDuration = parseFloat(this.config.duration);
+    // Media duration can be NaN or Infinity before the media has loaded
+    const realDuration = (this.media || {}).duration;
+    const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
+
+    // If config duration is funky, use regular duration
+    return fauxDuration || duration;
+  }
+
+  /**
+   * Set the player volume
+   * @param {Number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
+   */
+  set volume(value) {
+    let volume = value;
+    const max = 1;
+    const min = 0;
+
+    if (is.string(volume)) {
+      volume = Number(volume);
+    }
+
+    // Load volume from storage if no value specified
+    if (!is.number(volume)) {
+      volume = this.storage.get('volume');
+    }
+
+    // Use config if all else fails
+    if (!is.number(volume)) {
+      ({ volume } = this.config);
+    }
+
+    // Maximum is volumeMax
+    if (volume > max) {
+      volume = max;
+    }
+    // Minimum is volumeMin
+    if (volume < min) {
+      volume = min;
+    }
+
+    // Update config
+    this.config.volume = volume;
+
+    // Set the player volume
+    this.media.volume = volume;
 
-    /**
-     * Get the duration of the current media
-     */
-    get duration() {
-        // Faux duration set via config
-        const fauxDuration = parseFloat(this.config.duration);
-        // Media duration can be NaN or Infinity before the media has loaded
-        const realDuration = (this.media || {}).duration;
-        const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
-
-        // If config duration is funky, use regular duration
-        return fauxDuration || duration;
+    // If muted, and we're increasing volume manually, reset muted state
+    if (!is.empty(value) && this.muted && volume > 0) {
+      this.muted = false;
     }
+  }
 
-    /**
-     * Set the player volume
-     * @param {Number} value - must be between 0 and 1. Defaults to the value from local storage and config.volume if not set in storage
-     */
-    set volume(value) {
-        let volume = value;
-        const max = 1;
-        const min = 0;
-
-        if (is.string(volume)) {
-            volume = Number(volume);
-        }
+  /**
+   * Get the current player volume
+   */
+  get volume() {
+    return Number(this.media.volume);
+  }
 
-        // Load volume from storage if no value specified
-        if (!is.number(volume)) {
-            volume = this.storage.get('volume');
-        }
+  /**
+   * Increase volume
+   * @param {Boolean} step - How much to decrease by (between 0 and 1)
+   */
+  increaseVolume(step) {
+    const volume = this.media.muted ? 0 : this.volume;
+    this.volume = volume + (is.number(step) ? step : 0);
+  }
 
-        // Use config if all else fails
-        if (!is.number(volume)) {
-            ({ volume } = this.config);
-        }
+  /**
+   * Decrease volume
+   * @param {Boolean} step - How much to decrease by (between 0 and 1)
+   */
+  decreaseVolume(step) {
+    this.increaseVolume(-step);
+  }
 
-        // Maximum is volumeMax
-        if (volume > max) {
-            volume = max;
-        }
-        // Minimum is volumeMin
-        if (volume < min) {
-            volume = min;
-        }
+  /**
+   * Set muted state
+   * @param {Boolean} mute
+   */
+  set muted(mute) {
+    let toggle = mute;
 
-        // Update config
-        this.config.volume = volume;
+    // Load muted state from storage
+    if (!is.boolean(toggle)) {
+      toggle = this.storage.get('muted');
+    }
+
+    // Use config if all else fails
+    if (!is.boolean(toggle)) {
+      toggle = this.config.muted;
+    }
 
-        // Set the player volume
-        this.media.volume = volume;
+    // Update config
+    this.config.muted = toggle;
 
-        // If muted, and we're increasing volume manually, reset muted state
-        if (!is.empty(value) && this.muted && volume > 0) {
-            this.muted = false;
-        }
-    }
+    // Set mute on the player
+    this.media.muted = toggle;
+  }
 
-    /**
-     * Get the current player volume
-     */
-    get volume() {
-        return Number(this.media.volume);
-    }
+  /**
+   * Get current muted state
+   */
+  get muted() {
+    return Boolean(this.media.muted);
+  }
 
-    /**
-     * Increase volume
-     * @param {Boolean} step - How much to decrease by (between 0 and 1)
-     */
-    increaseVolume(step) {
-        const volume = this.media.muted ? 0 : this.volume;
-        this.volume = volume + (is.number(step) ? step : 0);
+  /**
+   * Check if the media has audio
+   */
+  get hasAudio() {
+    // Assume yes for all non HTML5 (as we can't tell...)
+    if (!this.isHTML5) {
+      return true;
     }
 
-    /**
-     * Decrease volume
-     * @param {Boolean} step - How much to decrease by (between 0 and 1)
-     */
-    decreaseVolume(step) {
-        this.increaseVolume(-step);
+    if (this.isAudio) {
+      return true;
     }
 
-    /**
-     * Set muted state
-     * @param {Boolean} mute
-     */
-    set muted(mute) {
-        let toggle = mute;
-
-        // Load muted state from storage
-        if (!is.boolean(toggle)) {
-            toggle = this.storage.get('muted');
-        }
-
-        // Use config if all else fails
-        if (!is.boolean(toggle)) {
-            toggle = this.config.muted;
-        }
+    // Get audio tracks
+    return (
+      Boolean(this.media.mozHasAudio) ||
+      Boolean(this.media.webkitAudioDecodedByteCount) ||
+      Boolean(this.media.audioTracks && this.media.audioTracks.length)
+    );
+  }
 
-        // Update config
-        this.config.muted = toggle;
+  /**
+   * Set playback speed
+   * @param {Number} speed - the speed of playback (0.5-2.0)
+   */
+  set speed(input) {
+    let speed = null;
 
-        // Set mute on the player
-        this.media.muted = toggle;
+    if (is.number(input)) {
+      speed = input;
     }
 
-    /**
-     * Get current muted state
-     */
-    get muted() {
-        return Boolean(this.media.muted);
+    if (!is.number(speed)) {
+      speed = this.storage.get('speed');
     }
 
-    /**
-     * Check if the media has audio
-     */
-    get hasAudio() {
-        // Assume yes for all non HTML5 (as we can't tell...)
-        if (!this.isHTML5) {
-            return true;
-        }
-
-        if (this.isAudio) {
-            return true;
-        }
-
-        // Get audio tracks
-        return (
-            Boolean(this.media.mozHasAudio) ||
-            Boolean(this.media.webkitAudioDecodedByteCount) ||
-            Boolean(this.media.audioTracks && this.media.audioTracks.length)
-        );
+    if (!is.number(speed)) {
+      speed = this.config.speed.selected;
     }
 
-    /**
-     * Set playback speed
-     * @param {Number} speed - the speed of playback (0.5-2.0)
-     */
-    set speed(input) {
-        let speed = null;
+    // Clamp to min/max
+    const { minimumSpeed: min, maximumSpeed: max } = this;
+    speed = clamp(speed, min, max);
 
-        if (is.number(input)) {
-            speed = input;
-        }
-
-        if (!is.number(speed)) {
-            speed = this.storage.get('speed');
-        }
+    // Update config
+    this.config.speed.selected = speed;
 
-        if (!is.number(speed)) {
-            speed = this.config.speed.selected;
-        }
+    // Set media speed
+    setTimeout(() => {
+      this.media.playbackRate = speed;
+    }, 0);
+  }
+
+  /**
+   * Get current playback speed
+   */
+  get speed() {
+    return Number(this.media.playbackRate);
+  }
 
-        // Clamp to min/max
-        const { minimumSpeed: min, maximumSpeed: max } = this;
-        speed = clamp(speed, min, max);
-
-        // Update config
-        this.config.speed.selected = speed;
-
-        // Set media speed
-        setTimeout(() => {
-            this.media.playbackRate = speed;
-        }, 0);
+  /**
+   * Get the minimum allowed speed
+   */
+  get minimumSpeed() {
+    if (this.isYouTube) {
+      // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
+      return Math.min(...this.options.speed);
     }
 
-    /**
-     * Get current playback speed
-     */
-    get speed() {
-        return Number(this.media.playbackRate);
+    if (this.isVimeo) {
+      // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror
+      return 0.5;
     }
 
-    /**
-     * Get the minimum allowed speed
-     */
-    get minimumSpeed() {
-        if (this.isYouTube) {
-            // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
-            return Math.min(...this.options.speed);
-        }
+    // https://stackoverflow.com/a/32320020/1191319
+    return 0.0625;
+  }
 
-        if (this.isVimeo) {
-            // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror
-            return 0.5;
-        }
+  /**
+   * Get the maximum allowed speed
+   */
+  get maximumSpeed() {
+    if (this.isYouTube) {
+      // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
+      return Math.max(...this.options.speed);
+    }
 
-        // https://stackoverflow.com/a/32320020/1191319
-        return 0.0625;
+    if (this.isVimeo) {
+      // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror
+      return 2;
     }
 
-    /**
-     * Get the maximum allowed speed
-     */
-    get maximumSpeed() {
-        if (this.isYouTube) {
-            // https://developers.google.com/youtube/iframe_api_reference#setPlaybackRate
-            return Math.max(...this.options.speed);
-        }
+    // https://stackoverflow.com/a/32320020/1191319
+    return 16;
+  }
 
-        if (this.isVimeo) {
-            // https://github.com/vimeo/player.js/#setplaybackrateplaybackrate-number-promisenumber-rangeerrorerror
-            return 2;
-        }
+  /**
+   * Set playback quality
+   * Currently HTML5 & YouTube only
+   * @param {Number} input - Quality level
+   */
+  set quality(input) {
+    const config = this.config.quality;
+    const options = this.options.quality;
 
-        // https://stackoverflow.com/a/32320020/1191319
-        return 16;
+    if (!options.length) {
+      return;
     }
 
-    /**
-     * Set playback quality
-     * Currently HTML5 & YouTube only
-     * @param {Number} input - Quality level
-     */
-    set quality(input) {
-        const config = this.config.quality;
-        const options = this.options.quality;
-
-        if (!options.length) {
-            return;
-        }
-
-        let quality = [
-            !is.empty(input) && Number(input),
-            this.storage.get('quality'),
-            config.selected,
-            config.default,
-        ].find(is.number);
+    let quality = [
+      !is.empty(input) && Number(input),
+      this.storage.get('quality'),
+      config.selected,
+      config.default,
+    ].find(is.number);
 
-        let updateStorage = true;
+    let updateStorage = true;
 
-        if (!options.includes(quality)) {
-            const value = closest(options, quality);
-            this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
-            quality = value;
+    if (!options.includes(quality)) {
+      const value = closest(options, quality);
+      this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`);
+      quality = value;
 
-            // Don't update storage if quality is not supported
-            updateStorage = false;
-        }
+      // Don't update storage if quality is not supported
+      updateStorage = false;
+    }
 
-        // Update config
-        config.selected = quality;
+    // Update config
+    config.selected = quality;
 
-        // Set quality
-        this.media.quality = quality;
+    // Set quality
+    this.media.quality = quality;
 
-        // Save to storage
-        if (updateStorage) {
-            this.storage.set({ quality });
-        }
+    // Save to storage
+    if (updateStorage) {
+      this.storage.set({ quality });
     }
+  }
 
-    /**
-     * Get current quality level
-     */
-    get quality() {
-        return this.media.quality;
-    }
+  /**
+   * Get current quality level
+   */
+  get quality() {
+    return this.media.quality;
+  }
 
-    /**
-     * Toggle loop
-     * TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
-     * @param {Boolean} input - Whether to loop or not
-     */
-    set loop(input) {
-        const toggle = is.boolean(input) ? input : this.config.loop.active;
-        this.config.loop.active = toggle;
-        this.media.loop = toggle;
+  /**
+   * Toggle loop
+   * TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
+   * @param {Boolean} input - Whether to loop or not
+   */
+  set loop(input) {
+    const toggle = is.boolean(input) ? input : this.config.loop.active;
+    this.config.loop.active = toggle;
+    this.media.loop = toggle;
 
-        // Set default to be a true toggle
-        /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
+    // Set default to be a true toggle
+    /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
 
         switch (type) {
             case 'start':
@@ -819,433 +819,433 @@ class Plyr {
                 this.config.loop.end = null;
                 break;
         } */
-    }
-
-    /**
-     * Get current loop state
-     */
-    get loop() {
-        return Boolean(this.media.loop);
-    }
-
-    /**
-     * Set new media source
-     * @param {Object} input - The new source object (see docs)
-     */
-    set source(input) {
-        source.change.call(this, input);
-    }
-
-    /**
-     * Get current source
-     */
-    get source() {
-        return this.media.currentSrc;
-    }
-
-    /**
-     * Get a download URL (either source or custom)
-     */
-    get download() {
-        const { download } = this.config.urls;
-
-        return is.url(download) ? download : this.source;
-    }
-
-    /**
-     * Set the download URL
-     */
-    set download(input) {
-        if (!is.url(input)) {
-            return;
-        }
-
-        this.config.urls.download = input;
-
-        controls.setDownloadUrl.call(this);
-    }
-
-    /**
-     * Set the poster image for a video
-     * @param {String} input - the URL for the new poster image
-     */
-    set poster(input) {
-        if (!this.isVideo) {
-            this.debug.warn('Poster can only be set for video');
-            return;
-        }
-
-        ui.setPoster.call(this, input, false).catch(() => {});
-    }
-
-    /**
-     * Get the current poster image
-     */
-    get poster() {
-        if (!this.isVideo) {
-            return null;
-        }
-
-        return this.media.getAttribute('poster');
-    }
-
-    /**
-     * Get the current aspect ratio in use
-     */
-    get ratio() {
-        if (!this.isVideo) {
-            return null;
-        }
-
-        const ratio = reduceAspectRatio(getAspectRatio.call(this));
-
-        return is.array(ratio) ? ratio.join(':') : ratio;
-    }
-
-    /**
-     * Set video aspect ratio
-     */
-    set ratio(input) {
-        if (!this.isVideo) {
-            this.debug.warn('Aspect ratio can only be set for video');
-            return;
-        }
-
-        if (!is.string(input) || !validateRatio(input)) {
-            this.debug.error(`Invalid aspect ratio specified (${input})`);
-            return;
-        }
-
-        this.config.ratio = input;
-
-        setAspectRatio.call(this);
-    }
-
-    /**
-     * Set the autoplay state
-     * @param {Boolean} input - Whether to autoplay or not
-     */
-    set autoplay(input) {
-        const toggle = is.boolean(input) ? input : this.config.autoplay;
-        this.config.autoplay = toggle;
-    }
-
-    /**
-     * Get the current autoplay state
-     */
-    get autoplay() {
-        return Boolean(this.config.autoplay);
-    }
-
-    /**
-     * Toggle captions
-     * @param {Boolean} input - Whether to enable captions
-     */
-    toggleCaptions(input) {
-        captions.toggle.call(this, input, false);
-    }
-
-    /**
-     * Set the caption track by index
-     * @param {Number} - Caption index
-     */
-    set currentTrack(input) {
-        captions.set.call(this, input, false);
-    }
-
-    /**
-     * Get the current caption track index (-1 if disabled)
-     */
-    get currentTrack() {
-        const { toggled, currentTrack } = this.captions;
-        return toggled ? currentTrack : -1;
-    }
-
-    /**
-     * Set the wanted language for captions
-     * Since tracks can be added later it won't update the actual caption track until there is a matching track
-     * @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
-     */
-    set language(input) {
-        captions.setLanguage.call(this, input, false);
-    }
-
-    /**
-     * Get the current track's language
-     */
-    get language() {
-        return (captions.getCurrentTrack.call(this) || {}).language;
-    }
-
-    /**
-     * Toggle picture-in-picture playback on WebKit/MacOS
-     * TODO: update player with state, support, enabled
-     * TODO: detect outside changes
-     */
-    set pip(input) {
-        // Bail if no support
-        if (!support.pip) {
-            return;
-        }
-
-        // Toggle based on current state if not passed
-        const toggle = is.boolean(input) ? input : !this.pip;
-
-        // Toggle based on current state
-        // Safari
-        if (is.function(this.media.webkitSetPresentationMode)) {
-            this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
-        }
-
-        // Chrome
-        if (is.function(this.media.requestPictureInPicture)) {
-            if (!this.pip && toggle) {
-                this.media.requestPictureInPicture();
-            } else if (this.pip && !toggle) {
-                document.exitPictureInPicture();
-            }
-        }
-    }
-
-    /**
-     * Get the current picture-in-picture state
-     */
-    get pip() {
-        if (!support.pip) {
-            return null;
-        }
-
-        // Safari
-        if (!is.empty(this.media.webkitPresentationMode)) {
-            return this.media.webkitPresentationMode === pip.active;
-        }
-
-        // Chrome
-        return this.media === document.pictureInPictureElement;
-    }
+  }
 
-    /**
-     * Trigger the airplay dialog
-     * TODO: update player with state, support, enabled
-     */
-    airplay() {
-        // Show dialog if supported
-        if (support.airplay) {
-            this.media.webkitShowPlaybackTargetPicker();
+  /**
+   * Get current loop state
+   */
+  get loop() {
+    return Boolean(this.media.loop);
+  }
+
+  /**
+   * Set new media source
+   * @param {Object} input - The new source object (see docs)
+   */
+  set source(input) {
+    source.change.call(this, input);
+  }
+
+  /**
+   * Get current source
+   */
+  get source() {
+    return this.media.currentSrc;
+  }
+
+  /**
+   * Get a download URL (either source or custom)
+   */
+  get download() {
+    const { download } = this.config.urls;
+
+    return is.url(download) ? download : this.source;
+  }
+
+  /**
+   * Set the download URL
+   */
+  set download(input) {
+    if (!is.url(input)) {
+      return;
+    }
+
+    this.config.urls.download = input;
+
+    controls.setDownloadUrl.call(this);
+  }
+
+  /**
+   * Set the poster image for a video
+   * @param {String} input - the URL for the new poster image
+   */
+  set poster(input) {
+    if (!this.isVideo) {
+      this.debug.warn('Poster can only be set for video');
+      return;
+    }
+
+    ui.setPoster.call(this, input, false).catch(() => {});
+  }
+
+  /**
+   * Get the current poster image
+   */
+  get poster() {
+    if (!this.isVideo) {
+      return null;
+    }
+
+    return this.media.getAttribute('poster');
+  }
+
+  /**
+   * Get the current aspect ratio in use
+   */
+  get ratio() {
+    if (!this.isVideo) {
+      return null;
+    }
+
+    const ratio = reduceAspectRatio(getAspectRatio.call(this));
+
+    return is.array(ratio) ? ratio.join(':') : ratio;
+  }
+
+  /**
+   * Set video aspect ratio
+   */
+  set ratio(input) {
+    if (!this.isVideo) {
+      this.debug.warn('Aspect ratio can only be set for video');
+      return;
+    }
+
+    if (!is.string(input) || !validateRatio(input)) {
+      this.debug.error(`Invalid aspect ratio specified (${input})`);
+      return;
+    }
+
+    this.config.ratio = input;
+
+    setAspectRatio.call(this);
+  }
+
+  /**
+   * Set the autoplay state
+   * @param {Boolean} input - Whether to autoplay or not
+   */
+  set autoplay(input) {
+    const toggle = is.boolean(input) ? input : this.config.autoplay;
+    this.config.autoplay = toggle;
+  }
+
+  /**
+   * Get the current autoplay state
+   */
+  get autoplay() {
+    return Boolean(this.config.autoplay);
+  }
+
+  /**
+   * Toggle captions
+   * @param {Boolean} input - Whether to enable captions
+   */
+  toggleCaptions(input) {
+    captions.toggle.call(this, input, false);
+  }
+
+  /**
+   * Set the caption track by index
+   * @param {Number} - Caption index
+   */
+  set currentTrack(input) {
+    captions.set.call(this, input, false);
+  }
+
+  /**
+   * Get the current caption track index (-1 if disabled)
+   */
+  get currentTrack() {
+    const { toggled, currentTrack } = this.captions;
+    return toggled ? currentTrack : -1;
+  }
+
+  /**
+   * Set the wanted language for captions
+   * Since tracks can be added later it won't update the actual caption track until there is a matching track
+   * @param {String} - Two character ISO language code (e.g. EN, FR, PT, etc)
+   */
+  set language(input) {
+    captions.setLanguage.call(this, input, false);
+  }
+
+  /**
+   * Get the current track's language
+   */
+  get language() {
+    return (captions.getCurrentTrack.call(this) || {}).language;
+  }
+
+  /**
+   * Toggle picture-in-picture playback on WebKit/MacOS
+   * TODO: update player with state, support, enabled
+   * TODO: detect outside changes
+   */
+  set pip(input) {
+    // Bail if no support
+    if (!support.pip) {
+      return;
+    }
+
+    // Toggle based on current state if not passed
+    const toggle = is.boolean(input) ? input : !this.pip;
+
+    // Toggle based on current state
+    // Safari
+    if (is.function(this.media.webkitSetPresentationMode)) {
+      this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive);
+    }
+
+    // Chrome
+    if (is.function(this.media.requestPictureInPicture)) {
+      if (!this.pip && toggle) {
+        this.media.requestPictureInPicture();
+      } else if (this.pip && !toggle) {
+        document.exitPictureInPicture();
+      }
+    }
+  }
+
+  /**
+   * Get the current picture-in-picture state
+   */
+  get pip() {
+    if (!support.pip) {
+      return null;
+    }
+
+    // Safari
+    if (!is.empty(this.media.webkitPresentationMode)) {
+      return this.media.webkitPresentationMode === pip.active;
+    }
+
+    // Chrome
+    return this.media === document.pictureInPictureElement;
+  }
+
+  /**
+   * Trigger the airplay dialog
+   * TODO: update player with state, support, enabled
+   */
+  airplay() {
+    // Show dialog if supported
+    if (support.airplay) {
+      this.media.webkitShowPlaybackTargetPicker();
+    }
+  }
+
+  /**
+   * Toggle the player controls
+   * @param {Boolean} [toggle] - Whether to show the controls
+   */
+  toggleControls(toggle) {
+    // Don't toggle if missing UI support or if it's audio
+    if (this.supported.ui && !this.isAudio) {
+      // Get state before change
+      const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);
+      // Negate the argument if not undefined since adding the class to hides the controls
+      const force = typeof toggle === 'undefined' ? undefined : !toggle;
+      // Apply and get updated state
+      const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
+
+      // Close menu
+      if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
+        controls.toggleMenu.call(this, false);
+      }
+
+      // Trigger event on change
+      if (hiding !== isHidden) {
+        const eventName = hiding ? 'controlshidden' : 'controlsshown';
+        triggerEvent.call(this, this.media, eventName);
+      }
+
+      return !hiding;
+    }
+
+    return false;
+  }
+
+  /**
+   * Add event listeners
+   * @param {String} event - Event type
+   * @param {Function} callback - Callback for when event occurs
+   */
+  on(event, callback) {
+    on.call(this, this.elements.container, event, callback);
+  }
+
+  /**
+   * Add event listeners once
+   * @param {String} event - Event type
+   * @param {Function} callback - Callback for when event occurs
+   */
+  once(event, callback) {
+    once.call(this, this.elements.container, event, callback);
+  }
+
+  /**
+   * Remove event listeners
+   * @param {String} event - Event type
+   * @param {Function} callback - Callback for when event occurs
+   */
+  off(event, callback) {
+    off(this.elements.container, event, callback);
+  }
+
+  /**
+   * Destroy an instance
+   * Event listeners are removed when elements are removed
+   * http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
+   * @param {Function} callback - Callback for when destroy is complete
+   * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
+   */
+  destroy(callback, soft = false) {
+    if (!this.ready) {
+      return;
+    }
+
+    const done = () => {
+      // Reset overflow (incase destroyed while in fullscreen)
+      document.body.style.overflow = '';
+
+      // GC for embed
+      this.embed = null;
+
+      // If it's a soft destroy, make minimal changes
+      if (soft) {
+        if (Object.keys(this.elements).length) {
+          // Remove elements
+          removeElement(this.elements.buttons.play);
+          removeElement(this.elements.captions);
+          removeElement(this.elements.controls);
+          removeElement(this.elements.wrapper);
+
+          // Clear for GC
+          this.elements.buttons.play = null;
+          this.elements.captions = null;
+          this.elements.controls = null;
+          this.elements.wrapper = null;
         }
-    }
-
-    /**
-     * Toggle the player controls
-     * @param {Boolean} [toggle] - Whether to show the controls
-     */
-    toggleControls(toggle) {
-        // Don't toggle if missing UI support or if it's audio
-        if (this.supported.ui && !this.isAudio) {
-            // Get state before change
-            const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);
-            // Negate the argument if not undefined since adding the class to hides the controls
-            const force = typeof toggle === 'undefined' ? undefined : !toggle;
-            // Apply and get updated state
-            const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);
-
-            // Close menu
-            if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) {
-                controls.toggleMenu.call(this, false);
-            }
 
-            // Trigger event on change
-            if (hiding !== isHidden) {
-                const eventName = hiding ? 'controlshidden' : 'controlsshown';
-                triggerEvent.call(this, this.media, eventName);
-            }
-
-            return !hiding;
+        // Callback
+        if (is.function(callback)) {
+          callback();
         }
+      } else {
+        // Unbind listeners
+        unbindListeners.call(this);
 
-        return false;
-    }
-
-    /**
-     * Add event listeners
-     * @param {String} event - Event type
-     * @param {Function} callback - Callback for when event occurs
-     */
-    on(event, callback) {
-        on.call(this, this.elements.container, event, callback);
-    }
-
-    /**
-     * Add event listeners once
-     * @param {String} event - Event type
-     * @param {Function} callback - Callback for when event occurs
-     */
-    once(event, callback) {
-        once.call(this, this.elements.container, event, callback);
-    }
+        // Replace the container with the original element provided
+        replaceElement(this.elements.original, this.elements.container);
 
-    /**
-     * Remove event listeners
-     * @param {String} event - Event type
-     * @param {Function} callback - Callback for when event occurs
-     */
-    off(event, callback) {
-        off(this.elements.container, event, callback);
-    }
+        // Event
+        triggerEvent.call(this, this.elements.original, 'destroyed', true);
 
-    /**
-     * Destroy an instance
-     * Event listeners are removed when elements are removed
-     * http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
-     * @param {Function} callback - Callback for when destroy is complete
-     * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc)
-     */
-    destroy(callback, soft = false) {
-        if (!this.ready) {
-            return;
+        // Callback
+        if (is.function(callback)) {
+          callback.call(this.elements.original);
         }
 
-        const done = () => {
-            // Reset overflow (incase destroyed while in fullscreen)
-            document.body.style.overflow = '';
-
-            // GC for embed
-            this.embed = null;
-
-            // If it's a soft destroy, make minimal changes
-            if (soft) {
-                if (Object.keys(this.elements).length) {
-                    // Remove elements
-                    removeElement(this.elements.buttons.play);
-                    removeElement(this.elements.captions);
-                    removeElement(this.elements.controls);
-                    removeElement(this.elements.wrapper);
-
-                    // Clear for GC
-                    this.elements.buttons.play = null;
-                    this.elements.captions = null;
-                    this.elements.controls = null;
-                    this.elements.wrapper = null;
-                }
-
-                // Callback
-                if (is.function(callback)) {
-                    callback();
-                }
-            } else {
-                // Unbind listeners
-                unbindListeners.call(this);
-
-                // Replace the container with the original element provided
-                replaceElement(this.elements.original, this.elements.container);
-
-                // Event
-                triggerEvent.call(this, this.elements.original, 'destroyed', true);
-
-                // Callback
-                if (is.function(callback)) {
-                    callback.call(this.elements.original);
-                }
-
-                // Reset state
-                this.ready = false;
-
-                // Clear for garbage collection
-                setTimeout(() => {
-                    this.elements = null;
-                    this.media = null;
-                }, 200);
-            }
-        };
-
-        // Stop playback
-        this.stop();
-
-        // Clear timeouts
-        clearTimeout(this.timers.loading);
-        clearTimeout(this.timers.controls);
-        clearTimeout(this.timers.resized);
-
-        // Provider specific stuff
-        if (this.isHTML5) {
-            // Restore native video controls
-            ui.toggleNativeControls.call(this, true);
-
-            // Clean up
-            done();
-        } else if (this.isYouTube) {
-            // Clear timers
-            clearInterval(this.timers.buffering);
-            clearInterval(this.timers.playing);
-
-            // Destroy YouTube API
-            if (this.embed !== null && is.function(this.embed.destroy)) {
-                this.embed.destroy();
-            }
-
-            // Clean up
-            done();
-        } else if (this.isVimeo) {
-            // Destroy Vimeo API
-            // then clean up (wait, to prevent postmessage errors)
-            if (this.embed !== null) {
-                this.embed.unload().then(done);
-            }
-
-            // Vimeo does not always return
-            setTimeout(done, 200);
-        }
-    }
-
-    /**
-     * Check for support for a mime type (HTML5 only)
-     * @param {String} type - Mime type
-     */
-    supports(type) {
-        return support.mime.call(this, type);
-    }
-
-    /**
-     * Check for support
-     * @param {String} type - Player type (audio/video)
-     * @param {String} provider - Provider (html5/youtube/vimeo)
-     * @param {Boolean} inline - Where player has `playsinline` sttribute
-     */
-    static supported(type, provider, inline) {
-        return support.check(type, provider, inline);
-    }
-
-    /**
-     * Load an SVG sprite into the page
-     * @param {String} url - URL for the SVG sprite
-     * @param {String} [id] - Unique ID
-     */
-    static loadSprite(url, id) {
-        return loadSprite(url, id);
-    }
-
-    /**
-     * Setup multiple instances
-     * @param {*} selector
-     * @param {Object} options
-     */
-    static setup(selector, options = {}) {
-        let targets = null;
-
-        if (is.string(selector)) {
-            targets = Array.from(document.querySelectorAll(selector));
-        } else if (is.nodeList(selector)) {
-            targets = Array.from(selector);
-        } else if (is.array(selector)) {
-            targets = selector.filter(is.element);
-        }
-
-        if (is.empty(targets)) {
-            return null;
-        }
+        // Reset state
+        this.ready = false;
 
-        return targets.map(t => new Plyr(t, options));
-    }
+        // Clear for garbage collection
+        setTimeout(() => {
+          this.elements = null;
+          this.media = null;
+        }, 200);
+      }
+    };
+
+    // Stop playback
+    this.stop();
+
+    // Clear timeouts
+    clearTimeout(this.timers.loading);
+    clearTimeout(this.timers.controls);
+    clearTimeout(this.timers.resized);
+
+    // Provider specific stuff
+    if (this.isHTML5) {
+      // Restore native video controls
+      ui.toggleNativeControls.call(this, true);
+
+      // Clean up
+      done();
+    } else if (this.isYouTube) {
+      // Clear timers
+      clearInterval(this.timers.buffering);
+      clearInterval(this.timers.playing);
+
+      // Destroy YouTube API
+      if (this.embed !== null && is.function(this.embed.destroy)) {
+        this.embed.destroy();
+      }
+
+      // Clean up
+      done();
+    } else if (this.isVimeo) {
+      // Destroy Vimeo API
+      // then clean up (wait, to prevent postmessage errors)
+      if (this.embed !== null) {
+        this.embed.unload().then(done);
+      }
+
+      // Vimeo does not always return
+      setTimeout(done, 200);
+    }
+  }
+
+  /**
+   * Check for support for a mime type (HTML5 only)
+   * @param {String} type - Mime type
+   */
+  supports(type) {
+    return support.mime.call(this, type);
+  }
+
+  /**
+   * Check for support
+   * @param {String} type - Player type (audio/video)
+   * @param {String} provider - Provider (html5/youtube/vimeo)
+   * @param {Boolean} inline - Where player has `playsinline` sttribute
+   */
+  static supported(type, provider, inline) {
+    return support.check(type, provider, inline);
+  }
+
+  /**
+   * Load an SVG sprite into the page
+   * @param {String} url - URL for the SVG sprite
+   * @param {String} [id] - Unique ID
+   */
+  static loadSprite(url, id) {
+    return loadSprite(url, id);
+  }
+
+  /**
+   * Setup multiple instances
+   * @param {*} selector
+   * @param {Object} options
+   */
+  static setup(selector, options = {}) {
+    let targets = null;
+
+    if (is.string(selector)) {
+      targets = Array.from(document.querySelectorAll(selector));
+    } else if (is.nodeList(selector)) {
+      targets = Array.from(selector);
+    } else if (is.array(selector)) {
+      targets = selector.filter(is.element);
+    }
+
+    if (is.empty(targets)) {
+      return null;
+    }
+
+    return targets.map(t => new Plyr(t, options));
+  }
 }
 
 Plyr.defaults = cloneDeep(defaults);
diff --git a/src/js/source.js b/src/js/source.js
index cb806746..b9fc7732 100644
--- a/src/js/source.js
+++ b/src/js/source.js
@@ -13,146 +13,146 @@ import is from './utils/is';
 import { getDeep } from './utils/objects';
 
 const source = {
-    // Add elements to HTML5 media (source, tracks, etc)
-    insertElements(type, attributes) {
-        if (is.string(attributes)) {
-            insertElement(type, this.media, {
-                src: attributes,
-            });
-        } else if (is.array(attributes)) {
-            attributes.forEach(attribute => {
-                insertElement(type, this.media, attribute);
-            });
+  // Add elements to HTML5 media (source, tracks, etc)
+  insertElements(type, attributes) {
+    if (is.string(attributes)) {
+      insertElement(type, this.media, {
+        src: attributes,
+      });
+    } else if (is.array(attributes)) {
+      attributes.forEach(attribute => {
+        insertElement(type, this.media, attribute);
+      });
+    }
+  },
+
+  // Update source
+  // Sources are not checked for support so be careful
+  change(input) {
+    if (!getDeep(input, 'sources.length')) {
+      this.debug.warn('Invalid source format');
+      return;
+    }
+
+    // Cancel current network requests
+    html5.cancelRequests.call(this);
+
+    // Destroy instance and re-setup
+    this.destroy.call(
+      this,
+      () => {
+        // Reset quality options
+        this.options.quality = [];
+
+        // Remove elements
+        removeElement(this.media);
+        this.media = null;
+
+        // Reset class name
+        if (is.element(this.elements.container)) {
+          this.elements.container.removeAttribute('class');
         }
-    },
-
-    // Update source
-    // Sources are not checked for support so be careful
-    change(input) {
-        if (!getDeep(input, 'sources.length')) {
-            this.debug.warn('Invalid source format');
-            return;
+
+        // Set the type and provider
+        const { sources, type } = input;
+        const [{ provider = providers.html5, src }] = sources;
+        const tagName = provider === 'html5' ? type : 'div';
+        const attributes = provider === 'html5' ? {} : { src };
+
+        Object.assign(this, {
+          provider,
+          type,
+          // Check for support
+          supported: support.check(type, provider, this.config.playsinline),
+          // Create new element
+          media: createElement(tagName, attributes),
+        });
+
+        // Inject the new element
+        this.elements.container.appendChild(this.media);
+
+        // Autoplay the new source?
+        if (is.boolean(input.autoplay)) {
+          this.config.autoplay = input.autoplay;
+        }
+
+        // Set attributes for audio and video
+        if (this.isHTML5) {
+          if (this.config.crossorigin) {
+            this.media.setAttribute('crossorigin', '');
+          }
+          if (this.config.autoplay) {
+            this.media.setAttribute('autoplay', '');
+          }
+          if (!is.empty(input.poster)) {
+            this.poster = input.poster;
+          }
+          if (this.config.loop.active) {
+            this.media.setAttribute('loop', '');
+          }
+          if (this.config.muted) {
+            this.media.setAttribute('muted', '');
+          }
+          if (this.config.playsinline) {
+            this.media.setAttribute('playsinline', '');
+          }
+        }
+
+        // Restore class hook
+        ui.addStyleHook.call(this);
+
+        // Set new sources for html5
+        if (this.isHTML5) {
+          source.insertElements.call(this, 'source', sources);
+        }
+
+        // Set video title
+        this.config.title = input.title;
+
+        // Set up from scratch
+        media.setup.call(this);
+
+        // HTML5 stuff
+        if (this.isHTML5) {
+          // Setup captions
+          if (Object.keys(input).includes('tracks')) {
+            source.insertElements.call(this, 'track', input.tracks);
+          }
+        }
+
+        // If HTML5 or embed but not fully supported, setupInterface and call ready now
+        if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
+          // Setup interface
+          ui.build.call(this);
+        }
+
+        // Load HTML5 sources
+        if (this.isHTML5) {
+          this.media.load();
+        }
+
+        // Update previewThumbnails config & reload plugin
+        if (!is.empty(input.previewThumbnails)) {
+          Object.assign(this.config.previewThumbnails, input.previewThumbnails);
+
+          // Cleanup previewThumbnails plugin if it was loaded
+          if (this.previewThumbnails && this.previewThumbnails.loaded) {
+            this.previewThumbnails.destroy();
+            this.previewThumbnails = null;
+          }
+
+          // Create new instance if it is still enabled
+          if (this.config.previewThumbnails.enabled) {
+            this.previewThumbnails = new PreviewThumbnails(this);
+          }
         }
 
-        // Cancel current network requests
-        html5.cancelRequests.call(this);
-
-        // Destroy instance and re-setup
-        this.destroy.call(
-            this,
-            () => {
-                // Reset quality options
-                this.options.quality = [];
-
-                // Remove elements
-                removeElement(this.media);
-                this.media = null;
-
-                // Reset class name
-                if (is.element(this.elements.container)) {
-                    this.elements.container.removeAttribute('class');
-                }
-
-                // Set the type and provider
-                const { sources, type } = input;
-                const [{ provider = providers.html5, src }] = sources;
-                const tagName = provider === 'html5' ? type : 'div';
-                const attributes = provider === 'html5' ? {} : { src };
-
-                Object.assign(this, {
-                    provider,
-                    type,
-                    // Check for support
-                    supported: support.check(type, provider, this.config.playsinline),
-                    // Create new element
-                    media: createElement(tagName, attributes),
-                });
-
-                // Inject the new element
-                this.elements.container.appendChild(this.media);
-
-                // Autoplay the new source?
-                if (is.boolean(input.autoplay)) {
-                    this.config.autoplay = input.autoplay;
-                }
-
-                // Set attributes for audio and video
-                if (this.isHTML5) {
-                    if (this.config.crossorigin) {
-                        this.media.setAttribute('crossorigin', '');
-                    }
-                    if (this.config.autoplay) {
-                        this.media.setAttribute('autoplay', '');
-                    }
-                    if (!is.empty(input.poster)) {
-                        this.poster = input.poster;
-                    }
-                    if (this.config.loop.active) {
-                        this.media.setAttribute('loop', '');
-                    }
-                    if (this.config.muted) {
-                        this.media.setAttribute('muted', '');
-                    }
-                    if (this.config.playsinline) {
-                        this.media.setAttribute('playsinline', '');
-                    }
-                }
-
-                // Restore class hook
-                ui.addStyleHook.call(this);
-
-                // Set new sources for html5
-                if (this.isHTML5) {
-                    source.insertElements.call(this, 'source', sources);
-                }
-
-                // Set video title
-                this.config.title = input.title;
-
-                // Set up from scratch
-                media.setup.call(this);
-
-                // HTML5 stuff
-                if (this.isHTML5) {
-                    // Setup captions
-                    if (Object.keys(input).includes('tracks')) {
-                        source.insertElements.call(this, 'track', input.tracks);
-                    }
-                }
-
-                // If HTML5 or embed but not fully supported, setupInterface and call ready now
-                if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
-                    // Setup interface
-                    ui.build.call(this);
-                }
-
-                // Load HTML5 sources
-                if (this.isHTML5) {
-                    this.media.load();
-                }
-
-                // Update previewThumbnails config & reload plugin
-                if (!is.empty(input.previewThumbnails)) {
-                    Object.assign(this.config.previewThumbnails, input.previewThumbnails);
-
-                    // Cleanup previewThumbnails plugin if it was loaded
-                    if (this.previewThumbnails && this.previewThumbnails.loaded) {
-                        this.previewThumbnails.destroy();
-                        this.previewThumbnails = null;
-                    }
-
-                    // Create new instance if it is still enabled
-                    if (this.config.previewThumbnails.enabled) {
-                        this.previewThumbnails = new PreviewThumbnails(this);
-                    }
-                }
-
-                // Update the fullscreen support
-                this.fullscreen.update();
-            },
-            true,
-        );
-    },
+        // Update the fullscreen support
+        this.fullscreen.update();
+      },
+      true,
+    );
+  },
 };
 
 export default source;
diff --git a/src/js/storage.js b/src/js/storage.js
index 27fdad9f..85b5e2b5 100644
--- a/src/js/storage.js
+++ b/src/js/storage.js
@@ -6,72 +6,72 @@ import is from './utils/is';
 import { extend } from './utils/objects';
 
 class Storage {
-    constructor(player) {
-        this.enabled = player.config.storage.enabled;
-        this.key = player.config.storage.key;
+  constructor(player) {
+    this.enabled = player.config.storage.enabled;
+    this.key = player.config.storage.key;
+  }
+
+  // Check for actual support (see if we can use it)
+  static get supported() {
+    try {
+      if (!('localStorage' in window)) {
+        return false;
+      }
+
+      const test = '___test';
+
+      // Try to use it (it might be disabled, e.g. user is in private mode)
+      // see: https://github.com/sampotts/plyr/issues/131
+      window.localStorage.setItem(test, test);
+      window.localStorage.removeItem(test);
+
+      return true;
+    } catch (e) {
+      return false;
     }
+  }
 
-    // Check for actual support (see if we can use it)
-    static get supported() {
-        try {
-            if (!('localStorage' in window)) {
-                return false;
-            }
-
-            const test = '___test';
-
-            // Try to use it (it might be disabled, e.g. user is in private mode)
-            // see: https://github.com/sampotts/plyr/issues/131
-            window.localStorage.setItem(test, test);
-            window.localStorage.removeItem(test);
-
-            return true;
-        } catch (e) {
-            return false;
-        }
+  get(key) {
+    if (!Storage.supported || !this.enabled) {
+      return null;
     }
 
-    get(key) {
-        if (!Storage.supported || !this.enabled) {
-            return null;
-        }
+    const store = window.localStorage.getItem(this.key);
 
-        const store = window.localStorage.getItem(this.key);
+    if (is.empty(store)) {
+      return null;
+    }
 
-        if (is.empty(store)) {
-            return null;
-        }
+    const json = JSON.parse(store);
 
-        const json = JSON.parse(store);
+    return is.string(key) && key.length ? json[key] : json;
+  }
 
-        return is.string(key) && key.length ? json[key] : json;
+  set(object) {
+    // Bail if we don't have localStorage support or it's disabled
+    if (!Storage.supported || !this.enabled) {
+      return;
     }
 
-    set(object) {
-        // Bail if we don't have localStorage support or it's disabled
-        if (!Storage.supported || !this.enabled) {
-            return;
-        }
-
-        // Can only store objectst
-        if (!is.object(object)) {
-            return;
-        }
+    // Can only store objectst
+    if (!is.object(object)) {
+      return;
+    }
 
-        // Get current storage
-        let storage = this.get();
+    // Get current storage
+    let storage = this.get();
 
-        // Default to empty object
-        if (is.empty(storage)) {
-            storage = {};
-        }
+    // Default to empty object
+    if (is.empty(storage)) {
+      storage = {};
+    }
 
-        // Update the working copy of the values
-        extend(storage, object);
+    // Update the working copy of the values
+    extend(storage, object);
 
-        // Update storage
-        window.localStorage.setItem(this.key, JSON.stringify(storage));
-    }
+    // Update storage
+    window.localStorage.setItem(this.key, JSON.stringify(storage));
+  }
 }
 
 export default Storage;
diff --git a/src/js/support.js b/src/js/support.js
index 81965867..99900210 100644
--- a/src/js/support.js
+++ b/src/js/support.js
@@ -9,110 +9,110 @@ import is from './utils/is';
 
 // Default codecs for checking mimetype support
 const defaultCodecs = {
-    'audio/ogg': 'vorbis',
-    'audio/wav': '1',
-    'video/webm': 'vp8, vorbis',
-    'video/mp4': 'avc1.42E01E, mp4a.40.2',
-    'video/ogg': 'theora',
+  'audio/ogg': 'vorbis',
+  'audio/wav': '1',
+  'video/webm': 'vp8, vorbis',
+  'video/mp4': 'avc1.42E01E, mp4a.40.2',
+  'video/ogg': 'theora',
 };
 
 // Check for feature support
 const support = {
-    // Basic support
-    audio: 'canPlayType' in document.createElement('audio'),
-    video: 'canPlayType' in document.createElement('video'),
-
-    // Check for support
-    // Basic functionality vs full UI
-    check(type, provider, playsinline) {
-        const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
-        const api = support[type] || provider !== 'html5';
-        const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
-
-        return {
-            api,
-            ui,
-        };
-    },
-
-    // Picture-in-picture support
-    // Safari & Chrome only currently
-    pip: (() => {
-        if (browser.isIPhone) {
-            return false;
-        }
-
-        // Safari
-        // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
-        if (is.function(createElement('video').webkitSetPresentationMode)) {
-            return true;
-        }
-
-        // Chrome
-        // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
-        if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
-            return true;
-        }
-
-        return false;
-    })(),
-
-    // Airplay support
-    // Safari only currently
-    airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
-
-    // Inline playback support
-    // https://webkit.org/blog/6784/new-video-policies-for-ios/
-    playsinline: 'playsInline' in document.createElement('video'),
-
-    // Check for mime type support against a player instance
-    // Credits: http://diveintohtml5.info/everything.html
-    // Related: http://www.leanbackplayer.com/test/h5mt.html
-    mime(input) {
-        if (is.empty(input)) {
-            return false;
-        }
-
-        const [mediaType] = input.split('/');
-        let type = input;
-
-        // Verify we're using HTML5 and there's no media type mismatch
-        if (!this.isHTML5 || mediaType !== this.type) {
-            return false;
-        }
-
-        // Add codec if required
-        if (Object.keys(defaultCodecs).includes(type)) {
-            type += `; codecs="${defaultCodecs[input]}"`;
-        }
-
-        try {
-            return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
-        } catch (e) {
-            return false;
-        }
-    },
-
-    // Check for textTracks support
-    textTracks: 'textTracks' in document.createElement('video'),
-
-    // <input type="range"> Sliders
-    rangeInput: (() => {
-        const range = document.createElement('input');
-        range.type = 'range';
-        return range.type === 'range';
-    })(),
-
-    // Touch
-    // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
-    touch: 'ontouchstart' in document.documentElement,
-
-    // Detect transitions support
-    transitions: transitionEndEvent !== false,
-
-    // Reduced motion iOS & MacOS setting
-    // https://webkit.org/blog/7551/responsive-design-for-motion/
-    reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
+  // Basic support
+  audio: 'canPlayType' in document.createElement('audio'),
+  video: 'canPlayType' in document.createElement('video'),
+
+  // Check for support
+  // Basic functionality vs full UI
+  check(type, provider, playsinline) {
+    const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
+    const api = support[type] || provider !== 'html5';
+    const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
+
+    return {
+      api,
+      ui,
+    };
+  },
+
+  // Picture-in-picture support
+  // Safari & Chrome only currently
+  pip: (() => {
+    if (browser.isIPhone) {
+      return false;
+    }
+
+    // Safari
+    // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls
+    if (is.function(createElement('video').webkitSetPresentationMode)) {
+      return true;
+    }
+
+    // Chrome
+    // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
+    if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) {
+      return true;
+    }
+
+    return false;
+  })(),
+
+  // Airplay support
+  // Safari only currently
+  airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
+
+  // Inline playback support
+  // https://webkit.org/blog/6784/new-video-policies-for-ios/
+  playsinline: 'playsInline' in document.createElement('video'),
+
+  // Check for mime type support against a player instance
+  // Credits: http://diveintohtml5.info/everything.html
+  // Related: http://www.leanbackplayer.com/test/h5mt.html
+  mime(input) {
+    if (is.empty(input)) {
+      return false;
+    }
+
+    const [mediaType] = input.split('/');
+    let type = input;
+
+    // Verify we're using HTML5 and there's no media type mismatch
+    if (!this.isHTML5 || mediaType !== this.type) {
+      return false;
+    }
+
+    // Add codec if required
+    if (Object.keys(defaultCodecs).includes(type)) {
+      type += `; codecs="${defaultCodecs[input]}"`;
+    }
+
+    try {
+      return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
+    } catch (e) {
+      return false;
+    }
+  },
+
+  // Check for textTracks support
+  textTracks: 'textTracks' in document.createElement('video'),
+
+  // <input type="range"> Sliders
+  rangeInput: (() => {
+    const range = document.createElement('input');
+    range.type = 'range';
+    return range.type === 'range';
+  })(),
+
+  // Touch
+  // NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
+  touch: 'ontouchstart' in document.documentElement,
+
+  // Detect transitions support
+  transitions: transitionEndEvent !== false,
+
+  // Reduced motion iOS & MacOS setting
+  // https://webkit.org/blog/7551/responsive-design-for-motion/
+  reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
 };
 
 export default support;
diff --git a/src/js/ui.js b/src/js/ui.js
index 32db6ae7..99faa9b8 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -13,267 +13,262 @@ import is from './utils/is';
 import loadImage from './utils/load-image';
 
 const ui = {
-    addStyleHook() {
-        toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
-        toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);
-    },
+  addStyleHook() {
+    toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
+    toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);
+  },
 
-    // Toggle native HTML5 media controls
-    toggleNativeControls(toggle = false) {
-        if (toggle && this.isHTML5) {
-            this.media.setAttribute('controls', '');
-        } else {
-            this.media.removeAttribute('controls');
-        }
-    },
-
-    // Setup the UI
-    build() {
-        // Re-attach media element listeners
-        // TODO: Use event bubbling?
-        this.listeners.media();
-
-        // Don't setup interface if no support
-        if (!this.supported.ui) {
-            this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
-
-            // Restore native controls
-            ui.toggleNativeControls.call(this, true);
-
-            // Bail
-            return;
-        }
-
-        // Inject custom controls if not present
-        if (!is.element(this.elements.controls)) {
-            // Inject custom controls
-            controls.inject.call(this);
-
-            // Re-attach control listeners
-            this.listeners.controls();
-        }
-
-        // Remove native controls
-        ui.toggleNativeControls.call(this);
-
-        // Setup captions for HTML5
-        if (this.isHTML5) {
-            captions.setup.call(this);
-        }
-
-        // Reset volume
-        this.volume = null;
-
-        // Reset mute state
-        this.muted = null;
-
-        // Reset loop state
-        this.loop = null;
-
-        // Reset quality setting
-        this.quality = null;
-
-        // Reset speed
-        this.speed = null;
-
-        // Reset volume display
-        controls.updateVolume.call(this);
-
-        // Reset time display
-        controls.timeUpdate.call(this);
-
-        // Update the UI
-        ui.checkPlaying.call(this);
-
-        // Check for picture-in-picture support
-        toggleClass(
-            this.elements.container,
-            this.config.classNames.pip.supported,
-            support.pip && this.isHTML5 && this.isVideo,
-        );
-
-        // Check for airplay support
-        toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
-
-        // Add iOS class
-        toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
-
-        // Add touch class
-        toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
-
-        // Ready for API calls
-        this.ready = true;
-
-        // Ready event at end of execution stack
-        setTimeout(() => {
-            triggerEvent.call(this, this.media, 'ready');
-        }, 0);
-
-        // Set the title
-        ui.setTitle.call(this);
-
-        // Assure the poster image is set, if the property was added before the element was created
-        if (this.poster) {
-            ui.setPoster.call(this, this.poster, false).catch(() => {});
-        }
-
-        // Manually set the duration if user has overridden it.
-        // The event listeners for it doesn't get called if preload is disabled (#701)
-        if (this.config.duration) {
-            controls.durationUpdate.call(this);
-        }
-    },
-
-    // Setup aria attribute for play and iframe title
-    setTitle() {
-        // Find the current text
-        let label = i18n.get('play', this.config);
-
-        // If there's a media title set, use that for the label
-        if (is.string(this.config.title) && !is.empty(this.config.title)) {
-            label += `, ${this.config.title}`;
-        }
-
-        // If there's a play button, set label
-        Array.from(this.elements.buttons.play || []).forEach(button => {
-            button.setAttribute('aria-label', label);
-        });
-
-        // Set iframe title
-        // https://github.com/sampotts/plyr/issues/124
-        if (this.isEmbed) {
-            const iframe = getElement.call(this, 'iframe');
-
-            if (!is.element(iframe)) {
-                return;
-            }
-
-            // Default to media type
-            const title = !is.empty(this.config.title) ? this.config.title : 'video';
-            const format = i18n.get('frameTitle', this.config);
-
-            iframe.setAttribute('title', format.replace('{title}', title));
-        }
-    },
-
-    // Toggle poster
-    togglePoster(enable) {
-        toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
-    },
-
-    // Set the poster image (async)
-    // Used internally for the poster setter, with the passive option forced to false
-    setPoster(poster, passive = true) {
-        // Don't override if call is passive
-        if (passive && this.poster) {
-            return Promise.reject(new Error('Poster already set'));
-        }
-
-        // Set property synchronously to respect the call order
-        this.media.setAttribute('poster', poster);
-
-        // HTML5 uses native poster attribute
-        if (this.isHTML5) {
-            return Promise.resolve(poster);
-        }
-
-        // Wait until ui is ready
-        return (
-            ready
-                .call(this)
-                // Load image
-                .then(() => loadImage(poster))
-                .catch(err => {
-                    // Hide poster on error unless it's been set by another call
-                    if (poster === this.poster) {
-                        ui.togglePoster.call(this, false);
-                    }
-                    // Rethrow
-                    throw err;
-                })
-                .then(() => {
-                    // Prevent race conditions
-                    if (poster !== this.poster) {
-                        throw new Error('setPoster cancelled by later call to setPoster');
-                    }
-                })
-                .then(() => {
-                    Object.assign(this.elements.poster.style, {
-                        backgroundImage: `url('${poster}')`,
-                        // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
-                        backgroundSize: '',
-                    });
-
-                    ui.togglePoster.call(this, true);
-
-                    return poster;
-                })
-        );
-    },
-
-    // Check playing state
-    checkPlaying(event) {
-        // Class hooks
-        toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
-        toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
-        toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
-
-        // Set state
-        Array.from(this.elements.buttons.play || []).forEach(target => {
-            Object.assign(target, { pressed: this.playing });
-            target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
-        });
-
-        // Only update controls on non timeupdate events
-        if (is.event(event) && event.type === 'timeupdate') {
-            return;
-        }
-
-        // Toggle controls
+  // Toggle native HTML5 media controls
+  toggleNativeControls(toggle = false) {
+    if (toggle && this.isHTML5) {
+      this.media.setAttribute('controls', '');
+    } else {
+      this.media.removeAttribute('controls');
+    }
+  },
+
+  // Setup the UI
+  build() {
+    // Re-attach media element listeners
+    // TODO: Use event bubbling?
+    this.listeners.media();
+
+    // Don't setup interface if no support
+    if (!this.supported.ui) {
+      this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
+
+      // Restore native controls
+      ui.toggleNativeControls.call(this, true);
+
+      // Bail
+      return;
+    }
+
+    // Inject custom controls if not present
+    if (!is.element(this.elements.controls)) {
+      // Inject custom controls
+      controls.inject.call(this);
+
+      // Re-attach control listeners
+      this.listeners.controls();
+    }
+
+    // Remove native controls
+    ui.toggleNativeControls.call(this);
+
+    // Setup captions for HTML5
+    if (this.isHTML5) {
+      captions.setup.call(this);
+    }
+
+    // Reset volume
+    this.volume = null;
+
+    // Reset mute state
+    this.muted = null;
+
+    // Reset loop state
+    this.loop = null;
+
+    // Reset quality setting
+    this.quality = null;
+
+    // Reset speed
+    this.speed = null;
+
+    // Reset volume display
+    controls.updateVolume.call(this);
+
+    // Reset time display
+    controls.timeUpdate.call(this);
+
+    // Update the UI
+    ui.checkPlaying.call(this);
+
+    // Check for picture-in-picture support
+    toggleClass(
+      this.elements.container,
+      this.config.classNames.pip.supported,
+      support.pip && this.isHTML5 && this.isVideo,
+    );
+
+    // Check for airplay support
+    toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
+
+    // Add iOS class
+    toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
+
+    // Add touch class
+    toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
+
+    // Ready for API calls
+    this.ready = true;
+
+    // Ready event at end of execution stack
+    setTimeout(() => {
+      triggerEvent.call(this, this.media, 'ready');
+    }, 0);
+
+    // Set the title
+    ui.setTitle.call(this);
+
+    // Assure the poster image is set, if the property was added before the element was created
+    if (this.poster) {
+      ui.setPoster.call(this, this.poster, false).catch(() => {});
+    }
+
+    // Manually set the duration if user has overridden it.
+    // The event listeners for it doesn't get called if preload is disabled (#701)
+    if (this.config.duration) {
+      controls.durationUpdate.call(this);
+    }
+  },
+
+  // Setup aria attribute for play and iframe title
+  setTitle() {
+    // Find the current text
+    let label = i18n.get('play', this.config);
+
+    // If there's a media title set, use that for the label
+    if (is.string(this.config.title) && !is.empty(this.config.title)) {
+      label += `, ${this.config.title}`;
+    }
+
+    // If there's a play button, set label
+    Array.from(this.elements.buttons.play || []).forEach(button => {
+      button.setAttribute('aria-label', label);
+    });
+
+    // Set iframe title
+    // https://github.com/sampotts/plyr/issues/124
+    if (this.isEmbed) {
+      const iframe = getElement.call(this, 'iframe');
+
+      if (!is.element(iframe)) {
+        return;
+      }
+
+      // Default to media type
+      const title = !is.empty(this.config.title) ? this.config.title : 'video';
+      const format = i18n.get('frameTitle', this.config);
+
+      iframe.setAttribute('title', format.replace('{title}', title));
+    }
+  },
+
+  // Toggle poster
+  togglePoster(enable) {
+    toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
+  },
+
+  // Set the poster image (async)
+  // Used internally for the poster setter, with the passive option forced to false
+  setPoster(poster, passive = true) {
+    // Don't override if call is passive
+    if (passive && this.poster) {
+      return Promise.reject(new Error('Poster already set'));
+    }
+
+    // Set property synchronously to respect the call order
+    this.media.setAttribute('poster', poster);
+
+    // HTML5 uses native poster attribute
+    if (this.isHTML5) {
+      return Promise.resolve(poster);
+    }
+
+    // Wait until ui is ready
+    return (
+      ready
+        .call(this)
+        // Load image
+        .then(() => loadImage(poster))
+        .catch(err => {
+          // Hide poster on error unless it's been set by another call
+          if (poster === this.poster) {
+            ui.togglePoster.call(this, false);
+          }
+          // Rethrow
+          throw err;
+        })
+        .then(() => {
+          // Prevent race conditions
+          if (poster !== this.poster) {
+            throw new Error('setPoster cancelled by later call to setPoster');
+          }
+        })
+        .then(() => {
+          Object.assign(this.elements.poster.style, {
+            backgroundImage: `url('${poster}')`,
+            // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube)
+            backgroundSize: '',
+          });
+
+          ui.togglePoster.call(this, true);
+
+          return poster;
+        })
+    );
+  },
+
+  // Check playing state
+  checkPlaying(event) {
+    // Class hooks
+    toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
+    toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
+    toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
+
+    // Set state
+    Array.from(this.elements.buttons.play || []).forEach(target => {
+      Object.assign(target, { pressed: this.playing });
+      target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
+    });
+
+    // Only update controls on non timeupdate events
+    if (is.event(event) && event.type === 'timeupdate') {
+      return;
+    }
+
+    // Toggle controls
+    ui.toggleControls.call(this);
+  },
+
+  // Check if media is loading
+  checkLoading(event) {
+    this.loading = ['stalled', 'waiting'].includes(event.type);
+
+    // Clear timer
+    clearTimeout(this.timers.loading);
+
+    // Timer to prevent flicker when seeking
+    this.timers.loading = setTimeout(
+      () => {
+        // Update progress bar loading class state
+        toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
+
+        // Update controls visibility
         ui.toggleControls.call(this);
-    },
-
-    // Check if media is loading
-    checkLoading(event) {
-        this.loading = ['stalled', 'waiting'].includes(event.type);
-
-        // Clear timer
-        clearTimeout(this.timers.loading);
-
-        // Timer to prevent flicker when seeking
-        this.timers.loading = setTimeout(
-            () => {
-                // Update progress bar loading class state
-                toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
-
-                // Update controls visibility
-                ui.toggleControls.call(this);
-            },
-            this.loading ? 250 : 0,
-        );
-    },
-
-    // Toggle controls based on state and `force` argument
-    toggleControls(force) {
-        const { controls: controlsElement } = this.elements;
-
-        if (controlsElement && this.config.hideControls) {
-            // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
-            const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
-
-            // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
-            this.toggleControls(
-                Boolean(
-                    force ||
-                        this.loading ||
-                        this.paused ||
-                        controlsElement.pressed ||
-                        controlsElement.hover ||
-                        recentTouchSeek,
-                ),
-            );
-        }
-    },
+      },
+      this.loading ? 250 : 0,
+    );
+  },
+
+  // Toggle controls based on state and `force` argument
+  toggleControls(force) {
+    const { controls: controlsElement } = this.elements;
+
+    if (controlsElement && this.config.hideControls) {
+      // Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
+      const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
+
+      // Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
+      this.toggleControls(
+        Boolean(
+          force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
+        ),
+      );
+    }
+  },
 };
 
 export default ui;
diff --git a/src/js/utils/animation.js b/src/js/utils/animation.js
index 3f721b5a..d9e7615e 100644
--- a/src/js/utils/animation.js
+++ b/src/js/utils/animation.js
@@ -5,34 +5,34 @@
 import is from './is';
 
 export const transitionEndEvent = (() => {
-    const element = document.createElement('span');
+  const element = document.createElement('span');
 
-    const events = {
-        WebkitTransition: 'webkitTransitionEnd',
-        MozTransition: 'transitionend',
-        OTransition: 'oTransitionEnd otransitionend',
-        transition: 'transitionend',
-    };
+  const events = {
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'transitionend',
+    OTransition: 'oTransitionEnd otransitionend',
+    transition: 'transitionend',
+  };
 
-    const type = Object.keys(events).find(event => element.style[event] !== undefined);
+  const type = Object.keys(events).find(event => element.style[event] !== undefined);
 
-    return is.string(type) ? events[type] : false;
+  return is.string(type) ? events[type] : false;
 })();
 
 // Force repaint of element
 export function repaint(element, delay) {
-    setTimeout(() => {
-        try {
-            // eslint-disable-next-line no-param-reassign
-            element.hidden = true;
-
-            // eslint-disable-next-line no-unused-expressions
-            element.offsetHeight;
-
-            // eslint-disable-next-line no-param-reassign
-            element.hidden = false;
-        } catch (e) {
-            // Do nothing
-        }
-    }, delay);
+  setTimeout(() => {
+    try {
+      // eslint-disable-next-line no-param-reassign
+      element.hidden = true;
+
+      // eslint-disable-next-line no-unused-expressions
+      element.offsetHeight;
+
+      // eslint-disable-next-line no-param-reassign
+      element.hidden = false;
+    } catch (e) {
+      // Do nothing
+    }
+  }, delay);
 }
diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js
index 69ef242c..aed951cd 100644
--- a/src/js/utils/arrays.js
+++ b/src/js/utils/arrays.js
@@ -6,18 +6,18 @@ import is from './is';
 
 // Remove duplicates in an array
 export function dedupe(array) {
-    if (!is.array(array)) {
-        return array;
-    }
+  if (!is.array(array)) {
+    return array;
+  }
 
-    return array.filter((item, index) => array.indexOf(item) === index);
+  return array.filter((item, index) => array.indexOf(item) === index);
 }
 
 // Get the closest value in an array
 export function closest(array, value) {
-    if (!is.array(array) || !array.length) {
-        return null;
-    }
+  if (!is.array(array) || !array.length) {
+    return null;
+  }
 
-    return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
+  return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
 }
diff --git a/src/js/utils/browser.js b/src/js/utils/browser.js
index 11705074..7b8fa5e2 100644
--- a/src/js/utils/browser.js
+++ b/src/js/utils/browser.js
@@ -4,11 +4,11 @@
 // ==========================================================================
 
 const browser = {
-    isIE: /* @cc_on!@ */ false || !!document.documentMode,
-    isEdge: window.navigator.userAgent.includes('Edge'),
-    isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
-    isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
-    isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),
+  isIE: /* @cc_on!@ */ false || !!document.documentMode,
+  isEdge: window.navigator.userAgent.includes('Edge'),
+  isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent),
+  isIPhone: /(iPhone|iPod)/gi.test(navigator.platform),
+  isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform),
 };
 
 export default browser;
diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js
index acff0dd9..b48fa7e1 100644
--- a/src/js/utils/elements.js
+++ b/src/js/utils/elements.js
@@ -7,257 +7,257 @@ import { extend } from './objects';
 
 // Wrap an element
 export function wrap(elements, wrapper) {
-    // Convert `elements` to an array, if necessary.
-    const targets = elements.length ? elements : [elements];
-
-    // Loops backwards to prevent having to clone the wrapper on the
-    // first element (see `child` below).
-    Array.from(targets)
-        .reverse()
-        .forEach((element, index) => {
-            const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
-            // Cache the current parent and sibling.
-            const parent = element.parentNode;
-            const sibling = element.nextSibling;
-
-            // Wrap the element (is automatically removed from its current
-            // parent).
-            child.appendChild(element);
-
-            // If the element had a sibling, insert the wrapper before
-            // the sibling to maintain the HTML structure; otherwise, just
-            // append it to the parent.
-            if (sibling) {
-                parent.insertBefore(child, sibling);
-            } else {
-                parent.appendChild(child);
-            }
-        });
+  // Convert `elements` to an array, if necessary.
+  const targets = elements.length ? elements : [elements];
+
+  // Loops backwards to prevent having to clone the wrapper on the
+  // first element (see `child` below).
+  Array.from(targets)
+    .reverse()
+    .forEach((element, index) => {
+      const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
+      // Cache the current parent and sibling.
+      const parent = element.parentNode;
+      const sibling = element.nextSibling;
+
+      // Wrap the element (is automatically removed from its current
+      // parent).
+      child.appendChild(element);
+
+      // If the element had a sibling, insert the wrapper before
+      // the sibling to maintain the HTML structure; otherwise, just
+      // append it to the parent.
+      if (sibling) {
+        parent.insertBefore(child, sibling);
+      } else {
+        parent.appendChild(child);
+      }
+    });
 }
 
 // Set attributes
 export function setAttributes(element, attributes) {
-    if (!is.element(element) || is.empty(attributes)) {
-        return;
-    }
-
-    // Assume null and undefined attributes should be left out,
-    // Setting them would otherwise convert them to "null" and "undefined"
-    Object.entries(attributes)
-        .filter(([, value]) => !is.nullOrUndefined(value))
-        .forEach(([key, value]) => element.setAttribute(key, value));
+  if (!is.element(element) || is.empty(attributes)) {
+    return;
+  }
+
+  // Assume null and undefined attributes should be left out,
+  // Setting them would otherwise convert them to "null" and "undefined"
+  Object.entries(attributes)
+    .filter(([, value]) => !is.nullOrUndefined(value))
+    .forEach(([key, value]) => element.setAttribute(key, value));
 }
 
 // Create a DocumentFragment
 export function createElement(type, attributes, text) {
-    // Create a new <element>
-    const element = document.createElement(type);
+  // Create a new <element>
+  const element = document.createElement(type);
 
-    // Set all passed attributes
-    if (is.object(attributes)) {
-        setAttributes(element, attributes);
-    }
+  // Set all passed attributes
+  if (is.object(attributes)) {
+    setAttributes(element, attributes);
+  }
 
-    // Add text node
-    if (is.string(text)) {
-        element.innerText = text;
-    }
+  // Add text node
+  if (is.string(text)) {
+    element.innerText = text;
+  }
 
-    // Return built element
-    return element;
+  // Return built element
+  return element;
 }
 
 // Inaert an element after another
 export function insertAfter(element, target) {
-    if (!is.element(element) || !is.element(target)) {
-        return;
-    }
+  if (!is.element(element) || !is.element(target)) {
+    return;
+  }
 
-    target.parentNode.insertBefore(element, target.nextSibling);
+  target.parentNode.insertBefore(element, target.nextSibling);
 }
 
 // Insert a DocumentFragment
 export function insertElement(type, parent, attributes, text) {
-    if (!is.element(parent)) {
-        return;
-    }
+  if (!is.element(parent)) {
+    return;
+  }
 
-    parent.appendChild(createElement(type, attributes, text));
+  parent.appendChild(createElement(type, attributes, text));
 }
 
 // Remove element(s)
 export function removeElement(element) {
-    if (is.nodeList(element) || is.array(element)) {
-        Array.from(element).forEach(removeElement);
-        return;
-    }
+  if (is.nodeList(element) || is.array(element)) {
+    Array.from(element).forEach(removeElement);
+    return;
+  }
 
-    if (!is.element(element) || !is.element(element.parentNode)) {
-        return;
-    }
+  if (!is.element(element) || !is.element(element.parentNode)) {
+    return;
+  }
 
-    element.parentNode.removeChild(element);
+  element.parentNode.removeChild(element);
 }
 
 // Remove all child elements
 export function emptyElement(element) {
-    if (!is.element(element)) {
-        return;
-    }
+  if (!is.element(element)) {
+    return;
+  }
 
-    let { length } = element.childNodes;
+  let { length } = element.childNodes;
 
-    while (length > 0) {
-        element.removeChild(element.lastChild);
-        length -= 1;
-    }
+  while (length > 0) {
+    element.removeChild(element.lastChild);
+    length -= 1;
+  }
 }
 
 // Replace element
 export function replaceElement(newChild, oldChild) {
-    if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
-        return null;
-    }
+  if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
+    return null;
+  }
 
-    oldChild.parentNode.replaceChild(newChild, oldChild);
+  oldChild.parentNode.replaceChild(newChild, oldChild);
 
-    return newChild;
+  return newChild;
 }
 
 // Get an attribute object from a string selector
 export function getAttributesFromSelector(sel, existingAttributes) {
-    // For example:
-    // '.test' to { class: 'test' }
-    // '#test' to { id: 'test' }
-    // '[data-test="test"]' to { 'data-test': 'test' }
+  // For example:
+  // '.test' to { class: 'test' }
+  // '#test' to { id: 'test' }
+  // '[data-test="test"]' to { 'data-test': 'test' }
+
+  if (!is.string(sel) || is.empty(sel)) {
+    return {};
+  }
+
+  const attributes = {};
+  const existing = extend({}, existingAttributes);
+
+  sel.split(',').forEach(s => {
+    // Remove whitespace
+    const selector = s.trim();
+    const className = selector.replace('.', '');
+    const stripped = selector.replace(/[[\]]/g, '');
+    // Get the parts and value
+    const parts = stripped.split('=');
+    const [key] = parts;
+    const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
+    // Get the first character
+    const start = selector.charAt(0);
+
+    switch (start) {
+      case '.':
+        // Add to existing classname
+        if (is.string(existing.class)) {
+          attributes.class = `${existing.class} ${className}`;
+        } else {
+          attributes.class = className;
+        }
+        break;
 
-    if (!is.string(sel) || is.empty(sel)) {
-        return {};
-    }
+      case '#':
+        // ID selector
+        attributes.id = selector.replace('#', '');
+        break;
 
-    const attributes = {};
-    const existing = extend({}, existingAttributes);
-
-    sel.split(',').forEach(s => {
-        // Remove whitespace
-        const selector = s.trim();
-        const className = selector.replace('.', '');
-        const stripped = selector.replace(/[[\]]/g, '');
-        // Get the parts and value
-        const parts = stripped.split('=');
-        const [key] = parts;
-        const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
-        // Get the first character
-        const start = selector.charAt(0);
-
-        switch (start) {
-            case '.':
-                // Add to existing classname
-                if (is.string(existing.class)) {
-                    attributes.class = `${existing.class} ${className}`;
-                } else {
-                    attributes.class = className;
-                }
-                break;
-
-            case '#':
-                // ID selector
-                attributes.id = selector.replace('#', '');
-                break;
-
-            case '[':
-                // Attribute selector
-                attributes[key] = value;
-
-                break;
-
-            default:
-                break;
-        }
-    });
+      case '[':
+        // Attribute selector
+        attributes[key] = value;
 
-    return extend(existing, attributes);
+        break;
+
+      default:
+        break;
+    }
+  });
+
+  return extend(existing, attributes);
 }
 
 // Toggle hidden
 export function toggleHidden(element, hidden) {
-    if (!is.element(element)) {
-        return;
-    }
+  if (!is.element(element)) {
+    return;
+  }
 
-    let hide = hidden;
+  let hide = hidden;
 
-    if (!is.boolean(hide)) {
-        hide = !element.hidden;
-    }
+  if (!is.boolean(hide)) {
+    hide = !element.hidden;
+  }
 
-    // eslint-disable-next-line no-param-reassign
-    element.hidden = hide;
+  // eslint-disable-next-line no-param-reassign
+  element.hidden = hide;
 }
 
 // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 export function toggleClass(element, className, force) {
-    if (is.nodeList(element)) {
-        return Array.from(element).map(e => toggleClass(e, className, force));
+  if (is.nodeList(element)) {
+    return Array.from(element).map(e => toggleClass(e, className, force));
+  }
+
+  if (is.element(element)) {
+    let method = 'toggle';
+    if (typeof force !== 'undefined') {
+      method = force ? 'add' : 'remove';
     }
 
-    if (is.element(element)) {
-        let method = 'toggle';
-        if (typeof force !== 'undefined') {
-            method = force ? 'add' : 'remove';
-        }
-
-        element.classList[method](className);
-        return element.classList.contains(className);
-    }
+    element.classList[method](className);
+    return element.classList.contains(className);
+  }
 
-    return false;
+  return false;
 }
 
 // Has class name
 export function hasClass(element, className) {
-    return is.element(element) && element.classList.contains(className);
+  return is.element(element) && element.classList.contains(className);
 }
 
 // Element matches selector
 export function matches(element, selector) {
-    const { prototype } = Element;
+  const { prototype } = Element;
 
-    function match() {
-        return Array.from(document.querySelectorAll(selector)).includes(this);
-    }
+  function match() {
+    return Array.from(document.querySelectorAll(selector)).includes(this);
+  }
 
-    const method =
-        prototype.matches ||
-        prototype.webkitMatchesSelector ||
-        prototype.mozMatchesSelector ||
-        prototype.msMatchesSelector ||
-        match;
+  const method =
+    prototype.matches ||
+    prototype.webkitMatchesSelector ||
+    prototype.mozMatchesSelector ||
+    prototype.msMatchesSelector ||
+    match;
 
-    return method.call(element, selector);
+  return method.call(element, selector);
 }
 
 // Find all elements
 export function getElements(selector) {
-    return this.elements.container.querySelectorAll(selector);
+  return this.elements.container.querySelectorAll(selector);
 }
 
 // Find a single element
 export function getElement(selector) {
-    return this.elements.container.querySelector(selector);
+  return this.elements.container.querySelector(selector);
 }
 
 // Set focus and tab focus class
 export function setFocus(element = null, tabFocus = false) {
-    if (!is.element(element)) {
-        return;
-    }
+  if (!is.element(element)) {
+    return;
+  }
 
-    // Set regular focus
-    element.focus({ preventScroll: true });
+  // Set regular focus
+  element.focus({ preventScroll: true });
 
-    // If we want to mimic keyboard focus via tab
-    if (tabFocus) {
-        toggleClass(element, this.config.classNames.tabFocus);
-    }
+  // If we want to mimic keyboard focus via tab
+  if (tabFocus) {
+    toggleClass(element, this.config.classNames.tabFocus);
+  }
 }
diff --git a/src/js/utils/events.js b/src/js/utils/events.js
index 48300b6b..235eb629 100644
--- a/src/js/utils/events.js
+++ b/src/js/utils/events.js
@@ -8,110 +8,110 @@ import is from './is';
 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 // https://www.youtube.com/watch?v=NPM6172J22g
 const supportsPassiveListeners = (() => {
-    // Test via a getter in the options object to see if the passive property is accessed
-    let supported = false;
-    try {
-        const options = Object.defineProperty({}, 'passive', {
-            get() {
-                supported = true;
-                return null;
-            },
-        });
-        window.addEventListener('test', null, options);
-        window.removeEventListener('test', null, options);
-    } catch (e) {
-        // Do nothing
-    }
+  // Test via a getter in the options object to see if the passive property is accessed
+  let supported = false;
+  try {
+    const options = Object.defineProperty({}, 'passive', {
+      get() {
+        supported = true;
+        return null;
+      },
+    });
+    window.addEventListener('test', null, options);
+    window.removeEventListener('test', null, options);
+  } catch (e) {
+    // Do nothing
+  }
 
-    return supported;
+  return supported;
 })();
 
 // Toggle event listener
 export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) {
-    // Bail if no element, event, or callback
-    if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {
-        return;
-    }
+  // Bail if no element, event, or callback
+  if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) {
+    return;
+  }
+
+  // Allow multiple events
+  const events = event.split(' ');
+  // Build options
+  // Default to just the capture boolean for browsers with no passive listener support
+  let options = capture;
+
+  // If passive events listeners are supported
+  if (supportsPassiveListeners) {
+    options = {
+      // Whether the listener can be passive (i.e. default never prevented)
+      passive,
+      // Whether the listener is a capturing listener or not
+      capture,
+    };
+  }
 
-    // Allow multiple events
-    const events = event.split(' ');
-    // Build options
-    // Default to just the capture boolean for browsers with no passive listener support
-    let options = capture;
-
-    // If passive events listeners are supported
-    if (supportsPassiveListeners) {
-        options = {
-            // Whether the listener can be passive (i.e. default never prevented)
-            passive,
-            // Whether the listener is a capturing listener or not
-            capture,
-        };
+  // If a single node is passed, bind the event listener
+  events.forEach(type => {
+    if (this && this.eventListeners && toggle) {
+      // Cache event listener
+      this.eventListeners.push({ element, type, callback, options });
     }
 
-    // If a single node is passed, bind the event listener
-    events.forEach(type => {
-        if (this && this.eventListeners && toggle) {
-            // Cache event listener
-            this.eventListeners.push({ element, type, callback, options });
-        }
-
-        element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
-    });
+    element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options);
+  });
 }
 
 // Bind event handler
 export function on(element, events = '', callback, passive = true, capture = false) {
-    toggleListener.call(this, element, events, callback, true, passive, capture);
+  toggleListener.call(this, element, events, callback, true, passive, capture);
 }
 
 // Unbind event handler
 export function off(element, events = '', callback, passive = true, capture = false) {
-    toggleListener.call(this, element, events, callback, false, passive, capture);
+  toggleListener.call(this, element, events, callback, false, passive, capture);
 }
 
 // Bind once-only event handler
 export function once(element, events = '', callback, passive = true, capture = false) {
-    const onceCallback = (...args) => {
-        off(element, events, onceCallback, passive, capture);
-        callback.apply(this, args);
-    };
+  const onceCallback = (...args) => {
+    off(element, events, onceCallback, passive, capture);
+    callback.apply(this, args);
+  };
 
-    toggleListener.call(this, element, events, onceCallback, true, passive, capture);
+  toggleListener.call(this, element, events, onceCallback, true, passive, capture);
 }
 
 // Trigger event
 export function triggerEvent(element, type = '', bubbles = false, detail = {}) {
-    // Bail if no element
-    if (!is.element(element) || is.empty(type)) {
-        return;
-    }
-
-    // Create and dispatch the event
-    const event = new CustomEvent(type, {
-        bubbles,
-        detail: { ...detail, plyr: this },
-    });
-
-    // Dispatch the event
-    element.dispatchEvent(event);
+  // Bail if no element
+  if (!is.element(element) || is.empty(type)) {
+    return;
+  }
+
+  // Create and dispatch the event
+  const event = new CustomEvent(type, {
+    bubbles,
+    detail: { ...detail, plyr: this },
+  });
+
+  // Dispatch the event
+  element.dispatchEvent(event);
 }
 
 // Unbind all cached event listeners
 export function unbindListeners() {
-    if (this && this.eventListeners) {
-        this.eventListeners.forEach(item => {
-            const { element, type, callback, options } = item;
-            element.removeEventListener(type, callback, options);
-        });
+  if (this && this.eventListeners) {
+    this.eventListeners.forEach(item => {
+      const { element, type, callback, options } = item;
+      element.removeEventListener(type, callback, options);
+    });
 
-        this.eventListeners = [];
-    }
+    this.eventListeners = [];
+  }
 }
 
 // Run method when / if player is ready
 export function ready() {
-    return new Promise(resolve =>
-        this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
-    ).then(() => {});
+  return new Promise(resolve =>
+    this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
+  ).then(() => {});
 }
diff --git a/src/js/utils/fetch.js b/src/js/utils/fetch.js
index ee33ea7c..ef695193 100644
--- a/src/js/utils/fetch.js
+++ b/src/js/utils/fetch.js
@@ -4,39 +4,39 @@
 // ==========================================================================
 
 export default function fetch(url, responseType = 'text') {
-    return new Promise((resolve, reject) => {
-        try {
-            const request = new XMLHttpRequest();
+  return new Promise((resolve, reject) => {
+    try {
+      const request = new XMLHttpRequest();
 
-            // Check for CORS support
-            if (!('withCredentials' in request)) {
-                return;
-            }
+      // Check for CORS support
+      if (!('withCredentials' in request)) {
+        return;
+      }
 
-            request.addEventListener('load', () => {
-                if (responseType === 'text') {
-                    try {
-                        resolve(JSON.parse(request.responseText));
-                    } catch (e) {
-                        resolve(request.responseText);
-                    }
-                } else {
-                    resolve(request.response);
-                }
-            });
+      request.addEventListener('load', () => {
+        if (responseType === 'text') {
+          try {
+            resolve(JSON.parse(request.responseText));
+          } catch (e) {
+            resolve(request.responseText);
+          }
+        } else {
+          resolve(request.response);
+        }
+      });
 
-            request.addEventListener('error', () => {
-                throw new Error(request.status);
-            });
+      request.addEventListener('error', () => {
+        throw new Error(request.status);
+      });
 
-            request.open('GET', url, true);
+      request.open('GET', url, true);
 
-            // Set the required response type
-            request.responseType = responseType;
+      // Set the required response type
+      request.responseType = responseType;
 
-            request.send();
-        } catch (e) {
-            reject(e);
-        }
-    });
+      request.send();
+    } catch (e) {
+      reject(e);
+    }
+  });
 }
diff --git a/src/js/utils/i18n.js b/src/js/utils/i18n.js
index 5eee5829..70868527 100644
--- a/src/js/utils/i18n.js
+++ b/src/js/utils/i18n.js
@@ -8,40 +8,40 @@ import { replaceAll } from './strings';
 
 // Skip i18n for abbreviations and brand names
 const resources = {
-    pip: 'PIP',
-    airplay: 'AirPlay',
-    html5: 'HTML5',
-    vimeo: 'Vimeo',
-    youtube: 'YouTube',
+  pip: 'PIP',
+  airplay: 'AirPlay',
+  html5: 'HTML5',
+  vimeo: 'Vimeo',
+  youtube: 'YouTube',
 };
 
 const i18n = {
-    get(key = '', config = {}) {
-        if (is.empty(key) || is.empty(config)) {
-            return '';
-        }
+  get(key = '', config = {}) {
+    if (is.empty(key) || is.empty(config)) {
+      return '';
+    }
 
-        let string = getDeep(config.i18n, key);
+    let string = getDeep(config.i18n, key);
 
-        if (is.empty(string)) {
-            if (Object.keys(resources).includes(key)) {
-                return resources[key];
-            }
+    if (is.empty(string)) {
+      if (Object.keys(resources).includes(key)) {
+        return resources[key];
+      }
 
-            return '';
-        }
+      return '';
+    }
 
-        const replace = {
-            '{seektime}': config.seekTime,
-            '{title}': config.title,
-        };
+    const replace = {
+      '{seektime}': config.seekTime,
+      '{title}': config.title,
+    };
 
-        Object.entries(replace).forEach(([k, v]) => {
-            string = replaceAll(string, k, v);
-        });
+    Object.entries(replace).forEach(([k, v]) => {
+      string = replaceAll(string, k, v);
+    });
 
-        return string;
-    },
+    return string;
+  },
 };
 
 export default i18n;
diff --git a/src/js/utils/is.js b/src/js/utils/is.js
index 24f176cc..1cc33848 100644
--- a/src/js/utils/is.js
+++ b/src/js/utils/is.js
@@ -22,51 +22,51 @@ const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(inp
 const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
 
 const isEmpty = input =>
-    isNullOrUndefined(input) ||
-    ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
-    (isObject(input) && !Object.keys(input).length);
+  isNullOrUndefined(input) ||
+  ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
+  (isObject(input) && !Object.keys(input).length);
 
 const isUrl = input => {
-    // Accept a URL object
-    if (instanceOf(input, window.URL)) {
-        return true;
-    }
+  // Accept a URL object
+  if (instanceOf(input, window.URL)) {
+    return true;
+  }
 
-    // Must be string from here
-    if (!isString(input)) {
-        return false;
-    }
+  // Must be string from here
+  if (!isString(input)) {
+    return false;
+  }
 
-    // Add the protocol if required
-    let string = input;
-    if (!input.startsWith('http://') || !input.startsWith('https://')) {
-        string = `http://${input}`;
-    }
+  // Add the protocol if required
+  let string = input;
+  if (!input.startsWith('http://') || !input.startsWith('https://')) {
+    string = `http://${input}`;
+  }
 
-    try {
-        return !isEmpty(new URL(string).hostname);
-    } catch (e) {
-        return false;
-    }
+  try {
+    return !isEmpty(new URL(string).hostname);
+  } catch (e) {
+    return false;
+  }
 };
 
 export default {
-    nullOrUndefined: isNullOrUndefined,
-    object: isObject,
-    number: isNumber,
-    string: isString,
-    boolean: isBoolean,
-    function: isFunction,
-    array: isArray,
-    weakMap: isWeakMap,
-    nodeList: isNodeList,
-    element: isElement,
-    textNode: isTextNode,
-    event: isEvent,
-    keyboardEvent: isKeyboardEvent,
-    cue: isCue,
-    track: isTrack,
-    promise: isPromise,
-    url: isUrl,
-    empty: isEmpty,
+  nullOrUndefined: isNullOrUndefined,
+  object: isObject,
+  number: isNumber,
+  string: isString,
+  boolean: isBoolean,
+  function: isFunction,
+  array: isArray,
+  weakMap: isWeakMap,
+  nodeList: isNodeList,
+  element: isElement,
+  textNode: isTextNode,
+  event: isEvent,
+  keyboardEvent: isKeyboardEvent,
+  cue: isCue,
+  track: isTrack,
+  promise: isPromise,
+  url: isUrl,
+  empty: isEmpty,
 };
diff --git a/src/js/utils/load-image.js b/src/js/utils/load-image.js
index 8acd2496..36d6ab81 100644
--- a/src/js/utils/load-image.js
+++ b/src/js/utils/load-image.js
@@ -5,15 +5,15 @@
 // ==========================================================================
 
 export default function loadImage(src, minWidth = 1) {
-    return new Promise((resolve, reject) => {
-        const image = new Image();
+  return new Promise((resolve, reject) => {
+    const image = new Image();
 
-        const handler = () => {
-            delete image.onload;
-            delete image.onerror;
-            (image.naturalWidth >= minWidth ? resolve : reject)(image);
-        };
+    const handler = () => {
+      delete image.onload;
+      delete image.onerror;
+      (image.naturalWidth >= minWidth ? resolve : reject)(image);
+    };
 
-        Object.assign(image, { onload: handler, onerror: handler, src });
-    });
+    Object.assign(image, { onload: handler, onerror: handler, src });
+  });
 }
diff --git a/src/js/utils/load-script.js b/src/js/utils/load-script.js
index 81ae36f4..53b660c8 100644
--- a/src/js/utils/load-script.js
+++ b/src/js/utils/load-script.js
@@ -5,10 +5,10 @@
 import loadjs from 'loadjs';
 
 export default function loadScript(url) {
-    return new Promise((resolve, reject) => {
-        loadjs(url, {
-            success: resolve,
-            error: reject,
-        });
+  return new Promise((resolve, reject) => {
+    loadjs(url, {
+      success: resolve,
+      error: reject,
     });
+  });
 }
diff --git a/src/js/utils/load-sprite.js b/src/js/utils/load-sprite.js
index fe4add00..0a4eff99 100644
--- a/src/js/utils/load-sprite.js
+++ b/src/js/utils/load-sprite.js
@@ -8,68 +8,68 @@ import is from './is';
 
 // Load an external SVG sprite
 export default function loadSprite(url, id) {
-    if (!is.string(url)) {
-        return;
+  if (!is.string(url)) {
+    return;
+  }
+
+  const prefix = 'cache';
+  const hasId = is.string(id);
+  let isCached = false;
+  const exists = () => document.getElementById(id) !== null;
+
+  const update = (container, data) => {
+    // eslint-disable-next-line no-param-reassign
+    container.innerHTML = data;
+
+    // Check again incase of race condition
+    if (hasId && exists()) {
+      return;
     }
 
-    const prefix = 'cache';
-    const hasId = is.string(id);
-    let isCached = false;
-    const exists = () => document.getElementById(id) !== null;
+    // Inject the SVG to the body
+    document.body.insertAdjacentElement('afterbegin', container);
+  };
 
-    const update = (container, data) => {
-        // eslint-disable-next-line no-param-reassign
-        container.innerHTML = data;
+  // Only load once if ID set
+  if (!hasId || !exists()) {
+    const useStorage = Storage.supported;
+    // Create container
+    const container = document.createElement('div');
+    container.setAttribute('hidden', '');
 
-        // Check again incase of race condition
-        if (hasId && exists()) {
-            return;
-        }
+    if (hasId) {
+      container.setAttribute('id', id);
+    }
 
-        // Inject the SVG to the body
-        document.body.insertAdjacentElement('afterbegin', container);
-    };
+    // Check in cache
+    if (useStorage) {
+      const cached = window.localStorage.getItem(`${prefix}-${id}`);
+      isCached = cached !== null;
 
-    // Only load once if ID set
-    if (!hasId || !exists()) {
-        const useStorage = Storage.supported;
-        // Create container
-        const container = document.createElement('div');
-        container.setAttribute('hidden', '');
+      if (isCached) {
+        const data = JSON.parse(cached);
+        update(container, data.content);
+      }
+    }
 
-        if (hasId) {
-            container.setAttribute('id', id);
+    // Get the sprite
+    fetch(url)
+      .then(result => {
+        if (is.empty(result)) {
+          return;
         }
 
-        // Check in cache
         if (useStorage) {
-            const cached = window.localStorage.getItem(`${prefix}-${id}`);
-            isCached = cached !== null;
-
-            if (isCached) {
-                const data = JSON.parse(cached);
-                update(container, data.content);
-            }
+          window.localStorage.setItem(
+            `${prefix}-${id}`,
+            JSON.stringify({
+              content: result,
+            }),
+          );
         }
 
-        // Get the sprite
-        fetch(url)
-            .then(result => {
-                if (is.empty(result)) {
-                    return;
-                }
-
-                if (useStorage) {
-                    window.localStorage.setItem(
-                        `${prefix}-${id}`,
-                        JSON.stringify({
-                            content: result,
-                        }),
-                    );
-                }
-
-                update(container, result);
-            })
-            .catch(() => {});
-    }
+        update(container, result);
+      })
+      .catch(() => {});
+  }
 }
diff --git a/src/js/utils/numbers.js b/src/js/utils/numbers.js
index f6eb65c8..87bbe7e2 100644
--- a/src/js/utils/numbers.js
+++ b/src/js/utils/numbers.js
@@ -11,7 +11,7 @@
  * @type Number
  */
 export function clamp(input = 0, min = 0, max = 255) {
-    return Math.min(Math.max(input, min), max);
+  return Math.min(Math.max(input, min), max);
 }
 
 export default { clamp };
diff --git a/src/js/utils/objects.js b/src/js/utils/objects.js
index 225bb459..a327e488 100644
--- a/src/js/utils/objects.js
+++ b/src/js/utils/objects.js
@@ -6,37 +6,37 @@ import is from './is';
 
 // Clone nested objects
 export function cloneDeep(object) {
-    return JSON.parse(JSON.stringify(object));
+  return JSON.parse(JSON.stringify(object));
 }
 
 // Get a nested value in an object
 export function getDeep(object, path) {
-    return path.split('.').reduce((obj, key) => obj && obj[key], object);
+  return path.split('.').reduce((obj, key) => obj && obj[key], object);
 }
 
 // Deep extend destination object with N more objects
 export function extend(target = {}, ...sources) {
-    if (!sources.length) {
-        return target;
-    }
+  if (!sources.length) {
+    return target;
+  }
 
-    const source = sources.shift();
+  const source = sources.shift();
 
-    if (!is.object(source)) {
-        return target;
-    }
+  if (!is.object(source)) {
+    return target;
+  }
 
-    Object.keys(source).forEach(key => {
-        if (is.object(source[key])) {
-            if (!Object.keys(target).includes(key)) {
-                Object.assign(target, { [key]: {} });
-            }
+  Object.keys(source).forEach(key => {
+    if (is.object(source[key])) {
+      if (!Object.keys(target).includes(key)) {
+        Object.assign(target, { [key]: {} });
+      }
 
-            extend(target[key], source[key]);
-        } else {
-            Object.assign(target, { [key]: source[key] });
-        }
-    });
+      extend(target[key], source[key]);
+    } else {
+      Object.assign(target, { [key]: source[key] });
+    }
+  });
 
-    return extend(target, ...sources);
+  return extend(target, ...sources);
 }
diff --git a/src/js/utils/promise.js b/src/js/utils/promise.js
index f45b46ab..4b59bba3 100644
--- a/src/js/utils/promise.js
+++ b/src/js/utils/promise.js
@@ -6,9 +6,9 @@ import is from './is';
  * @param  {Object} value An object that may or may not be `Promise`-like.
  */
 export function silencePromise(value) {
-    if (is.promise(value)) {
-        value.then(null, () => {});
-    }
+  if (is.promise(value)) {
+    value.then(null, () => {});
+  }
 }
 
 export default { silencePromise };
diff --git a/src/js/utils/strings.js b/src/js/utils/strings.js
index 6b9a65a2..b7de04c1 100644
--- a/src/js/utils/strings.js
+++ b/src/js/utils/strings.js
@@ -6,80 +6,75 @@ import is from './is';
 
 // Generate a random ID
 export function generateId(prefix) {
-    return `${prefix}-${Math.floor(Math.random() * 10000)}`;
+  return `${prefix}-${Math.floor(Math.random() * 10000)}`;
 }
 
 // Format string
 export function format(input, ...args) {
-    if (is.empty(input)) {
-        return input;
-    }
+  if (is.empty(input)) {
+    return input;
+  }
 
-    return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString());
+  return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString());
 }
 
 // Get percentage
 export function getPercentage(current, max) {
-    if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
-        return 0;
-    }
+  if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
+    return 0;
+  }
 
-    return ((current / max) * 100).toFixed(2);
+  return ((current / max) * 100).toFixed(2);
 }
 
 // Replace all occurances of a string in a string
-export function replaceAll(input = '', find = '', replace = '') {
-    return input.replace(
-        new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'),
-        replace.toString(),
-    );
-}
+export const replaceAll = (input = '', find = '', replace = '') =>
+  input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
 
 // Convert to title case
-export function toTitleCase(input = '') {
-    return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
-}
+export const toTitleCase = (input = '') =>
+  input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase());
 
 // Convert string to pascalCase
 export function toPascalCase(input = '') {
-    let string = input.toString();
+  let string = input.toString();
 
-    // Convert kebab case
-    string = replaceAll(string, '-', ' ');
+  // Convert kebab case
+  string = replaceAll(string, '-', ' ');
 
-    // Convert snake case
-    string = replaceAll(string, '_', ' ');
+  // Convert snake case
+  string = replaceAll(string, '_', ' ');
 
-    // Convert to title case
-    string = toTitleCase(string);
+  // Convert to title case
+  string = toTitleCase(string);
 
-    // Convert to pascal case
-    return replaceAll(string, ' ', '');
+  // Convert to pascal case
+  return replaceAll(string, ' ', '');
 }
 
 // Convert string to pascalCase
 export function toCamelCase(input = '') {
-    let string = input.toString();
+  let string = input.toString();
 
-    // Convert to pascal case
-    string = toPascalCase(string);
+  // Convert to pascal case
+  string = toPascalCase(string);
 
-    // Convert first character to lowercase
-    return string.charAt(0).toLowerCase() + string.slice(1);
+  // Convert first character to lowercase
+  return string.charAt(0).toLowerCase() + string.slice(1);
 }
 
 // Remove HTML from a string
 export function stripHTML(source) {
-    const fragment = document.createDocumentFragment();
-    const element = document.createElement('div');
-    fragment.appendChild(element);
-    element.innerHTML = source;
-    return fragment.firstChild.innerText;
+  const fragment = document.createDocumentFragment();
+  const element = document.createElement('div');
+  fragment.appendChild(element);
+  element.innerHTML = source;
+  return fragment.firstChild.innerText;
 }
 
 // Like outerHTML, but also works for DocumentFragment
 export function getHTML(element) {
-    const wrapper = document.createElement('div');
-    wrapper.appendChild(element);
-    return wrapper.innerHTML;
+  const wrapper = document.createElement('div');
+  wrapper.appendChild(element);
+  return wrapper.innerHTML;
 }
diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index 17a033fe..0a37e595 100644
--- a/src/js/utils/style.js
+++ b/src/js/utils/style.js
@@ -5,74 +5,74 @@
 import is from './is';
 
 export function validateRatio(input) {
-    if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
-        return false;
-    }
+  if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
+    return false;
+  }
 
-    const ratio = is.array(input) ? input : input.split(':');
+  const ratio = is.array(input) ? input : input.split(':');
 
-    return ratio.map(Number).every(is.number);
+  return ratio.map(Number).every(is.number);
 }
 
 export function reduceAspectRatio(ratio) {
-    if (!is.array(ratio) || !ratio.every(is.number)) {
-        return null;
-    }
+  if (!is.array(ratio) || !ratio.every(is.number)) {
+    return null;
+  }
 
-    const [width, height] = ratio;
-    const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
-    const divider = getDivider(width, height);
+  const [width, height] = ratio;
+  const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
+  const divider = getDivider(width, height);
 
-    return [width / divider, height / divider];
+  return [width / divider, height / divider];
 }
 
 export function getAspectRatio(input) {
-    const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
-    // Try provided ratio
-    let ratio = parse(input);
-
-    // Get from config
-    if (ratio === null) {
-        ratio = parse(this.config.ratio);
-    }
-
-    // Get from embed
-    if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
-        ({ ratio } = this.embed);
-    }
-
-    // Get from HTML5 video
-    if (ratio === null && this.isHTML5) {
-        const { videoWidth, videoHeight } = this.media;
-        ratio = reduceAspectRatio([videoWidth, videoHeight]);
-    }
-
-    return ratio;
+  const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
+  // Try provided ratio
+  let ratio = parse(input);
+
+  // Get from config
+  if (ratio === null) {
+    ratio = parse(this.config.ratio);
+  }
+
+  // Get from embed
+  if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
+    ({ ratio } = this.embed);
+  }
+
+  // Get from HTML5 video
+  if (ratio === null && this.isHTML5) {
+    const { videoWidth, videoHeight } = this.media;
+    ratio = reduceAspectRatio([videoWidth, videoHeight]);
+  }
+
+  return ratio;
 }
 
 // Set aspect ratio for responsive container
 export function setAspectRatio(input) {
-    if (!this.isVideo) {
-        return {};
-    }
-
-    const { wrapper } = this.elements;
-    const ratio = getAspectRatio.call(this, input);
-    const [w, h] = is.array(ratio) ? ratio : [0, 0];
-    const padding = (100 / w) * h;
-
-    wrapper.style.paddingBottom = `${padding}%`;
-
-    // For Vimeo we have an extra <div> to hide the standard controls and UI
-    if (this.isVimeo && this.supported.ui) {
-        const height = 240;
-        const offset = (height - padding) / (height / 50);
-        this.media.style.transform = `translateY(-${offset}%)`;
-    } else if (this.isHTML5) {
-        wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
-    }
-
-    return { padding, ratio };
+  if (!this.isVideo) {
+    return {};
+  }
+
+  const { wrapper } = this.elements;
+  const ratio = getAspectRatio.call(this, input);
+  const [w, h] = is.array(ratio) ? ratio : [0, 0];
+  const padding = (100 / w) * h;
+
+  wrapper.style.paddingBottom = `${padding}%`;
+
+  // For Vimeo we have an extra <div> to hide the standard controls and UI
+  if (this.isVimeo && this.supported.ui) {
+    const height = 240;
+    const offset = (height - padding) / (height / 50);
+    this.media.style.transform = `translateY(-${offset}%)`;
+  } else if (this.isHTML5) {
+    wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
+  }
+
+  return { padding, ratio };
 }
 
 export default { setAspectRatio };
diff --git a/src/js/utils/time.js b/src/js/utils/time.js
index 17228de5..31660c4a 100644
--- a/src/js/utils/time.js
+++ b/src/js/utils/time.js
@@ -11,25 +11,25 @@ export const getSeconds = value => Math.trunc(value % 60, 10);
 
 // Format time to UI friendly string
 export function formatTime(time = 0, displayHours = false, inverted = false) {
-    // Bail if the value isn't a number
-    if (!is.number(time)) {
-        return formatTime(undefined, displayHours, inverted);
-    }
+  // Bail if the value isn't a number
+  if (!is.number(time)) {
+    return formatTime(undefined, displayHours, inverted);
+  }
 
-    // Format time component to add leading zero
-    const format = value => `0${value}`.slice(-2);
-    // Breakdown to hours, mins, secs
-    let hours = getHours(time);
-    const mins = getMinutes(time);
-    const secs = getSeconds(time);
+  // Format time component to add leading zero
+  const format = value => `0${value}`.slice(-2);
+  // Breakdown to hours, mins, secs
+  let hours = getHours(time);
+  const mins = getMinutes(time);
+  const secs = getSeconds(time);
 
-    // Do we need to display hours?
-    if (displayHours || hours > 0) {
-        hours = `${hours}:`;
-    } else {
-        hours = '';
-    }
+  // Do we need to display hours?
+  if (displayHours || hours > 0) {
+    hours = `${hours}:`;
+  } else {
+    hours = '';
+  }
 
-    // Render
-    return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
+  // Render
+  return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
 }
diff --git a/src/js/utils/urls.js b/src/js/utils/urls.js
index 843c6aa6..ba264511 100644
--- a/src/js/utils/urls.js
+++ b/src/js/utils/urls.js
@@ -10,30 +10,30 @@ import is from './is';
  * @param {Boolean} safe - failsafe parsing
  */
 export function parseUrl(input, safe = true) {
-    let url = input;
+  let url = input;
 
-    if (safe) {
-        const parser = document.createElement('a');
-        parser.href = url;
-        url = parser.href;
-    }
+  if (safe) {
+    const parser = document.createElement('a');
+    parser.href = url;
+    url = parser.href;
+  }
 
-    try {
-        return new URL(url);
-    } catch (e) {
-        return null;
-    }
+  try {
+    return new URL(url);
+  } catch (e) {
+    return null;
+  }
 }
 
 // Convert object to URLSearchParams
 export function buildUrlParams(input) {
-    const params = new URLSearchParams();
+  const params = new URLSearchParams();
 
-    if (is.object(input)) {
-        Object.entries(input).forEach(([key, value]) => {
-            params.set(key, value);
-        });
-    }
+  if (is.object(input)) {
+    Object.entries(input).forEach(([key, value]) => {
+      params.set(key, value);
+    });
+  }
 
-    return params;
+  return params;
 }
diff --git a/src/sass/base.scss b/src/sass/base.scss
index 74dbb70f..8ab3e1a8 100644
--- a/src/sass/base.scss
+++ b/src/sass/base.scss
@@ -4,66 +4,66 @@
 
 // Base
 .plyr {
-    @include plyr-font-smoothing($plyr-font-smoothing);
-    align-items: center;
-    direction: ltr;
-    display: flex;
-    flex-direction: column;
-    font-family: var(--plyr-font-family);
-    font-variant-numeric: tabular-nums; // Force monosace-esque number widths
-    font-weight: var(--plyr-font-weight-regular);
+  @include plyr-font-smoothing($plyr-font-smoothing);
+  align-items: center;
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  font-family: $plyr-font-family;
+  font-variant-numeric: tabular-nums; // Force monosace-esque number widths
+  font-weight: $plyr-font-weight-regular;
+  height: 100%;
+  line-height: $plyr-line-height;
+  max-width: 100%;
+  min-width: 200px;
+  position: relative;
+  text-shadow: none;
+  transition: box-shadow 0.3s ease;
+  z-index: 0; // Force any border radius
+
+  // Media elements
+  video,
+  audio,
+  iframe {
+    display: block;
     height: 100%;
-    line-height: var(--plyr-line-height);
-    max-width: 100%;
-    min-width: 200px;
-    position: relative;
-    text-shadow: none;
-    transition: box-shadow 0.3s ease;
-    z-index: 0; // Force any border radius
+    width: 100%;
+  }
 
-    // Media elements
-    video,
-    audio,
-    iframe {
-        display: block;
-        height: 100%;
-        width: 100%;
-    }
+  button {
+    font: inherit;
+    line-height: inherit;
+    width: auto;
+  }
 
-    button {
-        font: inherit;
-        line-height: inherit;
-        width: auto;
-    }
-
-    // Ignore focus
-    &:focus {
-        outline: 0;
-    }
+  // Ignore focus
+  &:focus {
+    outline: 0;
+  }
 }
 
 // border-box everything
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
 @if $plyr-border-box {
-    .plyr--full-ui {
-        box-sizing: border-box;
+  .plyr--full-ui {
+    box-sizing: border-box;
 
-        *,
-        *::after,
-        *::before {
-            box-sizing: inherit;
-        }
+    *,
+    *::after,
+    *::before {
+      box-sizing: inherit;
     }
+  }
 }
 
 // Fix 300ms delay
 @if $plyr-touch-action {
-    .plyr--full-ui {
-        a,
-        button,
-        input,
-        label {
-            touch-action: manipulation;
-        }
+  .plyr--full-ui {
+    a,
+    button,
+    input,
+    label {
+      touch-action: manipulation;
     }
+  }
 }
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index b0d575bb..83d045a6 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -3,10 +3,10 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: var(--plyr-badge-background, $plyr-badge-background);
-    border-radius: 2px;
-    color: var(--plyr-badge-color, $plyr-badge-color);
-    font-size: var(--plyr-font-size-badge, $plyr-font-size-badge);
-    line-height: 1;
-    padding: 3px 4px;
+  background: $plyr-badge-background;
+  border-radius: $plyr-badge-border-radius;
+  color: $plyr-badge-color;
+  font-size: $plyr-font-size-badge;
+  line-height: 1;
+  padding: 3px 4px;
 }
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 85899ef3..eb3c9389 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -4,57 +4,55 @@
 
 // Hide default captions
 .plyr--full-ui ::-webkit-media-text-track-container {
-    display: none;
+  display: none;
 }
 
 .plyr__captions {
-    animation: plyr-fade-in 0.3s ease;
-    bottom: 0;
-    display: none;
-    font-size: $plyr-font-size-captions-small;
-    left: 0;
-    padding: $plyr-control-spacing;
-    position: absolute;
-    text-align: center;
-    transition: transform 0.4s ease-in-out;
-    width: 100%;
-
-    .plyr__caption {
-        background: $plyr-captions-background;
-        background: var(--plyr-captions-background, $plyr-captions-background);
-        border-radius: 2px;
-        box-decoration-break: clone;
-        color: $plyr-captions-text-color;
-        color: var(--plyr-captions-text-color, $plyr-captions-text-color);
-        line-height: 185%;
-        padding: 0.2em 0.5em;
-        white-space: pre-wrap;
-
-        // Firefox adds a <div> when using getCueAsHTML()
-        div {
-            display: inline;
-        }
+  animation: plyr-fade-in 0.3s ease;
+  bottom: 0;
+  display: none;
+  font-size: $plyr-font-size-captions-small;
+  left: 0;
+  padding: $plyr-control-spacing;
+  position: absolute;
+  text-align: center;
+  transition: transform 0.4s ease-in-out;
+  width: 100%;
+
+  .plyr__caption {
+    background: $plyr-captions-background;
+    border-radius: 2px;
+    box-decoration-break: clone;
+    color: $plyr-captions-text-color;
+    line-height: 185%;
+    padding: 0.2em 0.5em;
+    white-space: pre-wrap;
+
+    // Firefox adds a <div> when using getCueAsHTML()
+    div {
+      display: inline;
     }
+  }
 
-    span:empty {
-        display: none;
-    }
+  span:empty {
+    display: none;
+  }
 
-    @media (min-width: $plyr-bp-sm) {
-        font-size: $plyr-font-size-captions-base;
-        padding: ($plyr-control-spacing * 2);
-    }
+  @media (min-width: $plyr-bp-sm) {
+    font-size: $plyr-font-size-captions-base;
+    padding: calc(#{$plyr-control-spacing} * 2);
+  }
 
-    @media (min-width: $plyr-bp-md) {
-        font-size: $plyr-font-size-captions-medium;
-    }
+  @media (min-width: $plyr-bp-md) {
+    font-size: $plyr-font-size-captions-medium;
+  }
 }
 
 .plyr--captions-active .plyr__captions {
-    display: block;
+  display: block;
 }
 
 // If the lower controls are shown and not empty
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 4));
+  transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 2940897b..8671fa2a 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -3,45 +3,44 @@
 // --------------------------------------------------------------
 
 .plyr__control {
-    background: transparent;
-    border: 0;
-    border-radius: $plyr-control-radius;
-    border-radius: var(--plyr-control-radius, $plyr-control-radius);
-    color: inherit;
-    cursor: pointer;
-    flex-shrink: 0;
-    overflow: visible; // IE11
-    padding: var(--plyr-control-padding, $plyr-control-padding);
-    position: relative;
-    transition: all 0.3s ease;
+  background: transparent;
+  border: 0;
+  border-radius: $plyr-control-radius;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  overflow: visible; // IE11
+  padding: $plyr-control-padding;
+  position: relative;
+  transition: all 0.3s ease;
 
-    svg {
-        display: block;
-        fill: currentColor;
-        height: var(--plyr-control-icon-size, $plyr-control-icon-size);
-        pointer-events: none;
-        width: var(--plyr-control-icon-size, $plyr-control-icon-size);
-    }
+  svg {
+    display: block;
+    fill: currentColor;
+    height: $plyr-control-icon-size;
+    pointer-events: none;
+    width: $plyr-control-icon-size;
+  }
 
-    // Default focus
-    &:focus {
-        outline: 0;
-    }
+  // Default focus
+  &:focus {
+    outline: 0;
+  }
 
-    // Tab focus
-    &.plyr__tab-focus {
-        @include plyr-tab-focus();
-    }
+  // Tab focus
+  &.plyr__tab-focus {
+    @include plyr-tab-focus();
+  }
 }
 
 // Remove any link styling
 a.plyr__control {
-    text-decoration: none;
+  text-decoration: none;
 
-    &::after,
-    &::before {
-        display: none;
-    }
+  &::after,
+  &::before {
+    display: none;
+  }
 }
 
 // Change icons on state change
@@ -49,5 +48,5 @@ a.plyr__control {
 .plyr__control.plyr__control--pressed .icon--not-pressed,
 .plyr__control:not(.plyr__control--pressed) .label--pressed,
 .plyr__control.plyr__control--pressed .label--not-pressed {
-    display: none;
+  display: none;
 }
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 50333701..60ee774d 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -4,49 +4,49 @@
 
 // Hide native controls
 .plyr--full-ui ::-webkit-media-controls {
-    display: none;
+  display: none;
 }
 
 // Playback controls
 .plyr__controls {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-    text-align: center;
-
-    .plyr__progress__container {
-        flex: 1;
-        min-width: 0; // Fix for Edge issue where content would overflow
-    }
+  align-items: center;
+  display: flex;
+  justify-content: flex-end;
+  text-align: center;
 
-    // Spacing
-    .plyr__controls__item {
-        margin-left: ($plyr-control-spacing / 4);
+  .plyr__progress__container {
+    flex: 1;
+    min-width: 0; // Fix for Edge issue where content would overflow
+  }
 
-        &:first-child {
-            margin-left: 0;
-            margin-right: auto;
-        }
+  // Spacing
+  .plyr__controls__item {
+    margin-left: calc(#{$plyr-control-spacing} / 4);
 
-        &.plyr__progress__container {
-            padding-left: ($plyr-control-spacing / 4);
-        }
+    &:first-child {
+      margin-left: 0;
+      margin-right: auto;
+    }
 
-        &.plyr__time {
-            padding: 0 ($plyr-control-spacing / 2);
-        }
+    &.plyr__progress__container {
+      padding-left: calc(#{$plyr-control-spacing} / 4);
+    }
 
-        &.plyr__progress__container:first-child,
-        &.plyr__time:first-child,
-        &.plyr__time + .plyr__time {
-            padding-left: 0;
-        }
+    &.plyr__time {
+      padding: 0 calc(#{$plyr-control-spacing} / 2);
     }
 
-    // Hide empty controls
-    &:empty {
-        display: none;
+    &.plyr__progress__container:first-child,
+    &.plyr__time:first-child,
+    &.plyr__time + .plyr__time {
+      padding-left: 0;
     }
+  }
+
+  // Hide empty controls
+  &:empty {
+    display: none;
+  }
 }
 
 // Some options are hidden by default
@@ -54,11 +54,11 @@
 .plyr [data-plyr='pip'],
 .plyr [data-plyr='airplay'],
 .plyr [data-plyr='fullscreen'] {
-    display: none;
+  display: none;
 }
 .plyr--captions-enabled [data-plyr='captions'],
 .plyr--pip-supported [data-plyr='pip'],
 .plyr--airplay-supported [data-plyr='airplay'],
 .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
-    display: inline-block;
+  display: inline-block;
 }
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 50a47248..49cec6f5 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -3,198 +3,200 @@
 // --------------------------------------------------------------
 
 .plyr__menu {
-    display: flex; // Edge fix
-    position: relative;
+  display: flex; // Edge fix
+  position: relative;
+
+  // Animate the icon
+  .plyr__control svg {
+    transition: transform 0.3s ease;
+  }
+  .plyr__control[aria-expanded='true'] {
+    svg {
+      transform: rotate(90deg);
+    }
 
-    // Animate the icon
-    .plyr__control svg {
-        transition: transform 0.3s ease;
+    // Hide tooltip
+    .plyr__tooltip {
+      display: none;
+    }
+  }
+
+  // The actual menu container
+  &__container {
+    animation: plyr-popup 0.2s ease;
+    background: $plyr-menu-background;
+    border-radius: 4px;
+    bottom: 100%;
+    box-shadow: $plyr-menu-shadow;
+    color: $plyr-menu-color;
+    font-size: $plyr-font-size-base;
+    margin-bottom: 10px;
+    position: absolute;
+    right: -3px;
+    text-align: left;
+    white-space: nowrap;
+    z-index: 3;
+
+    > div {
+      overflow: hidden;
+      transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
     }
-    .plyr__control[aria-expanded='true'] {
-        svg {
-            transform: rotate(90deg);
-        }
 
-        // Hide tooltip
-        .plyr__tooltip {
-            display: none;
-        }
+    // Arrow
+    &::after {
+      border: 4px solid transparent;
+      border-top-color: $plyr-menu-background;
+      content: '';
+      height: 0;
+      position: absolute;
+      right: 15px;
+      top: 100%;
+      width: 0;
+    }
+
+    [role='menu'] {
+      padding: $plyr-control-padding;
+    }
+
+    [role='menuitem'],
+    [role='menuitemradio'] {
+      margin-top: 2px;
+
+      &:first-child {
+        margin-top: 0;
+      }
     }
 
-    // The actual menu container
-    &__container {
-        animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-background;
-        border-radius: 4px;
-        bottom: 100%;
-        box-shadow: $plyr-menu-shadow;
-        color: $plyr-menu-color;
-        font-size: $plyr-font-size-base;
-        margin-bottom: 10px;
+    // Options
+    .plyr__control {
+      align-items: center;
+      color: $plyr-menu-color;
+      display: flex;
+      font-size: $plyr-font-size-menu;
+      padding-bottom: calc(#{$plyr-control-padding} / 1.5);
+      padding-left: calc(#{$plyr-control-padding} * 1.5);
+      padding-right: calc(#{$plyr-control-padding} * 1.5);
+      padding-top: calc(#{$plyr-control-padding} / 1.5);
+      user-select: none;
+      width: 100%;
+
+      > span {
+        align-items: inherit;
+        display: flex;
+        width: 100%;
+      }
+
+      &::after {
+        border: 4px solid transparent;
+        content: '';
         position: absolute;
-        right: -3px;
-        text-align: left;
-        white-space: nowrap;
-        z-index: 3;
-
-        > div {
-            overflow: hidden;
-            transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-        }
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &--forward {
+        padding-right: calc(#{$plyr-control-padding} * 4);
 
-        // Arrow
         &::after {
-            border: 4px solid transparent;
-            border-top-color: $plyr-menu-background;
-            content: '';
-            height: 0;
-            position: absolute;
-            right: 15px;
-            top: 100%;
-            width: 0;
+          border-left-color: $plyr-menu-arrow-color;
+          right: 5px;
         }
 
-        [role='menu'] {
-            padding: $plyr-control-padding;
+        &.plyr__tab-focus::after,
+        &:hover::after {
+          border-left-color: currentColor;
         }
+      }
 
-        [role='menuitem'],
-        [role='menuitemradio'] {
-            margin-top: 2px;
+      &--back {
+        font-weight: $plyr-font-weight-regular;
+        margin: $plyr-control-padding;
+        margin-bottom: calc(#{$plyr-control-padding} / 2);
+        padding-left: calc(#{$plyr-control-padding} * 4);
+        position: relative;
+        width: calc(100% - (#{$plyr-control-padding} * 2));
 
-            &:first-child {
-                margin-top: 0;
-            }
+        &::after {
+          border-right-color: $plyr-menu-arrow-color;
+          left: $plyr-control-padding;
         }
 
-        // Options
-        .plyr__control {
-            align-items: center;
-            color: $plyr-menu-color;
-            display: flex;
-            font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
-            user-select: none;
-            width: 100%;
-
-            > span {
-                align-items: inherit;
-                display: flex;
-                width: 100%;
-            }
-
-            &::after {
-                border: 4px solid transparent;
-                content: '';
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-            }
-
-            &--forward {
-                padding-right: ceil($plyr-control-padding * 4);
-
-                &::after {
-                    border-left-color: rgba($plyr-menu-color, 0.8);
-                    right: 5px;
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-left-color: currentColor;
-                }
-            }
-
-            &--back {
-                $horizontal-padding: ($plyr-control-padding * 2);
-                font-weight: $plyr-font-weight-regular;
-                margin: $plyr-control-padding;
-                margin-bottom: floor($plyr-control-padding / 2);
-                padding-left: ceil($plyr-control-padding * 4);
-                position: relative;
-                width: calc(100% - #{$horizontal-padding});
-
-                &::after {
-                    border-right-color: rgba($plyr-menu-color, 0.8);
-                    left: $plyr-control-padding;
-                }
-
-                &::before {
-                    background: $plyr-menu-border-color;
-                    box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
-                    content: '';
-                    height: 1px;
-                    left: 0;
-                    margin-top: ceil($plyr-control-padding / 2);
-                    overflow: hidden;
-                    position: absolute;
-                    right: 0;
-                    top: 100%;
-                }
-
-                &.plyr__tab-focus::after,
-                &:hover::after {
-                    border-right-color: currentColor;
-                }
-            }
+        &::before {
+          background: $plyr-menu-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          content: '';
+          height: 1px;
+          left: 0;
+          margin-top: calc(#{$plyr-control-padding} / 2);
+          overflow: hidden;
+          position: absolute;
+          right: 0;
+          top: 100%;
         }
 
-        .plyr__control[role='menuitemradio'] {
-            padding-left: $plyr-control-padding;
-
-            &::before,
-            &::after {
-                border-radius: 100%;
-            }
-
-            &::before {
-                background: rgba(#000, 0.1);
-                content: '';
-                display: block;
-                flex-shrink: 0;
-                height: 16px;
-                margin-right: $plyr-control-spacing;
-                transition: all 0.3s ease;
-                width: 16px;
-            }
-
-            &::after {
-                background: #fff;
-                border: 0;
-                height: 6px;
-                left: 12px;
-                opacity: 0;
-                top: 50%;
-                transform: translateY(-50%) scale(0);
-                transition: transform 0.3s ease, opacity 0.3s ease;
-                width: 6px;
-            }
-
-            &[aria-checked='true'] {
-                &::before {
-                    background: var(--plyr-color-main, $plyr-color-main);
-                }
-                &::after {
-                    opacity: 1;
-                    transform: translateY(-50%) scale(1);
-                }
-            }
-
-            &.plyr__tab-focus::before,
-            &:hover::before {
-                background: rgba(#000, 0.1);
-            }
+        &.plyr__tab-focus::after,
+        &:hover::after {
+          border-right-color: currentColor;
         }
+      }
+    }
 
-        // Option value
-        .plyr__menu__value {
-            align-items: center;
-            display: flex;
-            margin-left: auto;
-            margin-right: -($plyr-control-padding - 2);
-            overflow: hidden;
-            padding-left: ceil($plyr-control-padding * 3.5);
-            pointer-events: none;
+    .plyr__control[role='menuitemradio'] {
+      padding-left: $plyr-control-padding;
+
+      &::before,
+      &::after {
+        border-radius: 100%;
+      }
+
+      &::before {
+        background: rgba(#000, 0.1);
+        content: '';
+        display: block;
+        flex-shrink: 0;
+        height: 16px;
+        margin-right: $plyr-control-spacing;
+        transition: all 0.3s ease;
+        width: 16px;
+      }
+
+      &::after {
+        background: #fff;
+        border: 0;
+        height: 6px;
+        left: 12px;
+        opacity: 0;
+        top: 50%;
+        transform: translateY(-50%) scale(0);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+        width: 6px;
+      }
+
+      &[aria-checked='true'] {
+        &::before {
+          background: $plyr-control-toggle-checked-background;
         }
+        &::after {
+          opacity: 1;
+          transform: translateY(-50%) scale(1);
+        }
+      }
+
+      &.plyr__tab-focus::before,
+      &:hover::before {
+        background: rgba($plyr-color-gray-900, 0.1);
+      }
+    }
+
+    // Option value
+    .plyr__menu__value {
+      align-items: center;
+      display: flex;
+      margin-left: auto;
+      margin-right: calc((#{$plyr-control-padding} - 2) * -1);
+      overflow: hidden;
+      padding-left: calc(#{$plyr-control-padding} * 3.5);
+      pointer-events: none;
     }
+  }
 }
diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 9b239d4f..2e966a32 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -3,20 +3,20 @@
 // --------------------------------------------------------------
 
 .plyr__poster {
-    background-color: #000;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    height: 100%;
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    top: 0;
-    transition: opacity 0.2s ease;
-    width: 100%;
-    z-index: 1;
+  background-color: #000;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  transition: opacity 0.2s ease;
+  width: 100%;
+  z-index: 1;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
-    opacity: 1;
+  opacity: 1;
 }
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index c15ee911..be5bc126 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -6,89 +6,89 @@
 $plyr-progress-offset: $plyr-range-thumb-height;
 
 .plyr__progress {
-    left: $plyr-progress-offset / 2;
-    margin-right: $plyr-progress-offset;
-    position: relative;
+  left: calc(#{$plyr-progress-offset} * 0.5);
+  margin-right: $plyr-progress-offset;
+  position: relative;
 
-    input[type='range'],
-    &__buffer {
-        margin-left: -($plyr-progress-offset / 2);
-        margin-right: -($plyr-progress-offset / 2);
-        width: calc(100% + #{$plyr-progress-offset});
-    }
+  input[type='range'],
+  &__buffer {
+    margin-left: calc(#{$plyr-progress-offset} * -0.5);
+    margin-right: calc(#{$plyr-progress-offset} * -0.5);
+    width: calc(100% + #{$plyr-progress-offset});
+  }
 
-    input[type='range'] {
-        position: relative;
-        z-index: 2;
-    }
+  input[type='range'] {
+    position: relative;
+    z-index: 2;
+  }
 
-    // Seek tooltip to show time
-    .plyr__tooltip {
-        font-size: $plyr-font-size-time;
-        left: 0;
-    }
+  // Seek tooltip to show time
+  .plyr__tooltip {
+    font-size: $plyr-font-size-time;
+    left: 0;
+  }
 }
 
 .plyr__progress__buffer {
-    -webkit-appearance: none; /* stylelint-disable-line */
-    background: transparent;
-    border: 0;
-    border-radius: 100px;
-    height: $plyr-range-track-height;
-    left: 0;
-    margin-top: -($plyr-range-track-height / 2);
-    padding: 0;
-    position: absolute;
-    top: 50%;
+  -webkit-appearance: none; /* stylelint-disable-line */
+  background: transparent;
+  border: 0;
+  border-radius: 100px;
+  height: $plyr-range-track-height;
+  left: 0;
+  margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
+  padding: 0;
+  position: absolute;
+  top: 50%;
 
-    &::-webkit-progress-bar {
-        background: transparent;
-    }
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
 
-    &::-webkit-progress-value {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: $plyr-range-track-height;
-        transition: width 0.2s ease;
-    }
+  &::-webkit-progress-value {
+    background: currentColor;
+    border-radius: 100px;
+    min-width: $plyr-range-track-height;
+    transition: width 0.2s ease;
+  }
 
-    // Mozilla
-    &::-moz-progress-bar {
-        background: currentColor;
-        border-radius: 100px;
-        min-width: $plyr-range-track-height;
-        transition: width 0.2s ease;
-    }
+  // Mozilla
+  &::-moz-progress-bar {
+    background: currentColor;
+    border-radius: 100px;
+    min-width: $plyr-range-track-height;
+    transition: width 0.2s ease;
+  }
 
-    // Microsoft
-    &::-ms-fill {
-        border-radius: 100px;
-        transition: width 0.2s ease;
-    }
+  // Microsoft
+  &::-ms-fill {
+    border-radius: 100px;
+    transition: width 0.2s ease;
+  }
 }
 
 // Loading state
 .plyr--loading .plyr__progress__buffer {
-    animation: plyr-progress 1s linear infinite;
-    background-image: linear-gradient(
-        -45deg,
-        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
-        transparent 25%,
-        transparent 50%,
-        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
-        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
-        transparent 75%,
-        transparent
-    );
-    background-repeat: repeat-x;
-    background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
-    color: transparent;
+  animation: plyr-progress 1s linear infinite;
+  background-image: linear-gradient(
+    -45deg,
+    $plyr-progress-loading-background 25%,
+    transparent 25%,
+    transparent 50%,
+    $plyr-progress-loading-background 50%,
+    $plyr-progress-loading-background 75%,
+    transparent 75%,
+    transparent
+  );
+  background-repeat: repeat-x;
+  background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
+  color: transparent;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-background;
+  background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-background;
+  background-color: $plyr-audio-progress-buffered-background;
 }
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index 7b13348e..b7872bcb 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -3,92 +3,92 @@
 // --------------------------------------------------------------
 
 .plyr--full-ui input[type='range'] {
-    // WebKit
+  // WebKit
+  -webkit-appearance: none; /* stylelint-disable-line */
+  background: transparent;
+  border: 0;
+  border-radius: calc(#{$plyr-range-thumb-height} * 2);
+  // color is used in JS to populate lower fill for WebKit
+  color: $plyr-range-fill-background;
+  display: block;
+  height: $plyr-range-max-height;
+  margin: 0;
+  padding: 0;
+  transition: box-shadow 0.3s ease;
+  width: 100%;
+
+  &::-webkit-slider-runnable-track {
+    @include plyr-range-track();
+    background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+  }
+
+  &::-webkit-slider-thumb {
+    @include plyr-range-thumb();
     -webkit-appearance: none; /* stylelint-disable-line */
-    background: transparent;
+    margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
+  }
+
+  // Mozilla
+  &::-moz-range-track {
+    @include plyr-range-track();
+  }
+
+  &::-moz-range-thumb {
+    @include plyr-range-thumb();
+  }
+
+  &::-moz-range-progress {
+    background: currentColor;
+    border-radius: calc(#{$plyr-range-track-height} / 2);
+    height: $plyr-range-track-height;
+  }
+
+  // Microsoft
+  &::-ms-track {
+    @include plyr-range-track();
+    color: transparent;
+  }
+
+  &::-ms-fill-upper {
+    @include plyr-range-track();
+  }
+
+  &::-ms-fill-lower {
+    @include plyr-range-track();
+
+    background: currentColor;
+  }
+
+  &::-ms-thumb {
+    @include plyr-range-thumb();
+    // For some reason, Edge uses the -webkit margin above
+    margin-top: 0;
+  }
+
+  &::-ms-tooltip {
+    display: none;
+  }
+
+  // Focus styles
+  &:focus {
+    outline: 0;
+  }
+
+  &::-moz-focus-outer {
     border: 0;
-    border-radius: ($plyr-range-thumb-height * 2);
-    // color is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-background;
-    display: block;
-    height: $plyr-range-max-height;
-    margin: 0;
-    padding: 0;
-    transition: box-shadow 0.3s ease;
-    width: 100%;
+  }
 
+  &.plyr__tab-focus {
     &::-webkit-slider-runnable-track {
-        @include plyr-range-track();
-        background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
+      @include plyr-tab-focus();
     }
 
-    &::-webkit-slider-thumb {
-        @include plyr-range-thumb();
-        -webkit-appearance: none; /* stylelint-disable-line */
-        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
-    }
-
-    // Mozilla
     &::-moz-range-track {
-        @include plyr-range-track();
-    }
-
-    &::-moz-range-thumb {
-        @include plyr-range-thumb();
-    }
-
-    &::-moz-range-progress {
-        background: currentColor;
-        border-radius: ($plyr-range-track-height / 2);
-        height: $plyr-range-track-height;
+      @include plyr-tab-focus();
     }
 
-    // Microsoft
     &::-ms-track {
-        @include plyr-range-track();
-        color: transparent;
-    }
-
-    &::-ms-fill-upper {
-        @include plyr-range-track();
-    }
-
-    &::-ms-fill-lower {
-        @include plyr-range-track();
-
-        background: currentColor;
-    }
-
-    &::-ms-thumb {
-        @include plyr-range-thumb();
-        // For some reason, Edge uses the -webkit margin above
-        margin-top: 0;
-    }
-
-    &::-ms-tooltip {
-        display: none;
-    }
-
-    // Focus styles
-    &:focus {
-        outline: 0;
-    }
-
-    &::-moz-focus-outer {
-        border: 0;
-    }
-
-    &.plyr__tab-focus {
-        &::-webkit-slider-runnable-track {
-            @include plyr-tab-focus();
-        }
-
-        &::-moz-range-track {
-            @include plyr-tab-focus();
-        }
-
-        &::-ms-track {
-            @include plyr-tab-focus();
-        }
+      @include plyr-tab-focus();
     }
+  }
 }
diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss
index 7d7a50f1..db41275d 100644
--- a/src/sass/components/times.scss
+++ b/src/sass/components/times.scss
@@ -3,18 +3,18 @@
 // --------------------------------------------------------------
 
 .plyr__time {
-    font-size: $plyr-font-size-time;
+  font-size: $plyr-font-size-time;
 }
 
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
-    // Add a slash in before
-    &::before {
-        content: '\2044';
-        margin-right: $plyr-control-spacing;
-    }
+  // Add a slash in before
+  &::before {
+    content: '\2044';
+    margin-right: $plyr-control-spacing;
+  }
 
-    @media (max-width: $plyr-bp-sm-max) {
-        display: none;
-    }
+  @media (max-width: calc(#{$plyr-bp-md} - 1)) {
+    display: none;
+  }
 }
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 15f11f03..2d5eceaf 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -3,86 +3,86 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-background;
-    border-radius: $plyr-tooltip-radius;
-    bottom: 100%;
-    box-shadow: $plyr-tooltip-shadow;
-    color: $plyr-tooltip-color;
-    font-size: $plyr-font-size-small;
-    font-weight: $plyr-font-weight-regular;
+  background: $plyr-tooltip-background;
+  border-radius: $plyr-tooltip-radius;
+  bottom: 100%;
+  box-shadow: $plyr-tooltip-shadow;
+  color: $plyr-tooltip-color;
+  font-size: $plyr-font-size-small;
+  font-weight: $plyr-font-weight-regular;
+  left: 50%;
+  line-height: 1.3;
+  margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
+  opacity: 0;
+  padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
+  pointer-events: none;
+  position: absolute;
+  transform: translate(-50%, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  white-space: nowrap;
+  z-index: 2;
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-tooltip-arrow-size solid transparent;
+    border-right: $plyr-tooltip-arrow-size solid transparent;
+    border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
+    bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
+    content: '';
+    height: 0;
     left: 50%;
-    line-height: 1.3;
-    margin-bottom: ($plyr-tooltip-padding * 2);
-    opacity: 0;
-    padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
-    pointer-events: none;
     position: absolute;
-    transform: translate(-50%, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-    white-space: nowrap;
+    transform: translateX(-50%);
+    width: 0;
     z-index: 2;
-
-    // The background triangle
-    &::before {
-        border-left: $plyr-tooltip-arrow-size solid transparent;
-        border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
-        bottom: -$plyr-tooltip-arrow-size;
-        content: '';
-        height: 0;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        width: 0;
-        z-index: 2;
-    }
+  }
 }
 
 // Displaying
 .plyr .plyr__control:hover .plyr__tooltip,
 .plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
 .plyr__tooltip--visible {
-    opacity: 1;
-    transform: translate(-50%, 0) scale(1);
+  opacity: 1;
+  transform: translate(-50%, 0) scale(1);
 }
 
 .plyr .plyr__control:hover .plyr__tooltip {
-    z-index: 3;
+  z-index: 3;
 }
 
 // First tooltip
 .plyr__controls > .plyr__control:first-child .plyr__tooltip,
 .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
-    left: 0;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 0 100%;
+  left: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 0 100%;
 
-    &::before {
-        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
-    }
+  &::before {
+    left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+  }
 }
 
 // Last tooltip
 .plyr__controls > .plyr__control:last-child .plyr__tooltip {
-    left: auto;
-    right: 0;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 100% 100%;
+  left: auto;
+  right: 0;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 100% 100%;
 
-    &::before {
-        left: auto;
-        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
-        transform: translateX(50%);
-    }
+  &::before {
+    left: auto;
+    right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
+    transform: translateX(50%);
+  }
 }
 
 .plyr__controls > .plyr__control:first-child,
 .plyr__controls > .plyr__control:first-child + .plyr__control,
 .plyr__controls > .plyr__control:last-child {
-    &:hover .plyr__tooltip,
-    &.plyr__tab-focus .plyr__tooltip,
-    .plyr__tooltip--visible {
-        transform: translate(0, 0) scale(1);
-    }
+  &:hover .plyr__tooltip,
+  &.plyr__tab-focus .plyr__tooltip,
+  .plyr__tooltip--visible {
+    transform: translate(0, 0) scale(1);
+  }
 }
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index 614b35f5..be82f536 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -3,23 +3,23 @@
 // --------------------------------------------------------------
 
 .plyr__volume {
-    align-items: center;
-    display: flex;
-    max-width: 110px;
-    min-width: 80px;
-    position: relative;
-    width: 20%;
+  align-items: center;
+  display: flex;
+  max-width: 110px;
+  min-width: 80px;
+  position: relative;
+  width: 20%;
 
-    input[type='range'] {
-        margin-left: ($plyr-control-spacing / 2);
-        margin-right: ($plyr-control-spacing / 2);
-        position: relative;
-        z-index: 2;
-    }
+  input[type='range'] {
+    margin-left: calc(#{$plyr-control-spacing} / 2);
+    margin-right: calc(#{$plyr-control-spacing} / 2);
+    position: relative;
+    z-index: 2;
+  }
 }
 
 // Auto size on iOS as there's no slider
 .plyr--is-ios .plyr__volume {
-    min-width: 0;
-    width: auto;
+  min-width: 0;
+  width: auto;
 }
diff --git a/src/sass/lib/animation.scss b/src/sass/lib/animation.scss
index b6c22d42..b0443798 100644
--- a/src/sass/lib/animation.scss
+++ b/src/sass/lib/animation.scss
@@ -3,29 +3,29 @@
 // --------------------------------------------------------------
 
 @keyframes plyr-progress {
-    to {
-        background-position: $plyr-progress-loading-size 0;
-    }
+  to {
+    background-position: $plyr-progress-loading-size 0;
+  }
 }
 
 @keyframes plyr-popup {
-    0% {
-        opacity: 0.5;
-        transform: translateY(10px);
-    }
+  0% {
+    opacity: 0.5;
+    transform: translateY(10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes plyr-fade-in {
-    from {
-        opacity: 0;
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss
index 493df3a8..fb30f3a7 100644
--- a/src/sass/lib/css-vars.scss
+++ b/src/sass/lib/css-vars.scss
@@ -11,12 +11,12 @@ $css-vars-use-native: false !default;
 // Assigns a variable to the global map
 ///
 @function css-var-assign($varName: null, $varValue: null) {
-    @return map-merge(
-        $css-vars,
-        (
-            $varName: $varValue,
-        )
-    );
+  @return map-merge(
+    $css-vars,
+    (
+      $varName: $varValue,
+    )
+  );
 }
 
 ///
@@ -30,33 +30,33 @@ $css-vars-use-native: false !default;
 // background: var(--main-background, green);
 ///
 @function var($args...) {
-    // CHECK PARAMS
-    @if (length($args) ==0) {
-        @error 'Variable name is expected to be passed to the var() function';
-    }
-    @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
-        @error "Variable name is expected to start from '--'";
-    }
+  // CHECK PARAMS
+  @if (length($args) ==0) {
+    @error 'Variable name is expected to be passed to the var() function';
+  }
+  @if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
+    @error "Variable name is expected to start from '--'";
+  }
 
-    // PROCESS
-    $var-name: nth($args, 1);
-    $var-value: map-get($css-vars, $var-name);
+  // PROCESS
+  $var-name: nth($args, 1);
+  $var-value: map-get($css-vars, $var-name);
 
-    @if ($css-vars-use-native) {
-        // CSS variables
-        // Native CSS: don't process function in case of native
-        @return unquote('var(' + $args + ')');
-    } @else {
-        @if ($var-value == null) {
-            // variable is not provided so far
-            @if (length($args) == 2) {
-                $var-value: nth($args, 2);
-            }
-        }
-
-        // Sass: return value from the map
-        @return $var-value;
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: don't process function in case of native
+    @return unquote('var(' + $args + ')');
+  } @else {
+    @if ($var-value == null) {
+      // variable is not provided so far
+      @if (length($args) == 2) {
+        $var-value: nth($args, 2);
+      }
     }
+
+    // Sass: return value from the map
+    @return $var-value;
+  }
 }
 
 ///
@@ -69,32 +69,32 @@ $css-vars-use-native: false !default;
 // ));
 ///
 @mixin css-vars($var-map: null) {
-    // CHECK PARAMS
-    @if ($var-map == null) {
-        @error 'Map of variables is expected, instead got: null';
-    }
-    @if (type_of($var-map) != map) {
-        @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
-    }
+  // CHECK PARAMS
+  @if ($var-map == null) {
+    @error 'Map of variables is expected, instead got: null';
+  }
+  @if (type_of($var-map) != map) {
+    @error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
+  }
 
-    // PROCESS
-    @if ($css-vars-use-native) {
-        // CSS variables
-        // Native CSS: assign CSS custom properties to the global scope
-        @at-root :root {
-            @each $var-name, $var-value in $var-map {
-                @if (type_of($var-value) == string) {
-                    #{$var-name}: $var-value; // to prevent quotes interpolation
-                } @else {
-                    #{$var-name}: #{$var-value};
-                }
-            }
-        }
-    } @else {
-        // Sass or debug
-        // merge variables and values to the global map (provides no output)
-        @each $var-name, $var-value in $var-map {
-            $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
+  // PROCESS
+  @if ($css-vars-use-native) {
+    // CSS variables
+    // Native CSS: assign CSS custom properties to the global scope
+    @at-root :root {
+      @each $var-name, $var-value in $var-map {
+        @if (type_of($var-value) == string) {
+          #{$var-name}: $var-value; // to prevent quotes interpolation
+        } @else {
+          #{$var-name}: #{$var-value};
         }
+      }
+    }
+  } @else {
+    // Sass or debug
+    // merge variables and values to the global map (provides no output)
+    @each $var-name, $var-value in $var-map {
+      $css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
     }
+  }
 }
diff --git a/src/sass/lib/functions.scss b/src/sass/lib/functions.scss
index a99a1b80..e991e2d8 100644
--- a/src/sass/lib/functions.scss
+++ b/src/sass/lib/functions.scss
@@ -3,5 +3,5 @@
 // ==========================================================================
 
 @function to-percentage($input) {
-    @return $input * 1%;
+  @return $input * 1%;
 }
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 2426ef68..1eaa1a6c 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -4,97 +4,95 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus() {
-    // box-shadow: 0 0 0 5px rgba($color, 0.5);
-    // outline: 0;
-    outline-color: var(--plyr-color-main);
-    outline-offset: 2px;
-    outline-style: dotted;
-    outline-width: 3px;
+@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+  outline-color: $color;
+  outline-offset: 2px;
+  outline-style: dotted;
+  outline-width: 3px;
 }
 
 // Font smoothing
 // ---------------------------------------
 @mixin plyr-font-smoothing($mode: true) {
-    @if $mode {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-    } @else {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
-    }
+  @if $mode {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  } @else {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }
 
 // <input type="range"> styling
 // ---------------------------------------
 @mixin plyr-range-track() {
-    background: transparent;
-    border: 0;
-    border-radius: ($plyr-range-track-height / 2);
-    height: $plyr-range-track-height;
-    transition: box-shadow 0.3s ease;
-    user-select: none;
+  background: transparent;
+  border: 0;
+  border-radius: calc(#{$plyr-range-track-height} / 2);
+  height: $plyr-range-track-height;
+  transition: box-shadow 0.3s ease;
+  user-select: none;
 }
 
 @mixin plyr-range-thumb() {
-    background: $plyr-range-thumb-background;
-    border: 0;
-    border-radius: 100%;
-    box-shadow: $plyr-range-thumb-shadow;
-    height: $plyr-range-thumb-height;
-    position: relative;
-    transition: all 0.2s ease;
-    width: $plyr-range-thumb-height;
+  background: $plyr-range-thumb-background;
+  border: 0;
+  border-radius: 100%;
+  box-shadow: $plyr-range-thumb-shadow;
+  height: $plyr-range-thumb-height;
+  position: relative;
+  transition: all 0.2s ease;
+  width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) {
-    box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
+@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
+  box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
 // Fullscreen styles
 // ---------------------------------------
 @mixin plyr-fullscreen-active() {
-    background: #000;
-    border-radius: 0 !important;
-    height: 100%;
-    margin: 0;
-    width: 100%;
+  background: #000;
+  border-radius: 0 !important;
+  height: 100%;
+  margin: 0;
+  width: 100%;
 
-    video {
-        height: 100%;
-    }
+  video {
+    height: 100%;
+  }
 
-    .plyr__video-wrapper {
-        height: 100%;
-        position: static;
-    }
+  .plyr__video-wrapper {
+    height: 100%;
+    position: static;
+  }
 
-    // Vimeo requires some different styling
-    &.plyr--vimeo .plyr__video-wrapper {
-        height: 0;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
-    }
+  // Vimeo requires some different styling
+  &.plyr--vimeo .plyr__video-wrapper {
+    height: 0;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
-    // Display correct icon
-    .plyr__control .icon--exit-fullscreen {
-        display: block;
+  // Display correct icon
+  .plyr__control .icon--exit-fullscreen {
+    display: block;
 
-        + svg {
-            display: none;
-        }
+    + svg {
+      display: none;
     }
+  }
 
-    // Hide cursor in fullscreen when controls hidden
-    &.plyr--hide-controls {
-        cursor: none;
-    }
+  // Hide cursor in fullscreen when controls hidden
+  &.plyr--hide-controls {
+    cursor: none;
+  }
 
-    // Large captions in full screen on larger screens
-    @media (min-width: $plyr-bp-lg) {
-        .plyr__captions {
-            font-size: $plyr-font-size-captions-large;
-        }
+  // Large captions in full screen on larger screens
+  @media (min-width: $plyr-bp-lg) {
+    .plyr__captions {
+      font-size: $plyr-font-size-captions-large;
     }
+  }
 }
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index a577e680..16fb43e4 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -3,54 +3,54 @@
 // ==========================================================================
 
 .plyr__ads {
-    border-radius: inherit;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: -1; // Hide it by default
+  border-radius: inherit;
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1; // Hide it by default
 
-    // Make sure the inner container is big enough for the ad creative.
-    > div,
-    > div iframe {
-        height: 100%;
-        position: absolute;
-        width: 100%;
-    }
+  // Make sure the inner container is big enough for the ad creative.
+  > div,
+  > div iframe {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
 
-    // The countdown label
-    &::after {
-        background: rgba($plyr-color-gray-900, 0.8);
-        border-radius: 2px;
-        bottom: $plyr-control-spacing;
-        color: #fff;
-        content: attr(data-badge-text);
-        font-size: 11px;
-        padding: 2px 6px;
-        pointer-events: none;
-        position: absolute;
-        right: $plyr-control-spacing;
-        z-index: 3;
-    }
+  // The countdown label
+  &::after {
+    background: $plyr-color-gray-900;
+    border-radius: 2px;
+    bottom: $plyr-control-spacing;
+    color: #fff;
+    content: attr(data-badge-text);
+    font-size: 11px;
+    padding: 2px 6px;
+    pointer-events: none;
+    position: absolute;
+    right: $plyr-control-spacing;
+    z-index: 3;
+  }
 
-    &::after:empty {
-        display: none;
-    }
+  &::after:empty {
+    display: none;
+  }
 }
 
 // Advertisement cue's for the progress bar
 .plyr__cues {
-    background: currentColor;
-    display: block;
-    height: $plyr-range-track-height;
-    left: 0;
-    margin: -($plyr-range-track-height / 2) 0 0;
-    opacity: 0.8;
-    position: absolute;
-    top: 50%;
-    width: 3px;
-    z-index: 3; // Between progress and thumb
+  background: currentColor;
+  display: block;
+  height: $plyr-range-track-height;
+  left: 0;
+  margin: -($plyr-range-track-height / 2) 0 0;
+  opacity: 0.8;
+  position: absolute;
+  top: 50%;
+  width: 3px;
+  z-index: 3; // Between progress and thumb
 }
diff --git a/src/sass/plugins/preview-thumbnails.scss b/src/sass/plugins/preview-thumbnails.scss
deleted file mode 100644
index d20c9d18..00000000
--- a/src/sass/plugins/preview-thumbnails.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-// --------------------------------------------------------------
-// Preview Thumbnails
-// --------------------------------------------------------------
-
-$plyr-preview-padding: $plyr-tooltip-padding !default;
-$plyr-preview-background: $plyr-tooltip-background !default;
-$plyr-preview-radius: $plyr-tooltip-radius !default;
-$plyr-preview-shadow: $plyr-tooltip-shadow !default;
-$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
-$plyr-preview-image-background: $plyr-color-gray-200 !default;
-$plyr-preview-time-font-size: $plyr-font-size-time !default;
-$plyr-preview-time-padding: 3px 6px !default;
-$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
-$plyr-preview-time-color: #fff;
-$plyr-preview-time-bottom-offset: 6px;
-
-.plyr__preview-thumb {
-    background-color: $plyr-preview-background;
-    border-radius: 3px;
-    bottom: 100%;
-    box-shadow: $plyr-preview-shadow;
-    margin-bottom: $plyr-preview-padding * 2;
-    opacity: 0;
-    padding: $plyr-preview-radius;
-    pointer-events: none;
-    position: absolute;
-    transform: translate(0, 10px) scale(0.8);
-    transform-origin: 50% 100%;
-    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
-    z-index: 2;
-
-    &--is-shown {
-        opacity: 1;
-        transform: translate(0, 0) scale(1);
-    }
-
-    // The background triangle
-    &::before {
-        border-left: $plyr-preview-arrow-size solid transparent;
-        border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
-        bottom: -$plyr-preview-arrow-size;
-        content: '';
-        height: 0;
-        left: 50%;
-        position: absolute;
-        transform: translateX(-50%);
-        width: 0;
-        z-index: 2;
-    }
-
-    &__image-container {
-        background: $plyr-preview-image-background;
-        border-radius: ($plyr-preview-radius - 1px);
-        overflow: hidden;
-        position: relative;
-        z-index: 0;
-
-        img {
-            height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
-            left: 0;
-            max-height: none;
-            max-width: none;
-            position: absolute;
-            top: 0;
-            width: 100%;
-        }
-    }
-
-    // Seek time text
-    &__time-container {
-        bottom: $plyr-preview-time-bottom-offset;
-        left: 0;
-        position: absolute;
-        right: 0;
-        white-space: nowrap;
-        z-index: 3;
-
-        span {
-            background-color: $plyr-preview-time-background;
-            border-radius: ($plyr-preview-radius - 1px);
-            color: $plyr-preview-time-color;
-            font-size: $plyr-preview-time-font-size;
-            padding: $plyr-preview-time-padding;
-        }
-    }
-}
-
-.plyr__preview-scrubbing {
-    bottom: 0;
-    filter: blur(1px);
-    height: 100%;
-    left: 0;
-    margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: opacity 0.3s ease;
-    width: 100%;
-    z-index: 1;
-
-    &--is-shown {
-        opacity: 1;
-    }
-
-    img {
-        height: 100%;
-        left: 0;
-        max-height: none;
-        max-width: none;
-        object-fit: contain;
-        position: absolute;
-        top: 0;
-        width: 100%;
-    }
-}
diff --git a/src/sass/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss
new file mode 100644
index 00000000..6a0382d0
--- /dev/null
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@@ -0,0 +1,108 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+@import './settings.scss';
+
+.plyr__preview-thumb {
+  background-color: $plyr-preview-background;
+  border-radius: 3px;
+  bottom: 100%;
+  box-shadow: $plyr-preview-shadow;
+  margin-bottom: calc(#{$plyr-preview-padding} * 2);
+  opacity: 0;
+  padding: $plyr-preview-radius;
+  pointer-events: none;
+  position: absolute;
+  transform: translate(0, 10px) scale(0.8);
+  transform-origin: 50% 100%;
+  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+  z-index: 2;
+
+  &--is-shown {
+    opacity: 1;
+    transform: translate(0, 0) scale(1);
+  }
+
+  // The background triangle
+  &::before {
+    border-left: $plyr-preview-arrow-size solid transparent;
+    border-right: $plyr-preview-arrow-size solid transparent;
+    border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
+    bottom: calc(#{$plyr-preview-arrow-size} * -1);
+    content: '';
+    height: 0;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 0;
+    z-index: 2;
+  }
+
+  &__image-container {
+    background: $plyr-preview-image-background;
+    border-radius: calc(#{$plyr-preview-radius} - 1px);
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+
+    img {
+      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
+      left: 0;
+      max-height: none;
+      max-width: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  // Seek time text
+  &__time-container {
+    bottom: $plyr-preview-time-bottom-offset;
+    left: 0;
+    position: absolute;
+    right: 0;
+    white-space: nowrap;
+    z-index: 3;
+
+    span {
+      background-color: $plyr-preview-time-background;
+      border-radius: ($plyr-preview-radius - 1px);
+      color: $plyr-preview-time-color;
+      font-size: $plyr-preview-time-font-size;
+      padding: $plyr-preview-time-padding;
+    }
+  }
+}
+
+.plyr__preview-scrubbing {
+  bottom: 0;
+  filter: blur(1px);
+  height: 100%;
+  left: 0;
+  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: opacity 0.3s ease;
+  width: 100%;
+  z-index: 1;
+
+  &--is-shown {
+    opacity: 1;
+  }
+
+  img {
+    height: 100%;
+    left: 0;
+    max-height: none;
+    max-width: none;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
diff --git a/src/sass/plugins/preview-thumbnails/settings.scss b/src/sass/plugins/preview-thumbnails/settings.scss
new file mode 100644
index 00000000..155d6019
--- /dev/null
+++ b/src/sass/plugins/preview-thumbnails/settings.scss
@@ -0,0 +1,15 @@
+// --------------------------------------------------------------
+// Preview Thumbnails
+// --------------------------------------------------------------
+
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-background: $plyr-tooltip-background !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-background: $plyr-color-gray-200 !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 3672b689..3a8ca093 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -46,7 +46,7 @@ $css-vars-use-native: true;
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/preview-thumbnails';
+@import 'plugins/preview-thumbnails/index';
 
 @import 'utils/animation';
 @import 'utils/hidden';
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 7915c048..0148f570 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,6 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-background: $plyr-color-gray-700 !default;
-$plyr-badge-color: #fff !default;
+$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
+$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
+$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
diff --git a/src/sass/settings/breakpoints.scss b/src/sass/settings/breakpoints.scss
index 77a5b93a..daa58f68 100644
--- a/src/sass/settings/breakpoints.scss
+++ b/src/sass/settings/breakpoints.scss
@@ -1,12 +1,9 @@
 // ==========================================================================
 // Breakpoints
+// NOTE: we can't use CSS variables for breakpoints unfortunately
+// https://www.w3.org/TR/css-variables-1/#using-variables
 // ==========================================================================
 
 $plyr-bp-sm: 480px !default;
 $plyr-bp-md: 768px !default;
 $plyr-bp-lg: 1024px !default;
-
-// Max-width media queries
-$plyr-bp-xs-max: ($plyr-bp-sm - 1);
-$plyr-bp-sm-max: ($plyr-bp-md - 1);
-$plyr-bp-md-max: ($plyr-bp-lg - 1);
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 50f577dc..85735faf 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -2,10 +2,10 @@
 // Captions
 // ==========================================================================
 
-$plyr-captions-background: rgba(#000, 0.8) !default;
-$plyr-captions-text-color: #fff !default;
+$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
+$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
 
-$plyr-font-size-captions-base: $plyr-font-size-base !default;
-$plyr-font-size-captions-small: $plyr-font-size-small !default;
-$plyr-font-size-captions-medium: $plyr-font-size-large !default;
-$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
+$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
+$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
+$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
+$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index 6c9b0a3f..f1364905 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,32 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: hsl(198, 100%, 50%) !default;
+$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
 
 // Grayscale
-$plyr-color-gray-900: hsl(210, 15%, 16%);
-$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%);
-$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%);
-$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%);
-$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%);
-$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%);
-$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%);
-$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%);
-$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%);
-$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%);
-
-@include css-vars(
-    (
-        --plyr-color-main: $plyr-color-main,
-        --plyr-color-gray-900: $plyr-color-gray-900,
-        --plyr-color-gray-800: $plyr-color-gray-800,
-        --plyr-color-gray-700: $plyr-color-gray-700,
-        --plyr-color-gray-600: $plyr-color-gray-600,
-        --plyr-color-gray-500: $plyr-color-gray-500,
-        --plyr-color-gray-400: $plyr-color-gray-400,
-        --plyr-color-gray-300: $plyr-color-gray-300,
-        --plyr-color-gray-200: $plyr-color-gray-200,
-        --plyr-color-gray-100: $plyr-color-gray-100,
-        --plyr-color-gray-50: $plyr-color-gray-50
-    )
-);
+$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
+$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
+$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
+$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
+$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
+$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
+$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
+$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
+$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
+$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index a4009758..64882f4e 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -2,17 +2,31 @@
 // Controls
 // ==========================================================================
 
-$plyr-control-icon-size: 18px !default;
-$plyr-control-spacing: 10px !default;
-$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
-$plyr-control-radius: 3px !default;
+$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
+$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
+$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 
-$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default;
-$plyr-video-control-color: #fff !default;
-$plyr-video-control-color-hover: #fff !default;
-$plyr-video-control-background-hover: $plyr-color-main !default;
+$plyr-control-toggle-checked-background: var(
+  --plyr-control-toggle-checked-background,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
 
-$plyr-audio-controls-background: #fff !default;
-$plyr-audio-control-color: $plyr-color-gray-700 !default;
-$plyr-audio-control-color-hover: #fff !default;
-$plyr-audio-control-background-hover: $plyr-color-main !default;
+$plyr-video-controls-background: var(
+  --plyr-video-controls-background,
+  linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
+) !default;
+$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
+$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
+$plyr-video-control-background-hover: var(
+  --plyr-video-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
+
+$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
+$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
+$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
+$plyr-audio-control-background-hover: var(
+  --plyr-audio-control-background-hover,
+  var(--plyr-color-main, $plyr-color-main)
+) !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 80063850..3320ae7f 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -2,6 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: $plyr-color-main !default;
-
-@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color));
+$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 62c3dd04..bdd1eb36 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -2,9 +2,14 @@
 // Menus
 // ==========================================================================
 
-$plyr-menu-background: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-gray-700 !default;
-$plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default;
-$plyr-menu-border-shadow-color: #fff !default;
-$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
+
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
+$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
+
+// Border seperators
+$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index a0e7f755..7e76da19 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -3,9 +3,12 @@
 // ==========================================================================
 
 // Loading
-$plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
+$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
+$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
 
 // Buffered
-$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;
+$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
+$plyr-audio-progress-buffered-background: var(
+  --plyr-audio-progress-buffered-background,
+  rgba($plyr-color-gray-200, 0.66)
+) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 17740623..928a46b3 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -2,23 +2,40 @@
 // Sliders
 // ==========================================================================
 
-// Active state
-$plyr-range-thumb-active-shadow-width: 3px !default;
-
 // Thumb
-$plyr-range-thumb-height: 13px !default;
-$plyr-range-thumb-background: #fff !default;
-$plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default;
+$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
+$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
+$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
+$plyr-range-thumb-shadow: var(
+  --plyr-range-thumb-shadow,
+  0 1px 1px rgba($plyr-color-gray-900, 0.15),
+  0 0 0 1px rgba($plyr-color-gray-900, 0.2)
+) !default;
+
+// Active state
+$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
+$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
-$plyr-range-track-height: 5px !default;
-$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
+$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
+$plyr-range-max-height: var(
+  --plyr-range-max-height,
+  calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
+) !default;
 
 // Fill
-$plyr-range-fill-background: var(--plyr-color-main);
+$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
 
 // Type specific
-$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default;
-$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default;
-$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
+$plyr-video-range-track-background: var(
+  --plyr-video-range-track-background,
+  $plyr-video-progress-buffered-background
+) !default;
+$plyr-audio-range-track-background: var(
+  --plyr-audio-range-track-background,
+  $plyr-audio-progress-buffered-background
+) !default;
+$plyr-audio-range-thumb-shadow-color: var(
+  --plyr-audio-range-thumb-shadow-color,
+  rgba($plyr-color-gray-900, 0.1)
+) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 0ea5c582..76a9855a 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -2,9 +2,9 @@
 // Tooltips
 // ==========================================================================
 
-$plyr-tooltip-background: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-gray-700 !default;
-$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
-$plyr-tooltip-arrow-size: 4px !default;
-$plyr-tooltip-radius: 3px !default;
-$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
+$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
+$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
+$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
+$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index e9ee2671..f424ecef 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -2,35 +2,20 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
-$plyr-font-size-base: 16px !default;
-$plyr-font-size-small: 14px !default;
-$plyr-font-size-large: 18px !default;
-$plyr-font-size-xlarge: 21px !default;
+$plyr-font-family: var(--plyr-font-family) !default;
+$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
+$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
+$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
+$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
-$plyr-font-size-time: var(--plyr-font-size-small) !default;
-$plyr-font-size-badge: 9px !default;
-$plyr-font-size-menu: var(--plyr-font-size-small) !default;
+$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
+$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
 
-$plyr-font-weight-regular: 500 !default;
-$plyr-font-weight-bold: 600 !default;
+$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
+$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
-$plyr-line-height: 1.7 !default;
+$plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
 $plyr-font-smoothing: false !default;
-
-@include css-vars(
-    (
-        --plyr-font-family: $plyr-font-family,
-        --plyr-font-size-base: $plyr-font-size-base,
-        --plyr-font-size-small: $plyr-font-size-small,
-        --plyr-font-size-large: $plyr-font-size-large,
-        --plyr-font-size-xlarge: $plyr-font-size-xlarge,
-        --plyr-font-size-time: $plyr-font-size-time,
-        --plyr-font-size-badge: $plyr-font-size-badge,
-        --plyr-font-size-menu: $plyr-font-size-menu,
-        --plyr-font-weight-regular: $plyr-font-weight-regular,
-        --plyr-font-weight-bold: $plyr-font-weight-bold,
-        --plyr-line-height: $plyr-line-height
-    )
-);
diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss
index 73dffd29..4143d28e 100644
--- a/src/sass/states/fullscreen.scss
+++ b/src/sass/states/fullscreen.scss
@@ -3,32 +3,32 @@
 // --------------------------------------------------------------
 
 .plyr:fullscreen {
-    @include plyr-fullscreen-active();
+  @include plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-webkit-full-screen {
-    @include plyr-fullscreen-active();
+  @include plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-moz-full-screen {
-    @include plyr-fullscreen-active();
+  @include plyr-fullscreen-active();
 }
 
 /* stylelint-disable-next-line */
 .plyr:-ms-fullscreen {
-    @include plyr-fullscreen-active();
+  @include plyr-fullscreen-active();
 }
 
 // Fallback for unsupported browsers
 .plyr--fullscreen-fallback {
-    @include plyr-fullscreen-active();
-    bottom: 0;
-    display: block;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 10000000;
+  @include plyr-fullscreen-active();
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 10000000;
 }
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
index d39f6f96..154d1ce9 100644
--- a/src/sass/types/audio.scss
+++ b/src/sass/types/audio.scss
@@ -4,61 +4,58 @@
 
 // Container
 .plyr--audio {
-    display: block;
+  display: block;
 }
 
 // Controls container
 .plyr--audio .plyr__controls {
-    background: var(--plyr-audio-controls-background, $plyr-audio-controls-background);
-    border-radius: inherit;
-    color: var(--plyr-audio-control-color, $plyr-audio-control-color);
-    padding: $plyr-control-spacing;
+  background: $plyr-audio-controls-background;
+  border-radius: inherit;
+  color: $plyr-audio-control-color;
+  padding: $plyr-control-spacing;
 }
 
 // Control elements
 .plyr--audio .plyr__control {
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: var(
-            --plyr-audio-control-background-hover,
-            var(--plyr-color-main, $plyr-audio-control-background-hover)
-        );
-        color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover);
-    }
+  &.plyr__tab-focus,
+  &:hover,
+  &[aria-expanded='true'] {
+    background: $plyr-audio-control-background-hover;
+    color: $plyr-audio-control-color-hover;
+  }
 }
 
 // Range inputs
 .plyr--full-ui.plyr--audio input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
-    }
-
-    &::-moz-range-track {
-        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+  &::-webkit-slider-runnable-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  &::-moz-range-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  &::-ms-track {
+    background-color: $plyr-audio-range-track-background;
+  }
+
+  // Pressed styles
+  &:active {
+    &::-webkit-slider-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
     }
 
-    &::-ms-track {
-        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    &::-moz-range-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
     }
 
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
-        }
+    &::-ms-thumb {
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
     }
+  }
 }
 
 // Progress
 .plyr--audio .plyr__progress__buffer {
-    color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background);
+  color: $plyr-audio-progress-buffered-background;
 }
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index 6a17a51a..a259465f 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -4,20 +4,20 @@
 
 // Container
 .plyr--video {
-    background: #000;
-    overflow: hidden;
+  background: #000;
+  overflow: hidden;
 
-    &.plyr--menu-open {
-        overflow: visible;
-    }
+  &.plyr--menu-open {
+    overflow: visible;
+  }
 }
 
 .plyr__video-wrapper {
-    background: #000;
-    height: 100%;
-    margin: auto;
-    overflow: hidden;
-    width: 100%;
+  background: #000;
+  height: 100%;
+  margin: auto;
+  overflow: hidden;
+  width: 100%;
 }
 
 // Default to 16:9 ratio but this is set by JavaScript based on config
@@ -25,142 +25,138 @@ $embed-padding: ((100 / 16) * 9);
 
 .plyr__video-embed,
 .plyr__video-wrapper--fixed-ratio {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
+  height: 0;
+  padding-bottom: to-percentage($embed-padding);
 }
 
 .plyr__video-embed iframe,
 .plyr__video-wrapper--fixed-ratio video {
-    border: 0;
-    left: 0;
-    position: absolute;
-    top: 0;
+  border: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
 }
 
 // If the full custom UI is supported
 .plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
+  $height: 240;
+  $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+  // Only used for Vimeo
+  > .plyr__video-embed__container {
+    padding-bottom: to-percentage($height);
+    position: relative;
+    transform: translateY(-$offset);
+  }
 }
 
 // Controls container
 .plyr--video .plyr__controls {
-    background: $plyr-video-controls-background;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-    bottom: 0;
-    color: var(--plyr-video-control-color, $plyr-video-control-color);
-    left: 0;
-    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
-    position: absolute;
-    right: 0;
-    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 3;
-
-    @media (min-width: $plyr-bp-sm) {
-        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
-    }
+  background: $plyr-video-controls-background;
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  bottom: 0;
+  color: $plyr-video-control-color;
+  left: 0;
+  padding: calc(#{$plyr-control-spacing} / 2);
+  padding-top: calc(#{$plyr-control-spacing} * 2);
+  position: absolute;
+  right: 0;
+  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+  z-index: 3;
+
+  @media (min-width: $plyr-bp-sm) {
+    padding: $plyr-control-spacing;
+    padding-top: calc(#{$plyr-control-spacing} * 3.5);
+  }
 }
 
 // Hide controls
 .plyr--video.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-    transform: translateY(100%);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(100%);
 }
 
 // Control elements
 .plyr--video .plyr__control {
-    // Hover and tab focus
-    &.plyr__tab-focus,
-    &:hover,
-    &[aria-expanded='true'] {
-        background: var(
-            --plyr-video-control-background-hover,
-            var(--plyr-color-main, $plyr-video-control-background-hover)
-        );
-        color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover);
-    }
+  // Hover and tab focus
+  &.plyr__tab-focus,
+  &:hover,
+  &[aria-expanded='true'] {
+    background: $plyr-video-control-background-hover;
+    color: $plyr-video-control-color-hover;
+  }
 }
 
 // Large play button (video only)
 .plyr__control--overlaid {
-    background: var(
-        --plyr-video-control-background-hover,
-        var(--plyr-color-main, $plyr-video-control-background-hover)
-    );
-    border: 0;
-    border-radius: 100%;
-    color: $plyr-video-control-color;
-    display: none;
-    left: 50%;
-    opacity: 0.9;
-    padding: ceil($plyr-control-spacing * 1.5);
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition: 0.3s;
-    z-index: 2;
-
-    // Offset icon to make the play button look right
-    svg {
-        left: 2px;
-        position: relative;
-    }
-
-    &:hover,
-    &:focus {
-        opacity: 1;
-    }
+  background: $plyr-video-control-background-hover;
+  border: 0;
+  border-radius: 100%;
+  color: $plyr-video-control-color;
+  display: none;
+  left: 50%;
+  opacity: 0.9;
+  padding: calc(#{$plyr-control-spacing} * 1.5);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: 0.3s;
+  z-index: 2;
+
+  // Offset icon to make the play button look right
+  svg {
+    left: 2px;
+    position: relative;
+  }
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
 }
 
 .plyr--playing .plyr__control--overlaid {
-    opacity: 0;
-    visibility: hidden;
+  opacity: 0;
+  visibility: hidden;
 }
 
 .plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: block;
+  display: block;
 }
 
 // Video range inputs
 .plyr--full-ui.plyr--video input[type='range'] {
-    &::-webkit-slider-runnable-track {
-        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
-    }
-
-    &::-moz-range-track {
-        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+  &::-webkit-slider-runnable-track {
+    background-color: $plyr-video-range-track-background;
+  }
+
+  &::-moz-range-track {
+    background-color: $plyr-video-range-track-background;
+  }
+
+  &::-ms-track {
+    background-color: $plyr-video-range-track-background;
+  }
+
+  // Pressed styles
+  &:active {
+    &::-webkit-slider-thumb {
+      @include plyr-range-thumb-active();
     }
 
-    &::-ms-track {
-        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    &::-moz-range-thumb {
+      @include plyr-range-thumb-active();
     }
 
-    // Pressed styles
-    &:active {
-        &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-moz-range-thumb {
-            @include plyr-range-thumb-active();
-        }
-
-        &::-ms-thumb {
-            @include plyr-range-thumb-active();
-        }
+    &::-ms-thumb {
+      @include plyr-range-thumb-active();
     }
+  }
 }
 
 // Progress
 .plyr--video .plyr__progress__buffer {
-    color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background);
+  color: $plyr-video-progress-buffered-background;
 }
diff --git a/src/sass/utils/animation.scss b/src/sass/utils/animation.scss
index 4a5b6b90..e7b09e1c 100644
--- a/src/sass/utils/animation.scss
+++ b/src/sass/utils/animation.scss
@@ -3,5 +3,5 @@
 // --------------------------------------------------------------
 
 .plyr--no-transition {
-    transition: none !important;
+  transition: none !important;
 }
diff --git a/src/sass/utils/hidden.scss b/src/sass/utils/hidden.scss
index a42c3be8..bdd96173 100644
--- a/src/sass/utils/hidden.scss
+++ b/src/sass/utils/hidden.scss
@@ -4,25 +4,25 @@
 
 // Screen reader only elements
 .plyr__sr-only {
-    clip: rect(1px, 1px, 1px, 1px);
-    overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
 
-    // !important is not always needed
-    @if $plyr-sr-only-important {
-        border: 0 !important;
-        height: 1px !important;
-        padding: 0 !important;
-        position: absolute !important;
-        width: 1px !important;
-    } @else {
-        border: 0;
-        height: 1px;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-    }
+  // !important is not always needed
+  @if $plyr-sr-only-important {
+    border: 0 !important;
+    height: 1px !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+  } @else {
+    border: 0;
+    height: 1px;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
 }
 
 .plyr [hidden] {
-    display: none !important;
+  display: none !important;
 }
-- 
cgit v1.2.3


From 9c7e429b48320f6b021baa2ed23e35a6bd9ceae5 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 19 Apr 2020 19:51:06 +1000
Subject: Vimeo ratio fixes

---
 src/js/config/defaults.js |  8 ++++----
 src/js/listeners.js       | 25 +++++++++++++----------
 src/js/plugins/vimeo.js   | 52 ++++++++++++++++++++++++++---------------------
 src/js/utils/style.js     |  5 +++--
 src/sass/lib/mixins.scss  |  2 --
 src/sass/types/video.scss |  1 +
 6 files changed, 51 insertions(+), 42 deletions(-)

(limited to 'src')

diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js
index bd4052be..087a5cb7 100644
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@@ -419,16 +419,16 @@ const defaults = {
     title: false,
     speed: true,
     transparent: false,
-    // These settings require a pro or premium account to work
-    sidedock: false,
-    controls: false,
+    // Whether the owner of the video has a Pro or Business account
+    // (which allows us to properly hide controls without CSS hacks, etc)
+    premium: false,
     // Custom settings from Plyr
     referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
   },
 
   // YouTube plugin
   youtube: {
-    noCookie: false, // Whether to use an alternative version of YouTube without cookies
+    noCookie: true, // Whether to use an alternative version of YouTube without cookies
     rel: 0, // No related vids
     showinfo: 0, // Hide info
     iv_load_policy: 3, // Hide annotations
diff --git a/src/js/listeners.js b/src/js/listeners.js
index e4c3c132..dd2c4834 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -229,16 +229,18 @@ class Listeners {
 
     // Delay the adding of classname until the focus has changed
     // This event fires before the focusin event
-    this.focusTimer = setTimeout(() => {
-      const focused = document.activeElement;
+    if (event.type !== 'focusout') {
+      this.focusTimer = setTimeout(() => {
+        const focused = document.activeElement;
 
-      // Ignore if current focus element isn't inside the player
-      if (!elements.container.contains(focused)) {
-        return;
-      }
+        // Ignore if current focus element isn't inside the player
+        if (!elements.container.contains(focused)) {
+          return;
+        }
 
-      toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
-    }, 10);
+        toggleClass(document.activeElement, player.config.classNames.tabFocus, true);
+      }, 10);
+    }
   }
 
   // Global window & document listeners
@@ -257,7 +259,7 @@ class Listeners {
     once.call(player, document.body, 'touchstart', this.firstTouch);
 
     // Tab focus detection
-    toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true);
+    toggleListener.call(player, document.body, 'keydown focus blur focusout', this.setTabFocus, toggle, false, true);
   }
 
   // Container listeners
@@ -304,7 +306,7 @@ class Listeners {
 
     // Set a gutter for Vimeo
     const setGutter = (ratio, padding, toggle) => {
-      if (!player.isVimeo) {
+      if (!player.isVimeo || player.config.vimeo.premium) {
         return;
       }
 
@@ -331,6 +333,7 @@ class Listeners {
 
     const resized = () => {
       clearTimeout(timers.resized);
+
       timers.resized = setTimeout(setPlayerSize, 50);
     };
 
@@ -354,7 +357,7 @@ class Listeners {
       // Set Vimeo gutter
       setGutter(ratio, padding, isEnter);
 
-      // If not using native fullscreen, we need to check for resizes of viewport
+      // If not using the native browser fullscreen API, we need to check for resizes of viewport
       if (!usingNative) {
         if (isEnter) {
           on.call(player, window, 'resize', resized);
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 0937d62d..392512ca 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -10,7 +10,6 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/load-script';
-import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
@@ -71,21 +70,25 @@ const vimeo = {
   ready() {
     const player = this;
     const config = player.config.vimeo;
+    const { premium, referrerPolicy, ...frameParams } = config;
+
+    // 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 Vimeo params for the iframe
-    const params = buildUrlParams(
-      extend(
-        {},
-        {
-          loop: player.config.loop.active,
-          autoplay: player.autoplay,
-          muted: player.muted,
-          gesture: 'media',
-          playsinline: !this.config.fullscreen.iosNative,
-        },
-        config,
-      ),
-    );
+    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');
@@ -101,20 +104,23 @@ const vimeo = {
     const src = format(player.config.urls.vimeo.iframe, id, params);
     iframe.setAttribute('src', src);
     iframe.setAttribute('allowfullscreen', '');
-    iframe.setAttribute('allowtransparency', '');
-    iframe.setAttribute('allow', 'autoplay');
+    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
 
     // Set the referrer policy if required
-    if (!is.empty(config.referrerPolicy)) {
-      iframe.setAttribute('referrerPolicy', config.referrerPolicy);
+    if (!is.empty(referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
     }
 
-    // Get poster, if already set
-    const { poster } = player;
     // Inject the package
-    const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
-    wrapper.appendChild(iframe);
-    player.media = replaceElement(wrapper, player.media);
+    const { poster } = player;
+    if (premium) {
+      iframe.setAttribute('poster', poster);
+      player.media = replaceElement(iframe, player.media);
+    } else {
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, poster });
+      wrapper.appendChild(iframe);
+      player.media = replaceElement(wrapper, player.media);
+    }
 
     // Get poster image
     fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
diff --git a/src/js/utils/style.js b/src/js/utils/style.js
index 0a37e595..c2004fcb 100644
--- a/src/js/utils/style.js
+++ b/src/js/utils/style.js
@@ -64,9 +64,10 @@ export function setAspectRatio(input) {
   wrapper.style.paddingBottom = `${padding}%`;
 
   // For Vimeo we have an extra <div> to hide the standard controls and UI
-  if (this.isVimeo && this.supported.ui) {
-    const height = 240;
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
+    const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     const offset = (height - padding) / (height / 50);
+
     this.media.style.transform = `translateY(-${offset}%)`;
   } else if (this.isHTML5) {
     wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 1eaa1a6c..9186fec6 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -71,8 +71,6 @@
   &.plyr--vimeo .plyr__video-wrapper {
     height: 0;
     position: relative;
-    top: 50%;
-    transform: translateY(-50%);
   }
 
   // Display correct icon
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index a259465f..c18c1b45 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -17,6 +17,7 @@
   height: 100%;
   margin: auto;
   overflow: hidden;
+  position: relative;
   width: 100%;
 }
 
-- 
cgit v1.2.3


From 145f2ae24fc2177cd4b778ccdb9f7a6c46c3ba60 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 19 Apr 2020 20:06:58 +1000
Subject: Poster image fix (fixes #1763)

---
 src/js/media.js           | 14 ++++++--------
 src/js/plugins/vimeo.js   |  4 ++--
 src/js/plugins/youtube.js |  2 +-
 src/js/plyr.js            |  2 +-
 src/js/ui.js              |  7 +------
 5 files changed, 11 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/js/media.js b/src/js/media.js
index 936b4365..4584fea3 100644
--- a/src/js/media.js
+++ b/src/js/media.js
@@ -38,14 +38,12 @@ const media = {
       // Wrap the video in a container
       wrap(this.media, this.elements.wrapper);
 
-      // Faux poster container
-      if (this.isEmbed) {
-        this.elements.poster = createElement('div', {
-          class: this.config.classNames.poster,
-        });
-
-        this.elements.wrapper.appendChild(this.elements.poster);
-      }
+      // Poster image container
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster,
+      });
+
+      this.elements.wrapper.appendChild(this.elements.poster);
     }
 
     if (this.isHTML5) {
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 392512ca..d098fe96 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -114,10 +114,10 @@ const vimeo = {
     // Inject the package
     const { poster } = player;
     if (premium) {
-      iframe.setAttribute('poster', poster);
+      iframe.setAttribute('data-poster', poster);
       player.media = replaceElement(iframe, player.media);
     } else {
-      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, poster });
+      const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
       wrapper.appendChild(iframe);
       player.media = replaceElement(wrapper, player.media);
     }
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 4de46395..89a75d89 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -124,7 +124,7 @@ const youtube = {
     // Get poster, if already set
     const { poster } = player;
     // Replace media element
-    const container = createElement('div', { id, poster });
+    const container = createElement('div', { id, 'data-poster': poster });
     player.media = replaceElement(container, player.media);
 
     // Id to poster wrapper
diff --git a/src/js/plyr.js b/src/js/plyr.js
index c755e2be..9b18bc35 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -886,7 +886,7 @@ class Plyr {
       return null;
     }
 
-    return this.media.getAttribute('poster');
+    return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
   }
 
   /**
diff --git a/src/js/ui.js b/src/js/ui.js
index 99faa9b8..c7553c72 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -170,12 +170,7 @@ const ui = {
     }
 
     // Set property synchronously to respect the call order
-    this.media.setAttribute('poster', poster);
-
-    // HTML5 uses native poster attribute
-    if (this.isHTML5) {
-      return Promise.resolve(poster);
-    }
+    this.media.setAttribute('data-poster', poster);
 
     // Wait until ui is ready
     return (
-- 
cgit v1.2.3


From a9c4e77d1bcf1dedce9a3030017ddef2d3a924c8 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 23 Apr 2020 22:06:36 +1000
Subject: Migrate custom properties from media to parent

---
 src/js/plyr.js |  3 +++
 src/js/ui.js   | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+)

(limited to 'src')

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 9b18bc35..14050929 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -269,6 +269,9 @@ class Plyr {
       wrap(this.media, this.elements.container);
     }
 
+    // Migrate custom properties from media to container (so they work 😉)
+    ui.migrateStyles.call(this);
+
     // Add style hook
     ui.addStyleHook.call(this);
 
diff --git a/src/js/ui.js b/src/js/ui.js
index c7553c72..c9ad7d90 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -264,6 +264,26 @@ const ui = {
       );
     }
   },
+
+  // Migrate any custom properties from the media to the parent
+  migrateStyles() {
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values({ ...this.media.style })
+      // We're only fussed about Plyr specific properties
+      .filter(key => key.startsWith('--plyr'))
+      .forEach(key => {
+        // Set on the container
+        this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
+
+        // Clean up from media element
+        this.media.style.removeProperty(key);
+      });
+
+    // Remove attribute if empty
+    if (is.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
+  },
 };
 
 export default ui;
-- 
cgit v1.2.3


From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 24 Apr 2020 00:14:50 +1000
Subject: More work on custom properties and documentation

---
 src/sass/components/badges.scss                |  2 +-
 src/sass/components/captions.scss              | 30 +++++++++++++-------------
 src/sass/components/menus.scss                 | 18 ++++++++--------
 src/sass/components/sliders.scss               |  4 ++--
 src/sass/lib/mixins.scss                       |  7 ++----
 src/sass/plugins/preview-thumbnails/index.scss |  5 +++--
 src/sass/settings/badges.scss                  |  2 +-
 src/sass/settings/captions.scss                |  8 +++----
 src/sass/settings/cosmetics.scss               |  2 +-
 src/sass/settings/menus.scss                   | 14 ++++++------
 src/sass/settings/progress.scss                |  2 +-
 src/sass/settings/sliders.scss                 | 15 ++++++-------
 src/sass/settings/tooltips.scss                |  2 +-
 src/sass/settings/type.scss                    |  7 +++---
 src/sass/types/audio.scss                      |  6 +++---
 src/sass/types/video.scss                      |  6 +++---
 16 files changed, 63 insertions(+), 67 deletions(-)

(limited to 'src')

diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 83d045a6..3acb3cc4 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -5,7 +5,7 @@
 .plyr__badge {
   background: $plyr-badge-background;
   border-radius: $plyr-badge-border-radius;
-  color: $plyr-badge-color;
+  color: $plyr-badge-text-color;
   font-size: $plyr-font-size-badge;
   line-height: 1;
   padding: 3px 4px;
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index eb3c9389..2acab086 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -19,21 +19,6 @@
   transition: transform 0.4s ease-in-out;
   width: 100%;
 
-  .plyr__caption {
-    background: $plyr-captions-background;
-    border-radius: 2px;
-    box-decoration-break: clone;
-    color: $plyr-captions-text-color;
-    line-height: 185%;
-    padding: 0.2em 0.5em;
-    white-space: pre-wrap;
-
-    // Firefox adds a <div> when using getCueAsHTML()
-    div {
-      display: inline;
-    }
-  }
-
   span:empty {
     display: none;
   }
@@ -56,3 +41,18 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
   transform: translateY(calc(#{$plyr-control-spacing} * -4));
 }
+
+.plyr__caption {
+  background: $plyr-captions-background;
+  border-radius: 2px;
+  box-decoration-break: clone;
+  color: $plyr-captions-text-color;
+  line-height: 185%;
+  padding: 0.2em 0.5em;
+  white-space: pre-wrap;
+
+  // Firefox adds a <div> when using getCueAsHTML()
+  div {
+    display: inline;
+  }
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 49cec6f5..fccf303e 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -44,12 +44,12 @@
 
     // Arrow
     &::after {
-      border: 4px solid transparent;
+      border: $plyr-menu-arrow-size solid transparent;
       border-top-color: $plyr-menu-background;
       content: '';
       height: 0;
       position: absolute;
-      right: 15px;
+      right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
       top: 100%;
       width: 0;
     }
@@ -87,7 +87,7 @@
       }
 
       &::after {
-        border: 4px solid transparent;
+        border: $plyr-menu-item-arrow-size solid transparent;
         content: '';
         position: absolute;
         top: 50%;
@@ -98,8 +98,8 @@
         padding-right: calc(#{$plyr-control-padding} * 4);
 
         &::after {
-          border-left-color: $plyr-menu-arrow-color;
-          right: 5px;
+          border-left-color: $plyr-menu-item-arrow-color;
+          right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &.plyr__tab-focus::after,
@@ -117,13 +117,13 @@
         width: calc(100% - (#{$plyr-control-padding} * 2));
 
         &::after {
-          border-right-color: $plyr-menu-arrow-color;
-          left: $plyr-control-padding;
+          border-right-color: $plyr-menu-item-arrow-color;
+          left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
         }
 
         &::before {
-          background: $plyr-menu-border-color;
-          box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
+          background: $plyr-menu-back-border-color;
+          box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
           content: '';
           height: 1px;
           left: 0;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -8,10 +8,10 @@
   background: transparent;
   border: 0;
   border-radius: calc(#{$plyr-range-thumb-height} * 2);
-  // color is used in JS to populate lower fill for WebKit
+  // `color` property is used in JS to populate lower fill for WebKit
   color: $plyr-range-fill-background;
   display: block;
-  height: $plyr-range-max-height;
+  height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
   margin: 0;
   padding: 0;
   transition: box-shadow 0.3s ease;
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 9186fec6..cbb8cc78 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -4,7 +4,7 @@
 
 // Nicer focus styles
 // ---------------------------------------
-@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
+@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
   outline-color: $color;
   outline-offset: 2px;
   outline-style: dotted;
@@ -17,9 +17,6 @@
   @if $mode {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-  } @else {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -45,7 +42,7 @@
   width: $plyr-range-thumb-height;
 }
 
-@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
+@mixin plyr-range-thumb-active($color) {
   box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
 }
 
diff --git a/src/sass/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss
index 6a0382d0..7a9eb991 100644
--- a/src/sass/plugins/preview-thumbnails/index.scss
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@@ -2,7 +2,7 @@
 // Preview Thumbnails
 // --------------------------------------------------------------
 
-@import './settings.scss';
+@import './settings';
 
 .plyr__preview-thumb {
   background-color: $plyr-preview-background;
@@ -68,7 +68,7 @@
 
     span {
       background-color: $plyr-preview-time-background;
-      border-radius: ($plyr-preview-radius - 1px);
+      border-radius: calc(#{$plyr-preview-radius} - 1px);
       color: $plyr-preview-time-color;
       font-size: $plyr-preview-time-font-size;
       padding: $plyr-preview-time-padding;
@@ -84,6 +84,7 @@
   margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
   opacity: 0;
   overflow: hidden;
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 0148f570..e56da1f8 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -3,5 +3,5 @@
 // ==========================================================================
 
 $plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
-$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
+$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
 $plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 85735faf..23d944cb 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -5,7 +5,7 @@
 $plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
 $plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
 
-$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
-$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
-$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
-$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;
+$plyr-font-size-captions-base: $plyr-font-size-base !default;
+$plyr-font-size-captions-small: $plyr-font-size-small !default;
+$plyr-font-size-captions-medium: $plyr-font-size-large !default;
+$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 3320ae7f..4fc10de5 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -2,4 +2,4 @@
 // Cosmetic
 // ==========================================================================
 
-$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;
+$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index bdd1eb36..283a0c59 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -3,13 +3,13 @@
 // ==========================================================================
 
 $plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
+$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
 $plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
+$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
+$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
 
-$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
+$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
 
-$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
-$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
-
-// Border seperators
-$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
-$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;
+$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
+$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 7e76da19..4e5105f0 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba(
 $plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
 $plyr-audio-progress-buffered-background: var(
   --plyr-audio-progress-buffered-background,
-  rgba($plyr-color-gray-200, 0.66)
+  rgba($plyr-color-gray-200, 0.6)
 ) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 928a46b3..444b43da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -5,7 +5,6 @@
 // Thumb
 $plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
 $plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
-$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
 $plyr-range-thumb-shadow: var(
   --plyr-range-thumb-shadow,
   0 1px 1px rgba($plyr-color-gray-900, 0.15),
@@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
 ) !default;
 
 // Active state
-$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
 $plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
 
 // Track
 $plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
-$plyr-range-max-height: var(
-  --plyr-range-max-height,
-  calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
-) !default;
 
 // Fill
 $plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
@@ -31,11 +25,16 @@ $plyr-video-range-track-background: var(
   --plyr-video-range-track-background,
   $plyr-video-progress-buffered-background
 ) !default;
+$plyr-video-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
+  rgba(#fff, 0.5)
+) !default;
+
 $plyr-audio-range-track-background: var(
   --plyr-audio-range-track-background,
   $plyr-audio-progress-buffered-background
 ) !default;
-$plyr-audio-range-thumb-shadow-color: var(
-  --plyr-audio-range-thumb-shadow-color,
+$plyr-audio-range-thumb-active-shadow-color: var(
+  --plyr-audio-range-thumb-active-shadow-color,
   rgba($plyr-color-gray-900, 0.1)
 ) !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 76a9855a..629e9358 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -7,4 +7,4 @@ $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
 $plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
 $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
 $plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
-$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
+$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index f424ecef..17db54f2 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -2,20 +2,19 @@
 // Typography
 // ==========================================================================
 
-$plyr-font-family: var(--plyr-font-family) !default;
+$plyr-font-family: var(--plyr-font-family, inherit) !default;
 $plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
 $plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
 $plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
 $plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
 
 $plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
-$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 $plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
+$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
 
 $plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
 $plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
 
 $plyr-line-height: var(--plyr-line-height, 1.7) !default;
 
-$plyr-font-smoothing: false !default;
+$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
index 154d1ce9..a44244c9 100644
--- a/src/sass/types/audio.scss
+++ b/src/sass/types/audio.scss
@@ -42,15 +42,15 @@
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+      @include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
     }
   }
 }
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index c18c1b45..0cfaeacb 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -144,15 +144,15 @@ $embed-padding: ((100 / 16) * 9);
   // Pressed styles
   &:active {
     &::-webkit-slider-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-moz-range-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
 
     &::-ms-thumb {
-      @include plyr-range-thumb-active();
+      @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
     }
   }
 }
-- 
cgit v1.2.3