Styling tweaks for demo

demo/dist/demo.js

@@ -657,6 +657,8 @@ typeof navigator === "object" && (function () {
 	  iteratorWithReturn[ITERATOR$2] = function () {
 	    return this;
 	  };
+	  // eslint-disable-next-line no-throw-literal
+	  Array.from(iteratorWithReturn, function () { throw 2; });
 	} catch (error) { /* empty */ }
 
 	var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
@@ -677,6 +679,7 @@ typeof navigator === "object" && (function () {
 	};
 
 	var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
+	  Array.from(iterable);
 	});
 
 	// `Array.from` method
@@ -910,7 +913,7 @@ typeof navigator === "object" && (function () {
 	var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
 	  var TO_STRING_TAG = NAME + ' Iterator';
 	  IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
-	  setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
+	  setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
 	  iterators[TO_STRING_TAG] = returnThis$1;
 	  return IteratorConstructor;
 	};
@@ -985,7 +988,7 @@ typeof navigator === "object" && (function () {
 	        }
 	      }
 	      // Set @@toStringTag to native iterators
-	      setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
+	      setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
 	    }
 	  }
 
@@ -2262,7 +2265,8 @@ typeof navigator === "object" && (function () {
 	  var url = new URL('b?e=1', 'http://a');
 	  var searchParams = url.searchParams;
 	  url.pathname = 'c%20d';
-	  return !searchParams.sort
+	  return (isPure && !url.toJSON)
+	    || !searchParams.sort
 	    || url.href !== 'http://a/c%20d?e=1'
 	    || searchParams.get('e') !== '1'
 	    || String(new URLSearchParams('?a=1')) !== 'a=1'
@@ -4974,7 +4978,7 @@ typeof navigator === "object" && (function () {
 	  Promise: PromiseConstructor
 	});
 
-	setToStringTag(PromiseConstructor, PROMISE, false, true);
+	setToStringTag(PromiseConstructor, PROMISE, false);
 	setSpecies(PROMISE);
 
 	PromiseWrapper = path[PROMISE];
@@ -5655,7 +5659,7 @@ typeof navigator === "object" && (function () {
 	});
 
 	var nativeIsFrozen = Object.isFrozen;
-	var FAILS_ON_PRIMITIVES$1 = fails(function () { });
+	var FAILS_ON_PRIMITIVES$1 = fails(function () { nativeIsFrozen(1); });
 
 	// `Object.isFrozen` method
 	// https://tc39.github.io/ecma262/#sec-object.isfrozen
@@ -10405,6 +10409,7 @@ typeof navigator === "object" && (function () {
 
 	  try {
 	    for (var s, a = e[Symbol.iterator](); !(r = (s = a.next()).done) && (n.push(s.value), !t || n.length !== t); r = !0) {
+	      ;
 	    }
 	  } catch (e) {
 	    o = !0, i = e;
@@ -11766,6 +11771,8 @@ typeof navigator === "object" && (function () {
 	  iteratorWithReturn$1[ITERATOR$b] = function () {
 	    return this;
 	  };
+	  // eslint-disable-next-line no-throw-literal
+	  Array.from(iteratorWithReturn$1, function () { throw 2; });
 	} catch (error) { /* empty */ }
 
 	var checkCorrectnessOfIteration$1 = function (exec, SKIP_CLOSING) {
@@ -11786,6 +11793,7 @@ typeof navigator === "object" && (function () {
 	};
 
 	var INCORRECT_ITERATION$2 = !checkCorrectnessOfIteration$1(function (iterable) {
+	  Array.from(iterable);
 	});
 
 	// `Array.from` method
@@ -11877,7 +11885,7 @@ typeof navigator === "object" && (function () {
 	var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next) {
 	  var TO_STRING_TAG = NAME + ' Iterator';
 	  IteratorConstructor.prototype = objectCreate$1(IteratorPrototype$4, { next: createPropertyDescriptor$1(1, next) });
-	  setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false, true);
+	  setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
 	  iterators$1[TO_STRING_TAG] = returnThis$4;
 	  return IteratorConstructor;
 	};
@@ -11952,7 +11960,7 @@ typeof navigator === "object" && (function () {
 	        }
 	      }
 	      // Set @@toStringTag to native iterators
-	      setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
+	      setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true);
 	    }
 	  }
 
@@ -13165,7 +13173,8 @@ typeof navigator === "object" && (function () {
 	  var url = new URL('b?e=1', 'http://a');
 	  var searchParams = url.searchParams;
 	  url.pathname = 'c%20d';
-	  return !searchParams.sort
+	  return (isPure$1 && !url.toJSON)
+	    || !searchParams.sort
 	    || url.href !== 'http://a/c%20d?e=1'
 	    || searchParams.get('e') !== '1'
 	    || String(new URLSearchParams('?a=1')) !== 'a=1'
@@ -15792,7 +15801,7 @@ typeof navigator === "object" && (function () {
 	  Promise: PromiseConstructor$1
 	});
 
-	setToStringTag$1(PromiseConstructor$1, PROMISE$1, false, true);
+	setToStringTag$1(PromiseConstructor$1, PROMISE$1, false);
 	setSpecies$1(PROMISE$1);
 
 	PromiseWrapper$1 = path$1[PROMISE$1];
@@ -16720,17 +16729,11 @@ typeof navigator === "object" && (function () {
 	      return;
 	    }
 
-	    var player = this; // Set aspect ratio
+	    var player = this; // Set aspect ratio if fixed
 
 	    if (!is$2.empty(this.config.ratio)) {
 	      setAspectRatio.call(player);
-	    }
+	    } // Quality
-	    /* else {
-	      player.once('loadedmetadata', () => {
-	          setAspectRatio.call(player);
-	      });
-	    } */
-	    // Quality
 
 
 	    Object.defineProperty(player.media, 'quality', {
@@ -19327,8 +19330,7 @@ typeof navigator === "object" && (function () {
 	    },
 	    youtube: {
 	      sdk: 'https://www.youtube.com/iframe_api',
-	      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+	      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
-
 	    },
 	    googleIMA: {
 	      sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'

demo/src/sass/components/buttons.scss

@@ -6,11 +6,9 @@
 .button,
 .button__count {
     align-items: center;
-    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -21,6 +19,8 @@
 
 // Buttons
 .button {
+    background: $color-button-background;
+    color: $color-button-text;
     font-weight: $font-weight-bold;
     padding-left: ($spacing-base * 1.25);
     padding-right: ($spacing-base * 1.25);
@@ -28,7 +28,7 @@
 
     &:hover,
     &:focus {
-        color: $color-button-text-hover;
+        background: $color-button-background-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,12 +65,14 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
+    background: $color-button-count-background;
+    color: $color-button-count-text;
     margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: $color-button-background;
+        border-right-color: $color-button-count-background;
         content: '';
         height: 0;
         position: absolute;

demo/src/sass/components/links.scss

@@ -12,7 +12,6 @@ button.faux-link {
 a {
     border-bottom: 1px dotted currentColor;
     color: $color-link;
-    font-weight: $font-weight-bold;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;

demo/src/sass/components/players.scss

@@ -5,7 +5,7 @@
 // Example players
 .plyr {
     border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    box-shadow: 0 2px 15px rgba(#000, 0.1);
     margin: $spacing-base auto;
 
     &.plyr--audio {
@@ -27,6 +27,10 @@
 }
 
 // Style full supported player
-.plyr__cite .icon {
+.plyr__cite {
-    margin-right: ceil($spacing-base / 6);
+    color: $color-gray-5;
+
+    .icon {
+        margin-right: ceil($spacing-base / 6);
+    }
 }

demo/src/sass/layout/core.scss

@@ -35,11 +35,10 @@ main {
 aside {
     align-items: center;
     background: #fff;
-    color: $gray;
     display: flex;
     flex-shrink: 0;
     justify-content: center;
-    padding: ($spacing-base * 0.75);
+    padding: $spacing-base;
     position: relative;
     text-align: center;
     text-shadow: none;

demo/src/sass/settings/colors.scss

@@ -2,27 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
+// Grayscale
-$gray-dark: #343f4a;
+$color-gray-9: hsl(210, 15%, 16%);
-$gray: #55646b;
+$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-0: lighten($color-gray-1, 9%);
+
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
 // Text
-$color-text: #fff;
+$color-text: $color-gray-7;
-
+$color-headings: $color-brand-primary;
-// Plyr
-$color-brand-primary: #1aafff; // #7bc47f
 
 // Brands
 $color-twitter: #4baaf4;
 
 // Elements
-$color-link: #fff;
+$color-link: $color-brand-primary;
-$color-background: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
 
 // Buttons
-$color-button-background: #fff;
+$color-button-background: $color-brand-primary;
-$color-button-text: $gray;
+$color-button-text: #fff;
-$color-button-text-hover: $gray-dark;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-6;
 
 // Focus
 $tab-focus-default-color: #fff;

demo/src/sass/settings/cosmetic.scss

@@ -9,4 +9,4 @@ $arrow-size: 5px;
 $border-radius-base: 4px;
 
 // Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);

demo/src/sass/settings/plyr.scss

@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
 // Other
 $plyr-font-smoothing: true;
 
+// Colors
+$plyr-color-main: $color-brand-primary;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;

demo/src/sass/type/base.scss

@@ -14,7 +14,6 @@ body {
     font-family: $font-sans-serif;
     font-weight: $font-weight-medium;
     line-height: $line-height-base;
-    text-shadow: 0 1px 1px rgba(#000, 0.15);
 }
 
 button,

demo/src/sass/type/headings.scss

@@ -4,7 +4,8 @@
 
 h1 {
     @include font-size($font-size-h1);
-    font-weight: $font-weight-medium;
+    color: $color-headings;
+    font-weight: $font-weight-bold;
     letter-spacing: $letter-spacing-headings;
     line-height: 1.2;
     margin: 0 0 ($spacing-base * 1.5);

dist/plyr.js

@@ -540,6 +540,49 @@ typeof navigator === "object" && (function (global, factory) {
     empty: isEmpty$1
   };
 
+  // ==========================================================================
+  var transitionEndEvent = function () {
+    var element = document.createElement('span');
+    var events = {
+      WebkitTransition: 'webkitTransitionEnd',
+      MozTransition: 'transitionend',
+      OTransition: 'oTransitionEnd otransitionend',
+      transition: 'transitionend'
+    };
+    var type = Object.keys(events).find(function (event) {
+      return element.style[event] !== undefined;
+    });
+    return is$1.string(type) ? events[type] : false;
+  }(); // Force repaint of element
+
+  function repaint(element, delay) {
+    setTimeout(function () {
+      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);
+  }
+
+  // ==========================================================================
+  // Browser sniffing
+  // Unfortunately, due to mixed support, UA sniffing is required
+  // ==========================================================================
+  var browser = {
+    isIE:
+    /* @cc_on!@ */
+    !!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)
+  };
+
   // ==========================================================================
   // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
   // https://www.youtube.com/watch?v=NPM6172J22g
@@ -903,13 +946,10 @@ typeof navigator === "object" && (function (global, factory) {
 
     if (!is$1.boolean(hide)) {
       hide = !element.hidden;
-    }
+    } // eslint-disable-next-line no-param-reassign
 
-    if (hide) {
+
-      element.setAttribute('hidden', '');
+    element.hidden = hide;
-    } else {
-      element.removeAttribute('hidden');
-    }
   } // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 
   function toggleClass(element, className, force) {
@@ -1008,47 +1048,6 @@ typeof navigator === "object" && (function (global, factory) {
     }
   }
 
-  // ==========================================================================
-  var transitionEndEvent = function () {
-    var element = document.createElement('span');
-    var events = {
-      WebkitTransition: 'webkitTransitionEnd',
-      MozTransition: 'transitionend',
-      OTransition: 'oTransitionEnd otransitionend',
-      transition: 'transitionend'
-    };
-    var type = Object.keys(events).find(function (event) {
-      return element.style[event] !== undefined;
-    });
-    return is$1.string(type) ? events[type] : false;
-  }(); // Force repaint of element
-
-  function repaint(element) {
-    setTimeout(function () {
-      try {
-        toggleHidden(element, true);
-        element.offsetHeight; // eslint-disable-line
-
-        toggleHidden(element, false);
-      } catch (e) {// Do nothing
-      }
-    }, 0);
-  }
-
-  // ==========================================================================
-  // Browser sniffing
-  // Unfortunately, due to mixed support, UA sniffing is required
-  // ==========================================================================
-  var browser = {
-    isIE:
-    /* @cc_on!@ */
-    !!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)
-  };
-
   var defaultCodecs = {
     'audio/ogg': 'vorbis',
     'audio/wav': '1',
@@ -1172,12 +1171,8 @@ typeof navigator === "object" && (function (global, factory) {
   }
   function getAspectRatio(input) {
     var parse = function parse(ratio) {
-      if (!validateRatio(ratio)) {
+      return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
-        return null;
+    }; // Try provided ratio
-      }
-
-      return ratio.split(':').map(Number);
-    }; // Provided ratio
 
 
     var ratio = parse(input); // Get from config
@@ -1264,9 +1259,12 @@ typeof navigator === "object" && (function (global, factory) {
         return;
       }
 
-      var player = this; // Set aspect ratio if set
+      var player = this; // Set aspect ratio if fixed
+
+      if (!is$1.empty(this.config.ratio)) {
+        setAspectRatio.call(player);
+      } // Quality
 
-      setAspectRatio.call(player); // Quality
 
       Object.defineProperty(player.media, 'quality', {
         get: function get() {
@@ -3704,7 +3702,8 @@ typeof navigator === "object" && (function (global, factory) {
     controls: ['play-large', // 'restart',
     // 'rewind',
     'play', // 'fast-forward',
-    'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
+    'progress', 'current-time', // 'duration',
+    'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
     'fullscreen'],
     settings: ['captions', 'quality', 'speed'],
     // Localisation
@@ -3762,8 +3761,7 @@ typeof navigator === "object" && (function (global, factory) {
       },
       youtube: {
         sdk: 'https://www.youtube.com/iframe_api',
-        api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+        api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
-
       },
       googleIMA: {
         sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
@@ -4048,8 +4046,6 @@ typeof navigator === "object" && (function (global, factory) {
   }
 
   function toggleFallback() {
-    var _this = this;
-
     var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
     // Store or restore scroll position
@@ -4089,12 +4085,7 @@ typeof navigator === "object" && (function (global, factory) {
         viewport.content = viewport.content.split(',').filter(function (part) {
           return part.trim() !== property;
         }).join(',');
-      } // Force a repaint as sometimes Safari doesn't want to fill the screen
+      }
-
-
-      setTimeout(function () {
-        return repaint(_this.target);
-      }, 100);
     } // Toggle button and fire events
 
 
@@ -4105,7 +4096,7 @@ typeof navigator === "object" && (function (global, factory) {
   /*#__PURE__*/
   function () {
     function Fullscreen(player) {
-      var _this2 = this;
+      var _this = this;
 
       _classCallCheck(this, Fullscreen);
 
@@ -4125,16 +4116,16 @@ typeof navigator === "object" && (function (global, factory) {
 
       on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
         // TODO: Filter for target??
-        onChange.call(_this2);
+        onChange.call(_this);
       }); // Fullscreen toggle on double click
 
       on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
         // Ignore double click in controls
-        if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
+        if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
           return;
         }
 
-        _this2.toggle();
+        _this.toggle();
       }); // Update the UI
 
       this.update();
@@ -4808,15 +4799,7 @@ typeof navigator === "object" && (function (global, factory) {
           timers.controls = setTimeout(function () {
             return ui.toggleControls.call(player, false);
           }, delay);
-        }); // Force edge to repaint on exit fullscreen
+        }); // Set a gutter for Vimeo
-        // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
-
-        /* if (browser.isEdge) {
-            on.call(player, elements.container, 'exitfullscreen', () => {
-                setTimeout(() => repaint(elements.container), 100);
-            });
-        } */
-        // Set a gutter for Vimeo
 
         var setGutter = function setGutter(ratio, padding, toggle) {
           if (!player.isVimeo) {
@@ -4858,9 +4841,14 @@ typeof navigator === "object" && (function (global, factory) {
         on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
           var _player$fullscreen = player.fullscreen,
               target = _player$fullscreen.target,
-              usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
+              usingNative = _player$fullscreen.usingNative; // Ignore events not from target
 
-          if (!player.isEmbed || target !== elements.container) {
+          if (target !== elements.container) {
+            return;
+          } // If it's not an embed and no ratio specified
+
+
+          if (!player.isEmbed && is$1.empty(player.config.ratio)) {
             return;
           }
 
@@ -7127,7 +7115,11 @@ typeof navigator === "object" && (function (global, factory) {
         }
 
         this.getThumbnails().then(function () {
-          // Render DOM elements
+          if (!_this.enabled) {
+            return;
+          } // Render DOM elements
+
+
           _this.render(); // Check to see if thumb container size was specified manually in CSS
 
 

dist/plyr.mjs

@@ -534,6 +534,49 @@ var is$1 = {
   empty: isEmpty$1
 };
 
+// ==========================================================================
+var transitionEndEvent = function () {
+  var element = document.createElement('span');
+  var events = {
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'transitionend',
+    OTransition: 'oTransitionEnd otransitionend',
+    transition: 'transitionend'
+  };
+  var type = Object.keys(events).find(function (event) {
+    return element.style[event] !== undefined;
+  });
+  return is$1.string(type) ? events[type] : false;
+}(); // Force repaint of element
+
+function repaint(element, delay) {
+  setTimeout(function () {
+    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);
+}
+
+// ==========================================================================
+// Browser sniffing
+// Unfortunately, due to mixed support, UA sniffing is required
+// ==========================================================================
+var browser = {
+  isIE:
+  /* @cc_on!@ */
+  !!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)
+};
+
 // ==========================================================================
 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 // https://www.youtube.com/watch?v=NPM6172J22g
@@ -897,13 +940,10 @@ function toggleHidden(element, hidden) {
 
   if (!is$1.boolean(hide)) {
     hide = !element.hidden;
-  }
+  } // eslint-disable-next-line no-param-reassign
 
-  if (hide) {
+
-    element.setAttribute('hidden', '');
+  element.hidden = hide;
-  } else {
-    element.removeAttribute('hidden');
-  }
 } // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 
 function toggleClass(element, className, force) {
@@ -1002,47 +1042,6 @@ function setFocus() {
   }
 }
 
-// ==========================================================================
-var transitionEndEvent = function () {
-  var element = document.createElement('span');
-  var events = {
-    WebkitTransition: 'webkitTransitionEnd',
-    MozTransition: 'transitionend',
-    OTransition: 'oTransitionEnd otransitionend',
-    transition: 'transitionend'
-  };
-  var type = Object.keys(events).find(function (event) {
-    return element.style[event] !== undefined;
-  });
-  return is$1.string(type) ? events[type] : false;
-}(); // Force repaint of element
-
-function repaint(element) {
-  setTimeout(function () {
-    try {
-      toggleHidden(element, true);
-      element.offsetHeight; // eslint-disable-line
-
-      toggleHidden(element, false);
-    } catch (e) {// Do nothing
-    }
-  }, 0);
-}
-
-// ==========================================================================
-// Browser sniffing
-// Unfortunately, due to mixed support, UA sniffing is required
-// ==========================================================================
-var browser = {
-  isIE:
-  /* @cc_on!@ */
-  !!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)
-};
-
 var defaultCodecs = {
   'audio/ogg': 'vorbis',
   'audio/wav': '1',
@@ -1166,12 +1165,8 @@ function reduceAspectRatio(ratio) {
 }
 function getAspectRatio(input) {
   var parse = function parse(ratio) {
-    if (!validateRatio(ratio)) {
+    return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
-      return null;
+  }; // Try provided ratio
-    }
-
-    return ratio.split(':').map(Number);
-  }; // Provided ratio
 
 
   var ratio = parse(input); // Get from config
@@ -1258,9 +1253,12 @@ var html5 = {
       return;
     }
 
-    var player = this; // Set aspect ratio if set
+    var player = this; // Set aspect ratio if fixed
+
+    if (!is$1.empty(this.config.ratio)) {
+      setAspectRatio.call(player);
+    } // Quality
 
-    setAspectRatio.call(player); // Quality
 
     Object.defineProperty(player.media, 'quality', {
       get: function get() {
@@ -3698,7 +3696,8 @@ var defaults$1 = {
   controls: ['play-large', // 'restart',
   // 'rewind',
   'play', // 'fast-forward',
-  'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
+  'progress', 'current-time', // 'duration',
+  'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
   'fullscreen'],
   settings: ['captions', 'quality', 'speed'],
   // Localisation
@@ -3756,8 +3755,7 @@ var defaults$1 = {
     },
     youtube: {
       sdk: 'https://www.youtube.com/iframe_api',
-      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
-
     },
     googleIMA: {
       sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
@@ -4042,8 +4040,6 @@ function onChange() {
 }
 
 function toggleFallback() {
-  var _this = this;
-
   var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
   // Store or restore scroll position
@@ -4083,12 +4079,7 @@ function toggleFallback() {
       viewport.content = viewport.content.split(',').filter(function (part) {
         return part.trim() !== property;
       }).join(',');
-    } // Force a repaint as sometimes Safari doesn't want to fill the screen
+    }
-
-
-    setTimeout(function () {
-      return repaint(_this.target);
-    }, 100);
   } // Toggle button and fire events
 
 
@@ -4099,7 +4090,7 @@ var Fullscreen =
 /*#__PURE__*/
 function () {
   function Fullscreen(player) {
-    var _this2 = this;
+    var _this = this;
 
     _classCallCheck(this, Fullscreen);
 
@@ -4119,16 +4110,16 @@ function () {
 
     on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
       // TODO: Filter for target??
-      onChange.call(_this2);
+      onChange.call(_this);
     }); // Fullscreen toggle on double click
 
     on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
       // Ignore double click in controls
-      if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
+      if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
         return;
       }
 
-      _this2.toggle();
+      _this.toggle();
     }); // Update the UI
 
     this.update();
@@ -4802,15 +4793,7 @@ function () {
         timers.controls = setTimeout(function () {
           return ui.toggleControls.call(player, false);
         }, delay);
-      }); // Force edge to repaint on exit fullscreen
+      }); // Set a gutter for Vimeo
-      // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
-
-      /* if (browser.isEdge) {
-          on.call(player, elements.container, 'exitfullscreen', () => {
-              setTimeout(() => repaint(elements.container), 100);
-          });
-      } */
-      // Set a gutter for Vimeo
 
       var setGutter = function setGutter(ratio, padding, toggle) {
         if (!player.isVimeo) {
@@ -4852,9 +4835,14 @@ function () {
       on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
         var _player$fullscreen = player.fullscreen,
             target = _player$fullscreen.target,
-            usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
+            usingNative = _player$fullscreen.usingNative; // Ignore events not from target
 
-        if (!player.isEmbed || target !== elements.container) {
+        if (target !== elements.container) {
+          return;
+        } // If it's not an embed and no ratio specified
+
+
+        if (!player.isEmbed && is$1.empty(player.config.ratio)) {
           return;
         }
 
@@ -7121,7 +7109,11 @@ function () {
       }
 
       this.getThumbnails().then(function () {
-        // Render DOM elements
+        if (!_this.enabled) {
+          return;
+        } // Render DOM elements
+
+
         _this.render(); // Check to see if thumb container size was specified manually in CSS
 
 

dist/plyr.polyfilled.js

@@ -1087,7 +1087,7 @@ typeof navigator === "object" && (function (global, factory) {
   var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
     var TO_STRING_TAG = NAME + ' Iterator';
     IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
-    setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
+    setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
     iterators[TO_STRING_TAG] = returnThis$1;
     return IteratorConstructor;
   };
@@ -1162,7 +1162,7 @@ typeof navigator === "object" && (function (global, factory) {
           }
         }
         // Set @@toStringTag to native iterators
-        setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
+        setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
       }
     }
 
@@ -2074,7 +2074,8 @@ typeof navigator === "object" && (function (global, factory) {
     var url = new URL('b?e=1', 'http://a');
     var searchParams = url.searchParams;
     url.pathname = 'c%20d';
-    return !searchParams.sort
+    return (isPure && !url.toJSON)
+      || !searchParams.sort
       || url.href !== 'http://a/c%20d?e=1'
       || searchParams.get('e') !== '1'
       || String(new URLSearchParams('?a=1')) !== 'a=1'
@@ -4312,6 +4313,8 @@ typeof navigator === "object" && (function (global, factory) {
     iteratorWithReturn[ITERATOR$7] = function () {
       return this;
     };
+    // eslint-disable-next-line no-throw-literal
+    Array.from(iteratorWithReturn, function () { throw 2; });
   } catch (error) { /* empty */ }
 
   var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
@@ -4332,6 +4335,7 @@ typeof navigator === "object" && (function (global, factory) {
   };
 
   var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
+    Array.from(iterable);
   });
 
   // `Array.from` method
@@ -5944,7 +5948,7 @@ typeof navigator === "object" && (function (global, factory) {
     Promise: PromiseConstructor
   });
 
-  setToStringTag(PromiseConstructor, PROMISE, false, true);
+  setToStringTag(PromiseConstructor, PROMISE, false);
   setSpecies(PROMISE);
 
   PromiseWrapper = path[PROMISE];
@@ -6156,6 +6160,48 @@ typeof navigator === "object" && (function (global, factory) {
     empty: isEmpty$1
   };
 
+  var transitionEndEvent = function () {
+    var element = document.createElement('span');
+    var events = {
+      WebkitTransition: 'webkitTransitionEnd',
+      MozTransition: 'transitionend',
+      OTransition: 'oTransitionEnd otransitionend',
+      transition: 'transitionend'
+    };
+    var type = Object.keys(events).find(function (event) {
+      return element.style[event] !== undefined;
+    });
+    return is$1.string(type) ? events[type] : false;
+  }(); // Force repaint of element
+
+  function repaint(element, delay) {
+    setTimeout(function () {
+      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);
+  }
+
+  // ==========================================================================
+  // Browser sniffing
+  // Unfortunately, due to mixed support, UA sniffing is required
+  // ==========================================================================
+  var browser = {
+    isIE:
+    /* @cc_on!@ */
+    !!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)
+  };
+
   // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
   // https://www.youtube.com/watch?v=NPM6172J22g
 
@@ -6518,13 +6564,10 @@ typeof navigator === "object" && (function (global, factory) {
 
     if (!is$1.boolean(hide)) {
       hide = !element.hidden;
-    }
+    } // eslint-disable-next-line no-param-reassign
 
-    if (hide) {
+
-      element.setAttribute('hidden', '');
+    element.hidden = hide;
-    } else {
-      element.removeAttribute('hidden');
-    }
   } // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 
   function toggleClass(element, className, force) {
@@ -6623,46 +6666,6 @@ typeof navigator === "object" && (function (global, factory) {
     }
   }
 
-  var transitionEndEvent = function () {
-    var element = document.createElement('span');
-    var events = {
-      WebkitTransition: 'webkitTransitionEnd',
-      MozTransition: 'transitionend',
-      OTransition: 'oTransitionEnd otransitionend',
-      transition: 'transitionend'
-    };
-    var type = Object.keys(events).find(function (event) {
-      return element.style[event] !== undefined;
-    });
-    return is$1.string(type) ? events[type] : false;
-  }(); // Force repaint of element
-
-  function repaint(element) {
-    setTimeout(function () {
-      try {
-        toggleHidden(element, true);
-        element.offsetHeight; // eslint-disable-line
-
-        toggleHidden(element, false);
-      } catch (e) {// Do nothing
-      }
-    }, 0);
-  }
-
-  // ==========================================================================
-  // Browser sniffing
-  // Unfortunately, due to mixed support, UA sniffing is required
-  // ==========================================================================
-  var browser = {
-    isIE:
-    /* @cc_on!@ */
-    !!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)
-  };
-
   var defaultCodecs = {
     'audio/ogg': 'vorbis',
     'audio/wav': '1',
@@ -6786,12 +6789,8 @@ typeof navigator === "object" && (function (global, factory) {
   }
   function getAspectRatio(input) {
     var parse = function parse(ratio) {
-      if (!validateRatio(ratio)) {
+      return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
-        return null;
+    }; // Try provided ratio
-      }
-
-      return ratio.split(':').map(Number);
-    }; // Provided ratio
 
 
     var ratio = parse(input); // Get from config
@@ -6877,9 +6876,12 @@ typeof navigator === "object" && (function (global, factory) {
         return;
       }
 
-      var player = this; // Set aspect ratio if set
+      var player = this; // Set aspect ratio if fixed
+
+      if (!is$1.empty(this.config.ratio)) {
+        setAspectRatio.call(player);
+      } // Quality
 
-      setAspectRatio.call(player); // Quality
 
       Object.defineProperty(player.media, 'quality', {
         get: function get() {
@@ -9379,7 +9381,8 @@ typeof navigator === "object" && (function (global, factory) {
     controls: ['play-large', // 'restart',
     // 'rewind',
     'play', // 'fast-forward',
-    'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
+    'progress', 'current-time', // 'duration',
+    'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
     'fullscreen'],
     settings: ['captions', 'quality', 'speed'],
     // Localisation
@@ -9437,8 +9440,7 @@ typeof navigator === "object" && (function (global, factory) {
       },
       youtube: {
         sdk: 'https://www.youtube.com/iframe_api',
-        api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+        api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
-
       },
       googleIMA: {
         sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
@@ -9723,8 +9725,6 @@ typeof navigator === "object" && (function (global, factory) {
   }
 
   function toggleFallback() {
-    var _this = this;
-
     var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
     // Store or restore scroll position
@@ -9764,12 +9764,7 @@ typeof navigator === "object" && (function (global, factory) {
         viewport.content = viewport.content.split(',').filter(function (part) {
           return part.trim() !== property;
         }).join(',');
-      } // Force a repaint as sometimes Safari doesn't want to fill the screen
+      }
-
-
-      setTimeout(function () {
-        return repaint(_this.target);
-      }, 100);
     } // Toggle button and fire events
 
 
@@ -9780,7 +9775,7 @@ typeof navigator === "object" && (function (global, factory) {
   /*#__PURE__*/
   function () {
     function Fullscreen(player) {
-      var _this2 = this;
+      var _this = this;
 
       _classCallCheck(this, Fullscreen);
 
@@ -9800,16 +9795,16 @@ typeof navigator === "object" && (function (global, factory) {
 
       on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
         // TODO: Filter for target??
-        onChange.call(_this2);
+        onChange.call(_this);
       }); // Fullscreen toggle on double click
 
       on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
         // Ignore double click in controls
-        if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
+        if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
           return;
         }
 
-        _this2.toggle();
+        _this.toggle();
       }); // Update the UI
 
       this.update();
@@ -10495,15 +10490,7 @@ typeof navigator === "object" && (function (global, factory) {
           timers.controls = setTimeout(function () {
             return ui.toggleControls.call(player, false);
           }, delay);
-        }); // Force edge to repaint on exit fullscreen
+        }); // Set a gutter for Vimeo
-        // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
-
-        /* if (browser.isEdge) {
-            on.call(player, elements.container, 'exitfullscreen', () => {
-                setTimeout(() => repaint(elements.container), 100);
-            });
-        } */
-        // Set a gutter for Vimeo
 
         var setGutter = function setGutter(ratio, padding, toggle) {
           if (!player.isVimeo) {
@@ -10545,9 +10532,14 @@ typeof navigator === "object" && (function (global, factory) {
         on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
           var _player$fullscreen = player.fullscreen,
               target = _player$fullscreen.target,
-              usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
+              usingNative = _player$fullscreen.usingNative; // Ignore events not from target
 
-          if (!player.isEmbed || target !== elements.container) {
+          if (target !== elements.container) {
+            return;
+          } // If it's not an embed and no ratio specified
+
+
+          if (!player.isEmbed && is$1.empty(player.config.ratio)) {
             return;
           }
 
@@ -12903,7 +12895,11 @@ typeof navigator === "object" && (function (global, factory) {
         }
 
         this.getThumbnails().then(function () {
-          // Render DOM elements
+          if (!_this.enabled) {
+            return;
+          } // Render DOM elements
+
+
           _this.render(); // Check to see if thumb container size was specified manually in CSS
 
 

dist/plyr.polyfilled.mjs

@@ -1081,7 +1081,7 @@ var returnThis$1 = function () { return this; };
 var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
   var TO_STRING_TAG = NAME + ' Iterator';
   IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
-  setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
+  setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
   iterators[TO_STRING_TAG] = returnThis$1;
   return IteratorConstructor;
 };
@@ -1156,7 +1156,7 @@ var defineIterator = function (Iterable, NAME, IteratorConstructor, next, DEFAUL
         }
       }
       // Set @@toStringTag to native iterators
-      setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
+      setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
     }
   }
 
@@ -2068,7 +2068,8 @@ var nativeUrl = !fails(function () {
   var url = new URL('b?e=1', 'http://a');
   var searchParams = url.searchParams;
   url.pathname = 'c%20d';
-  return !searchParams.sort
+  return (isPure && !url.toJSON)
+    || !searchParams.sort
     || url.href !== 'http://a/c%20d?e=1'
     || searchParams.get('e') !== '1'
     || String(new URLSearchParams('?a=1')) !== 'a=1'
@@ -4306,6 +4307,8 @@ try {
   iteratorWithReturn[ITERATOR$7] = function () {
     return this;
   };
+  // eslint-disable-next-line no-throw-literal
+  Array.from(iteratorWithReturn, function () { throw 2; });
 } catch (error) { /* empty */ }
 
 var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
@@ -4326,6 +4329,7 @@ var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
 };
 
 var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
+  Array.from(iterable);
 });
 
 // `Array.from` method
@@ -5938,7 +5942,7 @@ _export({ global: true, wrap: true, forced: FORCED$3 }, {
   Promise: PromiseConstructor
 });
 
-setToStringTag(PromiseConstructor, PROMISE, false, true);
+setToStringTag(PromiseConstructor, PROMISE, false);
 setSpecies(PROMISE);
 
 PromiseWrapper = path[PROMISE];
@@ -6150,6 +6154,48 @@ var is$1 = {
   empty: isEmpty$1
 };
 
+var transitionEndEvent = function () {
+  var element = document.createElement('span');
+  var events = {
+    WebkitTransition: 'webkitTransitionEnd',
+    MozTransition: 'transitionend',
+    OTransition: 'oTransitionEnd otransitionend',
+    transition: 'transitionend'
+  };
+  var type = Object.keys(events).find(function (event) {
+    return element.style[event] !== undefined;
+  });
+  return is$1.string(type) ? events[type] : false;
+}(); // Force repaint of element
+
+function repaint(element, delay) {
+  setTimeout(function () {
+    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);
+}
+
+// ==========================================================================
+// Browser sniffing
+// Unfortunately, due to mixed support, UA sniffing is required
+// ==========================================================================
+var browser = {
+  isIE:
+  /* @cc_on!@ */
+  !!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)
+};
+
 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 // https://www.youtube.com/watch?v=NPM6172J22g
 
@@ -6512,13 +6558,10 @@ function toggleHidden(element, hidden) {
 
   if (!is$1.boolean(hide)) {
     hide = !element.hidden;
-  }
+  } // eslint-disable-next-line no-param-reassign
 
-  if (hide) {
+
-    element.setAttribute('hidden', '');
+  element.hidden = hide;
-  } else {
-    element.removeAttribute('hidden');
-  }
 } // Mirror Element.classList.toggle, with IE compatibility for "force" argument
 
 function toggleClass(element, className, force) {
@@ -6617,46 +6660,6 @@ function setFocus() {
   }
 }
 
-var transitionEndEvent = function () {
-  var element = document.createElement('span');
-  var events = {
-    WebkitTransition: 'webkitTransitionEnd',
-    MozTransition: 'transitionend',
-    OTransition: 'oTransitionEnd otransitionend',
-    transition: 'transitionend'
-  };
-  var type = Object.keys(events).find(function (event) {
-    return element.style[event] !== undefined;
-  });
-  return is$1.string(type) ? events[type] : false;
-}(); // Force repaint of element
-
-function repaint(element) {
-  setTimeout(function () {
-    try {
-      toggleHidden(element, true);
-      element.offsetHeight; // eslint-disable-line
-
-      toggleHidden(element, false);
-    } catch (e) {// Do nothing
-    }
-  }, 0);
-}
-
-// ==========================================================================
-// Browser sniffing
-// Unfortunately, due to mixed support, UA sniffing is required
-// ==========================================================================
-var browser = {
-  isIE:
-  /* @cc_on!@ */
-  !!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)
-};
-
 var defaultCodecs = {
   'audio/ogg': 'vorbis',
   'audio/wav': '1',
@@ -6780,12 +6783,8 @@ function reduceAspectRatio(ratio) {
 }
 function getAspectRatio(input) {
   var parse = function parse(ratio) {
-    if (!validateRatio(ratio)) {
+    return validateRatio(ratio) ? ratio.split(':').map(Number) : null;
-      return null;
+  }; // Try provided ratio
-    }
-
-    return ratio.split(':').map(Number);
-  }; // Provided ratio
 
 
   var ratio = parse(input); // Get from config
@@ -6871,9 +6870,12 @@ var html5 = {
       return;
     }
 
-    var player = this; // Set aspect ratio if set
+    var player = this; // Set aspect ratio if fixed
+
+    if (!is$1.empty(this.config.ratio)) {
+      setAspectRatio.call(player);
+    } // Quality
 
-    setAspectRatio.call(player); // Quality
 
     Object.defineProperty(player.media, 'quality', {
       get: function get() {
@@ -9373,7 +9375,8 @@ var defaults$1 = {
   controls: ['play-large', // 'restart',
   // 'rewind',
   'play', // 'fast-forward',
-  'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
+  'progress', 'current-time', // 'duration',
+  'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', // 'download',
   'fullscreen'],
   settings: ['captions', 'quality', 'speed'],
   // Localisation
@@ -9431,8 +9434,7 @@ var defaults$1 = {
     },
     youtube: {
       sdk: 'https://www.youtube.com/iframe_api',
-      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+      api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
-
     },
     googleIMA: {
       sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'
@@ -9717,8 +9719,6 @@ function onChange() {
 }
 
 function toggleFallback() {
-  var _this = this;
-
   var toggle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 
   // Store or restore scroll position
@@ -9758,12 +9758,7 @@ function toggleFallback() {
       viewport.content = viewport.content.split(',').filter(function (part) {
         return part.trim() !== property;
       }).join(',');
-    } // Force a repaint as sometimes Safari doesn't want to fill the screen
+    }
-
-
-    setTimeout(function () {
-      return repaint(_this.target);
-    }, 100);
   } // Toggle button and fire events
 
 
@@ -9774,7 +9769,7 @@ var Fullscreen =
 /*#__PURE__*/
 function () {
   function Fullscreen(player) {
-    var _this2 = this;
+    var _this = this;
 
     _classCallCheck(this, Fullscreen);
 
@@ -9794,16 +9789,16 @@ function () {
 
     on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
       // TODO: Filter for target??
-      onChange.call(_this2);
+      onChange.call(_this);
     }); // Fullscreen toggle on double click
 
     on.call(this.player, this.player.elements.container, 'dblclick', function (event) {
       // Ignore double click in controls
-      if (is$1.element(_this2.player.elements.controls) && _this2.player.elements.controls.contains(event.target)) {
+      if (is$1.element(_this.player.elements.controls) && _this.player.elements.controls.contains(event.target)) {
         return;
       }
 
-      _this2.toggle();
+      _this.toggle();
     }); // Update the UI
 
     this.update();
@@ -10489,15 +10484,7 @@ function () {
         timers.controls = setTimeout(function () {
           return ui.toggleControls.call(player, false);
         }, delay);
-      }); // Force edge to repaint on exit fullscreen
+      }); // Set a gutter for Vimeo
-      // TODO: Fix weird bug where Edge doesn't re-draw when exiting fullscreen
-
-      /* if (browser.isEdge) {
-          on.call(player, elements.container, 'exitfullscreen', () => {
-              setTimeout(() => repaint(elements.container), 100);
-          });
-      } */
-      // Set a gutter for Vimeo
 
       var setGutter = function setGutter(ratio, padding, toggle) {
         if (!player.isVimeo) {
@@ -10539,9 +10526,14 @@ function () {
       on.call(player, elements.container, 'enterfullscreen exitfullscreen', function (event) {
         var _player$fullscreen = player.fullscreen,
             target = _player$fullscreen.target,
-            usingNative = _player$fullscreen.usingNative; // Ignore for iOS native
+            usingNative = _player$fullscreen.usingNative; // Ignore events not from target
 
-        if (!player.isEmbed || target !== elements.container) {
+        if (target !== elements.container) {
+          return;
+        } // If it's not an embed and no ratio specified
+
+
+        if (!player.isEmbed && is$1.empty(player.config.ratio)) {
           return;
         }
 
@@ -12897,7 +12889,11 @@ function () {
       }
 
       this.getThumbnails().then(function () {
-        // Render DOM elements
+        if (!_this.enabled) {
+          return;
+        } // Render DOM elements
+
+
         _this.render(); // Check to see if thumb container size was specified manually in CSS
 
 

readme.md

@@ -6,13 +6,12 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
 
 # Features
 
+-   📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
 -   💪 **Accessible** - full support for VTT captions and screen readers
 -   🔧 **[Customisable](#html)** - make the player look how you want with the markup you want
--   😎 **Good HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
+-   😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
     `<span>` or `<a href="#">` button hacks
 -   📱 **Responsive** - works with any screen size
--   📼 **HTML Video & Audio** - support for both formats
--   📺 **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
 -   💵 **[Monetization](#ads)** - make money from your videos
 -   📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
 -   🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
@@ -25,7 +24,7 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
 -   📖 **Multiple captions** - support for multiple caption tracks
 -   🌎 **i18n support** - support for internationalization of controls
 -   👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
--   🤟 **No dependencies** - written in "vanilla" ES6 JavaScript, no jQuery required
+-   🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
 -   💁‍♀️ **SASS** - to include in your build processes
 
 ### Demos
@@ -109,7 +108,15 @@ Or the `<div>` non progressively enhanced method:
 
 ## JavaScript
 
-Include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
+You can use Plyr as an ES6 module as follows:
+
+```javascript
+import Plyr from 'plyr';
+
+const player = new Plyr('#player');
+```
+
+Alertnatively you can include the `plyr.js` script before the closing `</body>` tag and then in your JS create a new instance of Plyr as below.
 
 ```html
 <script src="path/to/plyr.js"></script>
@@ -134,7 +141,7 @@ You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the Java
 
 ## CSS
 
-Include the `plyr.css` stylsheet into your `<head>`
+Include the `plyr.css` stylsheet into your `<head>`.
 
 ```html
 <link rel="stylesheet" href="path/to/plyr.css" />
@@ -204,7 +211,7 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
 
 You can specify a range of arguments for the constructor to use:
 
--   A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+-   A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
 -   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
 -   A [jQuery](https://jquery.com) object
 
@@ -238,7 +245,7 @@ You have two choices here. You can either use a simple array loop to map the con
 const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
 ```
 
-...or use a static method where you can pass a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements, or a [JQuery](https://jquery.com) object:
+...or use a static method where you can pass a [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements, or a [JQuery](https://jquery.com) object:
 
 ```javascript
 const players = Plyr.setup('.js-player');
@@ -703,6 +710,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 -   [HTML5 Weekly #177](http://html5weekly.com/issues/177)
 -   [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
 -   [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+-   [Front End Focus #177](https://frontendfoc.us/issues/177)
 -   [Hacker News](https://news.ycombinator.com/item?id=9136774)
 -   [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
 -   [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
@@ -722,7 +730,7 @@ Plyr costs money to run, not only my time. I donate my time for free as I enjoy
 -   [Sparkk TV](https://www.sparkktv.com/)
 -   [@halfhalftravel](https://www.halfhalftravel.com/)
 
-Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
+If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
 
 # Useful links and credits
 

src/js/config/defaults.js

@@ -196,7 +196,7 @@ const defaults = {
         },
         youtube: {
             sdk: 'https://www.youtube.com/iframe_api',
-            api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}', // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
+            api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
         },
         googleIMA: {
             sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',

src/sass/components/control.scss

@@ -63,9 +63,9 @@ a.plyr__control {
 
 // Video control
 .plyr--video .plyr__control {
-    svg {
+    /* svg {
         filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-    }
+    } */
 
     // Hover and tab focus
     &.plyr__tab-focus,
@@ -81,7 +81,6 @@ a.plyr__control {
     background: rgba($plyr-video-control-bg-hover, 0.8);
     border: 0;
     border-radius: 100%;
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
     color: $plyr-video-control-color;
     display: none;
     left: 50%;

src/sass/plugins/ads.scss

@@ -23,7 +23,7 @@
 
     // The countdown label
     &::after {
-        background: rgba($plyr-color-gunmetal, 0.8);
+        background: rgba($plyr-color-gray-9, 0.8);
         border-radius: 2px;
         bottom: $plyr-control-spacing;
         color: #fff;

src/sass/plugins/previewThumbnails.scss

@@ -7,7 +7,7 @@ $plyr-preview-bg: $plyr-tooltip-bg !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-bg: $plyr-color-heather !default;
+$plyr-preview-image-bg: $plyr-color-gray-2 !default;
 $plyr-preview-time-font-size: $plyr-font-size-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
 $plyr-preview-time-bg: rgba(0, 0, 0, 0.55);

src/sass/settings/badges.scss

@@ -2,5 +2,5 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-fiord !default;
+$plyr-badge-bg: $plyr-color-gray-7 !default;
 $plyr-badge-color: #fff !default;

src/sass/settings/colors.scss

@@ -2,8 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #1aafff !default;
+$plyr-color-main: hsl(198, 100%, 50%) !default;
-$plyr-color-gunmetal: #2f343d !default;
+
-$plyr-color-fiord: #4f5b5f !default;
+// Grayscale
-$plyr-color-lynch: #6b7d85 !default;
+$plyr-color-gray-9: hsl(210, 15%, 16%);
-$plyr-color-heather: #b7c5cd !default;
+$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);

src/sass/settings/controls.scss

@@ -13,6 +13,6 @@ $plyr-video-control-color-hover: #fff !default;
 $plyr-video-control-bg-hover: $plyr-color-main !default;
 
 $plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color: $plyr-color-gray-7 !default;
 $plyr-audio-control-color-hover: #fff !default;
 $plyr-audio-control-bg-hover: $plyr-color-main !default;

src/sass/settings/menus.scss

@@ -3,8 +3,8 @@
 // ==========================================================================
 
 $plyr-menu-bg: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-fiord !default;
+$plyr-menu-color: $plyr-color-gray-7 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-color: $plyr-color-gray-2 !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;

src/sass/settings/progress.scss

@@ -4,8 +4,8 @@
 
 // Loading
 $plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
+$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
 
 // Buffered
 $plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
+$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;

src/sass/settings/sliders.scss

@@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 $plyr-range-thumb-height: 13px !default;
 $plyr-range-thumb-bg: #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-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 5px !default;

src/sass/settings/tooltips.scss

@@ -3,7 +3,7 @@
 // ==========================================================================
 
 $plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-color: $plyr-color-gray-7 !default;
 $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size: 4px !default;
 $plyr-tooltip-radius: 3px !default;

yarn.lock

@@ -798,10 +798,10 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.11.3.tgz#7c6b0f8eaf16ae530795de2ad1b85d34bf2f5c58"
   integrity sha512-wp6IOGu1lxsfnrD+5mX6qwSwWuqsdkKKxTN4aQc4wByHAKZJf9/D4KXPQ1POUjEbnCP5LMggB0OEFNY9OTsMqg==
 
-"@types/node@^12.0.3":
+"@types/node@^12.0.8":
-  version "12.0.4"
+  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.4.tgz#46832183115c904410c275e34cf9403992999c32"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.8.tgz#551466be11b2adc3f3d47156758f610bd9f6b1d8"
-  integrity sha512-j8YL2C0fXq7IONwl/Ud5Kt0PeXw22zGERt+HSSnwbKOJVsAGkEz3sFCYwaF9IOuoG1HOtE0vKCj6sXF7Q0+Vaw==
+  integrity sha512-b8bbUOTwzIY3V5vDTY1fIJ+ePKDUBqt2hC2woVGotdQQhG/2Sh62HOKHrT7ab+VerXAcPyAiTEipPu/FsreUtg==
 
 "@types/q@^1.5.1":
   version "1.5.2"
@@ -7259,11 +7259,6 @@ rangetouch@^2.0.0:
   resolved "https://registry.yarnpkg.com/rangetouch/-/rangetouch-2.0.0.tgz#5459cdb38b929326c5484ab47aac9632fbe3a896"
   integrity sha512-y66wTFbwh7KafYligRsmIYYR1kZY8U9tGHH9PgbVhBUFmGzPMsOSjslXPedgR5D3M9W1QKVbAf1AtaVAt7JJTw==
 
-raven-js@^3.27.1:
-  version "3.27.1"
-  resolved "https://registry.yarnpkg.com/raven-js/-/raven-js-3.27.1.tgz#e187a12982061908ccbf935af0640c9043d7d666"
-  integrity sha512-r/9CwSbaGfBFjo4hGR45DAmrukUKkQ4HdMu80PlVLDY1t8f9b4aaZzTsFegaafu7EGhEYougWDJ9/IcTdYdLXQ==
-
 rc@^1.0.1, rc@^1.1.0, rc@^1.1.6, rc@^1.2.7:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -7853,13 +7848,13 @@ rollup-pluginutils@^2.7.0, rollup-pluginutils@^2.8.0:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^1.13.0:
+rollup@^1.13.1:
-  version "1.13.0"
+  version "1.15.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.13.0.tgz#8313fc6d9762e28301b4b89cc0a56233659a67b6"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.15.5.tgz#1c1f7ef799d5b297aab6eb49ca7a6ab9c8aae6a0"
-  integrity sha512-pW4G4cQmtEmbg4/CoFYc2AYeKiGpMAVak7kFpch1UJnYkXMn/34L8cD0kxkmjJNpJ/NagOHVdCwdkbtCEuDEww==
+  integrity sha512-Dix1YCY6BlsVK20SjQHBjKqxW2K+lqNr6BlCKxtdZuYqmUWLm8NzKHdrJyiFFjUO2hSI4wiC7apE+jAkDA3fEQ==
   dependencies:
     "@types/estree" "0.0.39"
-    "@types/node" "^12.0.3"
+    "@types/node" "^12.0.8"
     acorn "^6.1.1"
 
 run-async@^2.2.0: