@clappr/player 0.4.3 → 0.4.7

package/dist/clappr.plainhtml5.js

@@ -4,47 +4,36 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Clappr = factory());
 }(this, (function () { 'use strict';
 
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
-
-    return obj;
-  }
-
-  function ownKeys(object, enumerableOnly) {
+  function ownKeys$1(object, enumerableOnly) {
     var keys = Object.keys(object);
 
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
       keys.push.apply(keys, symbols);
     }
 
     return keys;
   }
 
-  function _objectSpread2(target) {
+  function _objectSpread2$1(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
 
       if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
+        ownKeys$1(Object(source), true).forEach(function (key) {
+          _defineProperty$1(target, key, source[key]);
         });
       } else if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
       } else {
-        ownKeys(Object(source)).forEach(function (key) {
+        ownKeys$1(Object(source)).forEach(function (key) {
           Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
       }
@@ -53,6 +42,21 @@
     return target;
   }
 
+  function _defineProperty$1(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -69,13 +73,13 @@
     return _typeof(obj);
   }
 
-  function _classCallCheck(instance, Constructor) {
+  function _classCallCheck$1(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
     }
   }
 
-  function _defineProperties(target, props) {
+  function _defineProperties$1(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
       descriptor.enumerable = descriptor.enumerable || false;
@@ -85,13 +89,13 @@
     }
   }
 
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
+  function _createClass$1(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties$1(Constructor, staticProps);
     return Constructor;
   }
 
-  function _defineProperty$1(obj, key, value) {
+  function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
         value: value,
@@ -106,7 +110,7 @@
     return obj;
   }
 
-  function ownKeys$1(object, enumerableOnly) {
+  function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
 
     if (Object.getOwnPropertySymbols) {
@@ -120,18 +124,18 @@
     return keys;
   }
 
-  function _objectSpread2$1(target) {
+  function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i] != null ? arguments[i] : {};
 
       if (i % 2) {
-        ownKeys$1(Object(source), true).forEach(function (key) {
-          _defineProperty$1(target, key, source[key]);
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
         });
       } else if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
       } else {
-        ownKeys$1(Object(source)).forEach(function (key) {
+        ownKeys(Object(source)).forEach(function (key) {
           Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
       }
@@ -140,7 +144,7 @@
     return target;
   }
 
-  function _inherits(subClass, superClass) {
+  function _inherits$1(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
     }
@@ -152,26 +156,26 @@
         configurable: true
       }
     });
-    if (superClass) _setPrototypeOf(subClass, superClass);
+    if (superClass) _setPrototypeOf$1(subClass, superClass);
   }
 
-  function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  function _getPrototypeOf$1(o) {
+    _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
-    return _getPrototypeOf(o);
+    return _getPrototypeOf$1(o);
   }
 
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  function _setPrototypeOf$1(o, p) {
+    _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
 
-    return _setPrototypeOf(o, p);
+    return _setPrototypeOf$1(o, p);
   }
 
-  function _isNativeReflectConstruct() {
+  function _isNativeReflectConstruct$1() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
     if (Reflect.construct.sham) return false;
     if (typeof Proxy === "function") return true;
@@ -184,7 +188,7 @@
     }
   }
 
-  function _assertThisInitialized(self) {
+  function _assertThisInitialized$1(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
@@ -192,48 +196,48 @@
     return self;
   }
 
-  function _possibleConstructorReturn(self, call) {
+  function _possibleConstructorReturn$1(self, call) {
     if (call && (typeof call === "object" || typeof call === "function")) {
       return call;
     }
 
-    return _assertThisInitialized(self);
+    return _assertThisInitialized$1(self);
   }
 
-  function _createSuper(Derived) {
-    var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  function _createSuper$1(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
 
     return function _createSuperInternal() {
-      var Super = _getPrototypeOf(Derived),
+      var Super = _getPrototypeOf$1(Derived),
           result;
 
       if (hasNativeReflectConstruct) {
-        var NewTarget = _getPrototypeOf(this).constructor;
+        var NewTarget = _getPrototypeOf$1(this).constructor;
 
         result = Reflect.construct(Super, arguments, NewTarget);
       } else {
         result = Super.apply(this, arguments);
       }
 
-      return _possibleConstructorReturn(this, result);
+      return _possibleConstructorReturn$1(this, result);
     };
   }
 
-  function _superPropBase(object, property) {
+  function _superPropBase$1(object, property) {
     while (!Object.prototype.hasOwnProperty.call(object, property)) {
-      object = _getPrototypeOf(object);
+      object = _getPrototypeOf$1(object);
       if (object === null) break;
     }
 
     return object;
   }
 
-  function _get(target, property, receiver) {
+  function _get$1(target, property, receiver) {
     if (typeof Reflect !== "undefined" && Reflect.get) {
-      _get = Reflect.get;
+      _get$1 = Reflect.get;
     } else {
-      _get = function _get(target, property, receiver) {
-        var base = _superPropBase(target, property);
+      _get$1 = function _get(target, property, receiver) {
+        var base = _superPropBase$1(target, property);
 
         if (!base) return;
         var desc = Object.getOwnPropertyDescriptor(base, property);
@@ -246,7 +250,7 @@
       };
     }
 
-    return _get(target, property, receiver || target);
+    return _get$1(target, property, receiver || target);
   }
 
   function _slicedToArray(arr, i) {
@@ -3004,23 +3008,23 @@
 
     return obj;
   }
-  function extend(parent, properties) {
+  function extend$1(parent, properties) {
     var Surrogate = /*#__PURE__*/function (_parent) {
-      _inherits(Surrogate, _parent);
+      _inherits$1(Surrogate, _parent);
 
-      var _super = _createSuper(Surrogate);
+      var _super = _createSuper$1(Surrogate);
 
       function Surrogate() {
         var _this;
 
-        _classCallCheck(this, Surrogate);
+        _classCallCheck$1(this, Surrogate);
 
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
 
         _this = _super.call.apply(_super, [this].concat(args));
-        if (properties.initialize) properties.initialize.apply(_assertThisInitialized(_this), args);
+        if (properties.initialize) properties.initialize.apply(_assertThisInitialized$1(_this), args);
         return _this;
       }
 
@@ -3030,7 +3034,7 @@
     assign(Surrogate.prototype, properties);
     return Surrogate;
   }
-  function formatTime(time, paddedHours) {
+  function formatTime$2(time, paddedHours) {
     if (!isFinite(time)) return '--:--';
     time = time * 1000;
     time = parseInt(time / 1000);
@@ -3052,7 +3056,7 @@
     out += ('0' + seconds).slice(-2);
     return out.trim();
   }
-  var Fullscreen = {
+  var Fullscreen$1 = {
     fullscreenElement: function fullscreenElement() {
       return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
     },
@@ -3080,12 +3084,12 @@
       return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled);
     }
   };
-  var Config = /*#__PURE__*/function () {
+  var Config$1 = /*#__PURE__*/function () {
     function Config() {
-      _classCallCheck(this, Config);
+      _classCallCheck$1(this, Config);
     }
 
-    _createClass(Config, null, [{
+    _createClass$1(Config, null, [{
       key: "_defaultConfig",
       value: function _defaultConfig() {
         return {
@@ -3133,10 +3137,10 @@
   }();
   var QueryString = /*#__PURE__*/function () {
     function QueryString() {
-      _classCallCheck(this, QueryString);
+      _classCallCheck$1(this, QueryString);
     }
 
-    _createClass(QueryString, null, [{
+    _createClass$1(QueryString, null, [{
       key: "parse",
       value: function parse(paramsString) {
         var match;
@@ -3229,7 +3233,7 @@
     return Date.now();
   } // remove the item from the array if it exists in the array
 
-  function removeArrayItem(arr, item) {
+  function removeArrayItem$1(arr, item) {
     var i = arr.indexOf(item);
     if (i >= 0) arr.splice(i, 1);
   } // find an item regardless of its letter case
@@ -3279,10 +3283,10 @@
 
   var DomRecycler = /*#__PURE__*/function () {
     function DomRecycler() {
-      _classCallCheck(this, DomRecycler);
+      _classCallCheck$1(this, DomRecycler);
     }
 
-    _createClass(DomRecycler, null, [{
+    _createClass$1(DomRecycler, null, [{
       key: "configure",
       value: function configure(options) {
         this.options = zepto.extend(true, this.options, options);
@@ -3314,13 +3318,13 @@
     function DoubleEventHandler() {
       var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 500;
 
-      _classCallCheck(this, DoubleEventHandler);
+      _classCallCheck$1(this, DoubleEventHandler);
 
       this.delay = delay;
       this.lastTime = 0;
     }
 
-    _createClass(DoubleEventHandler, [{
+    _createClass$1(DoubleEventHandler, [{
       key: "handle",
       value: function handle(event, cb) {
         var prevented = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -3340,13 +3344,13 @@
     return DoubleEventHandler;
   }();
   var Utils = {
-    Config: Config,
-    Fullscreen: Fullscreen,
+    Config: Config$1,
+    Fullscreen: Fullscreen$1,
     QueryString: QueryString,
     DomRecycler: DomRecycler,
     assign: assign,
-    extend: extend,
-    formatTime: formatTime,
+    extend: extend$1,
+    formatTime: formatTime$2,
     seekStringToSeconds: seekStringToSeconds,
     uniqueId: uniqueId,
     currentScriptUrl: currentScriptUrl,
@@ -3355,7 +3359,7 @@
     cancelAnimationFrame: cancelAnimationFrame,
     getBrowserLanguage: getBrowserLanguage,
     now: now,
-    removeArrayItem: removeArrayItem,
+    removeArrayItem: removeArrayItem$1,
     listContainsIgnoreCase: listContainsIgnoreCase,
     canAutoPlayMedia: canAutoPlayMedia,
     Media: Media,
@@ -3378,7 +3382,7 @@
   var DESCRIPTIONS = ['debug', 'info', 'warn', 'error', 'disabled'];
 
   var Log = /*#__PURE__*/function () {
-    _createClass(Log, [{
+    _createClass$1(Log, [{
       key: "level",
       get: function get() {
         return this._level;
@@ -3392,7 +3396,7 @@
       var level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : LEVEL_INFO;
       var offLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LEVEL_DISABLED;
 
-      _classCallCheck(this, Log);
+      _classCallCheck$1(this, Log);
 
       this.EXCLUDE_LIST = ['timeupdate', 'playback:timeupdate', 'playback:progress', 'container:hover', 'container:timeupdate', 'container:progress'];
       this.level = level;
@@ -3400,7 +3404,7 @@
       this.offLevel = offLevel;
     }
 
-    _createClass(Log, [{
+    _createClass$1(Log, [{
       key: "debug",
       value: function debug(klass) {
         this.log(klass, LEVEL_DEBUG, Array.prototype.slice.call(arguments, 1));
@@ -3574,10 +3578,10 @@
 
   var Events = /*#__PURE__*/function () {
     function Events() {
-      _classCallCheck(this, Events);
+      _classCallCheck$1(this, Events);
     }
 
-    _createClass(Events, [{
+    _createClass$1(Events, [{
       key: "on",
 
       /**
@@ -4304,6 +4308,8 @@
   Events.CONTAINER_CONTEXTMENU = 'container:contextmenu';
   Events.CONTAINER_MOUSE_ENTER = 'container:mouseenter';
   Events.CONTAINER_MOUSE_LEAVE = 'container:mouseleave';
+  Events.CONTAINER_MOUSE_UP = 'container:mouseup';
+  Events.CONTAINER_MOUSE_DOWN = 'container:mousedown';
   /**
    * Fired when the container seeks the video
    *
@@ -4454,11 +4460,11 @@
    */
 
   var BaseObject = /*#__PURE__*/function (_Events) {
-    _inherits(BaseObject, _Events);
+    _inherits$1(BaseObject, _Events);
 
-    var _super = _createSuper(BaseObject);
+    var _super = _createSuper$1(BaseObject);
 
-    _createClass(BaseObject, [{
+    _createClass$1(BaseObject, [{
       key: "options",
 
       /**
@@ -4481,7 +4487,7 @@
 
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-      _classCallCheck(this, BaseObject);
+      _classCallCheck$1(this, BaseObject);
 
       _this = _super.call(this, options);
       _this._options = options;
@@ -4612,11 +4618,11 @@
    */
 
   var UIObject = /*#__PURE__*/function (_BaseObject) {
-    _inherits(UIObject, _BaseObject);
+    _inherits$1(UIObject, _BaseObject);
 
-    var _super = _createSuper(UIObject);
+    var _super = _createSuper$1(UIObject);
 
-    _createClass(UIObject, [{
+    _createClass$1(UIObject, [{
       key: "tagName",
 
       /**
@@ -4712,7 +4718,7 @@
     function UIObject(options) {
       var _this;
 
-      _classCallCheck(this, UIObject);
+      _classCallCheck$1(this, UIObject);
 
       _this = _super.call(this, options);
       _this.cid = uniqueId('c');
@@ -4735,7 +4741,7 @@
      */
 
 
-    _createClass(UIObject, [{
+    _createClass$1(UIObject, [{
       key: "$",
       value: function $(selector) {
         return this.$el.find(selector);
@@ -4853,11 +4859,11 @@
    */
 
   var PlayerError = /*#__PURE__*/function (_BaseObject) {
-    _inherits(PlayerError, _BaseObject);
+    _inherits$1(PlayerError, _BaseObject);
 
-    var _super = _createSuper(PlayerError);
+    var _super = _createSuper$1(PlayerError);
 
-    _createClass(PlayerError, [{
+    _createClass$1(PlayerError, [{
       key: "name",
       get: function get() {
         return 'error';
@@ -4884,7 +4890,7 @@
       var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var core = arguments.length > 1 ? arguments[1] : undefined;
 
-      _classCallCheck(this, PlayerError);
+      _classCallCheck$1(this, PlayerError);
 
       _this = _super.call(this, options);
       _this.core = core;
@@ -4897,7 +4903,7 @@
      */
 
 
-    _createClass(PlayerError, [{
+    _createClass$1(PlayerError, [{
       key: "createError",
       value: function createError(err) {
         if (!this.core) {
@@ -4952,11 +4958,11 @@
   };
 
   var UICorePlugin = /*#__PURE__*/function (_UIObject) {
-    _inherits(UICorePlugin, _UIObject);
+    _inherits$1(UICorePlugin, _UIObject);
 
-    var _super = _createSuper(UICorePlugin);
+    var _super = _createSuper$1(UICorePlugin);
 
-    _createClass(UICorePlugin, [{
+    _createClass$1(UICorePlugin, [{
       key: "playerError",
       get: function get() {
         return this.core.playerError;
@@ -4966,7 +4972,7 @@
     function UICorePlugin(core) {
       var _this;
 
-      _classCallCheck(this, UICorePlugin);
+      _classCallCheck$1(this, UICorePlugin);
 
       _this = _super.call(this, core.options);
       _this.core = core;
@@ -4979,7 +4985,7 @@
       return _this;
     }
 
-    _createClass(UICorePlugin, [{
+    _createClass$1(UICorePlugin, [{
       key: "bindEvents",
       value: function bindEvents() {}
     }, {
@@ -5015,12 +5021,12 @@
   Object.assign(UICorePlugin.prototype, ErrorMixin);
 
   UICorePlugin.extend = function (properties) {
-    return extend(UICorePlugin, properties);
+    return extend$1(UICorePlugin, properties);
   };
 
   UICorePlugin.type = 'core';
 
-  var css_248z = ".container[data-container] {\n  position: absolute;\n  background-color: black;\n  height: 100%;\n  width: 100%;\n  max-width: 100%; }\n  .container[data-container] .chromeless {\n    cursor: default; }\n\n[data-player]:not(.nocursor) .container[data-container]:not(.chromeless).pointer-enabled {\n  cursor: pointer; }\n";
+  var css_248z$8 = ".container[data-container] {\n  position: absolute;\n  background-color: black;\n  height: 100%;\n  width: 100%;\n  max-width: 100%; }\n  .container[data-container] .chromeless {\n    cursor: default; }\n\n[data-player]:not(.nocursor) .container[data-container]:not(.chromeless).pointer-enabled {\n  cursor: pointer; }\n";
 
   /**
    * An abstraction to represent a container for a given playback
@@ -5032,11 +5038,11 @@
    */
 
   var Container = /*#__PURE__*/function (_UIObject) {
-    _inherits(Container, _UIObject);
+    _inherits$1(Container, _UIObject);
 
-    var _super = _createSuper(Container);
+    var _super = _createSuper$1(Container);
 
-    _createClass(Container, [{
+    _createClass$1(Container, [{
       key: "name",
 
       /**
@@ -5065,7 +5071,9 @@
           'touchend': 'dblTap',
           'contextmenu': 'onContextMenu',
           'mouseenter': 'mouseEnter',
-          'mouseleave': 'mouseLeave'
+          'mouseleave': 'mouseLeave',
+          'mouseup': 'onMouseUp',
+          'mousedown': 'onMouseDown'
         };
       }
       /**
@@ -5157,7 +5165,7 @@
     function Container(options, i18n, playerError) {
       var _this;
 
-      _classCallCheck(this, Container);
+      _classCallCheck$1(this, Container);
 
       _this = _super.call(this, options);
       _this._i18n = i18n;
@@ -5173,6 +5181,8 @@
       _this.clickTimer = null;
       _this.clickDelay = 200; // FIXME: could be a player option
 
+      _this.actionsMetadata = {};
+
       _this.bindEvents();
 
       return _this;
@@ -5207,7 +5217,7 @@
      */
 
 
-    _createClass(Container, [{
+    _createClass$1(Container, [{
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.playback, Events.PLAYBACK_PROGRESS, this.onProgress);
@@ -5373,43 +5383,60 @@
     }, {
       key: "playing",
       value: function playing() {
-        this.trigger(Events.CONTAINER_PLAY, this.name);
+        this.trigger(Events.CONTAINER_PLAY, this.name, this.actionsMetadata.playEvent || {});
+        this.actionsMetadata.playEvent = {};
       }
     }, {
       key: "paused",
       value: function paused() {
-        this.trigger(Events.CONTAINER_PAUSE, this.name);
+        this.trigger(Events.CONTAINER_PAUSE, this.name, this.actionsMetadata.pauseEvent || {});
+        this.actionsMetadata.pauseEvent = {};
+      }
+    }, {
+      key: "stopped",
+      value: function stopped() {
+        this.trigger(Events.CONTAINER_STOP, this.actionsMetadata.stopEvent || {});
+        this.actionsMetadata.stopEvent = {};
       }
       /**
        * plays the playback
        * @method play
+       * @param {Object} customData
        */
 
     }, {
       key: "play",
       value: function play() {
-        this.playback.play();
+        var customData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        this.actionsMetadata.playEvent = customData;
+        this.playback.play(customData);
       }
       /**
        * stops the playback
        * @method stop
+       * @param {Object} customData
        */
 
     }, {
       key: "stop",
       value: function stop() {
-        this.playback.stop();
+        var customData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        this.actionsMetadata.stopEvent = customData;
+        this.playback.stop(customData);
         this.currentTime = 0;
       }
       /**
        * pauses the playback
        * @method pause
+       * @param {Object} customData
        */
 
     }, {
       key: "pause",
       value: function pause() {
-        this.playback.pause();
+        var customData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        this.actionsMetadata.pauseEvent = customData;
+        this.playback.pause(customData);
       }
     }, {
       key: "onEnded",
@@ -5417,11 +5444,6 @@
         this.trigger(Events.CONTAINER_ENDED, this, this.name);
         this.currentTime = 0;
       }
-    }, {
-      key: "stopped",
-      value: function stopped() {
-        this.trigger(Events.CONTAINER_STOP);
-      }
     }, {
       key: "clicked",
       value: function clicked() {
@@ -5560,6 +5582,16 @@
       value: function mouseLeave() {
         if (!this.options.chromeless || this.options.allowUserInteraction) this.trigger(Events.CONTAINER_MOUSE_LEAVE);
       }
+    }, {
+      key: "mouseUp",
+      value: function mouseUp() {
+        if (!this.options.chromeless || this.options.allowUserInteraction) this.trigger(Events.CONTAINER_MOUSE_UP);
+      }
+    }, {
+      key: "mouseDown",
+      value: function mouseDown() {
+        if (!this.options.chromeless || this.options.allowUserInteraction) this.trigger(Events.CONTAINER_MOUSE_DOWN);
+      }
     }, {
       key: "settingsUpdate",
       value: function settingsUpdate() {
@@ -5648,7 +5680,7 @@
     }, {
       key: "render",
       value: function render() {
-        var style = Styler.getStyleFor(css_248z.toString(), {
+        var style = Styler.getStyleFor(css_248z$8.toString(), {
           baseUrl: this.options.baseUrl
         });
         this.$el.append(style[0]);
@@ -5673,11 +5705,11 @@
    */
 
   var Playback = /*#__PURE__*/function (_UIObject) {
-    _inherits(Playback, _UIObject);
+    _inherits$1(Playback, _UIObject);
 
-    var _super = _createSuper(Playback);
+    var _super = _createSuper$1(Playback);
 
-    _createClass(Playback, [{
+    _createClass$1(Playback, [{
       key: "isAudioOnly",
 
       /**
@@ -5739,7 +5771,7 @@
     function Playback(options, i18n, playerError) {
       var _this;
 
-      _classCallCheck(this, Playback);
+      _classCallCheck$1(this, Playback);
 
       _this = _super.call(this, options);
       _this.settings = {};
@@ -5755,7 +5787,7 @@
      */
 
 
-    _createClass(Playback, [{
+    _createClass$1(Playback, [{
       key: "consent",
       value: function consent(cb) {
         typeof cb === 'function' && cb();
@@ -5990,7 +6022,7 @@
   Object.assign(Playback.prototype, ErrorMixin);
 
   Playback.extend = function (properties) {
-    return extend(Playback, properties);
+    return extend$1(Playback, properties);
   };
   /**
    * checks if the playback can play a given `source`
@@ -6056,11 +6088,11 @@
   Playback.type = 'playback';
 
   var ContainerFactory = /*#__PURE__*/function (_BaseObject) {
-    _inherits(ContainerFactory, _BaseObject);
+    _inherits$1(ContainerFactory, _BaseObject);
 
-    var _super = _createSuper(ContainerFactory);
+    var _super = _createSuper$1(ContainerFactory);
 
-    _createClass(ContainerFactory, [{
+    _createClass$1(ContainerFactory, [{
       key: "options",
       get: function get() {
         return this._options;
@@ -6073,7 +6105,7 @@
     function ContainerFactory(options, loader, i18n, playerError) {
       var _this;
 
-      _classCallCheck(this, ContainerFactory);
+      _classCallCheck$1(this, ContainerFactory);
 
       _this = _super.call(this, options);
       _this._i18n = i18n;
@@ -6082,7 +6114,7 @@
       return _this;
     }
 
-    _createClass(ContainerFactory, [{
+    _createClass$1(ContainerFactory, [{
       key: "createContainers",
       value: function createContainers() {
         var _this2 = this;
@@ -6115,7 +6147,7 @@
 
         if (resolvedSource.match(/^\/\//)) resolvedSource = window.location.protocol + resolvedSource;
 
-        var options = _objectSpread2$1(_objectSpread2$1({}, this.options), {}, {
+        var options = _objectSpread2(_objectSpread2({}, this.options), {}, {
           src: resolvedSource,
           mimeType: mimeType
         });
@@ -6123,7 +6155,7 @@
         var playbackPlugin = this.findPlaybackPlugin(resolvedSource, mimeType); // Fallback to empty playback object until we sort out unsupported sources error without NoOp playback
 
         var playback = playbackPlugin ? new playbackPlugin(options, this._i18n, this.playerError) : new Playback();
-        options = _objectSpread2$1(_objectSpread2$1({}, options), {}, {
+        options = _objectSpread2(_objectSpread2({}, options), {}, {
           playback: playback
         });
         var container = new Container(options, this._i18n, this.playerError);
@@ -6147,9 +6179,9 @@
     return ContainerFactory;
   }(BaseObject);
 
-  var css_248z$1 = "[data-player] {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  transform: translate3d(0, 0, 0);\n  position: relative;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-style: normal;\n  font-weight: normal;\n  text-align: center;\n  overflow: hidden;\n  font-size: 100%;\n  font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n  text-shadow: 0 0 0;\n  box-sizing: border-box; }\n  [data-player]:focus {\n    outline: 0; }\n  [data-player] * {\n    box-sizing: inherit; }\n  [data-player] > * {\n    float: none;\n    max-width: none; }\n  [data-player] > div {\n    display: block; }\n  [data-player].fullscreen {\n    width: 100% !important;\n    height: 100% !important;\n    top: 0;\n    left: 0; }\n  [data-player].nocursor {\n    cursor: none; }\n\n.clappr-style {\n  display: none !important; }\n";
+  var css_248z$1$1 = "[data-player] {\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  -o-user-select: none;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  transform: translate3d(0, 0, 0);\n  position: relative;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-style: normal;\n  font-weight: normal;\n  text-align: center;\n  overflow: hidden;\n  font-size: 100%;\n  font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n  text-shadow: 0 0 0;\n  box-sizing: border-box; }\n  [data-player]:focus {\n    outline: 0; }\n  [data-player] * {\n    box-sizing: inherit; }\n  [data-player] > * {\n    float: none;\n    max-width: none; }\n  [data-player] > div {\n    display: block; }\n  [data-player].fullscreen {\n    width: 100% !important;\n    height: 100% !important;\n    top: 0;\n    left: 0; }\n  [data-player].nocursor {\n    cursor: none; }\n\n.clappr-style {\n  display: none !important; }\n";
 
-  var css_248z$2 = "[data-player] div, [data-player] span, [data-player] applet, [data-player] object, [data-player] iframe,\n[data-player] h1, [data-player] h2, [data-player] h3, [data-player] h4, [data-player] h5, [data-player] h6, [data-player] p, [data-player] blockquote, [data-player] pre,\n[data-player] a, [data-player] abbr, [data-player] acronym, [data-player] address, [data-player] big, [data-player] cite, [data-player] code,\n[data-player] del, [data-player] dfn, [data-player] em, [data-player] img, [data-player] ins, [data-player] kbd, [data-player] q, [data-player] s, [data-player] samp,\n[data-player] small, [data-player] strike, [data-player] strong, [data-player] sub, [data-player] sup, [data-player] tt, [data-player] var,\n[data-player] b, [data-player] u, [data-player] i, [data-player] center,\n[data-player] dl, [data-player] dt, [data-player] dd, [data-player] ol, [data-player] ul, [data-player] li,\n[data-player] fieldset, [data-player] form, [data-player] label, [data-player] legend,\n[data-player] table, [data-player] caption, [data-player] tbody, [data-player] tfoot, [data-player] thead, [data-player] tr, [data-player] th, [data-player] td,\n[data-player] article, [data-player] aside, [data-player] canvas, [data-player] details, [data-player] embed,\n[data-player] figure, [data-player] figcaption, [data-player] footer, [data-player] header, [data-player] hgroup,\n[data-player] menu, [data-player] nav, [data-player] output, [data-player] ruby, [data-player] section, [data-player] summary,\n[data-player] time, [data-player] mark, [data-player] audio, [data-player] video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline; }\n\n[data-player] table {\n  border-collapse: collapse;\n  border-spacing: 0; }\n\n[data-player] caption, [data-player] th, [data-player] td {\n  text-align: left;\n  font-weight: normal;\n  vertical-align: middle; }\n\n[data-player] q, [data-player] blockquote {\n  quotes: none; }\n  [data-player] q:before, [data-player] q:after, [data-player] blockquote:before, [data-player] blockquote:after {\n    content: \"\";\n    content: none; }\n\n[data-player] a img {\n  border: none; }\n";
+  var css_248z$2$1 = "[data-player] div, [data-player] span, [data-player] applet, [data-player] object, [data-player] iframe,\n[data-player] h1, [data-player] h2, [data-player] h3, [data-player] h4, [data-player] h5, [data-player] h6, [data-player] p, [data-player] blockquote, [data-player] pre,\n[data-player] a, [data-player] abbr, [data-player] acronym, [data-player] address, [data-player] big, [data-player] cite, [data-player] code,\n[data-player] del, [data-player] dfn, [data-player] em, [data-player] img, [data-player] ins, [data-player] kbd, [data-player] q, [data-player] s, [data-player] samp,\n[data-player] small, [data-player] strike, [data-player] strong, [data-player] sub, [data-player] sup, [data-player] tt, [data-player] var,\n[data-player] b, [data-player] u, [data-player] i, [data-player] center,\n[data-player] dl, [data-player] dt, [data-player] dd, [data-player] ol, [data-player] ul, [data-player] li,\n[data-player] fieldset, [data-player] form, [data-player] label, [data-player] legend,\n[data-player] table, [data-player] caption, [data-player] tbody, [data-player] tfoot, [data-player] thead, [data-player] tr, [data-player] th, [data-player] td,\n[data-player] article, [data-player] aside, [data-player] canvas, [data-player] details, [data-player] embed,\n[data-player] figure, [data-player] figcaption, [data-player] footer, [data-player] header, [data-player] hgroup,\n[data-player] menu, [data-player] nav, [data-player] output, [data-player] ruby, [data-player] section, [data-player] summary,\n[data-player] time, [data-player] mark, [data-player] audio, [data-player] video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline; }\n\n[data-player] table {\n  border-collapse: collapse;\n  border-spacing: 0; }\n\n[data-player] caption, [data-player] th, [data-player] td {\n  text-align: left;\n  font-weight: normal;\n  vertical-align: middle; }\n\n[data-player] q, [data-player] blockquote {\n  quotes: none; }\n  [data-player] q:before, [data-player] q:after, [data-player] blockquote:before, [data-player] blockquote:after {\n    content: \"\";\n    content: none; }\n\n[data-player] a img {\n  border: none; }\n";
 
   /**
    * The Core is responsible to manage Containers and the player state.
@@ -6160,11 +6192,11 @@
    */
 
   var Core = /*#__PURE__*/function (_UIObject) {
-    _inherits(Core, _UIObject);
+    _inherits$1(Core, _UIObject);
 
-    var _super = _createSuper(Core);
+    var _super = _createSuper$1(Core);
 
-    _createClass(Core, [{
+    _createClass$1(Core, [{
       key: "events",
       get: function get() {
         return {
@@ -6263,10 +6295,10 @@
     function Core(options) {
       var _this;
 
-      _classCallCheck(this, Core);
+      _classCallCheck$1(this, Core);
 
       _this = _super.call(this, options);
-      _this.playerError = new PlayerError(options, _assertThisInitialized(_this));
+      _this.playerError = new PlayerError(options, _assertThisInitialized$1(_this));
 
       _this.configureDomRecycler();
 
@@ -6287,7 +6319,7 @@
       return _this;
     }
 
-    _createClass(Core, [{
+    _createClass$1(Core, [{
       key: "configureDomRecycler",
       value: function configureDomRecycler() {
         var recycleVideo = this.options && this.options.playback && this.options.playback.recycleVideo;
@@ -6555,7 +6587,7 @@
       key: "isFullscreen",
       value: function isFullscreen() {
         // Ensure current instance is in fullscreen mode by checking fullscreen element
-        var fullscreenElement = Fullscreen.fullscreenElement();
+        var fullscreenElement = Fullscreen$1.fullscreenElement();
         if (!fullscreenElement) return false;
         var playbackEl = this.activePlayback && this.activePlayback.el;
         return fullscreenElement === this.el || fullscreenElement === playbackEl;
@@ -6566,13 +6598,13 @@
         var _this6 = this;
 
         if (this.isFullscreen()) {
-          Fullscreen.cancelFullscreen();
+          Fullscreen$1.cancelFullscreen();
           !Browser.isiOS && this.$el.removeClass('fullscreen nocursor');
         } else {
           var fullscreenEl = Browser.isiOS ? this.activePlayback && this.activePlayback.el : this.el;
           if (!fullscreenEl) return;
           Browser.isSafari || Browser.isiOS ? // Safari doesn't return a promise like the other browsers. See more in https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
-          Fullscreen.requestFullscreen(fullscreenEl) : Fullscreen.requestFullscreen(fullscreenEl).then(function (_) {
+          Fullscreen$1.requestFullscreen(fullscreenEl) : Fullscreen$1.requestFullscreen(fullscreenEl).then(function (_) {
             return _;
           }, function (error) {
             return setTimeout(function () {
@@ -6617,10 +6649,10 @@
     }, {
       key: "appendToParent",
       value: function appendToParent() {
-        var style = Styler.getStyleFor(css_248z$1.toString(), {
+        var style = Styler.getStyleFor(css_248z$1$1.toString(), {
           baseUrl: this.options.baseUrl
         });
-        var resetStyle = Styler.getStyleFor(css_248z$2.toString(), {
+        var resetStyle = Styler.getStyleFor(css_248z$2$1.toString(), {
           baseUrl: this.options.baseUrl
         });
         this.$el.append(style[0]);
@@ -6657,11 +6689,11 @@
    */
 
   var CoreFactory = /*#__PURE__*/function (_BaseObject) {
-    _inherits(CoreFactory, _BaseObject);
+    _inherits$1(CoreFactory, _BaseObject);
 
-    var _super = _createSuper(CoreFactory);
+    var _super = _createSuper$1(CoreFactory);
 
-    _createClass(CoreFactory, [{
+    _createClass$1(CoreFactory, [{
       key: "loader",
       get: function get() {
         return this.player.loader;
@@ -6677,7 +6709,7 @@
     function CoreFactory(player) {
       var _this;
 
-      _classCallCheck(this, CoreFactory);
+      _classCallCheck$1(this, CoreFactory);
 
       _this = _super.call(this, player.options);
       _this.player = player;
@@ -6690,7 +6722,7 @@
      */
 
 
-    _createClass(CoreFactory, [{
+    _createClass$1(CoreFactory, [{
       key: "create",
       value: function create() {
         this.options.loader = this.loader;
@@ -6736,7 +6768,7 @@
   var VERSION_REGEX = /(\d+)(?:\.(\d+))?(?:\.(\d+))?/;
 
   var Version = /*#__PURE__*/function () {
-    _createClass(Version, null, [{
+    _createClass$1(Version, null, [{
       key: "parse",
       value: function parse() {
         var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -6753,14 +6785,14 @@
     }]);
 
     function Version(major, minor, patch) {
-      _classCallCheck(this, Version);
+      _classCallCheck$1(this, Version);
 
       this.major = parseInt(major || 0, 10);
       this.minor = parseInt(minor || 0, 10);
       this.patch = parseInt(patch || 0, 10);
     }
 
-    _createClass(Version, [{
+    _createClass$1(Version, [{
       key: "compare",
       value: function compare(other) {
         var diff = this.major - other.major;
@@ -6819,9 +6851,9 @@
       plugins: {},
       playbacks: []
     };
-    var currentVersion = "0.4.17";
+    var currentVersion = "0.4.20";
     return /*#__PURE__*/function () {
-      _createClass(Loader, null, [{
+      _createClass$1(Loader, null, [{
         key: "checkVersionSupport",
         value: function checkVersionSupport(entry) {
           var _entry$prototype = entry.prototype,
@@ -6940,7 +6972,7 @@
         var externalPlugins = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
         var playerId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-        _classCallCheck(this, Loader);
+        _classCallCheck$1(this, Loader);
 
         this.playerId = playerId;
         this.playbackPlugins = _toConsumableArray(registry.playbacks);
@@ -6961,7 +6993,7 @@
        */
 
 
-      _createClass(Loader, [{
+      _createClass$1(Loader, [{
         key: "groupPluginsByType",
         value: function groupPluginsByType(plugins) {
           if (Array.isArray(plugins)) {
@@ -7081,11 +7113,11 @@
    */
 
   var Player = /*#__PURE__*/function (_BaseObject) {
-    _inherits(Player, _BaseObject);
+    _inherits$1(Player, _BaseObject);
 
-    var _super = _createSuper(Player);
+    var _super = _createSuper$1(Player);
 
-    _createClass(Player, [{
+    _createClass$1(Player, [{
       key: "loader",
       set: function set(loader) {
         this._loader = loader;
@@ -7285,7 +7317,7 @@
     function Player(options) {
       var _this;
 
-      _classCallCheck(this, Player);
+      _classCallCheck$1(this, Player);
 
       _this = _super.call(this, options);
       var playbackDefaultOptions = {
@@ -7316,7 +7348,7 @@
 
       _this._registerOptionEventListeners(_this.options.events);
 
-      _this._coreFactory = new CoreFactory(_assertThisInitialized(_this));
+      _this._coreFactory = new CoreFactory(_assertThisInitialized$1(_this));
       if (_this.options.parentId) _this.setParentId(_this.options.parentId);else if (_this.options.parent) _this.attachTo(_this.options.parent);
       return _this;
     }
@@ -7328,7 +7360,7 @@
      */
 
 
-    _createClass(Player, [{
+    _createClass$1(Player, [{
       key: "setParentId",
       value: function setParentId(parentId) {
         var el = document.querySelector(parentId);
@@ -7753,11 +7785,11 @@
    */
 
   var ContainerPlugin = /*#__PURE__*/function (_BaseObject) {
-    _inherits(ContainerPlugin, _BaseObject);
+    _inherits$1(ContainerPlugin, _BaseObject);
 
-    var _super = _createSuper(ContainerPlugin);
+    var _super = _createSuper$1(ContainerPlugin);
 
-    _createClass(ContainerPlugin, [{
+    _createClass$1(ContainerPlugin, [{
       key: "playerError",
       get: function get() {
         return this.container.playerError;
@@ -7767,7 +7799,7 @@
     function ContainerPlugin(container) {
       var _this;
 
-      _classCallCheck(this, ContainerPlugin);
+      _classCallCheck$1(this, ContainerPlugin);
 
       _this = _super.call(this, container.options);
       _this.container = container;
@@ -7778,7 +7810,7 @@
       return _this;
     }
 
-    _createClass(ContainerPlugin, [{
+    _createClass$1(ContainerPlugin, [{
       key: "enable",
       value: function enable() {
         if (!this.enabled) {
@@ -7809,17 +7841,17 @@
   Object.assign(ContainerPlugin.prototype, ErrorMixin);
 
   ContainerPlugin.extend = function (properties) {
-    return extend(ContainerPlugin, properties);
+    return extend$1(ContainerPlugin, properties);
   };
 
   ContainerPlugin.type = 'container';
 
   var CorePlugin = /*#__PURE__*/function (_BaseObject) {
-    _inherits(CorePlugin, _BaseObject);
+    _inherits$1(CorePlugin, _BaseObject);
 
-    var _super = _createSuper(CorePlugin);
+    var _super = _createSuper$1(CorePlugin);
 
-    _createClass(CorePlugin, [{
+    _createClass$1(CorePlugin, [{
       key: "playerError",
       get: function get() {
         return this.core.playerError;
@@ -7829,7 +7861,7 @@
     function CorePlugin(core) {
       var _this;
 
-      _classCallCheck(this, CorePlugin);
+      _classCallCheck$1(this, CorePlugin);
 
       _this = _super.call(this, core.options);
       _this.core = core;
@@ -7840,7 +7872,7 @@
       return _this;
     }
 
-    _createClass(CorePlugin, [{
+    _createClass$1(CorePlugin, [{
       key: "bindEvents",
       value: function bindEvents() {}
     }, {
@@ -7876,7 +7908,7 @@
   Object.assign(CorePlugin.prototype, ErrorMixin);
 
   CorePlugin.extend = function (properties) {
-    return extend(CorePlugin, properties);
+    return extend$1(CorePlugin, properties);
   };
 
   CorePlugin.type = 'core';
@@ -7890,11 +7922,11 @@
    */
 
   var UIContainerPlugin = /*#__PURE__*/function (_UIObject) {
-    _inherits(UIContainerPlugin, _UIObject);
+    _inherits$1(UIContainerPlugin, _UIObject);
 
-    var _super = _createSuper(UIContainerPlugin);
+    var _super = _createSuper$1(UIContainerPlugin);
 
-    _createClass(UIContainerPlugin, [{
+    _createClass$1(UIContainerPlugin, [{
       key: "playerError",
       get: function get() {
         return this.container.playerError;
@@ -7904,7 +7936,7 @@
     function UIContainerPlugin(container) {
       var _this;
 
-      _classCallCheck(this, UIContainerPlugin);
+      _classCallCheck$1(this, UIContainerPlugin);
 
       _this = _super.call(this, container.options);
       _this.container = container;
@@ -7915,7 +7947,7 @@
       return _this;
     }
 
-    _createClass(UIContainerPlugin, [{
+    _createClass$1(UIContainerPlugin, [{
       key: "enable",
       value: function enable() {
         if (!this.enabled) {
@@ -7941,14 +7973,14 @@
   Object.assign(UIContainerPlugin.prototype, ErrorMixin);
 
   UIContainerPlugin.extend = function (properties) {
-    return extend(UIContainerPlugin, properties);
+    return extend$1(UIContainerPlugin, properties);
   };
 
   UIContainerPlugin.type = 'container';
 
   var tracksHTML = "<% for (var i = 0; i < tracks.length; i++) { %>\n  <track data-html5-video-track=\"<%= i %>\" kind=\"<%= tracks[i].kind %>\" label=\"<%= tracks[i].label %>\" srclang=\"<%= tracks[i].lang %>\" src=\"<%= tracks[i].src %>\">\n<% }; %>\n";
 
-  var css_248z$3 = "[data-html5-video] {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  display: block; }\n";
+  var css_248z$3$1 = "[data-html5-video] {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  display: block; }\n";
 
   var MIMETYPES = {
     'mp4': ['avc1.42E01E', 'avc1.58A01E', 'avc1.4D401E', 'avc1.64001E', 'mp4v.20.8', 'mp4v.20.240', 'mp4a.40.2'].map(function (codec) {
@@ -7977,11 +8009,11 @@
   }; // TODO: rename this Playback to HTML5Playback (breaking change, only after 0.3.0)
 
   var HTML5Video = /*#__PURE__*/function (_Playback) {
-    _inherits(HTML5Video, _Playback);
+    _inherits$1(HTML5Video, _Playback);
 
-    var _super = _createSuper(HTML5Video);
+    var _super = _createSuper$1(HTML5Video);
 
-    _createClass(HTML5Video, [{
+    _createClass$1(HTML5Video, [{
       key: "name",
       get: function get() {
         return 'html5_video';
@@ -7990,7 +8022,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -8084,7 +8116,7 @@
     function HTML5Video() {
       var _this;
 
-      _classCallCheck(this, HTML5Video);
+      _classCallCheck$1(this, HTML5Video);
 
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -8140,10 +8172,10 @@
       return _this;
     }
 
-    _createClass(HTML5Video, [{
+    _createClass$1(HTML5Video, [{
       key: "configure",
       value: function configure(options) {
-        _get(_getPrototypeOf(HTML5Video.prototype), "configure", this).call(this, options);
+        _get$1(_getPrototypeOf$1(HTML5Video.prototype), "configure", this).call(this, options);
 
         this.el.loop = !!options.loop;
       } // See Playback.attemptAutoPlay()
@@ -8272,7 +8304,7 @@
         var _this3 = this;
 
         if (this.isPlaying() || this.el._consented) {
-          _get(_getPrototypeOf(HTML5Video.prototype), "consent", this).call(this, cb);
+          _get$1(_getPrototypeOf$1(HTML5Video.prototype), "consent", this).call(this, cb);
         } else {
           var eventHandler = function eventHandler() {
             _this3.el.removeEventListener('loadedmetadata', eventHandler, false);
@@ -8281,7 +8313,7 @@
 
             _this3.el._consented = true; // Flag to call load() only once
 
-            _get(_getPrototypeOf(HTML5Video.prototype), "consent", _this3).call(_this3, cb);
+            _get$1(_getPrototypeOf$1(HTML5Video.prototype), "consent", _this3).call(_this3, cb);
           };
 
           this.el.addEventListener('loadedmetadata', eventHandler, false);
@@ -8512,7 +8544,7 @@
         this._destroyed = true;
         this.handleTextTrackChange && this.el.textTracks.removeEventListener('change', this.handleTextTrackChange);
 
-        _get(_getPrototypeOf(HTML5Video.prototype), "destroy", this).call(this);
+        _get$1(_getPrototypeOf$1(HTML5Video.prototype), "destroy", this).call(this);
 
         this.el.removeAttribute('src');
         this.el.load(); // load with no src to stop loading of the previous source and avoid leaks
@@ -8561,20 +8593,30 @@
     }, {
       key: "getDuration",
       value: function getDuration() {
-        var _this4 = this;
-
         if (this.isLive) {
-          try {
+          if (this.el.seekable.length > 0) {
             return this.el.seekable.end(0) - this.el.seekable.start(0);
-          } catch (e) {
-            setTimeout(function () {
-              return _this4._updateSettings();
-            }, 1000);
+          } else {
+            // `seekable` is not available; this is probably OK, but make sure we're
+            // updating the control bar to reflect it
+            this._scheduleUpdateSettingsCheck();
           }
         }
 
         return this.el.duration;
       }
+    }, {
+      key: "_scheduleUpdateSettingsCheck",
+      value: function _scheduleUpdateSettingsCheck() {
+        var _this4 = this;
+
+        if (this._updateSettingsCheckInFlight) return;
+        this._updateSettingsCheckInFlight = setTimeout(function () {
+          _this4._updateSettings();
+
+          _this4._updateSettingsCheckInFlight = null;
+        }, 1000);
+      }
     }, {
       key: "_onTimeUpdate",
       value: function _onTimeUpdate() {
@@ -8672,7 +8714,7 @@
 
         this._ready();
 
-        var style = Styler.getStyleFor(css_248z$3.toString(), {
+        var style = Styler.getStyleFor(css_248z$3$1.toString(), {
           baseUrl: this.options.baseUrl
         });
         this.$el.append(style[0]);
@@ -8770,17 +8812,17 @@
   };
 
   var HTML5Audio = /*#__PURE__*/function (_HTML5Video) {
-    _inherits(HTML5Audio, _HTML5Video);
+    _inherits$1(HTML5Audio, _HTML5Video);
 
-    var _super = _createSuper(HTML5Audio);
+    var _super = _createSuper$1(HTML5Audio);
 
     function HTML5Audio() {
-      _classCallCheck(this, HTML5Audio);
+      _classCallCheck$1(this, HTML5Audio);
 
       return _super.apply(this, arguments);
     }
 
-    _createClass(HTML5Audio, [{
+    _createClass$1(HTML5Audio, [{
       key: "updateSettings",
       value: function updateSettings() {
         this.settings.left = ['playpause', 'position', 'duration'];
@@ -8801,7 +8843,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -8829,14 +8871,14 @@
     return HTML5Video._canPlay('audio', mimetypes, resourceUrl, mimeType);
   };
 
-  var css_248z$4 = "[data-html-img] {\n  max-width: 100%;\n  max-height: 100%; }\n";
+  var css_248z$4$1 = "[data-html-img] {\n  max-width: 100%;\n  max-height: 100%; }\n";
 
   var HTMLImg = /*#__PURE__*/function (_Playback) {
-    _inherits(HTMLImg, _Playback);
+    _inherits$1(HTMLImg, _Playback);
 
-    var _super = _createSuper(HTMLImg);
+    var _super = _createSuper$1(HTMLImg);
 
-    _createClass(HTMLImg, [{
+    _createClass$1(HTMLImg, [{
       key: "getPlaybackType",
       value: function getPlaybackType() {
         return Playback.NO_OP;
@@ -8850,7 +8892,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -8879,17 +8921,17 @@
     function HTMLImg(params) {
       var _this;
 
-      _classCallCheck(this, HTMLImg);
+      _classCallCheck$1(this, HTMLImg);
 
       _this = _super.call(this, params);
       _this.el.src = params.src;
       return _this;
     }
 
-    _createClass(HTMLImg, [{
+    _createClass$1(HTMLImg, [{
       key: "render",
       value: function render() {
-        var style = Styler.getStyleFor(css_248z$4.toString(), {
+        var style = Styler.getStyleFor(css_248z$4$1.toString(), {
           baseUrl: this.options.baseUrl
         });
         this.$el.append(style[0]);
@@ -8920,14 +8962,14 @@
 
   var noOpHTML = "<canvas data-no-op-canvas></canvas>\n<p data-no-op-msg><%=message%></p><p>\n</p>";
 
-  var css_248z$5 = "[data-no-op] {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  text-align: center; }\n\n[data-no-op] p[data-no-op-msg] {\n  position: absolute;\n  text-align: center;\n  font-size: 25px;\n  left: 0;\n  right: 0;\n  color: white;\n  padding: 10px;\n  /* center vertically */\n  top: 50%;\n  transform: translateY(-50%);\n  max-height: 100%;\n  overflow: auto; }\n\n[data-no-op] canvas[data-no-op-canvas] {\n  background-color: #777;\n  height: 100%;\n  width: 100%; }\n";
+  var css_248z$5$1 = "[data-no-op] {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  text-align: center; }\n\n[data-no-op] p[data-no-op-msg] {\n  position: absolute;\n  text-align: center;\n  font-size: 25px;\n  left: 0;\n  right: 0;\n  color: white;\n  padding: 10px;\n  /* center vertically */\n  top: 50%;\n  transform: translateY(-50%);\n  max-height: 100%;\n  overflow: auto; }\n\n[data-no-op] canvas[data-no-op-canvas] {\n  background-color: #777;\n  height: 100%;\n  width: 100%; }\n";
 
   var NoOp = /*#__PURE__*/function (_Playback) {
-    _inherits(NoOp, _Playback);
+    _inherits$1(NoOp, _Playback);
 
-    var _super = _createSuper(NoOp);
+    var _super = _createSuper$1(NoOp);
 
-    _createClass(NoOp, [{
+    _createClass$1(NoOp, [{
       key: "name",
       get: function get() {
         return 'no_op';
@@ -8936,7 +8978,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -8956,7 +8998,7 @@
     function NoOp() {
       var _this;
 
-      _classCallCheck(this, NoOp);
+      _classCallCheck$1(this, NoOp);
 
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -8967,11 +9009,11 @@
       return _this;
     }
 
-    _createClass(NoOp, [{
+    _createClass$1(NoOp, [{
       key: "render",
       value: function render() {
         var playbackNotSupported = this.options.playbackNotSupportedMessage || this.i18n.t('playback_not_supported');
-        var style = Styler.getStyleFor(css_248z$5.toString(), {
+        var style = Styler.getStyleFor(css_248z$5$1.toString(), {
           baseUrl: this.options.baseUrl
         });
         this.$el.append(style[0]);
@@ -9073,11 +9115,11 @@
    */
 
   var Strings = /*#__PURE__*/function (_CorePlugin) {
-    _inherits(Strings, _CorePlugin);
+    _inherits$1(Strings, _CorePlugin);
 
-    var _super = _createSuper(Strings);
+    var _super = _createSuper$1(Strings);
 
-    _createClass(Strings, [{
+    _createClass$1(Strings, [{
       key: "name",
       get: function get() {
         return 'strings';
@@ -9086,7 +9128,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }]);
@@ -9094,7 +9136,7 @@
     function Strings(core) {
       var _this;
 
-      _classCallCheck(this, Strings);
+      _classCallCheck$1(this, Strings);
 
       _this = _super.call(this, core);
 
@@ -9110,7 +9152,7 @@
      */
 
 
-    _createClass(Strings, [{
+    _createClass$1(Strings, [{
       key: "t",
       value: function t(key) {
         var lang = this._language();
@@ -9136,6 +9178,14 @@
             'default_error_title': 'Could not play video.',
             'default_error_message': 'There was a problem trying to load the video.'
           },
+          'de': {
+            'live': 'Live',
+            'back_to_live': 'Zurück zum Live-Video',
+            'disabled': 'Deaktiviert',
+            'playback_not_supported': 'Ihr Browser unterstützt das Playback Verfahren nicht. Bitte vesuchen Sie es mit einem anderen Browser.',
+            'default_error_title': 'Video kann nicht abgespielt werden',
+            'default_error_message': 'Es gab ein Problem beim Laden des Videos'
+          },
           'pt': {
             'live': 'ao vivo',
             'back_to_live': 'voltar para o ao vivo',
@@ -9186,6 +9236,7 @@
           }
         };
         this._messages = zepto.extend(true, defaultMessages, this.core.options.strings || {});
+        this._messages['de-DE'] = this._messages['de'];
         this._messages['pt-BR'] = this._messages['pt'];
         this._messages['en-US'] = this._messages['en'];
         this._messages['es-419'] = this._messages['es'];
@@ -9200,17 +9251,17 @@
   }(CorePlugin);
 
   var SourcesPlugin = /*#__PURE__*/function (_CorePlugin) {
-    _inherits(SourcesPlugin, _CorePlugin);
+    _inherits$1(SourcesPlugin, _CorePlugin);
 
-    var _super = _createSuper(SourcesPlugin);
+    var _super = _createSuper$1(SourcesPlugin);
 
     function SourcesPlugin() {
-      _classCallCheck(this, SourcesPlugin);
+      _classCallCheck$1(this, SourcesPlugin);
 
       return _super.apply(this, arguments);
     }
 
-    _createClass(SourcesPlugin, [{
+    _createClass$1(SourcesPlugin, [{
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, this.onContainersCreated);
@@ -9234,7 +9285,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }]);
@@ -9243,7 +9294,7 @@
   }(CorePlugin);
 
   // Copyright 2014 Globo.com Player authors. All rights reserved.
-  var version = "0.4.17"; // Built-in Plugins/Playbacks
+  var version$1 = "0.4.20"; // Built-in Plugins/Playbacks
 
   Loader.registerPlugin(Strings);
   Loader.registerPlugin(SourcesPlugin);
@@ -9272,18 +9323,18 @@
     HTMLImg: HTMLImg,
     Log: Log,
     Styler: Styler,
-    version: version,
+    version: version$1,
     template: tmpl,
     $: zepto
   };
 
-  function _classCallCheck$1(instance, Constructor) {
+  function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
     }
   }
 
-  function _defineProperties$1(target, props) {
+  function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
       descriptor.enumerable = descriptor.enumerable || false;
@@ -9293,13 +9344,13 @@
     }
   }
 
-  function _createClass$1(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties$1(Constructor, staticProps);
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
     return Constructor;
   }
 
-  function _inherits$1(subClass, superClass) {
+  function _inherits(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
       throw new TypeError("Super expression must either be null or a function");
     }
@@ -9311,39 +9362,39 @@
         configurable: true
       }
     });
-    if (superClass) _setPrototypeOf$1(subClass, superClass);
+    if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
-  function _getPrototypeOf$1(o) {
-    _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
-    return _getPrototypeOf$1(o);
+    return _getPrototypeOf(o);
   }
 
-  function _setPrototypeOf$1(o, p) {
-    _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
 
-    return _setPrototypeOf$1(o, p);
+    return _setPrototypeOf(o, p);
   }
 
-  function _isNativeReflectConstruct$1() {
+  function _isNativeReflectConstruct() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
     if (Reflect.construct.sham) return false;
     if (typeof Proxy === "function") return true;
 
     try {
-      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
       return true;
     } catch (e) {
       return false;
     }
   }
 
-  function _assertThisInitialized$1(self) {
+  function _assertThisInitialized(self) {
     if (self === void 0) {
       throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
     }
@@ -9351,48 +9402,48 @@
     return self;
   }
 
-  function _possibleConstructorReturn$1(self, call) {
+  function _possibleConstructorReturn(self, call) {
     if (call && (typeof call === "object" || typeof call === "function")) {
       return call;
     }
 
-    return _assertThisInitialized$1(self);
+    return _assertThisInitialized(self);
   }
 
-  function _createSuper$1(Derived) {
-    var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
+  function _createSuper(Derived) {
+    var hasNativeReflectConstruct = _isNativeReflectConstruct();
 
     return function _createSuperInternal() {
-      var Super = _getPrototypeOf$1(Derived),
+      var Super = _getPrototypeOf(Derived),
           result;
 
       if (hasNativeReflectConstruct) {
-        var NewTarget = _getPrototypeOf$1(this).constructor;
+        var NewTarget = _getPrototypeOf(this).constructor;
 
         result = Reflect.construct(Super, arguments, NewTarget);
       } else {
         result = Super.apply(this, arguments);
       }
 
-      return _possibleConstructorReturn$1(this, result);
+      return _possibleConstructorReturn(this, result);
     };
   }
 
-  function _superPropBase$1(object, property) {
+  function _superPropBase(object, property) {
     while (!Object.prototype.hasOwnProperty.call(object, property)) {
-      object = _getPrototypeOf$1(object);
+      object = _getPrototypeOf(object);
       if (object === null) break;
     }
 
     return object;
   }
 
-  function _get$1(target, property, receiver) {
+  function _get(target, property, receiver) {
     if (typeof Reflect !== "undefined" && Reflect.get) {
-      _get$1 = Reflect.get;
+      _get = Reflect.get;
     } else {
-      _get$1 = function _get(target, property, receiver) {
-        var base = _superPropBase$1(target, property);
+      _get = function _get(target, property, receiver) {
+        var base = _superPropBase(target, property);
 
         if (!base) return;
         var desc = Object.getOwnPropertyDescriptor(base, property);
@@ -9405,15 +9456,21 @@
       };
     }
 
-    return _get$1(target, property, receiver || target);
+    return _get(target, property, receiver || target);
   }
 
   var ClickToPausePlugin = /*#__PURE__*/function (_ContainerPlugin) {
-    _inherits$1(ClickToPausePlugin, _ContainerPlugin);
+    _inherits(ClickToPausePlugin, _ContainerPlugin);
 
-    var _super = _createSuper$1(ClickToPausePlugin);
+    var _super = _createSuper(ClickToPausePlugin);
 
-    _createClass$1(ClickToPausePlugin, [{
+    function ClickToPausePlugin(container) {
+      _classCallCheck(this, ClickToPausePlugin);
+
+      return _super.call(this, container);
+    }
+
+    _createClass(ClickToPausePlugin, [{
       key: "name",
       get: function get() {
         return 'click_to_pause';
@@ -9422,18 +9479,15 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
-    }]);
-
-    function ClickToPausePlugin(container) {
-      _classCallCheck$1(this, ClickToPausePlugin);
-
-      return _super.call(this, container);
-    }
-
-    _createClass$1(ClickToPausePlugin, [{
+    }, {
+      key: "config",
+      get: function get() {
+        return this.container.options.clickToPauseConfig || {};
+      }
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_CLICK, this.click);
@@ -9442,8 +9496,10 @@
     }, {
       key: "click",
       value: function click() {
+        var onClickPayload = this.config.onClickPayload;
+
         if (this.container.getPlaybackType() !== Playback.LIVE || this.container.isDvrEnabled()) {
-          if (this.container.isPlaying()) this.container.pause();else this.container.play();
+          if (this.container.isPlaying()) this.container.pause(onClickPayload);else this.container.play(onClickPayload);
         }
       }
     }, {
@@ -9464,42 +9520,29 @@
 
   var ccHTML = "<button type=\"button\" class=\"cc-button media-control-button media-control-icon\" data-cc-button aria-label=\"<%= ariaLabel %>\"></button>\n<ul>\n  <% if (title) { %>\n  <li data-title><%= title %></li>\n  <% }; %>\n  <li><a href=\"#\" data-cc-select=\"-1\"><%= disabledLabel %></a></li>\n  <% for (var i = 0; i < tracks.length; i++) { %>\n    <li><a href=\"#\" data-cc-select=\"<%= tracks[i].id %>\"><%= tracks[i].label %></a></li>\n  <% }; %>\n</ul>\n";
 
-  function styleInject(css, ref) {
-    if ( ref === void 0 ) ref = {};
-    var insertAt = ref.insertAt;
-
-    if (!css || typeof document === 'undefined') { return; }
+  var css_248z$7 = ".cc-controls[data-cc-controls] {\n  float: right;\n  position: relative;\n  display: none; }\n  .cc-controls[data-cc-controls].available {\n    display: block; }\n  .cc-controls[data-cc-controls] .cc-button {\n    padding: 6px !important; }\n    .cc-controls[data-cc-controls] .cc-button.enabled {\n      display: block;\n      opacity: 1.0; }\n      .cc-controls[data-cc-controls] .cc-button.enabled:hover {\n        opacity: 1.0;\n        text-shadow: none; }\n  .cc-controls[data-cc-controls] > ul {\n    list-style-type: none;\n    position: absolute;\n    bottom: 25px;\n    border: 1px solid black;\n    display: none;\n    background-color: #e6e6e6; }\n  .cc-controls[data-cc-controls] li {\n    font-size: 10px; }\n    .cc-controls[data-cc-controls] li[data-title] {\n      background-color: #c3c2c2;\n      padding: 5px; }\n    .cc-controls[data-cc-controls] li a {\n      color: #444;\n      padding: 2px 10px;\n      display: block;\n      text-decoration: none; }\n      .cc-controls[data-cc-controls] li a:hover {\n        background-color: #555;\n        color: white; }\n        .cc-controls[data-cc-controls] li a:hover a {\n          color: white;\n          text-decoration: none; }\n    .cc-controls[data-cc-controls] li.current a {\n      color: #f00; }\n";
 
-    var head = document.head || document.getElementsByTagName('head')[0];
-    var style = document.createElement('style');
-    style.type = 'text/css';
-
-    if (insertAt === 'top') {
-      if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-      } else {
-        head.appendChild(style);
-      }
-    } else {
-      head.appendChild(style);
-    }
+  var ClosedCaptions$1 = /*#__PURE__*/function (_UICorePlugin) {
+    _inherits(ClosedCaptions, _UICorePlugin);
 
-    if (style.styleSheet) {
-      style.styleSheet.cssText = css;
-    } else {
-      style.appendChild(document.createTextNode(css));
-    }
-  }
+    var _super = _createSuper(ClosedCaptions);
 
-  var css_248z$6 = ".cc-controls[data-cc-controls] {\n  float: right;\n  position: relative;\n  display: none; }\n  .cc-controls[data-cc-controls].available {\n    display: block; }\n  .cc-controls[data-cc-controls] .cc-button {\n    padding: 6px !important; }\n    .cc-controls[data-cc-controls] .cc-button.enabled {\n      display: block;\n      opacity: 1.0; }\n      .cc-controls[data-cc-controls] .cc-button.enabled:hover {\n        opacity: 1.0;\n        text-shadow: none; }\n  .cc-controls[data-cc-controls] > ul {\n    list-style-type: none;\n    position: absolute;\n    bottom: 25px;\n    border: 1px solid black;\n    display: none;\n    background-color: #e6e6e6; }\n  .cc-controls[data-cc-controls] li {\n    font-size: 10px; }\n    .cc-controls[data-cc-controls] li[data-title] {\n      background-color: #c3c2c2;\n      padding: 5px; }\n    .cc-controls[data-cc-controls] li a {\n      color: #444;\n      padding: 2px 10px;\n      display: block;\n      text-decoration: none; }\n      .cc-controls[data-cc-controls] li a:hover {\n        background-color: #555;\n        color: white; }\n        .cc-controls[data-cc-controls] li a:hover a {\n          color: white;\n          text-decoration: none; }\n    .cc-controls[data-cc-controls] li.current a {\n      color: #f00; }\n";
-  styleInject(css_248z$6);
+    function ClosedCaptions(core) {
+      var _this;
 
-  var ClosedCaptions = /*#__PURE__*/function (_UICorePlugin) {
-    _inherits$1(ClosedCaptions, _UICorePlugin);
+      _classCallCheck(this, ClosedCaptions);
 
-    var _super = _createSuper$1(ClosedCaptions);
+      _this = _super.call(this, core);
+      var config = core.options.closedCaptionsConfig;
+      _this._title = config && config.title ? config.title : null;
+      _this._ariaLabel = config && config.ariaLabel ? config.ariaLabel : 'cc-button';
+      _this._labelCb = config && config.labelCallback && typeof config.labelCallback === 'function' ? config.labelCallback : function (track) {
+        return track.name;
+      };
+      return _this;
+    }
 
-    _createClass$1(ClosedCaptions, [{
+    _createClass(ClosedCaptions, [{
       key: "name",
       get: function get() {
         return 'closed_captions';
@@ -9508,7 +9551,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -9532,24 +9575,7 @@
           'data-cc-controls': ''
         };
       }
-    }]);
-
-    function ClosedCaptions(core) {
-      var _this;
-
-      _classCallCheck$1(this, ClosedCaptions);
-
-      _this = _super.call(this, core);
-      var config = core.options.closedCaptionsConfig;
-      _this._title = config && config.title ? config.title : null;
-      _this._ariaLabel = config && config.ariaLabel ? config.ariaLabel : 'cc-button';
-      _this._labelCb = config && config.labelCallback && typeof config.labelCallback === 'function' ? config.labelCallback : function (track) {
-        return track.name;
-      };
-      return _this;
-    }
-
-    _createClass$1(ClosedCaptions, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
@@ -9641,6 +9667,9 @@
           tracks[i].label = this._labelCb(tracks[i]);
         }
 
+        var style = Styler.getStyleFor(css_248z$7, {
+          baseUrl: this.options.baseUrl
+        });
         this.$el.html(this.template({
           ariaLabel: this._ariaLabel,
           disabledLabel: this.core.i18n.t('disabled'),
@@ -9649,7 +9678,7 @@
         }));
         this.$ccButton = this.$el.find('button.cc-button[data-cc-button]');
         this.$ccButton.append(ccIcon);
-        this.$el.append(this.style);
+        this.$el.append(style[0]);
       }
     }, {
       key: "render",
@@ -9666,15 +9695,26 @@
 
   var dvrHTML = "<div class=\"live-info\"><%= live %></div>\n<button type=\"button\" class=\"live-button\" aria-label=\"<%= backToLive %>\"><%= backToLive %></button>\n";
 
-  var css_248z$1$1 = ".dvr-controls[data-dvr-controls] {\n  display: inline-block;\n  float: left;\n  color: #fff;\n  line-height: 32px;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 6px; }\n  .dvr-controls[data-dvr-controls] .live-info {\n    cursor: default;\n    font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n    text-transform: uppercase; }\n    .dvr-controls[data-dvr-controls] .live-info:before {\n      content: \"\";\n      display: inline-block;\n      position: relative;\n      width: 7px;\n      height: 7px;\n      border-radius: 3.5px;\n      margin-right: 3.5px;\n      background-color: #ff0101; }\n    .dvr-controls[data-dvr-controls] .live-info.disabled {\n      opacity: 0.3; }\n      .dvr-controls[data-dvr-controls] .live-info.disabled:before {\n        background-color: #fff; }\n  .dvr-controls[data-dvr-controls] .live-button {\n    cursor: pointer;\n    outline: none;\n    display: none;\n    border: 0;\n    color: #fff;\n    background-color: transparent;\n    height: 32px;\n    padding: 0;\n    opacity: 0.7;\n    font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n    text-transform: uppercase;\n    transition: all 0.1s ease; }\n    .dvr-controls[data-dvr-controls] .live-button:before {\n      content: \"\";\n      display: inline-block;\n      position: relative;\n      width: 7px;\n      height: 7px;\n      border-radius: 3.5px;\n      margin-right: 3.5px;\n      background-color: #fff; }\n    .dvr-controls[data-dvr-controls] .live-button:hover {\n      opacity: 1;\n      text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px; }\n\n.dvr .dvr-controls[data-dvr-controls] .live-info {\n  display: none; }\n\n.dvr .dvr-controls[data-dvr-controls] .live-button {\n  display: block; }\n\n.dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  background-color: #005aff; }\n\n.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  background-color: #ff0101; }\n";
-  styleInject(css_248z$1$1);
+  var css_248z$6 = ".dvr-controls[data-dvr-controls] {\n  display: inline-block;\n  float: left;\n  color: #fff;\n  line-height: 32px;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 6px; }\n  .dvr-controls[data-dvr-controls] .live-info {\n    cursor: default;\n    font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n    text-transform: uppercase; }\n    .dvr-controls[data-dvr-controls] .live-info:before {\n      content: \"\";\n      display: inline-block;\n      position: relative;\n      width: 7px;\n      height: 7px;\n      border-radius: 3.5px;\n      margin-right: 3.5px;\n      background-color: #ff0101; }\n    .dvr-controls[data-dvr-controls] .live-info.disabled {\n      opacity: 0.3; }\n      .dvr-controls[data-dvr-controls] .live-info.disabled:before {\n        background-color: #fff; }\n  .dvr-controls[data-dvr-controls] .live-button {\n    cursor: pointer;\n    outline: none;\n    display: none;\n    border: 0;\n    color: #fff;\n    background-color: transparent;\n    height: 32px;\n    padding: 0;\n    opacity: 0.7;\n    font-family: \"Roboto\", \"Open Sans\", Arial, sans-serif;\n    text-transform: uppercase;\n    transition: all 0.1s ease; }\n    .dvr-controls[data-dvr-controls] .live-button:before {\n      content: \"\";\n      display: inline-block;\n      position: relative;\n      width: 7px;\n      height: 7px;\n      border-radius: 3.5px;\n      margin-right: 3.5px;\n      background-color: #fff; }\n    .dvr-controls[data-dvr-controls] .live-button:hover {\n      opacity: 1;\n      text-shadow: rgba(255, 255, 255, 0.75) 0 0 5px; }\n\n.dvr .dvr-controls[data-dvr-controls] .live-info {\n  display: none; }\n\n.dvr .dvr-controls[data-dvr-controls] .live-button {\n  display: block; }\n\n.dvr.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  background-color: #005aff; }\n\n.media-control.live[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n  background-color: #ff0101; }\n";
+
+  var DVRControls$1 = /*#__PURE__*/function (_UICorePlugin) {
+    _inherits(DVRControls, _UICorePlugin);
+
+    var _super = _createSuper(DVRControls);
+
+    function DVRControls(core) {
+      var _this;
+
+      _classCallCheck(this, DVRControls);
 
-  var DVRControls = /*#__PURE__*/function (_UICorePlugin) {
-    _inherits$1(DVRControls, _UICorePlugin);
+      _this = _super.call(this, core);
 
-    var _super = _createSuper$1(DVRControls);
+      _this.settingsUpdate();
 
-    _createClass$1(DVRControls, [{
+      return _this;
+    }
+
+    _createClass(DVRControls, [{
       key: "template",
       get: function get() {
         return tmpl(dvrHTML);
@@ -9688,7 +9728,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -9706,21 +9746,7 @@
           'data-dvr-controls': ''
         };
       }
-    }]);
-
-    function DVRControls(core) {
-      var _this;
-
-      _classCallCheck$1(this, DVRControls);
-
-      _this = _super.call(this, core);
-
-      _this.settingsUpdate();
-
-      return _this;
-    }
-
-    _createClass$1(DVRControls, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.bindCoreEvents();
@@ -9803,10 +9829,14 @@
     }, {
       key: "render",
       value: function render() {
+        var style = Styler.getStyleFor(css_248z$6, {
+          baseUrl: this.options.baseUrl
+        });
         this.$el.html(this.template({
           live: this.core.i18n.t('live'),
           backToLive: this.core.i18n.t('back_to_live')
         }));
+        this.$el.append(style[0]);
 
         if (this.shouldRender()) {
           this.core.mediaControl.$el.addClass('live');
@@ -9820,18 +9850,30 @@
     return DVRControls;
   }(UICorePlugin);
 
-  var EndVideo = /*#__PURE__*/function (_CorePlugin) {
-    _inherits$1(EndVideo, _CorePlugin);
+  var EndVideo$1 = /*#__PURE__*/function (_CorePlugin) {
+    _inherits(EndVideo, _CorePlugin);
 
-    var _super = _createSuper$1(EndVideo);
+    var _super = _createSuper(EndVideo);
 
     function EndVideo() {
-      _classCallCheck$1(this, EndVideo);
+      _classCallCheck(this, EndVideo);
 
       return _super.apply(this, arguments);
     }
 
-    _createClass$1(EndVideo, [{
+    _createClass(EndVideo, [{
+      key: "name",
+      get: function get() {
+        return 'end_video';
+      }
+    }, {
+      key: "supportedVersion",
+      get: function get() {
+        return {
+          min: "0.4.20"
+        };
+      }
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.containerChanged);
@@ -9854,18 +9896,6 @@
         var exitOnEnd = typeof this.core.options.exitFullscreenOnEnd === 'undefined' || this.core.options.exitFullscreenOnEnd;
         if (exitOnEnd && this.core.isFullscreen()) this.core.toggleFullscreen();
       }
-    }, {
-      key: "name",
-      get: function get() {
-        return 'end_video';
-      }
-    }, {
-      key: "supportedVersion",
-      get: function get() {
-        return {
-          min: "0.4.17"
-        };
-      }
     }]);
 
     return EndVideo;
@@ -9875,15 +9905,24 @@
 
   var templateHtml = "<div class=\"player-error-screen__content\" data-error-screen>\n  <% if (icon) { %>\n  <div class=\"player-error-screen__icon\" data-error-screen><%= icon %></div>\n  <% } %>\n  <div class=\"player-error-screen__title\" data-error-screen><%= title %></div>\n  <div class=\"player-error-screen__message\" data-error-screen><%= message %></div>\n  <div class=\"player-error-screen__code\" data-error-screen>Error code: <%= code %></div>\n  <div class=\"player-error-screen__reload\" data-error-screen><%= reloadIcon %></div>\n</div>\n";
 
-  var css_248z$2$1 = "div.player-error-screen {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #CCCACA;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 2000;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n  div.player-error-screen__content[data-error-screen] {\n    font-size: 14px;\n    color: #CCCACA;\n    margin-top: 45px; }\n  div.player-error-screen__title[data-error-screen] {\n    font-weight: bold;\n    line-height: 30px;\n    font-size: 18px; }\n  div.player-error-screen__message[data-error-screen] {\n    width: 90%;\n    margin: 0 auto; }\n  div.player-error-screen__code[data-error-screen] {\n    font-size: 13px;\n    margin-top: 15px; }\n  div.player-error-screen__reload {\n    cursor: pointer;\n    width: 30px;\n    margin: 15px auto 0; }\n";
-  styleInject(css_248z$2$1);
+  var css_248z$5 = "[data-player] .player-error-screen {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: #CCCACA;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 2000;\n  display: flex;\n  flex-direction: column;\n  justify-content: center; }\n  [data-player] .player-error-screen__content[data-error-screen] {\n    font-size: 14px;\n    color: #CCCACA;\n    margin-top: 45px; }\n  [data-player] .player-error-screen__title[data-error-screen] {\n    font-weight: bold;\n    line-height: 30px;\n    font-size: 18px; }\n  [data-player] .player-error-screen__message[data-error-screen] {\n    width: 90%;\n    margin: 0 auto; }\n  [data-player] .player-error-screen__code[data-error-screen] {\n    font-size: 13px;\n    margin-top: 15px; }\n  [data-player] .player-error-screen__reload {\n    cursor: pointer;\n    width: 30px;\n    margin: 15px auto 0 !important; }\n";
+
+  var ErrorScreen$1 = /*#__PURE__*/function (_UICorePlugin) {
+    _inherits(ErrorScreen, _UICorePlugin);
+
+    var _super = _createSuper(ErrorScreen);
 
-  var ErrorScreen = /*#__PURE__*/function (_UICorePlugin) {
-    _inherits$1(ErrorScreen, _UICorePlugin);
+    function ErrorScreen(core) {
+      var _this;
 
-    var _super = _createSuper$1(ErrorScreen);
+      _classCallCheck(this, ErrorScreen);
 
-    _createClass$1(ErrorScreen, [{
+      _this = _super.call(this, core);
+      if (_this.options.disableErrorScreen) return _possibleConstructorReturn(_this, _this.disable());
+      return _this;
+    }
+
+    _createClass(ErrorScreen, [{
       key: "name",
       get: function get() {
         return 'error_screen';
@@ -9892,7 +9931,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -9913,19 +9952,7 @@
           'data-error-screen': ''
         };
       }
-    }]);
-
-    function ErrorScreen(core) {
-      var _this;
-
-      _classCallCheck$1(this, ErrorScreen);
-
-      _this = _super.call(this, core);
-      if (_this.options.disableErrorScreen) return _possibleConstructorReturn$1(_this, _this.disable());
-      return _this;
-    }
-
-    _createClass$1(ErrorScreen, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.core, Events.ERROR, this.onError);
@@ -9987,6 +10014,9 @@
       key: "render",
       value: function render() {
         if (!this.err) return;
+        var style = Styler.getStyleFor(css_248z$5, {
+          baseUrl: this.options.baseUrl
+        });
         this.$el.html(this.template({
           title: this.err.UI.title,
           message: this.err.UI.message,
@@ -9994,6 +10024,7 @@
           icon: this.err.UI.icon || '',
           reloadIcon: reloadIcon
         }));
+        this.$el.append(style[0]);
         this.core.$el.append(this.el);
         this.bindReload();
         return this;
@@ -10009,12 +10040,25 @@
 
   var oldIcon = zepto('link[rel="shortcut icon"]');
 
-  var Favicon = /*#__PURE__*/function (_CorePlugin) {
-    _inherits$1(Favicon, _CorePlugin);
+  var Favicon$1 = /*#__PURE__*/function (_CorePlugin) {
+    _inherits(Favicon, _CorePlugin);
+
+    var _super = _createSuper(Favicon);
 
-    var _super = _createSuper$1(Favicon);
+    function Favicon(core) {
+      var _this;
+
+      _classCallCheck(this, Favicon);
+
+      _this = _super.call(this, core);
+      _this._container = null;
 
-    _createClass$1(Favicon, [{
+      _this.configure();
+
+      return _this;
+    }
+
+    _createClass(Favicon, [{
       key: "name",
       get: function get() {
         return 'favicon';
@@ -10023,7 +10067,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -10031,22 +10075,7 @@
       get: function get() {
         return oldIcon;
       }
-    }]);
-
-    function Favicon(core) {
-      var _this;
-
-      _classCallCheck$1(this, Favicon);
-
-      _this = _super.call(this, core);
-      _this._container = null;
-
-      _this.configure();
-
-      return _this;
-    }
-
-    _createClass$1(Favicon, [{
+    }, {
       key: "configure",
       value: function configure() {
         if (this.core.options.changeFavicon) {
@@ -10081,14 +10110,14 @@
     }, {
       key: "disable",
       value: function disable() {
-        _get$1(_getPrototypeOf$1(Favicon.prototype), "disable", this).call(this);
+        _get(_getPrototypeOf(Favicon.prototype), "disable", this).call(this);
 
         this.resetIcon();
       }
     }, {
       key: "destroy",
       value: function destroy() {
-        _get$1(_getPrototypeOf$1(Favicon.prototype), "destroy", this).call(this);
+        _get(_getPrototypeOf(Favicon.prototype), "destroy", this).call(this);
 
         this.resetIcon();
       }
@@ -10138,29 +10167,15 @@
     return Favicon;
   }(CorePlugin);
 
-  var GoogleAnalytics = /*#__PURE__*/function (_ContainerPlugin) {
-    _inherits$1(GoogleAnalytics, _ContainerPlugin);
+  var GoogleAnalytics$1 = /*#__PURE__*/function (_ContainerPlugin) {
+    _inherits(GoogleAnalytics, _ContainerPlugin);
 
-    var _super = _createSuper$1(GoogleAnalytics);
-
-    _createClass$1(GoogleAnalytics, [{
-      key: "name",
-      get: function get() {
-        return 'google_analytics';
-      }
-    }, {
-      key: "supportedVersion",
-      get: function get() {
-        return {
-          min: "0.4.17"
-        };
-      }
-    }]);
+    var _super = _createSuper(GoogleAnalytics);
 
     function GoogleAnalytics(container) {
       var _this;
 
-      _classCallCheck$1(this, GoogleAnalytics);
+      _classCallCheck(this, GoogleAnalytics);
 
       _this = _super.call(this, container);
 
@@ -10176,7 +10191,19 @@
       return _this;
     }
 
-    _createClass$1(GoogleAnalytics, [{
+    _createClass(GoogleAnalytics, [{
+      key: "name",
+      get: function get() {
+        return 'google_analytics';
+      }
+    }, {
+      key: "supportedVersion",
+      get: function get() {
+        return {
+          min: "0.4.20"
+        };
+      }
+    }, {
       key: "embedScript",
       value: function embedScript() {
         var _this2 = this;
@@ -10668,8 +10695,7 @@
     Kibo: Kibo
   };
 
-  var css_248z$3$1 = ".media-control-notransition {\n  transition: none !important; }\n\n.media-control[data-media-control] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none; }\n  .media-control[data-media-control].dragging {\n    pointer-events: auto;\n    cursor: -webkit-grabbing !important;\n    cursor: grabbing !important;\n    cursor: url(\"closed-hand.cur\"), move; }\n    .media-control[data-media-control].dragging * {\n      cursor: -webkit-grabbing !important;\n      cursor: grabbing !important;\n      cursor: url(\"closed-hand.cur\"), move; }\n  .media-control[data-media-control] .media-control-background[data-background] {\n    position: absolute;\n    height: 40%;\n    width: 100%;\n    bottom: 0;\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\n    will-change: transform, opacity;\n    transition: opacity 0.6s ease-out; }\n  .media-control[data-media-control] .media-control-icon {\n    line-height: 0;\n    letter-spacing: 0;\n    speak: none;\n    color: #fff;\n    opacity: 0.5;\n    vertical-align: middle;\n    text-align: left;\n    transition: all 0.1s ease; }\n  .media-control[data-media-control] .media-control-icon:hover {\n    color: white;\n    opacity: 0.75;\n    text-shadow: rgba(255, 255, 255, 0.8) 0 0 5px; }\n  .media-control[data-media-control].media-control-hide .media-control-background[data-background] {\n    opacity: 0; }\n  .media-control[data-media-control].media-control-hide .media-control-layer[data-controls] {\n    transform: translateY(50px); }\n    .media-control[data-media-control].media-control-hide .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] {\n      opacity: 0; }\n  .media-control[data-media-control] .media-control-layer[data-controls] {\n    position: absolute;\n    transform: translateY(-7px);\n    bottom: 0;\n    width: 100%;\n    height: 32px;\n    font-size: 0;\n    vertical-align: middle;\n    pointer-events: auto;\n    transition: bottom 0.4s ease-out; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-left-panel[data-media-control] {\n      position: absolute;\n      top: 0;\n      left: 4px;\n      height: 100%; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-center-panel[data-media-control] {\n      height: 100%;\n      text-align: center;\n      line-height: 32px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-right-panel[data-media-control] {\n      position: absolute;\n      top: 0;\n      right: 4px;\n      height: 100%; }\n    .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button {\n      background-color: transparent;\n      border: 0;\n      margin: 0 6px;\n      padding: 0;\n      cursor: pointer;\n      display: inline-block;\n      width: 32px;\n      height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button svg {\n        width: 100%;\n        height: 22px; }\n        .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button svg path {\n          fill: white; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button:focus {\n        outline: none; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-play] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-pause] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-stop] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n        float: right;\n        background-color: transparent;\n        border: 0;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {\n        background-color: transparent;\n        border: 0;\n        cursor: default;\n        display: none;\n        float: right;\n        height: 100%; }\n        .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled {\n          display: block;\n          opacity: 1.0; }\n          .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled:hover {\n            opacity: 1.0;\n            text-shadow: none; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-playpause] {\n        float: left; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-playstop] {\n        float: left; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n      display: inline-block;\n      font-size: 10px;\n      color: white;\n      cursor: default;\n      line-height: 32px;\n      position: relative; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-position] {\n      margin: 0 6px 0 7px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n      color: rgba(255, 255, 255, 0.5);\n      margin-right: 6px; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration]:before {\n        content: \"|\";\n        margin-right: 7px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] {\n      position: absolute;\n      top: -20px;\n      left: 0;\n      display: inline-block;\n      vertical-align: middle;\n      width: 100%;\n      height: 25px;\n      cursor: pointer; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {\n        width: 100%;\n        height: 1px;\n        position: relative;\n        top: 12px;\n        background-color: #666666; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          background-color: #c2c2c2;\n          transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          background-color: #005aff;\n          transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n          opacity: 0;\n          position: absolute;\n          top: -3px;\n          width: 5px;\n          height: 7px;\n          background-color: rgba(255, 255, 255, 0.5);\n          transition: opacity 0.1s ease; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar]:hover .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n        opacity: 1; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {\n        cursor: default; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled:hover .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n          opacity: 0; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] {\n        position: absolute;\n        transform: translateX(-50%);\n        top: 2px;\n        left: 0;\n        width: 20px;\n        height: 20px;\n        opacity: 1;\n        transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n          position: absolute;\n          left: 6px;\n          top: 6px;\n          width: 8px;\n          height: 8px;\n          border-radius: 10px;\n          box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);\n          background-color: white; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] {\n      float: right;\n      display: inline-block;\n      height: 32px;\n      cursor: pointer;\n      margin: 0 6px;\n      box-sizing: border-box; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n        float: left;\n        bottom: 0; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n          background-color: transparent;\n          border: 0;\n          box-sizing: content-box;\n          width: 32px;\n          height: 32px;\n          opacity: 0.5; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume]:hover {\n            opacity: 0.75; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n            height: 24px;\n            position: relative;\n            top: 3px; }\n            .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n              fill: white; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n            margin-left: 2px; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n        float: left;\n        position: relative;\n        overflow: hidden;\n        top: 6px;\n        width: 42px;\n        height: 18px;\n        padding: 3px 0;\n        transition: width .2s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n          height: 1px;\n          position: relative;\n          top: 7px;\n          margin: 0 3px;\n          background-color: #666666; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 100%;\n            background-color: #c2c2c2;\n            transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 100%;\n            background-color: #005aff;\n            transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-hover[data-volume] {\n            opacity: 0;\n            position: absolute;\n            top: -3px;\n            width: 5px;\n            height: 7px;\n            background-color: rgba(255, 255, 255, 0.5);\n            transition: opacity 0.1s ease; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n          position: absolute;\n          transform: translateX(-50%);\n          top: 0px;\n          left: 0;\n          width: 20px;\n          height: 20px;\n          opacity: 1;\n          transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n            position: absolute;\n            left: 6px;\n            top: 6px;\n            width: 8px;\n            height: 8px;\n            border-radius: 10px;\n            box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);\n            background-color: white; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n          float: left;\n          width: 4px;\n          padding-left: 2px;\n          height: 12px;\n          opacity: 0.5;\n          box-shadow: inset 2px 0 0 white;\n          transition: transform .2s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n            box-shadow: inset 2px 0 0 #fff;\n            opacity: 1; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n            padding-left: 0; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n            transform: scaleY(1.5); }\n  .media-control[data-media-control].w320 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n    width: 0;\n    height: 12px;\n    top: 9px;\n    padding: 0; }\n";
-  styleInject(css_248z$3$1);
+  var css_248z$4 = ".media-control-notransition {\n  transition: none !important; }\n\n.media-control[data-media-control] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  pointer-events: none; }\n  .media-control[data-media-control].dragging {\n    pointer-events: auto;\n    cursor: -webkit-grabbing !important;\n    cursor: grabbing !important;\n    cursor: url(\"closed-hand.cur\"), move; }\n    .media-control[data-media-control].dragging * {\n      cursor: -webkit-grabbing !important;\n      cursor: grabbing !important;\n      cursor: url(\"closed-hand.cur\"), move; }\n  .media-control[data-media-control] .media-control-background[data-background] {\n    position: absolute;\n    height: 40%;\n    width: 100%;\n    bottom: 0;\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\n    will-change: transform, opacity;\n    transition: opacity 0.6s ease-out; }\n  .media-control[data-media-control] .media-control-icon {\n    line-height: 0;\n    letter-spacing: 0;\n    speak: none;\n    color: #fff;\n    opacity: 0.5;\n    vertical-align: middle;\n    text-align: left;\n    transition: all 0.1s ease; }\n  .media-control[data-media-control] .media-control-icon:hover {\n    color: white;\n    opacity: 0.75;\n    text-shadow: rgba(255, 255, 255, 0.8) 0 0 5px; }\n  .media-control[data-media-control].media-control-hide .media-control-background[data-background] {\n    opacity: 0; }\n  .media-control[data-media-control].media-control-hide .media-control-layer[data-controls] {\n    transform: translateY(50px); }\n    .media-control[data-media-control].media-control-hide .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] {\n      opacity: 0; }\n  .media-control[data-media-control] .media-control-layer[data-controls] {\n    position: absolute;\n    transform: translateY(-7px);\n    bottom: 0;\n    width: 100%;\n    height: 32px;\n    font-size: 0;\n    vertical-align: middle;\n    pointer-events: auto;\n    transition: bottom 0.4s ease-out; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-left-panel[data-media-control] {\n      position: absolute;\n      top: 0;\n      left: 4px;\n      height: 100%; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-center-panel[data-media-control] {\n      height: 100%;\n      text-align: center;\n      line-height: 32px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-right-panel[data-media-control] {\n      position: absolute;\n      top: 0;\n      right: 4px;\n      height: 100%; }\n    .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button {\n      background-color: transparent;\n      border: 0;\n      margin: 0 6px;\n      padding: 0;\n      cursor: pointer;\n      display: inline-block;\n      width: 32px;\n      height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button svg {\n        width: 100%;\n        height: 22px; }\n        .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button svg path {\n          fill: white; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button:focus {\n        outline: none; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-play] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-pause] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-stop] {\n        float: left;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-fullscreen] {\n        float: right;\n        background-color: transparent;\n        border: 0;\n        height: 100%; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator] {\n        background-color: transparent;\n        border: 0;\n        cursor: default;\n        display: none;\n        float: right;\n        height: 100%; }\n        .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled {\n          display: block;\n          opacity: 1.0; }\n          .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-hd-indicator].enabled:hover {\n            opacity: 1.0;\n            text-shadow: none; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-playpause] {\n        float: left; }\n      .media-control[data-media-control] .media-control-layer[data-controls] button.media-control-button[data-playstop] {\n        float: left; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-position], .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n      display: inline-block;\n      font-size: 10px;\n      color: white;\n      cursor: default;\n      line-height: 32px;\n      position: relative; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-position] {\n      margin: 0 6px 0 7px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration] {\n      color: rgba(255, 255, 255, 0.5);\n      margin-right: 6px; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .media-control-indicator[data-duration]:before {\n        content: \"|\";\n        margin-right: 7px; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] {\n      position: absolute;\n      top: -20px;\n      left: 0;\n      display: inline-block;\n      vertical-align: middle;\n      width: 100%;\n      height: 25px;\n      cursor: pointer; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] {\n        width: 100%;\n        height: 1px;\n        position: relative;\n        top: 12px;\n        background-color: #666666; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-1[data-seekbar] {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          background-color: #c2c2c2;\n          transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-fill-2[data-seekbar] {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          background-color: #005aff;\n          transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n          opacity: 0;\n          position: absolute;\n          top: -3px;\n          width: 5px;\n          height: 7px;\n          background-color: rgba(255, 255, 255, 0.5);\n          transition: opacity 0.1s ease; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar]:hover .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n        opacity: 1; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled {\n        cursor: default; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar].seek-disabled:hover .bar-background[data-seekbar] .bar-hover[data-seekbar] {\n          opacity: 0; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] {\n        position: absolute;\n        transform: translateX(-50%);\n        top: 2px;\n        left: 0;\n        width: 20px;\n        height: 20px;\n        opacity: 1;\n        transition: all 0.1s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .bar-container[data-seekbar] .bar-scrubber[data-seekbar] .bar-scrubber-icon[data-seekbar] {\n          position: absolute;\n          left: 6px;\n          top: 6px;\n          width: 8px;\n          height: 8px;\n          border-radius: 10px;\n          box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);\n          background-color: white; }\n    .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] {\n      float: right;\n      display: inline-block;\n      height: 32px;\n      cursor: pointer;\n      margin: 0 6px;\n      box-sizing: border-box; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] {\n        float: left;\n        bottom: 0; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] {\n          background-color: transparent;\n          border: 0;\n          box-sizing: content-box;\n          width: 32px;\n          height: 32px;\n          opacity: 0.5; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume]:hover {\n            opacity: 0.75; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg {\n            height: 24px;\n            position: relative;\n            top: 3px; }\n            .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume] svg path {\n              fill: white; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .drawer-icon-container[data-volume] .drawer-icon[data-volume].muted svg {\n            margin-left: 2px; }\n      .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] {\n        float: left;\n        position: relative;\n        overflow: hidden;\n        top: 6px;\n        width: 42px;\n        height: 18px;\n        padding: 3px 0;\n        transition: width .2s ease-out; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] {\n          height: 1px;\n          position: relative;\n          top: 7px;\n          margin: 0 3px;\n          background-color: #666666; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-1[data-volume] {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 100%;\n            background-color: #c2c2c2;\n            transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-fill-2[data-volume] {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 0;\n            height: 100%;\n            background-color: #005aff;\n            transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-background[data-volume] .bar-hover[data-volume] {\n            opacity: 0;\n            position: absolute;\n            top: -3px;\n            width: 5px;\n            height: 7px;\n            background-color: rgba(255, 255, 255, 0.5);\n            transition: opacity 0.1s ease; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] {\n          position: absolute;\n          transform: translateX(-50%);\n          top: 0px;\n          left: 0;\n          width: 20px;\n          height: 20px;\n          opacity: 1;\n          transition: all 0.1s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .bar-scrubber[data-volume] .bar-scrubber-icon[data-volume] {\n            position: absolute;\n            left: 6px;\n            top: 6px;\n            width: 8px;\n            height: 8px;\n            border-radius: 10px;\n            box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);\n            background-color: white; }\n        .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume] {\n          float: left;\n          width: 4px;\n          padding-left: 2px;\n          height: 12px;\n          opacity: 0.5;\n          box-shadow: inset 2px 0 0 white;\n          transition: transform .2s ease-out; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume].fill {\n            box-shadow: inset 2px 0 0 #fff;\n            opacity: 1; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:nth-of-type(1) {\n            padding-left: 0; }\n          .media-control[data-media-control] .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume] .segmented-bar-element[data-volume]:hover {\n            transform: scaleY(1.5); }\n  .media-control[data-media-control].w320 .media-control-layer[data-controls] .drawer-container[data-volume] .bar-container[data-volume].volume-bar-hide {\n    width: 0;\n    height: 12px;\n    top: 9px;\n    padding: 0; }\n";
 
   var mediaControlHTML = "<div class=\"media-control-background\" data-background></div>\n<div class=\"media-control-layer\" data-controls>\n  <%  var renderBar = function(name) { %>\n      <div class=\"bar-container\" data-<%= name %>>\n        <div class=\"bar-background\" data-<%= name %>>\n          <div class=\"bar-fill-1\" data-<%= name %>></div>\n          <div class=\"bar-fill-2\" data-<%= name %>></div>\n          <div class=\"bar-hover\" data-<%= name %>></div>\n        </div>\n        <div class=\"bar-scrubber\" data-<%= name %>>\n          <div class=\"bar-scrubber-icon\" data-<%= name %>></div>\n        </div>\n      </div>\n  <%  }; %>\n  <%  var renderSegmentedBar = function(name, segments) {\n      segments = segments || 10; %>\n    <div class=\"bar-container\" data-<%= name %>>\n    <% for (var i = 0; i < segments; i++) { %>\n      <div class=\"segmented-bar-element\" data-<%= name %>></div>\n    <% } %>\n    </div>\n  <% }; %>\n  <% var renderDrawer = function(name, renderContent) { %>\n      <div class=\"drawer-container\" data-<%= name %>>\n        <div class=\"drawer-icon-container\" data-<%= name %>>\n          <div class=\"drawer-icon media-control-icon\" data-<%= name %>></div>\n          <span class=\"drawer-text\" data-<%= name %>></span>\n        </div>\n        <% renderContent(name); %>\n      </div>\n  <% }; %>\n  <% var renderIndicator = function(name) { %>\n      <div class=\"media-control-indicator\" data-<%= name %>></div>\n  <% }; %>\n  <% var renderButton = function(name) { %>\n    <button type=\"button\" class=\"media-control-button media-control-icon\" data-<%= name %> aria-label=\"<%= name %>\"></button>\n  <% }; %>\n  <%  var templates = {\n        bar: renderBar,\n        segmentedBar: renderSegmentedBar,\n      };\n      var render = function(settingsList) {\n        settingsList.forEach(function(setting) {\n          if(setting === \"seekbar\") {\n            renderBar(setting);\n          } else if (setting === \"volume\") {\n            renderDrawer(setting, settings.volumeBarTemplate ? templates[settings.volumeBarTemplate] : function(name) { return renderSegmentedBar(name); });\n          } else if (setting === \"duration\" || setting === \"position\") {\n            renderIndicator(setting);\n          } else {\n            renderButton(setting);\n          }\n        });\n      }; %>\n  <% if (settings.default && settings.default.length) { %>\n  <div class=\"media-control-center-panel\" data-media-control>\n    <% render(settings.default); %>\n  </div>\n  <% } %>\n  <% if (settings.left && settings.left.length) { %>\n  <div class=\"media-control-left-panel\" data-media-control>\n    <% render(settings.left); %>\n  </div>\n  <% } %>\n  <% if (settings.right && settings.right.length) { %>\n  <div class=\"media-control-right-panel\" data-media-control>\n    <% render(settings.right); %>\n  </div>\n  <% } %>\n</div>\n";
 
@@ -10685,18 +10711,63 @@
 
   var hdIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill=\"#010101\" d=\"M5.375 7.062H2.637V4.26H.502v7.488h2.135V8.9h2.738v2.848h2.133V4.26H5.375v2.802zm5.97-2.81h-2.84v7.496h2.798c2.65 0 4.195-1.607 4.195-3.77v-.022c0-2.162-1.523-3.704-4.154-3.704zm2.06 3.758c0 1.21-.81 1.896-2.03 1.896h-.83V6.093h.83c1.22 0 2.03.696 2.03 1.896v.02z\"/>\n</svg>";
 
-  var Config$1 = Utils.Config,
-      Fullscreen$1 = Utils.Fullscreen,
+  var Config = Utils.Config,
+      Fullscreen = Utils.Fullscreen,
       formatTime$1 = Utils.formatTime,
-      extend$1 = Utils.extend,
-      removeArrayItem$1 = Utils.removeArrayItem;
+      extend = Utils.extend,
+      removeArrayItem = Utils.removeArrayItem;
+
+  var MediaControl$1 = /*#__PURE__*/function (_UICorePlugin) {
+    _inherits(MediaControl, _UICorePlugin);
+
+    var _super = _createSuper(MediaControl);
+
+    function MediaControl(core) {
+      var _this;
+
+      _classCallCheck(this, MediaControl);
+
+      _this = _super.call(this, core);
+      _this.persistConfig = _this.options.persistConfig;
+      _this.currentPositionValue = null;
+      _this.currentDurationValue = null;
+      _this.keepVisible = false;
+      _this.fullScreenOnVideoTagSupported = null; // unknown
+
+      _this.setInitialVolume();
+
+      _this.settings = {
+        left: ['play', 'stop', 'pause'],
+        right: ['volume'],
+        "default": ['position', 'seekbar', 'duration']
+      };
+      _this.kibo = new Kibo(_this.options.focusElement);
+
+      _this.bindKeyEvents();
+
+      if (_this.container) {
+        if (!zepto.isEmptyObject(_this.container.settings)) _this.settings = zepto.extend({}, _this.container.settings);
+      } else {
+        _this.settings = {};
+      }
+
+      _this.userDisabled = false;
+      if (_this.container && _this.container.mediaControlDisabled || _this.options.chromeless) _this.disable();
+
+      _this.stopDragHandler = function (event) {
+        return _this.stopDrag(event);
+      };
 
-  var MediaControl = /*#__PURE__*/function (_UICorePlugin) {
-    _inherits$1(MediaControl, _UICorePlugin);
+      _this.updateDragHandler = function (event) {
+        return _this.updateDrag(event);
+      };
 
-    var _super = _createSuper$1(MediaControl);
+      zepto(document).bind('mouseup', _this.stopDragHandler);
+      zepto(document).bind('mousemove', _this.updateDragHandler);
+      return _this;
+    }
 
-    _createClass$1(MediaControl, [{
+    _createClass(MediaControl, [{
       key: "name",
       get: function get() {
         return 'media_control';
@@ -10705,7 +10776,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -10771,54 +10842,7 @@
       get: function get() {
         return this.volume === 0;
       }
-    }]);
-
-    function MediaControl(core) {
-      var _this;
-
-      _classCallCheck$1(this, MediaControl);
-
-      _this = _super.call(this, core);
-      _this.persistConfig = _this.options.persistConfig;
-      _this.currentPositionValue = null;
-      _this.currentDurationValue = null;
-      _this.keepVisible = false;
-      _this.fullScreenOnVideoTagSupported = null; // unknown
-
-      _this.setInitialVolume();
-
-      _this.settings = {
-        left: ['play', 'stop', 'pause'],
-        right: ['volume'],
-        "default": ['position', 'seekbar', 'duration']
-      };
-      _this.kibo = new Kibo(_this.options.focusElement);
-
-      _this.bindKeyEvents();
-
-      if (_this.container) {
-        if (!zepto.isEmptyObject(_this.container.settings)) _this.settings = zepto.extend({}, _this.container.settings);
-      } else {
-        _this.settings = {};
-      }
-
-      _this.userDisabled = false;
-      if (_this.container && _this.container.mediaControlDisabled || _this.options.chromeless) _this.disable();
-
-      _this.stopDragHandler = function (event) {
-        return _this.stopDrag(event);
-      };
-
-      _this.updateDragHandler = function (event) {
-        return _this.updateDrag(event);
-      };
-
-      zepto(document).bind('mouseup', _this.stopDragHandler);
-      zepto(document).bind('mousemove', _this.updateDragHandler);
-      return _this;
-    }
-
-    _createClass$1(MediaControl, [{
+    }, {
       key: "getExternalInterface",
       value: function getExternalInterface() {
         var _this2 = this;
@@ -10904,7 +10928,7 @@
     }, {
       key: "setInitialVolume",
       value: function setInitialVolume() {
-        var initialVolume = this.persistConfig ? Config$1.restore('volume') : 100;
+        var initialVolume = this.persistConfig ? Config.restore('volume') : 100;
         var options = this.container && this.container.options || this.options;
         this.setVolume(options.mute ? 0 : initialVolume, true);
       }
@@ -10919,7 +10943,7 @@
         var video = this.playback && this.playback.el; // video.webkitSupportsFullscreen is deprecated but iOS appears to only use this
         // see https://github.com/clappr/clappr/issues/1127
 
-        if (!Fullscreen$1.fullscreenEnabled() && video.webkitSupportsFullscreen) {
+        if (!Fullscreen.fullscreenEnabled() && video.webkitSupportsFullscreen) {
           this.fullScreenOnVideoTagSupported = true;
           this.settingsUpdate();
         }
@@ -11091,7 +11115,7 @@
         // if the container is not ready etc
 
         this.intendedVolume = value;
-        this.persistConfig && !isInitialVolume && Config$1.persist('volume', value);
+        this.persistConfig && !isInitialVolume && Config.persist('volume', value);
 
         var setWhenContainerReady = function setWhenContainerReady() {
           if (_this4.container && _this4.container.isReady) {
@@ -11301,11 +11325,11 @@
       value: function settingsUpdate() {
         var newSettings = this.getSettings();
 
-        if (newSettings && !this.fullScreenOnVideoTagSupported && !Fullscreen$1.fullscreenEnabled()) {
+        if (newSettings && !this.fullScreenOnVideoTagSupported && !Fullscreen.fullscreenEnabled()) {
           // remove fullscreen from settings if it is present
-          newSettings["default"] && removeArrayItem$1(newSettings["default"], 'fullscreen');
-          newSettings.left && removeArrayItem$1(newSettings.left, 'fullscreen');
-          newSettings.right && removeArrayItem$1(newSettings.right, 'fullscreen');
+          newSettings["default"] && removeArrayItem(newSettings["default"], 'fullscreen');
+          newSettings.left && removeArrayItem(newSettings.left, 'fullscreen');
+          newSettings.right && removeArrayItem(newSettings.right, 'fullscreen');
         }
 
         var settingsChanged = JSON.stringify(this.settings) !== JSON.stringify(newSettings);
@@ -11481,7 +11505,7 @@
         this.unbindKeyEvents();
         this.stopListening();
 
-        _get$1(_getPrototypeOf$1(MediaControl.prototype), "destroy", this).call(this);
+        _get(_getPrototypeOf(MediaControl.prototype), "destroy", this).call(this);
       }
       /**
        * enables to configure the media control after its creation
@@ -11505,6 +11529,10 @@
         this.settings && this.$el.html(this.template({
           settings: this.settings
         }));
+        var style = Styler.getStyleFor(css_248z$4, {
+          baseUrl: this.options.baseUrl
+        });
+        this.$el.append(style[0]);
         this.createCachedElements();
         this.$playPauseToggle.addClass('paused');
         this.$playStopToggle.addClass('stopped');
@@ -11553,21 +11581,37 @@
     return MediaControl;
   }(UICorePlugin);
 
-  MediaControl.extend = function (properties) {
-    return extend$1(MediaControl, properties);
+  MediaControl$1.extend = function (properties) {
+    return extend(MediaControl$1, properties);
   };
 
   var posterHTML = "<div class=\"play-wrapper\" data-poster></div>\n";
 
-  var css_248z$4$1 = ".player-poster[data-poster] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  z-index: 998;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: 50% 50%; }\n  .player-poster[data-poster].clickable {\n    cursor: pointer; }\n  .player-poster[data-poster]:hover .play-wrapper[data-poster] {\n    opacity: 1; }\n  .player-poster[data-poster] .play-wrapper[data-poster] {\n    width: 100%;\n    height: 25%;\n    margin: 0 auto;\n    opacity: 0.75;\n    transition: opacity 0.1s ease; }\n    .player-poster[data-poster] .play-wrapper[data-poster] svg {\n      height: 100%; }\n      .player-poster[data-poster] .play-wrapper[data-poster] svg path {\n        fill: #fff; }\n";
-  styleInject(css_248z$4$1);
+  var css_248z$3 = ".player-poster[data-poster] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  z-index: 998;\n  top: 0;\n  left: 0;\n  background-color: transparent;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: 50% 50%; }\n  .player-poster[data-poster].clickable {\n    cursor: pointer; }\n  .player-poster[data-poster]:hover .play-wrapper[data-poster] {\n    opacity: 1; }\n  .player-poster[data-poster] .play-wrapper[data-poster] {\n    width: 100%;\n    height: 25%;\n    margin: 0 auto;\n    opacity: 0.75;\n    transition: opacity 0.1s ease; }\n    .player-poster[data-poster] .play-wrapper[data-poster] svg {\n      height: 100%; }\n      .player-poster[data-poster] .play-wrapper[data-poster] svg path {\n        fill: #fff; }\n";
 
   var PosterPlugin = /*#__PURE__*/function (_UIContainerPlugin) {
-    _inherits$1(PosterPlugin, _UIContainerPlugin);
+    _inherits(PosterPlugin, _UIContainerPlugin);
+
+    var _super = _createSuper(PosterPlugin);
+
+    function PosterPlugin(container) {
+      var _this;
 
-    var _super = _createSuper$1(PosterPlugin);
+      _classCallCheck(this, PosterPlugin);
 
-    _createClass$1(PosterPlugin, [{
+      _this = _super.call(this, container);
+      _this.hasStartedPlaying = false;
+      _this.playRequested = false;
+
+      _this.render();
+
+      setTimeout(function () {
+        return _this.update();
+      }, 0);
+      return _this;
+    }
+
+    _createClass(PosterPlugin, [{
       key: "name",
       get: function get() {
         return 'poster';
@@ -11576,7 +11620,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -11610,26 +11654,7 @@
       get: function get() {
         return !this.options.poster || this.options.poster.showOnVideoEnd || this.options.poster.showOnVideoEnd === undefined;
       }
-    }]);
-
-    function PosterPlugin(container) {
-      var _this;
-
-      _classCallCheck$1(this, PosterPlugin);
-
-      _this = _super.call(this, container);
-      _this.hasStartedPlaying = false;
-      _this.playRequested = false;
-
-      _this.render();
-
-      setTimeout(function () {
-        return _this.update();
-      }, 0);
-      return _this;
-    }
-
-    _createClass$1(PosterPlugin, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_STOP, this.onStop);
@@ -11690,7 +11715,7 @@
           if (!this.options.chromeless || this.options.allowUserInteraction) {
             this.playRequested = true;
             this.update();
-            this.container.playback && this.container.playback.consent();
+            this.container.playback && (this.container.playback._consented = true);
             this.container.play();
           }
 
@@ -11732,7 +11757,11 @@
       key: "render",
       value: function render() {
         if (!this.shouldRender) return;
+        var style = Styler.getStyleFor(css_248z$3, {
+          baseUrl: this.options.baseUrl
+        });
         this.$el.html(this.template());
+        this.$el.append(style[0]);
         var isRegularPoster = this.options.poster && this.options.poster.custom === undefined;
 
         if (isRegularPoster) {
@@ -11740,10 +11769,12 @@
           this.$el.css({
             'background-image': 'url(' + posterUrl + ')'
           });
+          this.removeVideoElementPoster();
         } else if (this.options.poster) {
           this.$el.css({
             'background': this.options.poster.custom
           });
+          this.removeVideoElementPoster();
         }
 
         this.container.$el.append(this.el);
@@ -11763,6 +11794,11 @@
         this.update();
         return this;
       }
+    }, {
+      key: "removeVideoElementPoster",
+      value: function removeVideoElementPoster() {
+        this.container.playback && this.container.playback.$el && this.container.playback.$el[0] && this.container.playback.$el[0].removeAttribute && this.container.playback.$el[0].removeAttribute('poster');
+      }
     }]);
 
     return PosterPlugin;
@@ -11770,17 +11806,35 @@
 
   var seekTimeHTML = "<span data-seek-time></span>\n<span data-duration></span>\n";
 
-  var css_248z$5$1 = ".seek-time[data-seek-time] {\n  position: absolute;\n  white-space: nowrap;\n  height: 20px;\n  line-height: 20px;\n  font-size: 0;\n  left: -100%;\n  bottom: 55px;\n  background-color: rgba(2, 2, 2, 0.5);\n  z-index: 9999;\n  transition: opacity 0.1s ease; }\n  .seek-time[data-seek-time].hidden[data-seek-time] {\n    opacity: 0; }\n  .seek-time[data-seek-time] [data-seek-time] {\n    display: inline-block;\n    color: white;\n    font-size: 10px;\n    padding-left: 7px;\n    padding-right: 7px;\n    vertical-align: top; }\n  .seek-time[data-seek-time] [data-duration] {\n    display: inline-block;\n    color: rgba(255, 255, 255, 0.5);\n    font-size: 10px;\n    padding-right: 7px;\n    vertical-align: top; }\n    .seek-time[data-seek-time] [data-duration]:before {\n      content: \"|\";\n      margin-right: 7px; }\n";
-  styleInject(css_248z$5$1);
+  var css_248z$2 = ".seek-time[data-seek-time] {\n  position: absolute;\n  white-space: nowrap;\n  height: 20px;\n  line-height: 20px;\n  font-size: 0;\n  left: -100%;\n  bottom: 55px;\n  background-color: rgba(2, 2, 2, 0.5);\n  z-index: 9999;\n  transition: opacity 0.1s ease; }\n  .seek-time[data-seek-time].hidden[data-seek-time] {\n    opacity: 0; }\n  .seek-time[data-seek-time] [data-seek-time] {\n    display: inline-block;\n    color: white;\n    font-size: 10px;\n    padding-left: 7px;\n    padding-right: 7px;\n    vertical-align: top; }\n  .seek-time[data-seek-time] [data-duration] {\n    display: inline-block;\n    color: rgba(255, 255, 255, 0.5);\n    font-size: 10px;\n    padding-right: 7px;\n    vertical-align: top; }\n    .seek-time[data-seek-time] [data-duration]:before {\n      content: \"|\";\n      margin-right: 7px; }\n";
+
+  var formatTime = Utils.formatTime;
+
+  var SeekTime$1 = /*#__PURE__*/function (_UICorePlugin) {
+    _inherits(SeekTime, _UICorePlugin);
 
-  var formatTime$1$1 = Utils.formatTime;
+    var _super = _createSuper(SeekTime);
+
+    function SeekTime(core) {
+      var _this;
+
+      _classCallCheck(this, SeekTime);
+
+      _this = _super.call(this, core);
+      _this.hoveringOverSeekBar = false;
+      _this.hoverPosition = null;
+      _this.duration = null;
+      _this.firstFragDateTime = null;
+      _this.actualLiveTime = !!_this.mediaControl.options.actualLiveTime;
 
-  var SeekTime = /*#__PURE__*/function (_UICorePlugin) {
-    _inherits$1(SeekTime, _UICorePlugin);
+      if (_this.actualLiveTime) {
+        if (_this.mediaControl.options.actualLiveServerTime) _this.actualLiveServerTimeDiff = new Date().getTime() - new Date(_this.mediaControl.options.actualLiveServerTime).getTime();else _this.actualLiveServerTimeDiff = 0;
+      }
 
-    var _super = _createSuper$1(SeekTime);
+      return _this;
+    }
 
-    _createClass$1(SeekTime, [{
+    _createClass(SeekTime, [{
       key: "name",
       get: function get() {
         return 'seek_time';
@@ -11789,7 +11843,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -11830,28 +11884,7 @@
       get: function get() {
         return this.actualLiveTime && this.isLiveStreamWithDvr;
       }
-    }]);
-
-    function SeekTime(core) {
-      var _this;
-
-      _classCallCheck$1(this, SeekTime);
-
-      _this = _super.call(this, core);
-      _this.hoveringOverSeekBar = false;
-      _this.hoverPosition = null;
-      _this.duration = null;
-      _this.firstFragDateTime = null;
-      _this.actualLiveTime = !!_this.mediaControl.options.actualLiveTime;
-
-      if (_this.actualLiveTime) {
-        if (_this.mediaControl.options.actualLiveServerTime) _this.actualLiveServerTimeDiff = new Date().getTime() - new Date(_this.mediaControl.options.actualLiveServerTime).getTime();else _this.actualLiveServerTimeDiff = 0;
-      }
-
-      return _this;
-    }
-
-    _createClass$1(SeekTime, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
@@ -11938,7 +11971,7 @@
           this.$el.css('left', '-100%');
         } else {
           var seekTime = this.getSeekTime();
-          var currentSeekTime = formatTime$1$1(seekTime.seekTime, this.useActualLiveTime); // only update dom if necessary, ie time actually changed
+          var currentSeekTime = formatTime(seekTime.seekTime, this.useActualLiveTime); // only update dom if necessary, ie time actually changed
 
           if (currentSeekTime !== this.displayedSeekTime) {
             this.$seekTimeEl.text(currentSeekTime);
@@ -11947,7 +11980,7 @@
 
           if (this.durationShown) {
             this.$durationEl.show();
-            var currentDuration = formatTime$1$1(this.actualLiveTime ? seekTime.secondsSinceMidnight : this.duration, this.actualLiveTime);
+            var currentDuration = formatTime(this.actualLiveTime ? seekTime.secondsSinceMidnight : this.duration, this.actualLiveTime);
 
             if (currentDuration !== this.displayedDuration) {
               this.$durationEl.text(currentDuration);
@@ -11975,10 +12008,14 @@
     }, {
       key: "render",
       value: function render() {
+        var style = Styler.getStyleFor(css_248z$2, {
+          baseUrl: this.options.baseUrl
+        });
         this.rendered = true;
         this.displayedDuration = null;
         this.displayedSeekTime = null;
         this.$el.html(this.template());
+        this.$el.append(style[0]);
         this.$el.hide();
         this.mediaControl.$el.append(this.el);
         this.$seekTimeEl = this.$el.find('[data-seek-time]');
@@ -11993,40 +12030,17 @@
 
   var spinnerHTML = "<div data-bounce1></div><div data-bounce2></div><div data-bounce3></div>\n";
 
-  var css_248z$6$1 = ".spinner-three-bounce[data-spinner] {\n  position: absolute;\n  margin: 0 auto;\n  width: 70px;\n  text-align: center;\n  z-index: 999;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n  /* center vertically */\n  top: 50%;\n  transform: translateY(-50%); }\n  .spinner-three-bounce[data-spinner] > div {\n    width: 18px;\n    height: 18px;\n    background-color: #FFFFFF;\n    border-radius: 100%;\n    display: inline-block;\n    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;\n            animation: bouncedelay 1.4s infinite ease-in-out;\n    /* Prevent first frame from flickering when animation starts */\n    -webkit-animation-fill-mode: both;\n            animation-fill-mode: both; }\n  .spinner-three-bounce[data-spinner] [data-bounce1] {\n    -webkit-animation-delay: -0.32s;\n            animation-delay: -0.32s; }\n  .spinner-three-bounce[data-spinner] [data-bounce2] {\n    -webkit-animation-delay: -0.16s;\n            animation-delay: -0.16s; }\n\n@-webkit-keyframes bouncedelay {\n  0%, 80%, 100% {\n    transform: scale(0); }\n  40% {\n    transform: scale(1); } }\n\n@keyframes bouncedelay {\n  0%, 80%, 100% {\n    transform: scale(0); }\n  40% {\n    transform: scale(1); } }\n";
-  styleInject(css_248z$6$1);
+  var css_248z$1 = ".spinner-three-bounce[data-spinner] {\n  position: absolute;\n  margin: 0 auto;\n  width: 70px;\n  text-align: center;\n  z-index: 999;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n  /* center vertically */\n  top: 50%;\n  transform: translateY(-50%); }\n  .spinner-three-bounce[data-spinner] > div {\n    width: 18px;\n    height: 18px;\n    background-color: #FFFFFF;\n    border-radius: 100%;\n    display: inline-block;\n    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;\n            animation: bouncedelay 1.4s infinite ease-in-out;\n    /* Prevent first frame from flickering when animation starts */\n    -webkit-animation-fill-mode: both;\n            animation-fill-mode: both; }\n  .spinner-three-bounce[data-spinner] [data-bounce1] {\n    -webkit-animation-delay: -0.32s;\n            animation-delay: -0.32s; }\n  .spinner-three-bounce[data-spinner] [data-bounce2] {\n    -webkit-animation-delay: -0.16s;\n            animation-delay: -0.16s; }\n\n@-webkit-keyframes bouncedelay {\n  0%, 80%, 100% {\n    transform: scale(0); }\n  40% {\n    transform: scale(1); } }\n\n@keyframes bouncedelay {\n  0%, 80%, 100% {\n    transform: scale(0); }\n  40% {\n    transform: scale(1); } }\n";
 
   var SpinnerThreeBouncePlugin = /*#__PURE__*/function (_UIContainerPlugin) {
-    _inherits$1(SpinnerThreeBouncePlugin, _UIContainerPlugin);
+    _inherits(SpinnerThreeBouncePlugin, _UIContainerPlugin);
 
-    var _super = _createSuper$1(SpinnerThreeBouncePlugin);
-
-    _createClass$1(SpinnerThreeBouncePlugin, [{
-      key: "name",
-      get: function get() {
-        return 'spinner';
-      }
-    }, {
-      key: "supportedVersion",
-      get: function get() {
-        return {
-          min: "0.4.17"
-        };
-      }
-    }, {
-      key: "attributes",
-      get: function get() {
-        return {
-          'data-spinner': '',
-          'class': 'spinner-three-bounce'
-        };
-      }
-    }]);
+    var _super = _createSuper(SpinnerThreeBouncePlugin);
 
     function SpinnerThreeBouncePlugin(container) {
       var _this;
 
-      _classCallCheck$1(this, SpinnerThreeBouncePlugin);
+      _classCallCheck(this, SpinnerThreeBouncePlugin);
 
       _this = _super.call(this, container);
       _this.template = tmpl(spinnerHTML);
@@ -12047,7 +12061,27 @@
       return _this;
     }
 
-    _createClass$1(SpinnerThreeBouncePlugin, [{
+    _createClass(SpinnerThreeBouncePlugin, [{
+      key: "name",
+      get: function get() {
+        return 'spinner';
+      }
+    }, {
+      key: "supportedVersion",
+      get: function get() {
+        return {
+          min: "0.4.20"
+        };
+      }
+    }, {
+      key: "attributes",
+      get: function get() {
+        return {
+          'data-spinner': '',
+          'class': 'spinner-three-bounce'
+        };
+      }
+    }, {
       key: "onBuffering",
       value: function onBuffering() {
         this.show();
@@ -12084,7 +12118,11 @@
     }, {
       key: "render",
       value: function render() {
+        var style = Styler.getStyleFor(css_248z$1, {
+          baseUrl: this.options.baseUrl
+        });
         this.$el.html(this.template());
+        this.$el.append(style[0]);
         this.container.$el.append(this.$el);
         this.$el.hide();
         if (this.container.buffering) this.onBuffering();
@@ -12096,28 +12134,14 @@
   }(UIContainerPlugin);
 
   var StatsPlugin = /*#__PURE__*/function (_ContainerPlugin) {
-    _inherits$1(StatsPlugin, _ContainerPlugin);
+    _inherits(StatsPlugin, _ContainerPlugin);
 
-    var _super = _createSuper$1(StatsPlugin);
-
-    _createClass$1(StatsPlugin, [{
-      key: "name",
-      get: function get() {
-        return 'stats';
-      }
-    }, {
-      key: "supportedVersion",
-      get: function get() {
-        return {
-          min: "0.4.17"
-        };
-      }
-    }]);
+    var _super = _createSuper(StatsPlugin);
 
     function StatsPlugin(container) {
       var _this;
 
-      _classCallCheck$1(this, StatsPlugin);
+      _classCallCheck(this, StatsPlugin);
 
       _this = _super.call(this, container);
 
@@ -12128,7 +12152,19 @@
       return _this;
     }
 
-    _createClass$1(StatsPlugin, [{
+    _createClass(StatsPlugin, [{
+      key: "name",
+      get: function get() {
+        return 'stats';
+      }
+    }, {
+      key: "supportedVersion",
+      get: function get() {
+        return {
+          min: "0.4.20"
+        };
+      }
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.container.playback, Events.PLAYBACK_PLAY, this.onPlay);
@@ -12232,15 +12268,26 @@
 
   var watermarkHTML = "<div class=\"clappr-watermark\" data-watermark data-watermark-<%=position %>>\n<% if(typeof imageLink !== 'undefined') { %>\n<a target=\"_blank\" href=\"<%= imageLink %>\">\n<% } %>\n<img src=\"<%= imageUrl %>\">\n<% if(typeof imageLink !== 'undefined') { %>\n</a>\n<% } %>\n</div>\n";
 
-  var css_248z$7 = ".clappr-watermark[data-watermark] {\n  position: absolute;\n  min-width: 70px;\n  max-width: 200px;\n  width: 12%;\n  text-align: center;\n  z-index: 10; }\n\n.clappr-watermark[data-watermark] a {\n  outline: none;\n  cursor: pointer; }\n\n.clappr-watermark[data-watermark] img {\n  max-width: 100%; }\n\n.clappr-watermark[data-watermark-bottom-left] {\n  bottom: 10px;\n  left: 10px; }\n\n.clappr-watermark[data-watermark-bottom-right] {\n  bottom: 10px;\n  right: 42px; }\n\n.clappr-watermark[data-watermark-top-left] {\n  top: 10px;\n  left: 10px; }\n\n.clappr-watermark[data-watermark-top-right] {\n  top: 10px;\n  right: 37px; }\n";
-  styleInject(css_248z$7);
+  var css_248z = ".clappr-watermark[data-watermark] {\n  position: absolute;\n  min-width: 70px;\n  max-width: 200px;\n  width: 12%;\n  text-align: center;\n  z-index: 10; }\n\n.clappr-watermark[data-watermark] a {\n  outline: none;\n  cursor: pointer; }\n\n.clappr-watermark[data-watermark] img {\n  max-width: 100%; }\n\n.clappr-watermark[data-watermark-bottom-left] {\n  bottom: 10px;\n  left: 10px; }\n\n.clappr-watermark[data-watermark-bottom-right] {\n  bottom: 10px;\n  right: 42px; }\n\n.clappr-watermark[data-watermark-top-left] {\n  top: 10px;\n  left: 10px; }\n\n.clappr-watermark[data-watermark-top-right] {\n  top: 10px;\n  right: 37px; }\n";
 
   var WaterMarkPlugin = /*#__PURE__*/function (_UIContainerPlugin) {
-    _inherits$1(WaterMarkPlugin, _UIContainerPlugin);
+    _inherits(WaterMarkPlugin, _UIContainerPlugin);
+
+    var _super = _createSuper(WaterMarkPlugin);
+
+    function WaterMarkPlugin(container) {
+      var _this;
+
+      _classCallCheck(this, WaterMarkPlugin);
+
+      _this = _super.call(this, container);
 
-    var _super = _createSuper$1(WaterMarkPlugin);
+      _this.configure();
+
+      return _this;
+    }
 
-    _createClass$1(WaterMarkPlugin, [{
+    _createClass(WaterMarkPlugin, [{
       key: "name",
       get: function get() {
         return 'watermark';
@@ -12249,7 +12296,7 @@
       key: "supportedVersion",
       get: function get() {
         return {
-          min: "0.4.17"
+          min: "0.4.20"
         };
       }
     }, {
@@ -12257,21 +12304,7 @@
       get: function get() {
         return tmpl(watermarkHTML);
       }
-    }]);
-
-    function WaterMarkPlugin(container) {
-      var _this;
-
-      _classCallCheck$1(this, WaterMarkPlugin);
-
-      _this = _super.call(this, container);
-
-      _this.configure();
-
-      return _this;
-    }
-
-    _createClass$1(WaterMarkPlugin, [{
+    }, {
       key: "bindEvents",
       value: function bindEvents() {
         this.listenTo(this.container, Events.CONTAINER_PLAY, this.onPlay);
@@ -12305,12 +12338,16 @@
       key: "render",
       value: function render() {
         this.$el.hide();
+        var style = Styler.getStyleFor(css_248z, {
+          baseUrl: this.options.baseUrl
+        });
         var templateOptions = {
           position: this.position,
           imageUrl: this.imageUrl,
           imageLink: this.imageLink
         };
         this.$el.html(this.template(templateOptions));
+        this.$el.append(style[0]);
         this.container.$el.append(this.$el);
         return this;
       }
@@ -12320,21 +12357,21 @@
   }(UIContainerPlugin);
   var Plugins = {
     ClickToPause: ClickToPausePlugin,
-    ClosedCaptions: ClosedCaptions,
-    DVRControls: DVRControls,
-    EndVideo: EndVideo,
-    ErrorScreen: ErrorScreen,
-    Favicon: Favicon,
-    GoogleAnalytics: GoogleAnalytics,
-    MediaControl: MediaControl,
+    ClosedCaptions: ClosedCaptions$1,
+    DVRControls: DVRControls$1,
+    EndVideo: EndVideo$1,
+    ErrorScreen: ErrorScreen$1,
+    Favicon: Favicon$1,
+    GoogleAnalytics: GoogleAnalytics$1,
+    MediaControl: MediaControl$1,
     Poster: PosterPlugin,
-    SeekTime: SeekTime,
+    SeekTime: SeekTime$1,
     SpinnerThreeBounce: SpinnerThreeBouncePlugin,
     Stats: StatsPlugin,
     WaterMark: WaterMarkPlugin
   };
 
-  var version$1 = "0.4.3";
+  var version = "0.4.6";
 
   for (var _i = 0, _Object$values = Object.values(Plugins); _i < _Object$values.length; _i++) {
     var plugin = _Object$values[_i];
@@ -12343,35 +12380,35 @@
 
 
   var ClickToPause = Plugins.ClickToPause,
-      ClosedCaptions$1 = Plugins.ClosedCaptions,
-      DVRControls$1 = Plugins.DVRControls,
-      EndVideo$1 = Plugins.EndVideo,
-      ErrorScreen$1 = Plugins.ErrorScreen,
-      Favicon$1 = Plugins.Favicon,
-      GoogleAnalytics$1 = Plugins.GoogleAnalytics,
-      MediaControl$1 = Plugins.MediaControl,
+      ClosedCaptions = Plugins.ClosedCaptions,
+      DVRControls = Plugins.DVRControls,
+      EndVideo = Plugins.EndVideo,
+      ErrorScreen = Plugins.ErrorScreen,
+      Favicon = Plugins.Favicon,
+      GoogleAnalytics = Plugins.GoogleAnalytics,
+      MediaControl = Plugins.MediaControl,
       Poster = Plugins.Poster,
-      SeekTime$1 = Plugins.SeekTime,
+      SeekTime = Plugins.SeekTime,
       SpinnerThreeBounce = Plugins.SpinnerThreeBounce,
       Stats = Plugins.Stats,
       WaterMark = Plugins.WaterMark;
-  var base_bundle = _objectSpread2(_objectSpread2({}, main), {}, {
+  var base_bundle = _objectSpread2$1(_objectSpread2$1({}, main), {}, {
     ClickToPause: ClickToPause,
-    ClosedCaptions: ClosedCaptions$1,
-    DVRControls: DVRControls$1,
-    EndVideo: EndVideo$1,
-    ErrorScreen: ErrorScreen$1,
-    Favicon: Favicon$1,
-    GoogleAnalytics: GoogleAnalytics$1,
-    MediaControl: MediaControl$1,
+    ClosedCaptions: ClosedCaptions,
+    DVRControls: DVRControls,
+    EndVideo: EndVideo,
+    ErrorScreen: ErrorScreen,
+    Favicon: Favicon,
+    GoogleAnalytics: GoogleAnalytics,
+    MediaControl: MediaControl,
     Poster: Poster,
-    SeekTime: SeekTime$1,
+    SeekTime: SeekTime,
     SpinnerThreeBounce: SpinnerThreeBounce,
     Stats: Stats,
     WaterMark: WaterMark,
     Vendor: index,
     Plugins: Plugins,
-    version: version$1
+    version: version
   });
 
   return base_bundle;