v3.3.7

Poster fixes

changelog.md

@@ -1,3 +1,33 @@
+# v3.3.7
+
+*   Poster fixes (thanks @friday)
+*   Grid tweak
+
+# v3.3.6
+
+*   Vimeo fixes for mute state
+*   Vimeo ID fix (fixes #945)
+*   Use `<div>` for poster container
+*   Tooltip fixes for unicode languages (fixes #943)
+
+# v3.3.5
+
+*   Removed `.load()` call as it breaks HLS (see #870)
+
+# v3.3.4
+
+*   Fix for controls sometimes not showing while video is playing
+*   Fixed logic for show home tab on option select
+
+# v3.3.3
+
+*   Reverted change to show home tab on option select due to usability regression
+
+# v3.3.2
+
+*   Fix for ads running in audio
+*   Fix for setting poster on source change
+
 ## v3.3.0
 
 *   Now using a custom poster image element to hide the YouTube play button and give more control over when the poster image shows

demo/dist/demo.js

@@ -3948,6 +3948,39 @@ singleton.Client = Client;
                     'airplay',
                     'fullscreen',
                 ], */
+                /* i18n: {
+                    restart: '重新開始',
+                    rewind: '快退{seektime}秒',
+                    play: '播放',
+                    pause: '暫停',
+                    fastForward: '快進{seektime}秒',
+                    seek: '尋求',
+                    played: '發揮',
+                    buffered: '緩衝的',
+                    currentTime: '當前時間戳',
+                    duration: '長短',
+                    volume: '音量',
+                    mute: '靜音',
+                    unmute: '取消靜音',
+                    enableCaptions: '開啟字幕',
+                    disableCaptions: '關閉字幕',
+                    enterFullscreen: '進入全螢幕',
+                    exitFullscreen: '退出全螢幕',
+                    frameTitle: '球員為{title}',
+                    captions: '字幕',
+                    settings: '設定',
+                    speed: '速度',
+                    normal: '正常',
+                    quality: '質量',
+                    loop: '循環',
+                    start: 'Start',
+                    end: 'End',
+                    all: 'All',
+                    reset: '重啟',
+                    disabled: '殘',
+                    enabled: '啟用',
+                    advertisement: '廣告',
+                }, */
                 captions: {
                     active: true
                 },

demo/src/js/demo.js

@@ -74,6 +74,39 @@ import Raven from 'raven-js';
                     'airplay',
                     'fullscreen',
                 ], */
+                /* i18n: {
+                    restart: '重新開始',
+                    rewind: '快退{seektime}秒',
+                    play: '播放',
+                    pause: '暫停',
+                    fastForward: '快進{seektime}秒',
+                    seek: '尋求',
+                    played: '發揮',
+                    buffered: '緩衝的',
+                    currentTime: '當前時間戳',
+                    duration: '長短',
+                    volume: '音量',
+                    mute: '靜音',
+                    unmute: '取消靜音',
+                    enableCaptions: '開啟字幕',
+                    disableCaptions: '關閉字幕',
+                    enterFullscreen: '進入全螢幕',
+                    exitFullscreen: '退出全螢幕',
+                    frameTitle: '球員為{title}',
+                    captions: '字幕',
+                    settings: '設定',
+                    speed: '速度',
+                    normal: '正常',
+                    quality: '質量',
+                    loop: '循環',
+                    start: 'Start',
+                    end: 'End',
+                    all: 'All',
+                    reset: '重啟',
+                    disabled: '殘',
+                    enabled: '啟用',
+                    advertisement: '廣告',
+                }, */
                 captions: {
                     active: true,
                 },

demo/src/sass/settings/layout.scss

@@ -2,4 +2,4 @@
 // Layout
 // ==========================================================================
 
-$container-max-width: 1280px;
+$container-max-width: 1260px;

dist/plyr.js

@@ -1214,7 +1214,7 @@ var utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 
@@ -1850,7 +1850,7 @@ var ui = {
 
 
     // Check playing state
-    checkPlaying: function checkPlaying() {
+    checkPlaying: function checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -1859,6 +1859,11 @@ var ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },
@@ -3742,7 +3747,7 @@ var defaults$1 = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.3.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -3809,10 +3814,10 @@ var defaults$1 = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -3941,13 +3946,14 @@ var defaults$1 = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',
@@ -4915,6 +4921,7 @@ var vimeo = {
         var options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -4944,7 +4951,7 @@ var vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        var wrapper = utils.createElement('div');
+        var wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 
@@ -4969,7 +4976,10 @@ var vimeo = {
 
         // Setup instance
         // https://github.com/vimeo/player.js
-        player.embed = new window.Vimeo.Player(iframe);
+        player.embed = new window.Vimeo.Player(iframe, {
+            autopause: player.config.autopause,
+            muted: player.muted
+        });
 
         player.media.paused = true;
         player.media.currentTime = 0;
@@ -5764,7 +5774,7 @@ var media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster
             });
 
@@ -5805,7 +5815,6 @@ var Ads = function () {
 
         this.player = player;
         this.publisherId = player.config.ads.publisherId;
-        this.enabled = player.isHTML5 && player.isVideo && player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
         this.playing = false;
         this.initialized = false;
         this.elements = {
@@ -5831,13 +5840,13 @@ var Ads = function () {
         this.load();
     }
 
-    /**
-     * Load the IMA SDK
-     */
-
-
     createClass(Ads, [{
         key: 'load',
+
+
+        /**
+         * Load the IMA SDK
+         */
         value: function load() {
             var _this2 = this;
 
@@ -6442,6 +6451,11 @@ var Ads = function () {
                 this.safetyTimer = null;
             }
         }
+    }, {
+        key: 'enabled',
+        get: function get$$1() {
+            return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
+        }
     }, {
         key: 'tagUrl',
         get: function get$$1() {
@@ -6553,8 +6567,8 @@ var source = {
                 if (_this2.config.autoplay) {
                     _this2.media.setAttribute('autoplay', '');
                 }
-                if ('poster' in input) {
-                    _this2.media.setAttribute('poster', input.poster);
+                if (!utils.is.empty(input.poster)) {
+                    _this2.poster = input.poster;
                 }
                 if (_this2.config.loop.active) {
                     _this2.media.setAttribute('loop', '');
@@ -6984,11 +6998,6 @@ var Plyr = function () {
                 return null;
             }
 
-            // If ads are enabled, wait for them first
-            /* if (this.ads.enabled && !this.ads.initialized) {
-                return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
-            } */
-
             // Return the promise (for HTML5)
             return this.media.play();
         }
@@ -7038,7 +7047,8 @@ var Plyr = function () {
         key: 'stop',
         value: function stop() {
             if (this.isHTML5) {
-                this.media.load();
+                this.pause();
+                this.restart();
             } else if (utils.is.function(this.media.stop)) {
                 this.media.stop();
             }
@@ -8036,6 +8046,38 @@ var Plyr = function () {
         value: function loadSprite(url, id) {
             return utils.loadSprite(url, id);
         }
+
+        /**
+         * Setup multiple instances
+         * @param {*} selector
+         * @param {object} options
+         */
+
+    }, {
+        key: 'setup',
+        value: function setup(selector) {
+            var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+            var targets = null;
+
+            if (utils.is.string(selector)) {
+                targets = Array.from(document.querySelectorAll(selector));
+            } else if (utils.is.nodeList(selector)) {
+                targets = Array.from(selector);
+            } else if (utils.is.array(selector)) {
+                targets = selector.filter(function (i) {
+                    return utils.is.element(i);
+                });
+            }
+
+            if (utils.is.empty(targets)) {
+                return null;
+            }
+
+            return targets.map(function (t) {
+                return new Plyr(t, options);
+            });
+        }
     }]);
     return Plyr;
 }();

dist/plyr.polyfilled.js

@@ -6248,7 +6248,7 @@ var utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 
@@ -6884,7 +6884,7 @@ var ui = {
 
 
     // Check playing state
-    checkPlaying: function checkPlaying() {
+    checkPlaying: function checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -6893,6 +6893,11 @@ var ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },
@@ -8776,7 +8781,7 @@ var defaults$1 = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.3.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -8843,10 +8848,10 @@ var defaults$1 = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -8975,13 +8980,14 @@ var defaults$1 = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',
@@ -9949,6 +9955,7 @@ var vimeo = {
         var options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -9978,7 +9985,7 @@ var vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        var wrapper = utils.createElement('div');
+        var wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 
@@ -10003,7 +10010,10 @@ var vimeo = {
 
         // Setup instance
         // https://github.com/vimeo/player.js
-        player.embed = new window.Vimeo.Player(iframe);
+        player.embed = new window.Vimeo.Player(iframe, {
+            autopause: player.config.autopause,
+            muted: player.muted
+        });
 
         player.media.paused = true;
         player.media.currentTime = 0;
@@ -10798,7 +10808,7 @@ var media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster
             });
 
@@ -10839,7 +10849,6 @@ var Ads = function () {
 
         this.player = player;
         this.publisherId = player.config.ads.publisherId;
-        this.enabled = player.isHTML5 && player.isVideo && player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
         this.playing = false;
         this.initialized = false;
         this.elements = {
@@ -10865,13 +10874,13 @@ var Ads = function () {
         this.load();
     }
 
-    /**
-     * Load the IMA SDK
-     */
-
-
     createClass(Ads, [{
         key: 'load',
+
+
+        /**
+         * Load the IMA SDK
+         */
         value: function load() {
             var _this2 = this;
 
@@ -11476,6 +11485,11 @@ var Ads = function () {
                 this.safetyTimer = null;
             }
         }
+    }, {
+        key: 'enabled',
+        get: function get() {
+            return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
+        }
     }, {
         key: 'tagUrl',
         get: function get() {
@@ -11587,8 +11601,8 @@ var source = {
                 if (_this2.config.autoplay) {
                     _this2.media.setAttribute('autoplay', '');
                 }
-                if ('poster' in input) {
-                    _this2.media.setAttribute('poster', input.poster);
+                if (!utils.is.empty(input.poster)) {
+                    _this2.poster = input.poster;
                 }
                 if (_this2.config.loop.active) {
                     _this2.media.setAttribute('loop', '');
@@ -12018,11 +12032,6 @@ var Plyr = function () {
                 return null;
             }
 
-            // If ads are enabled, wait for them first
-            /* if (this.ads.enabled && !this.ads.initialized) {
-                return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
-            } */
-
             // Return the promise (for HTML5)
             return this.media.play();
         }
@@ -12072,7 +12081,8 @@ var Plyr = function () {
         key: 'stop',
         value: function stop() {
             if (this.isHTML5) {
-                this.media.load();
+                this.pause();
+                this.restart();
             } else if (utils.is.function(this.media.stop)) {
                 this.media.stop();
             }
@@ -13070,6 +13080,38 @@ var Plyr = function () {
         value: function loadSprite(url, id) {
             return utils.loadSprite(url, id);
         }
+
+        /**
+         * Setup multiple instances
+         * @param {*} selector
+         * @param {object} options
+         */
+
+    }, {
+        key: 'setup',
+        value: function setup(selector) {
+            var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+            var targets = null;
+
+            if (utils.is.string(selector)) {
+                targets = Array.from(document.querySelectorAll(selector));
+            } else if (utils.is.nodeList(selector)) {
+                targets = Array.from(selector);
+            } else if (utils.is.array(selector)) {
+                targets = selector.filter(function (i) {
+                    return utils.is.element(i);
+                });
+            }
+
+            if (utils.is.empty(targets)) {
+                return null;
+            }
+
+            return targets.map(function (t) {
+                return new Plyr(t, options);
+            });
+        }
     }]);
     return Plyr;
 }();

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.0",
+    "version": "3.3.7",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -8,7 +8,7 @@
     "sass": "./src/sass/plyr.scss",
     "style": "./dist/plyr.css",
     "devDependencies": {
-        "babel-core": "^6.26.0",
+        "babel-core": "^6.26.3",
         "babel-eslint": "^8.2.3",
         "babel-plugin-external-helpers": "^6.22.0",
         "babel-preset-env": "^1.6.1",
@@ -21,7 +21,7 @@
         "gulp": "^3.9.1",
         "gulp-autoprefixer": "^5.0.0",
         "gulp-better-rollup": "^3.1.0",
-        "gulp-clean-css": "^3.9.3",
+        "gulp-clean-css": "^3.9.4",
         "gulp-concat": "^2.6.1",
         "gulp-filter": "^5.1.0",
         "gulp-open": "^3.0.1",
@@ -38,7 +38,7 @@
         "prettier-eslint": "^8.8.1",
         "prettier-stylelint": "^0.4.2",
         "rollup-plugin-babel": "^3.0.4",
-        "rollup-plugin-commonjs": "^9.1.0",
+        "rollup-plugin-commonjs": "^9.1.3",
         "rollup-plugin-node-resolve": "^3.3.0",
         "run-sequence": "^2.2.1",
         "stylelint": "^9.2.0",
@@ -46,7 +46,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.0.1",
+        "stylelint-scss": "^3.1.0",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

readme.md

@@ -128,7 +128,7 @@ See [initialising](#initialising) for more information on advanced setups.
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
 
 ```html
-<script src="https://cdn.plyr.io/3.3.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.7/plyr.js"></script>
 ```
 
 _Note_: Be sure to read the [polyfills](#polyfills) section below about browser compatibility
@@ -144,13 +144,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.3.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.7/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.0/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.7/plyr.svg`.
 
 ## Ads
 
@@ -210,7 +210,7 @@ You can specify a range of arguments for the constructor to use:
 *   A [`NodeList]`(https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
 *   A [jQuery](https://jquery.com) object
 
-_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup.
+_Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [setting up multiple players](#setting-up-multiple-players) below.
 
 Here's some examples
 
@@ -226,20 +226,32 @@ Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElemen
 const player = new Plyr(document.getElementById('player'));
 ```
 
-Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
+Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) (see note below):
 
 ```javascript
 const player = new Plyr(document.querySelectorAll('.js-player'));
 ```
 
-The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds
+The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>`, or `<div>` wrapper for embeds.
 
 ##### Setting up multiple players
 
+You have two choices here. You can either use a simple array loop to map the constructor:
+
 ```javascript
-const players = Array.from(document.querySelectorAll('.js-player')).map(player => new Plyr(player));
+const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
 ```
 
+...or use a static method where you can pass a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) or an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of elements:
+
+```javascript
+const players = Plyr.setup('.js-player');
+```
+
+Both options will also return an array of instances in the order of they were in the DOM for the string selector or the source NodeList or Array.
+
+##### Passing options
+
 The second argument for the constructor is the [options](#options) object:
 
 ```javascript
@@ -248,7 +260,7 @@ const player = new Plyr('#player', {
 });
 ```
 
-The constructor will return a Plyr object that can be used with the [API](#api) methods. See the [API](#api) section for more info.
+In all cases, the constructor will return a Plyr object that can be used with the [API](#api) methods. See the [API](#api) section for more info.
 
 #### Options
 

src/js/defaults.js

@@ -56,7 +56,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.3.0/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.3.7/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
@@ -157,10 +157,10 @@ const defaults = {
     // Localisation
     i18n: {
         restart: 'Restart',
-        rewind: 'Rewind {seektime} secs',
+        rewind: 'Rewind {seektime}s',
         play: 'Play',
         pause: 'Pause',
-        fastForward: 'Forward {seektime} secs',
+        fastForward: 'Forward {seektime}s',
         seek: 'Seek',
         played: 'Played',
         buffered: 'Buffered',
@@ -326,13 +326,14 @@ const defaults = {
 
     // Class hooks added to the player in different states
     classNames: {
+        type: 'plyr--{0}',
+        provider: 'plyr--{0}',
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        embedContainer: 'plyr__video-embed__container',
         poster: 'plyr__poster',
         ads: 'plyr__ads',
         control: 'plyr__control',
-        type: 'plyr--{0}',
-        provider: 'plyr--{0}',
         playing: 'plyr--playing',
         paused: 'plyr--paused',
         stopped: 'plyr--stopped',

src/js/media.js

@@ -39,7 +39,7 @@ const media = {
             utils.wrap(this.media, this.elements.wrapper);
 
             // Faux poster container
-            this.elements.poster = utils.createElement('span', {
+            this.elements.poster = utils.createElement('div', {
                 class: this.config.classNames.poster,
             });
 

src/js/plugins/ads.js

@@ -18,7 +18,6 @@ class Ads {
     constructor(player) {
         this.player = player;
         this.publisherId = player.config.ads.publisherId;
-        this.enabled = player.isHTML5 && player.isVideo && player.config.ads.enabled && utils.is.string(this.publisherId) && this.publisherId.length;
         this.playing = false;
         this.initialized = false;
         this.elements = {
@@ -44,6 +43,10 @@ class Ads {
         this.load();
     }
 
+    get enabled() {
+        return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId);
+    }
+
     /**
      * Load the IMA SDK
      */

src/js/plugins/vimeo.js

@@ -53,6 +53,7 @@ const vimeo = {
         const options = {
             loop: player.config.loop.active,
             autoplay: player.autoplay,
+            // muted: player.muted,
             byline: false,
             portrait: false,
             title: false,
@@ -82,7 +83,7 @@ const vimeo = {
         iframe.setAttribute('allow', 'autoplay');
 
         // Inject the package
-        const wrapper = utils.createElement('div');
+        const wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer });
         wrapper.appendChild(iframe);
         player.media = utils.replaceElement(wrapper, player.media);
 
@@ -107,7 +108,10 @@ const vimeo = {
 
         // Setup instance
         // https://github.com/vimeo/player.js
-        player.embed = new window.Vimeo.Player(iframe);
+        player.embed = new window.Vimeo.Player(iframe, {
+            autopause: player.config.autopause,
+            muted: player.muted,
+        });
 
         player.media.paused = true;
         player.media.currentTime = 0;

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.0
+// plyr.js v3.3.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -333,11 +333,6 @@ class Plyr {
             return null;
         }
 
-        // If ads are enabled, wait for them first
-        /* if (this.ads.enabled && !this.ads.initialized) {
-            return this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
-        } */
-
         // Return the promise (for HTML5)
         return this.media.play();
     }
@@ -401,7 +396,8 @@ class Plyr {
      */
     stop() {
         if (this.isHTML5) {
-            this.media.load();
+            this.pause();
+            this.restart();
         } else if (utils.is.function(this.media.stop)) {
             this.media.stop();
         }
@@ -1248,6 +1244,29 @@ class Plyr {
     static loadSprite(url, id) {
         return utils.loadSprite(url, id);
     }
+
+    /**
+     * Setup multiple instances
+     * @param {*} selector
+     * @param {object} options
+     */
+    static setup(selector, options = {}) {
+        let targets = null;
+
+        if (utils.is.string(selector)) {
+            targets = Array.from(document.querySelectorAll(selector));
+        } else if (utils.is.nodeList(selector)) {
+            targets = Array.from(selector);
+        } else if (utils.is.array(selector)) {
+            targets = selector.filter(i => utils.is.element(i));
+        }
+
+        if (utils.is.empty(targets)) {
+            return null;
+        }
+
+        return targets.map(t => new Plyr(t, options));
+    }
 }
 
 export default Plyr;

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.0
+// plyr.js v3.3.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/source.js

@@ -2,12 +2,12 @@
 // Plyr source update
 // ==========================================================================
 
-import { providers } from './types';
-import utils from './utils';
 import html5 from './html5';
 import media from './media';
-import ui from './ui';
 import support from './support';
+import { providers } from './types';
+import ui from './ui';
+import utils from './utils';
 
 const source = {
     // Add elements to HTML5 media (source, tracks, etc)
@@ -94,8 +94,8 @@ const source = {
                     if (this.config.autoplay) {
                         this.media.setAttribute('autoplay', '');
                     }
-                    if ('poster' in input) {
-                        this.media.setAttribute('poster', input.poster);
+                    if (!utils.is.empty(input.poster)) {
+                        this.poster = input.poster;
                     }
                     if (this.config.loop.active) {
                         this.media.setAttribute('loop', '');

src/js/ui.js

@@ -158,7 +158,7 @@ const ui = {
     },
 
     // Check playing state
-    checkPlaying() {
+    checkPlaying(event) {
         // Class hooks
         utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing);
         utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused);
@@ -167,6 +167,11 @@ const ui = {
         // Set ARIA state
         utils.toggleState(this.elements.buttons.play, this.playing);
 
+        // Only update controls on non timeupdate events
+        if (utils.is.event(event) && event.type === 'timeupdate') {
+            return;
+        }
+
         // Toggle controls
         this.toggleControls(!this.playing);
     },

src/js/utils.js

@@ -723,7 +723,7 @@ const utils = {
         }
 
         // Vimeo
-        if (/^https?:\/\/player.vimeo.com\/video\/\d{8,}(?=\b|\/)/.test(url)) {
+        if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
             return providers.vimeo;
         }
 

src/sass/components/embed.scss

@@ -32,8 +32,8 @@ $embed-padding: ((100 / 16) * 9);
         pointer-events: none;
     }
 
-    // Vimeo hack
-    > div {
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
         padding-bottom: to-percentage($height);
         position: relative;
         transform: translateY(-$offset);

src/sass/components/poster.scss

@@ -6,7 +6,7 @@
     background-color: #000;
     background-position: 50% 50%;
     background-repeat: no-repeat;
-    background-size: 100% 100%;
+    background-size: contain;
     height: 100%;
     left: 0;
     opacity: 0;
@@ -15,6 +15,7 @@
     transition: opacity 0.3s ease;
     width: 100%;
     z-index: 1;
+    pointer-events: none;
 }
 
 .plyr--stopped .plyr__poster {

src/sass/components/tooltips.scss

@@ -19,6 +19,7 @@
     transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
     transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
+    white-space: nowrap;
     z-index: 2;
 
     // The background triangle

yarn.lock

@@ -548,6 +548,30 @@ babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
+babel-core@^6.26.3:
+  version "6.26.3"
+  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
+    babel-messages "^6.23.0"
+    babel-register "^6.26.0"
+    babel-runtime "^6.26.0"
+    babel-template "^6.26.0"
+    babel-traverse "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    convert-source-map "^1.5.1"
+    debug "^2.6.9"
+    json5 "^0.5.1"
+    lodash "^4.17.4"
+    minimatch "^3.0.4"
+    path-is-absolute "^1.0.1"
+    private "^0.1.8"
+    slash "^1.0.0"
+    source-map "^0.5.7"
+
 babel-eslint@^8.2.3:
   version "8.2.3"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.3.tgz#1a2e6681cc9bc4473c32899e59915e19cd6733cf"
@@ -1612,7 +1636,7 @@ contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
 
-convert-source-map@1.X, convert-source-map@^1.1.0, convert-source-map@^1.5.0:
+convert-source-map@1.X, convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -1716,6 +1740,10 @@ css@2.X, css@^2.2.1:
     source-map-resolve "^0.3.0"
     urix "^0.1.0"
 
+cssesc@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8"
+
 csso@~2.3.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
@@ -2971,9 +2999,9 @@ gulp-better-rollup@^3.1.0:
     vinyl "^2.1.0"
     vinyl-sourcemaps-apply "^0.2.1"
 
-gulp-clean-css@^3.9.3:
-  version "3.9.3"
-  resolved "https://registry.yarnpkg.com/gulp-clean-css/-/gulp-clean-css-3.9.3.tgz#47bf7ad62f44970f86e4ac4bdeed68ad904e65c5"
+gulp-clean-css@^3.9.4:
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/gulp-clean-css/-/gulp-clean-css-3.9.4.tgz#c6d3f8bb7a600fbe661962a72348a330954d343b"
   dependencies:
     clean-css "4.1.11"
     plugin-error "1.0.1"
@@ -4829,8 +4857,8 @@ nanomatch@^1.2.9:
     to-regex "^3.0.1"
 
 natives@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.1.tgz#011acce1f7cbd87f7ba6b3093d6cd9392be1c574"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/natives/-/natives-1.1.3.tgz#44a579be64507ea2d6ed1ca04a9415915cf75558"
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -5715,6 +5743,14 @@ postcss-selector-parser@^3.1.0, postcss-selector-parser@^3.1.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-4.0.0.tgz#50c6570f40579036d8e63f23e6c0626fe5743527"
+  dependencies:
+    cssesc "^1.0.1"
+    indexes-of "^1.0.1"
+    uniq "^1.0.1"
+
 postcss-sorting@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-3.1.0.tgz#af7c90ee73ad12569a57664eaf06735c2e25bec0"
@@ -5818,7 +5854,7 @@ pretty-hrtime@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
 
-private@^0.1.6, private@^0.1.7:
+private@^0.1.6, private@^0.1.7, private@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
 
@@ -6460,9 +6496,9 @@ rollup-plugin-babel@^3.0.4:
   dependencies:
     rollup-pluginutils "^1.5.0"
 
-rollup-plugin-commonjs@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.0.tgz#468341aab32499123ee9a04b22f51d9bf26fdd94"
+rollup-plugin-commonjs@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-9.1.3.tgz#37bfbf341292ea14f512438a56df8f9ca3ba4d67"
   dependencies:
     estree-walker "^0.5.1"
     magic-string "^0.22.4"
@@ -7058,14 +7094,14 @@ stylelint-scss@^2.0.0:
     postcss-selector-parser "^3.1.1"
     postcss-value-parser "^3.3.0"
 
-stylelint-scss@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.0.1.tgz#bc062e818add985f19dee98f7f5b4bff4f38706e"
+stylelint-scss@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-3.1.0.tgz#aa46503014d1a6edb2fb4c5fefb73a7d0d5bc644"
   dependencies:
     lodash "^4.17.4"
     postcss-media-query-parser "^0.2.3"
     postcss-resolve-nested-selector "^0.1.1"
-    postcss-selector-parser "^3.1.1"
+    postcss-selector-parser "^4.0.0"
     postcss-value-parser "^3.3.0"
 
 stylelint-selector-bem-pattern@^2.0.0: