Fix merge conflicts

1 files changed, 348 insertions, 173 deletions

diff --git a/dist/plyr.polyfilled.mjs b/dist/plyr.polyfilled.mjs
index e9059602..c82c8bd5 100644
--- a/dist/plyr.polyfilled.mjs
+++ b/dist/plyr.polyfilled.mjs
@@ -263,7 +263,7 @@ var shared = createCommonjsModule(function (module) {
 (module.exports = function (key, value) {
   return sharedStore[key] || (sharedStore[key] = value !== undefined ? value : {});
 })('versions', []).push({
-  version: '3.6.4',
+  version: '3.6.5',
   mode:  'global',
   copyright: '© 2020 Denis Pushkarev (zloirock.ru)'
 });
@@ -3055,7 +3055,7 @@ var INVALID_HOST = 'Invalid host';
 var INVALID_PORT = 'Invalid port';
 
 var ALPHA = /[A-Za-z]/;
-var ALPHANUMERIC = /[\d+\-.A-Za-z]/;
+var ALPHANUMERIC = /[\d+-.A-Za-z]/;
 var DIGIT = /\d/;
 var HEX_START = /^(0x|0X)/;
 var OCT = /^[0-7]+$/;
@@ -4117,6 +4117,42 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -6002,7 +6038,13 @@ if (!set$1 || !clear) {
     defer = functionBindContext(port.postMessage, port, 1);
   // Browsers with postMessage, skip WebWorkers
   // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
-  } else if (global_1.addEventListener && typeof postMessage == 'function' && !global_1.importScripts && !fails(post)) {
+  } else if (
+    global_1.addEventListener &&
+    typeof postMessage == 'function' &&
+    !global_1.importScripts &&
+    !fails(post) &&
+    location.protocol !== 'file:'
+  ) {
     defer = post;
     global_1.addEventListener('message', listener, false);
   // IE8-
@@ -6611,7 +6653,7 @@ var isTrack = function isTrack(input) {
 };
 
 var isPromise = function isPromise(input) {
-  return instanceOf$1(input, Promise);
+  return instanceOf$1(input, Promise) && isFunction$1(input.then);
 };
 
 var isEmpty$1 = function isEmpty(input) {
@@ -7003,12 +7045,33 @@ function hasClass(element, className) {
 } // Element matches selector
 
 function matches$1(element, selector) {
+  var _Element = Element,
+      prototype = _Element.prototype;
 
   function match() {
     return Array.from(document.querySelectorAll(selector)).includes(this);
   }
 
-  var method =  match;
+  var method = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match;
+  return method.call(element, selector);
+} // Closest ancestor element matching selector (also tests element itself)
+
+function closest(element, selector) {
+  var _Element2 = Element,
+      prototype = _Element2.prototype; // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
+
+  function closestElement() {
+    var el = this;
+
+    do {
+      if (matches$1.matches(el, selector)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+
+    return null;
+  }
+
+  var method = prototype.closest || closestElement;
   return method.call(element, selector);
 } // Find all elements
 
@@ -7280,6 +7343,19 @@ function ready() {
   }).then(function () {});
 }
 
+/**
+ * Silence a Promise-like object.
+ * This is useful for avoiding non-harmful, but potentially confusing "uncaught
+ * play promise" rejection error messages.
+ * @param  {Object} value An object that may or may not be `Promise`-like.
+ */
+
+function silencePromise(value) {
+  if (is$1.promise(value)) {
+    value.then(null, function () {});
+  }
+}
+
 function validateRatio(input) {
   if (!is$1.array(input) && (!is$1.string(input) || !input.includes(':'))) {
     return false;
@@ -7348,8 +7424,8 @@ function setAspectRatio(input) {
   var padding = 100 / w * h;
   wrapper.style.paddingBottom = "".concat(padding, "%"); // For Vimeo we have an extra <div> to hide the standard controls and UI
 
-  if (this.isVimeo && this.supported.ui) {
-    var height = 240;
+  if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
+    var height = 100 / this.media.offsetWidth * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
     var offset = (height - padding) / (height / 50);
     this.media.style.transform = "translateY(-".concat(offset, "%)");
   } else if (this.isHTML5) {
@@ -7455,7 +7531,7 @@ var html5 = {
               player.currentTime = currentTime; // Resume playing
 
               if (!paused) {
-                player.play();
+                silencePromise(player.play());
               }
             }); // Load new source
 
@@ -7502,7 +7578,7 @@ function dedupe(array) {
   });
 } // Get the closest value in an array
 
-function closest(array, value) {
+function closest$1(array, value) {
   if (!is$1.array(array) || !array.length) {
     return null;
   }
@@ -7619,19 +7695,19 @@ function getPercentage(current, max) {
   return (current / max * 100).toFixed(2);
 } // Replace all occurances of a string in a string
 
-function replaceAll() {
+var replaceAll = function replaceAll() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var find = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   var replace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString());
-} // Convert to title case
+}; // Convert to title case
 
-function toTitleCase() {
+var toTitleCase = function toTitleCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   return input.toString().replace(/\w\S*/g, function (text) {
     return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
   });
-} // Convert string to pascalCase
+}; // Convert string to pascalCase
 
 function toPascalCase() {
   var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -8738,39 +8814,39 @@ var controls = {
   // Set the looping options
 
   /* setLoopMenu() {
-      // Menu required
-      if (!is.element(this.elements.settings.panels.loop)) {
-          return;
-      }
-       const options = ['start', 'end', 'all', 'reset'];
-      const list = this.elements.settings.panels.loop.querySelector('[role="menu"]');
-       // Show the pane and tab
-      toggleHidden(this.elements.settings.buttons.loop, false);
-      toggleHidden(this.elements.settings.panels.loop, false);
-       // Toggle the pane and tab
-      const toggle = !is.empty(this.loop.options);
-      controls.toggleMenuButton.call(this, 'loop', toggle);
-       // Empty the menu
-      emptyElement(list);
-       options.forEach(option => {
-          const item = createElement('li');
-           const button = createElement(
-              'button',
-              extend(getAttributesFromSelector(this.config.selectors.buttons.loop), {
-                  type: 'button',
-                  class: this.config.classNames.control,
-                  'data-plyr-loop-action': option,
-              }),
-              i18n.get(option, this.config)
-          );
-           if (['start', 'end'].includes(option)) {
-              const badge = controls.createBadge.call(this, '00:00');
-              button.appendChild(badge);
-          }
-           item.appendChild(button);
-          list.appendChild(item);
-      });
-  }, */
+        // Menu required
+        if (!is.element(this.elements.settings.panels.loop)) {
+            return;
+        }
+         const options = ['start', 'end', 'all', 'reset'];
+        const list = this.elements.settings.panels.loop.querySelector('[role="menu"]');
+         // Show the pane and tab
+        toggleHidden(this.elements.settings.buttons.loop, false);
+        toggleHidden(this.elements.settings.panels.loop, false);
+         // Toggle the pane and tab
+        const toggle = !is.empty(this.loop.options);
+        controls.toggleMenuButton.call(this, 'loop', toggle);
+         // Empty the menu
+        emptyElement(list);
+         options.forEach(option => {
+            const item = createElement('li');
+             const button = createElement(
+                'button',
+                extend(getAttributesFromSelector(this.config.selectors.buttons.loop), {
+                    type: 'button',
+                    class: this.config.classNames.control,
+                    'data-plyr-loop-action': option,
+                }),
+                i18n.get(option, this.config)
+            );
+             if (['start', 'end'].includes(option)) {
+                const badge = controls.createBadge.call(this, '00:00');
+                button.appendChild(badge);
+            }
+             item.appendChild(button);
+            list.appendChild(item);
+        });
+    }, */
   // Get current selected caption language
   // TODO: rework this to user the getter in the API?
   // Set a list of available captions languages
@@ -9572,9 +9648,15 @@ var captions = {
         meta.set(track, {
           default: track.mode === 'showing'
         }); // Turn off native caption rendering to avoid double captions
+        // Note: mode='hidden' forces a track to download. To ensure every track
+        // isn't downloaded at once, only 'showing' tracks should be reassigned
         // eslint-disable-next-line no-param-reassign
 
-        track.mode = 'hidden'; // Add event listener for cue changes
+        if (track.mode === 'showing') {
+          // eslint-disable-next-line no-param-reassign
+          track.mode = 'hidden';
+        } // Add event listener for cue changes
+
 
         on.call(_this, track, 'cuechange', function () {
           return captions.updateCues.call(_this);
@@ -9598,6 +9680,8 @@ var captions = {
   // Toggle captions display
   // Used internally for the toggleCaptions method, with the passive option forced to false
   toggle: function toggle(input) {
+    var _this2 = this;
+
     var passive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
     // If there's no full support
@@ -9644,7 +9728,15 @@ var captions = {
       controls.updateSetting.call(this, 'captions'); // Trigger event (not used internally)
 
       triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
-    }
+    } // Wait for the call stack to clear before setting mode='hidden'
+    // on the active track - forcing the browser to download it
+
+
+    setTimeout(function () {
+      if (active && _this2.captions.toggled) {
+        _this2.captions.currentTrackNode.mode = 'hidden';
+      }
+    });
   },
   // Set captions by track index
   // Used internally for the currentTrack setter with the passive option forced to false
@@ -9725,7 +9817,7 @@ var captions = {
   // 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: function getTracks() {
-    var _this2 = this;
+    var _this3 = this;
 
     var update = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     // Handle media or textTracks missing or null
@@ -9733,20 +9825,20 @@ var captions = {
     // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata)
 
     return tracks.filter(function (track) {
-      return !_this2.isHTML5 || update || _this2.captions.meta.has(track);
+      return !_this3.isHTML5 || update || _this3.captions.meta.has(track);
     }).filter(function (track) {
       return ['captions', 'subtitles'].includes(track.kind);
     });
   },
   // Match tracks based on languages and get the first
   findTrack: function findTrack(languages) {
-    var _this3 = this;
+    var _this4 = this;
 
     var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var tracks = captions.getTracks.call(this);
 
     var sortIsDefault = function sortIsDefault(track) {
-      return Number((_this3.captions.meta.get(track) || {}).default);
+      return Number((_this4.captions.meta.get(track) || {}).default);
     };
 
     var sorted = Array.from(tracks).sort(function (a, b) {
@@ -9879,7 +9971,7 @@ var defaults$1 = {
   // Sprite (for icons)
   loadSprite: true,
   iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.6.1/plyr.svg',
   // Blank video (used to prevent errors on source change)
   blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
   // Quality default
@@ -9927,6 +10019,9 @@ var defaults$1 = {
     fallback: true,
     // Fallback using full viewport/window
     iosNative: false // Use the native fullscreen in iOS (disables custom controls)
+    // Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
+    // Non-ancestors of the player element will be ignored
+    // container: null, // defaults to the player element
 
   },
   // Local storage
@@ -10164,16 +10259,16 @@ var defaults$1 = {
     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,
+    noCookie: true,
     // Whether to use an alternative version of YouTube without cookies
     rel: 0,
     // No related vids
@@ -10283,7 +10378,10 @@ var Fullscreen = /*#__PURE__*/function () {
       y: 0
     }; // Force the use of 'full window/browser' rather than fullscreen
 
-    this.forceFallback = player.config.fullscreen.fallback === 'force'; // Register event listeners
+    this.forceFallback = player.config.fullscreen.fallback === 'force'; // Get the fullscreen element
+    // Checks container is an ancestor, defaults to null
+
+    this.player.elements.fullscreen = player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container); // Register event listeners
     // Handle event (incase user presses escape etc)
 
     on.call(this.player, document, this.prefix === 'ms' ? 'MSFullscreenChange' : "".concat(this.prefix, "fullscreenchange"), function () {
@@ -10456,7 +10554,7 @@ var Fullscreen = /*#__PURE__*/function () {
 
       if (browser.isIos && this.player.config.fullscreen.iosNative) {
         this.target.webkitExitFullscreen();
-        this.player.play();
+        silencePromise(this.player.play());
       } else if (!Fullscreen.native || this.forceFallback) {
         this.toggleFallback(false);
       } else if (!this.prefix) {
@@ -10503,13 +10601,13 @@ var Fullscreen = /*#__PURE__*/function () {
       }
 
       var element = !this.prefix ? document.fullscreenElement : document["".concat(this.prefix).concat(this.property, "Element")];
-      return element === this.target;
+      return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
     } // Get target element
 
   }, {
     key: "target",
     get: function get() {
-      return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container;
+      return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.fullscreen || this.player.elements.container;
     }
   }], [{
     key: "native",
@@ -10718,12 +10816,7 @@ var 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);
-    } // Wait until ui is ready
-
+    this.media.setAttribute('data-poster', poster); // Wait until ui is ready
 
     return ready.call(this) // Load image
     .then(function () {
@@ -10799,6 +10892,26 @@ var ui = {
 
       this.toggleControls(Boolean(force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek));
     }
+  },
+  // Migrate any custom properties from the media to the parent
+  migrateStyles: function migrateStyles() {
+    var _this5 = this;
+
+    // Loop through values (as they are the keys when the object is spread 🤔)
+    Object.values(_objectSpread2({}, this.media.style)) // We're only fussed about Plyr specific properties
+    .filter(function (key) {
+      return !is$1.empty(key) && key.startsWith('--plyr');
+    }).forEach(function (key) {
+      // Set on the container
+      _this5.elements.container.style.setProperty(key, _this5.media.style.getPropertyValue(key)); // Clean up from media element
+
+
+      _this5.media.style.removeProperty(key);
+    }); // Remove attribute if empty
+
+    if (is$1.empty(this.media.style)) {
+      this.media.removeAttribute('style');
+    }
   }
 };
 
@@ -10893,7 +11006,7 @@ var Listeners = /*#__PURE__*/function () {
           case 75:
             // Space and K key
             if (!repeat) {
-              player.togglePlay();
+              silencePromise(player.togglePlay());
             }
 
             break;
@@ -11007,15 +11120,17 @@ var Listeners = /*#__PURE__*/function () {
       removeCurrent(); // Delay the adding of classname until the focus has changed
       // This event fires before the focusin event
 
-      this.focusTimer = setTimeout(function () {
-        var focused = document.activeElement; // Ignore if current focus element isn't inside the player
+      if (event.type !== 'focusout') {
+        this.focusTimer = setTimeout(function () {
+          var focused = document.activeElement; // Ignore if current focus element isn't inside the player
 
-        if (!elements.container.contains(focused)) {
-          return;
-        }
+          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
 
   }, {
@@ -11033,7 +11148,7 @@ var Listeners = /*#__PURE__*/function () {
 
       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
 
   }, {
@@ -11076,7 +11191,7 @@ var Listeners = /*#__PURE__*/function () {
       }); // Set a gutter for Vimeo
 
       var setGutter = function setGutter(ratio, padding, toggle) {
-        if (!player.isVimeo) {
+        if (!player.isVimeo || player.config.vimeo.premium) {
           return;
         }
 
@@ -11133,7 +11248,7 @@ var Listeners = /*#__PURE__*/function () {
             ratio = _setPlayerSize.ratio; // Set Vimeo gutter
 
 
-        setGutter(ratio, padding, isEnter); // If not using native fullscreen, we need to check for resizes of viewport
+        setGutter(ratio, padding, isEnter); // If not using native browser fullscreen API, we need to check for resizes of viewport
 
         if (!usingNative) {
           if (isEnter) {
@@ -11211,9 +11326,13 @@ var Listeners = /*#__PURE__*/function () {
           if (player.ended) {
             _this.proxy(event, player.restart, 'restart');
 
-            _this.proxy(event, player.play, 'play');
+            _this.proxy(event, function () {
+              silencePromise(player.play());
+            }, 'play');
           } else {
-            _this.proxy(event, player.togglePlay, 'play');
+            _this.proxy(event, function () {
+              silencePromise(player.togglePlay());
+            }, 'play');
           }
         });
       } // Disable right click
@@ -11311,7 +11430,9 @@ var Listeners = /*#__PURE__*/function () {
 
       if (elements.buttons.play) {
         Array.from(elements.buttons.play).forEach(function (button) {
-          _this3.bind(button, 'click', player.togglePlay, 'play');
+          _this3.bind(button, 'click', function () {
+            silencePromise(player.togglePlay());
+          }, 'play');
         });
       } // Pause
 
@@ -11408,7 +11529,7 @@ var Listeners = /*#__PURE__*/function () {
 
         if (play && done) {
           seek.removeAttribute(attribute);
-          player.play();
+          silencePromise(player.play());
         } else if (!done && player.playing) {
           seek.setAttribute(attribute, '');
           player.pause();
@@ -11506,7 +11627,18 @@ var Listeners = /*#__PURE__*/function () {
 
       this.bind(elements.controls, 'mouseenter mouseleave', function (event) {
         elements.controls.hover = !player.touch && event.type === 'mouseenter';
-      }); // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting)
+      }); // Also update controls.hover state for any non-player children of fullscreen element (as above)
+
+      if (elements.fullscreen) {
+        Array.from(elements.fullscreen.children).filter(function (c) {
+          return !c.contains(elements.container);
+        }).forEach(function (child) {
+          _this3.bind(child, 'mouseenter mouseleave', function (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', function (event) {
         elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type);
@@ -11975,15 +12107,28 @@ var vimeo = {
     var _this = this;
 
     var player = this;
-    var config = player.config.vimeo; // Get Vimeo params for the iframe
+    var config = player.config.vimeo;
+
+    var premium = config.premium,
+        referrerPolicy = config.referrerPolicy,
+        frameParams = _objectWithoutProperties(config, ["premium", "referrerPolicy"]); // If the owner has a pro or premium account then we can hide controls etc
+
 
-    var params = buildUrlParams(extend({}, {
+    if (premium) {
+      Object.assign(frameParams, {
+        controls: false,
+        sidedock: false
+      });
+    } // Get Vimeo params for the iframe
+
+
+    var params = buildUrlParams(_objectSpread2({
       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
+    }, frameParams)); // Get the source URL or ID
 
     var source = player.media.getAttribute('src'); // Get from <div> if needed
 
@@ -11997,22 +12142,27 @@ var vimeo = {
     var 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
+    iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture'); // Set the referrer policy if required
 
-    if (!is$1.empty(config.referrerPolicy)) {
-      iframe.setAttribute('referrerPolicy', config.referrerPolicy);
-    } // Get poster, if already set
+    if (!is$1.empty(referrerPolicy)) {
+      iframe.setAttribute('referrerPolicy', referrerPolicy);
+    } // Inject the package
 
 
-    var poster = player.poster; // Inject the package
+    var poster = player.poster;
+
+    if (premium) {
+      iframe.setAttribute('data-poster', poster);
+      player.media = replaceElement(iframe, player.media);
+    } else {
+      var wrapper = createElement('div', {
+        class: player.config.classNames.embedContainer,
+        'data-poster': poster
+      });
+      wrapper.appendChild(iframe);
+      player.media = replaceElement(wrapper, player.media);
+    } // Get poster image
 
-    var wrapper = createElement('div', {
-      poster: 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(function (response) {
       if (is$1.empty(response)) {
@@ -12096,6 +12246,9 @@ var vimeo = {
         player.embed.setPlaybackRate(input).then(function () {
           speed = input;
           triggerEvent.call(player, player.media, 'ratechange');
+        }).catch(function () {
+          // Cannot set Playback Rate, Video is probably not on Pro account
+          player.options.speed = [1];
         });
       }
     }); // Volume
@@ -12380,7 +12533,7 @@ var youtube = {
 
     var container = createElement('div', {
       id: id,
-      poster: poster
+      'data-poster': poster
     });
     player.media = replaceElement(container, player.media); // Id to poster wrapper
 
@@ -12698,14 +12851,12 @@ var media = {
         class: this.config.classNames.video
       }); // Wrap the video in a container
 
-      wrap$1(this.media, this.elements.wrapper); // Faux poster container
+      wrap$1(this.media, this.elements.wrapper); // Poster image container
 
-      if (this.isEmbed) {
-        this.elements.poster = createElement('div', {
-          class: this.config.classNames.poster
-        });
-        this.elements.wrapper.appendChild(this.elements.poster);
-      }
+      this.elements.poster = createElement('div', {
+        class: this.config.classNames.poster
+      });
+      this.elements.wrapper.appendChild(this.elements.poster);
     }
 
     if (this.isHTML5) {
@@ -12832,6 +12983,8 @@ var Ads = /*#__PURE__*/function () {
      * mobile devices, this initialization is done as the result of a user action.
      */
     value: function setupIMA() {
+      var _this4 = this;
+
       // Create the container for our advertisements
       this.elements.container = createElement('div', {
         class: this.player.config.classNames.ads
@@ -12844,7 +12997,16 @@ var Ads = /*#__PURE__*/function () {
 
       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); // Request video ads to be pre-loaded
+      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, function (event) {
+        return _this4.onAdsManagerLoaded(event);
+      }, false);
+      this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, function (error) {
+        return _this4.onAdError(error);
+      }, false); // Request video ads to be pre-loaded
 
       this.requestAds();
     }
@@ -12855,21 +13017,10 @@ var Ads = /*#__PURE__*/function () {
   }, {
     key: "requestAds",
     value: function requestAds() {
-      var _this4 = this;
-
       var container = this.player.elements.container;
 
       try {
-        // 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, function (event) {
-          return _this4.onAdsManagerLoaded(event);
-        }, false);
-        this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, function (error) {
-          return _this4.onAdError(error);
-        }, false); // Request video ads
-
+        // Request video ads
         var 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
@@ -13048,7 +13199,13 @@ var Ads = /*#__PURE__*/function () {
           // };
           // 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
-          this.loadAds();
+          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:
@@ -13184,7 +13341,7 @@ var Ads = /*#__PURE__*/function () {
 
       this.playing = false; // Play video
 
-      this.player.media.play();
+      silencePromise(this.player.media.play());
     }
     /**
      * Pause our video
@@ -13241,7 +13398,9 @@ var Ads = /*#__PURE__*/function () {
           _this11.on('loaded', resolve);
 
           _this11.player.debug.log(_this11.manager);
-        }); // Now request some new advertisements
+        }); // Now that the manager has been destroyed set it to also be un-initialized
+
+        _this11.initialized = false; // Now request some new advertisements
 
         _this11.requestAds();
       }).catch(function () {});
@@ -13536,15 +13695,10 @@ var PreviewThumbnails = /*#__PURE__*/function () {
 
         if (is$1.empty(src)) {
           throw new Error('Missing previewThumbnails.src config attribute');
-        } // If string, convert into single-element list
-
+        } // Resolve promise
 
-        var urls = is$1.string(src) ? [src] : src; // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
 
-        var promises = urls.map(function (u) {
-          return _this2.getThumbnail(u);
-        });
-        Promise.all(promises).then(function () {
+        var sortAndResolve = function sortAndResolve() {
           // Sort smallest to biggest (e.g., [120p, 480p, 1080p])
           _this2.thumbnails.sort(function (x, y) {
             return x.height - y.height;
@@ -13553,7 +13707,25 @@ var PreviewThumbnails = /*#__PURE__*/function () {
           _this2.player.debug.log('Preview thumbnails', _this2.thumbnails);
 
           resolve();
-        });
+        }; // Via callback()
+
+
+        if (is$1.function(src)) {
+          src(function (thumbnails) {
+            _this2.thumbnails = thumbnails;
+            sortAndResolve();
+          });
+        } // VTT urls
+        else {
+            // If string, convert into single-element list
+            var urls = is$1.string(src) ? [src] : src; // Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
+
+            var promises = urls.map(function (u) {
+              return _this2.getThumbnail(u);
+            }); // Resolve
+
+            Promise.all(promises).then(sortAndResolve);
+          }
       });
     } // Process individual VTT file
 
@@ -14341,6 +14513,7 @@ var Plyr = /*#__PURE__*/function () {
 
     this.elements = {
       container: null,
+      fullscreen: null,
       captions: null,
       buttons: {},
       display: {},
@@ -14515,8 +14688,10 @@ var Plyr = /*#__PURE__*/function () {
         tabindex: 0
       });
       wrap$1(this.media, this.elements.container);
-    } // Add style hook
+    } // Migrate custom properties from media to container (so they work 😉)
+
 
+    ui.migrateStyles.call(this); // Add style hook
 
     ui.addStyleHook.call(this); // Setup media
 
@@ -14526,10 +14701,12 @@ var Plyr = /*#__PURE__*/function () {
       on.call(this, this.elements.container, this.config.events.join(' '), function (event) {
         _this.debug.log("event: ".concat(event.type));
       });
-    } // Setup interface
-    // If embed but not fully supported, build interface now to avoid flash of controls
+    } // Setup fullscreen
 
 
+    this.fullscreen = new Fullscreen(this); // 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);
     } // Container listeners
@@ -14537,9 +14714,7 @@ var Plyr = /*#__PURE__*/function () {
 
     this.listeners.container(); // Global listeners
 
-    this.listeners.global(); // Setup fullscreen
-
-    this.fullscreen = new Fullscreen(this); // Setup ads if provided
+    this.listeners.global(); // Setup ads if provided
 
     if (this.config.ads.enabled) {
       this.ads = new Ads(this);
@@ -14548,7 +14723,7 @@ var Plyr = /*#__PURE__*/function () {
 
     if (this.isHTML5 && this.config.autoplay) {
       setTimeout(function () {
-        return _this.play();
+        return silencePromise(_this.play());
       }, 10);
     } // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek
 
@@ -14585,7 +14760,7 @@ var Plyr = /*#__PURE__*/function () {
         this.ads.managerPromise.then(function () {
           return _this2.ads.play();
         }).catch(function () {
-          return _this2.media.play();
+          return silencePromise(_this2.media.play());
         });
       } // Return the promise (for HTML5)
 
@@ -15238,7 +15413,7 @@ var Plyr = /*#__PURE__*/function () {
       var updateStorage = true;
 
       if (!options.includes(quality)) {
-        var value = closest(options, quality);
+        var value = closest$1(options, quality);
         this.debug.warn("Unsupported quality option: ".concat(quality, ", using ").concat(value, " instead"));
         quality = value; // Don't update storage if quality is not supported
 
@@ -15277,41 +15452,41 @@ var Plyr = /*#__PURE__*/function () {
       this.media.loop = toggle; // Set default to be a true toggle
 
       /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
-       switch (type) {
-          case 'start':
-              if (this.config.loop.end && this.config.loop.end <= this.currentTime) {
-                  this.config.loop.end = null;
-              }
-              this.config.loop.start = this.currentTime;
-              // this.config.loop.indicator.start = this.elements.display.played.value;
-              break;
-           case 'end':
-              if (this.config.loop.start >= this.currentTime) {
-                  return this;
-              }
-              this.config.loop.end = this.currentTime;
-              // this.config.loop.indicator.end = this.elements.display.played.value;
-              break;
-           case 'all':
-              this.config.loop.start = 0;
-              this.config.loop.end = this.duration - 2;
-              this.config.loop.indicator.start = 0;
-              this.config.loop.indicator.end = 100;
-              break;
-           case 'toggle':
-              if (this.config.loop.active) {
-                  this.config.loop.start = 0;
-                  this.config.loop.end = null;
-              } else {
+           switch (type) {
+              case 'start':
+                  if (this.config.loop.end && this.config.loop.end <= this.currentTime) {
+                      this.config.loop.end = null;
+                  }
+                  this.config.loop.start = this.currentTime;
+                  // this.config.loop.indicator.start = this.elements.display.played.value;
+                  break;
+               case 'end':
+                  if (this.config.loop.start >= this.currentTime) {
+                      return this;
+                  }
+                  this.config.loop.end = this.currentTime;
+                  // this.config.loop.indicator.end = this.elements.display.played.value;
+                  break;
+               case 'all':
                   this.config.loop.start = 0;
                   this.config.loop.end = this.duration - 2;
-              }
-              break;
-           default:
-              this.config.loop.start = 0;
-              this.config.loop.end = null;
-              break;
-      } */
+                  this.config.loop.indicator.start = 0;
+                  this.config.loop.indicator.end = 100;
+                  break;
+               case 'toggle':
+                  if (this.config.loop.active) {
+                      this.config.loop.start = 0;
+                      this.config.loop.end = null;
+                  } else {
+                      this.config.loop.start = 0;
+                      this.config.loop.end = this.duration - 2;
+                  }
+                  break;
+               default:
+                  this.config.loop.start = 0;
+                  this.config.loop.end = null;
+                  break;
+          } */
     }
     /**
      * Get current loop state
@@ -15383,7 +15558,7 @@ var Plyr = /*#__PURE__*/function () {
         return null;
       }
 
-      return this.media.getAttribute('poster');
+      return this.media.getAttribute('poster') || this.media.getAttribute('data-poster');
     }
     /**
      * Get the current aspect ratio in use