Vimeo fixes + small bug fixes

fix for svg4everybody conflicting with plyr

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v2.0.17
+- Vimeo controls fix (fixes #697)
+- SVG4everybody compatibility fix
+- Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703)
+- Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649)
+- Target is null bug fix (https://github.com/sampotts/plyr/pull/617)
+- fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700)
+
+## v2.0.16
+- Fullscreen bug fix (fixes #664)
+
+## v2.0.15
+- Demo fix
+
 ## v2.0.14
 - CDN URL updates. Sorry, still working on V3 as hard as I can...
 

controls.md

@@ -37,6 +37,7 @@ You need to add several placeholders to your html template that are replaced whe
 
 - `{id}` - the dynamically generated ID for the player (for form controls)
 - `{seektime}` - the seek time specified in options for fast forward and rewind
+- `{title}` - the title of your media, if specified
 
 You can include only the controls you need when specifying custom html.
 

demo/dist/demo.js

@@ -1 +1 @@
-"document"in self&&("classList"in document.createElement("_")?function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,o=arguments.length;for(i=0;i<o;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():function(e){"use strict";if("Element"in e){var t=e.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},n=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},r=function(e,t){if(""===t)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(e,t)},a=function(e){for(var t=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(e){return this[e]||null},c.contains=function(e){return e+="",-1!==r(this,e)},c.add=function(){var e,t=arguments,i=0,o=t.length,s=!1;do{e=t[i]+"",-1===r(this,e)&&(this.push(e),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var e,t,i=arguments,o=0,s=i.length,n=!1;do{for(e=i[o]+"",t=r(this,e);-1!==t;)this.splice(t,1),n=!0,t=r(this,e)}while(++o<s);n&&this._updateClassName()},c.toggle=function(e,t){e+="";var i=this.contains(e),o=i?!0!==t&&"remove":!1!==t&&"add";return o&&this[o](e),!0===t||!1===t?t:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(t,"classList",u)}catch(e){-2146823252===e.number&&(u.enumerable=!1,i.defineProperty(t,"classList",u))}}else i.prototype.__defineGetter__&&t.__defineGetter__("classList",l)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var o=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=o+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=t;for(var a=s.length-1;a>=0;a--)e(s[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,o,s,n,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
+"document"in self&&("classList"in document.createElement("_")?function(){"use strict";var t=document.createElement("_");if(t.classList.add("c1","c2"),!t.classList.contains("c2")){var e=function(t){var e=DOMTokenList.prototype[t];DOMTokenList.prototype[t]=function(t){var i,o=arguments.length;for(i=0;i<o;i++)t=arguments[i],e.call(this,t)}};e("add"),e("remove")}if(t.classList.toggle("c3",!1),t.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(t,e){return 1 in arguments&&!this.contains(t)==!e?e:i.call(this,t)}}t=null}():function(t){"use strict";if("Element"in t){var e=t.Element.prototype,i=Object,o=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},s=Array.prototype.indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},n=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},r=function(t,e){if(""===e)throw new n("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new n("INVALID_CHARACTER_ERR","String contains an invalid character");return s.call(t,e)},a=function(t){for(var e=o.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],s=0,n=i.length;s<n;s++)this.push(i[s]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},c=a.prototype=[],l=function(){return new a(this)};if(n.prototype=Error.prototype,c.item=function(t){return this[t]||null},c.contains=function(t){return t+="",-1!==r(this,t)},c.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do{t=e[i]+"",-1===r(this,t)&&(this.push(t),s=!0)}while(++i<o);s&&this._updateClassName()},c.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do{for(t=i[o]+"",e=r(this,t);-1!==e;)this.splice(e,1),n=!0,e=r(this,t)}while(++o<s);n&&this._updateClassName()},c.toggle=function(t,e){t+="";var i=this.contains(t),o=i?!0!==e&&"remove":!1!==e&&"add";return o&&this[o](t),!0===e||!1===e?e:!i},c.toString=function(){return this.join(" ")},i.defineProperty){var u={get:l,enumerable:!0,configurable:!0};try{i.defineProperty(e,"classList",u)}catch(t){-2146823252===t.number&&(u.enumerable=!1,i.defineProperty(e,"classList",u))}}else i.prototype.__defineGetter__&&e.__defineGetter__("classList",l)}}(self)),function(){function t(t,e,i){if(t)if(t.classList)t.classList[i?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(/\s+/g," ").replace(" "+e+" ","");t.className=o+(i?" "+e:"")}}function e(e,i){if(e in n&&(i||e!==r)&&(r.length||e!==n.video)){switch(e){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"147865858",type:"vimeo"}]})}r=e;for(var a=s.length-1;a>=0;a--)t(s[a].parentElement,"active",!1);t(document.querySelector('[data-source="'+e+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var o=i[0],s=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=s.length-1;c>=0;c--)s[c].addEventListener("click",function(){var t=this.getAttribute("data-source");e(t),a&&history.pushState({type:t},"","#"+t)});if(window.addEventListener("popstate",function(t){t.state&&"type"in t.state&&e(t.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&e(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(t,e,i,o,s,n,r){t.GoogleAnalyticsObject=s,t.ga=t.ga||function(){(t.ga.q=t.ga.q||[]).push(arguments)},t.ga.l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src="//www.google-analytics.com/analytics.js",r.parentNode.insertBefore(n,r)}(window,document,"script",0,"ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

demo/error.html

@@ -1,18 +1,25 @@
 <!doctype html>
 <html lang="en" class="error">
-    <head>
+
+<head>
     <meta charset="utf-8" />
     <title>Doh. Looks like something went wrong.</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Docs styles -->
     <link rel="stylesheet" href="dist/demo.css">
-    </head>
+
-    <body>
+    <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
+</head>
+
+<body>
     <main>
         <h1>Doh.</h1>
         <p>Looks like something went wrong.</p>
         <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
     </main>
-    </body>
+</body>
+
 </html>

demo/index.html

@@ -13,6 +13,10 @@
 
     <!-- Docs styles -->
     <link rel="stylesheet" href="dist/demo.css">
+
+    <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
 </head>
 
 <body>

demo/src/js/main.js

@@ -13,8 +13,8 @@
     // Setup the player
     var instances = plyr.setup({
         debug: true,
-        title:              'Video demo',
+        title: "Video demo",
-        iconUrl:            '../dist/plyr.svg',
+        iconUrl: "../dist/plyr.svg",
         tooltips: {
             controls: true
         },
@@ -22,58 +22,58 @@
             defaultActive: true
         }
     });
-    plyr.loadSprite('dist/demo.svg');
+    plyr.loadSprite("dist/demo.svg");
 
     // Plyr returns an array regardless
     var player = instances[0];
 
     // Setup type toggle
-    var buttons = document.querySelectorAll('[data-source]'),
+    var buttons = document.querySelectorAll("[data-source]"),
         types = {
-            video:      'video',
+            video: "video",
-            audio:      'audio',
+            audio: "audio",
-            youtube:    'youtube',
+            youtube: "youtube",
-            vimeo:      'vimeo'
+            vimeo: "vimeo"
         },
-        currentType = window.location.hash.replace('#', ''),
+        currentType = window.location.hash.replace("#", ""),
-        historySupport = (window.history && window.history.pushState);
+        historySupport = window.history && window.history.pushState;
 
     // Bind to each button
     for (var i = buttons.length - 1; i >= 0; i--) {
-        buttons[i].addEventListener('click', function() {
+        buttons[i].addEventListener("click", function() {
-            var type = this.getAttribute('data-source');
+            var type = this.getAttribute("data-source");
 
             newSource(type);
 
             if (historySupport) {
-                history.pushState({ 'type': type }, '', '#' + type);
+                history.pushState({ type: type }, "", "#" + type);
             }
         });
     }
 
     // List for backwards/forwards
-    window.addEventListener('popstate', function(event) {
+    window.addEventListener("popstate", function(event) {
-        if(event.state && 'type' in event.state) {
+        if (event.state && "type" in event.state) {
             newSource(event.state.type);
         }
     });
 
     // On load
-    if(historySupport) {
+    if (historySupport) {
         var video = !currentType.length;
 
         // If there's no current type set, assume video
-        if(video) {
+        if (video) {
             currentType = types.video;
         }
 
         // Replace current history state
-        if(currentType in types) {
+        if (currentType in types) {
-            history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+            history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType);
         }
 
         // If it's not video, load the source
-        if(currentType !== types.video) {
+        if (currentType !== types.video) {
             newSource(currentType, true);
         }
     }
@@ -82,11 +82,10 @@
     function toggleClass(element, className, state) {
         if (element) {
             if (element.classList) {
-                element.classList[state ? 'add' : 'remove'](className);
+                element.classList[state ? "add" : "remove"](className);
-            }
+            } else {
-            else {
+                var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
-                var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
+                element.className = name + (state ? " " + className : "");
-                element.className = name + (state ? ' ' + className : '');
             }
         }
     }
@@ -94,68 +93,78 @@
     // Set a new source
     function newSource(type, init) {
         // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-        if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
             return;
         }
 
-        switch(type) {
+        switch (type) {
             case types.video:
                 player.source({
-                    type:       'video',
+                    type: "video",
-                    title:      'View From A Blue Moon',
+                    title: "View From A Blue Moon",
-                    sources: [{
+                    sources: [
-                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
+                        {
-                        type:   'video/mp4'
+                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",
+                            type: "video/mp4"
                         },
                         {
-                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
+                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
-                        type:   'video/webm'
+                            type: "video/webm"
-                    }],
+                        }
-                    poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                    ],
-                    tracks:     [{
+                    poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
-                        kind:   'captions',
+                    tracks: [
-                        label:  'English',
+                        {
-                        srclang:'en',
+                            kind: "captions",
-                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                            label: "English",
+                            srclang: "en",
+                            src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
                             default: true
-                    }]
+                        }
+                    ]
                 });
                 break;
 
             case types.audio:
                 player.source({
-                    type:       'audio',
+                    type: "audio",
-                    title:      'Kishi Bashi – “It All Began With A Burst”',
+                    title: "Kishi Bashi – “It All Began With A Burst”",
-                    sources: [{
+                    sources: [
-                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                        {
-                        type:   'audio/mp3'
+                            src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
+                            type: "audio/mp3"
                         },
                         {
-                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                            src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",
-                        type:   'audio/ogg'
+                            type: "audio/ogg"
-                    }]
+                        }
+                    ]
                 });
                 break;
 
             case types.youtube:
                 player.source({
-                    type:       'video',
+                    type: "video",
-                    title:      'View From A Blue Moon',
+                    title: "View From A Blue Moon",
-                    sources: [{
+                    sources: [
-                        src:    'bTqVqk7FSmY',
+                        {
-                        type:   'youtube'
+                            src: "bTqVqk7FSmY",
-                    }]
+                            type: "youtube"
+                        }
+                    ]
                 });
                 break;
 
             case types.vimeo:
                 player.source({
-                    type:       'video',
+                    type: "video",
-                    title:      'View From A Blue Moon',
+                    title: "View From A Blue Moon",
-                    sources: [{
+                    sources: [
-                        src:    '147865858',
+                        {
-                        type:   'vimeo'
+                            src: "147865858",
-                    }]
+                            type: "vimeo"
+                        }
+                    ]
                 });
                 break;
         }
@@ -165,21 +174,30 @@
 
         // Remove active classes
         for (var x = buttons.length - 1; x >= 0; x--) {
-            toggleClass(buttons[x].parentElement, 'active', false);
+            toggleClass(buttons[x].parentElement, "active", false);
         }
 
         // Set active on parent
-        toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
+        toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true);
     }
 })();
 
 // Google analytics
 // For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf('plyr.io') > -1) {
+if (document.domain.indexOf("plyr.io") > -1) {
-    (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
+    (function(i, s, o, g, r, a, m) {
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        i.GoogleAnalyticsObject = r;
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        (i[r] =
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+            i[r] ||
-    ga('create', 'UA-40881672-11', 'auto');
+            function() {
-    ga('send', 'pageview');
+                (i[r].q = i[r].q || []).push(arguments);
+            }),
+            (i[r].l = 1 * new Date());
+        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
+        a.async = 1;
+        a.src = g;
+        m.parentNode.insertBefore(a, m);
+    })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga");
+    ga("create", "UA-40881672-11", "auto");
+    ga("send", "pageview");
 }

demo/src/less/lib/fontface.less

@@ -3,16 +3,16 @@
 // ==========================================================================
 
 @font-face {
-    font-family: "Avenir";
+    font-family: 'Avenir';
-    src: url("//cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"),
+    src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
-        url("//cdn.plyr.io/static/fonts/avenir-medium.woff") format("woff");
     font-style: normal;
     font-weight: @font-weight-base;
+    font-display: swap;
 }
 @font-face {
-    font-family: "Avenir";
+    font-family: 'Avenir';
-    src: url("//cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"),
+    src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
-        url("//cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff");
     font-style: normal;
     font-weight: @font-weight-bold;
+    font-display: swap;
 }

gulpfile.js

@@ -4,72 +4,69 @@
 /*global require, __dirname,Buffer*/
 /*jshint -W079 */
 
-var fs          = require("fs"),
+var fs = require('fs'),
-    path        = require("path"),
+    path = require('path'),
-    gulp        = require("gulp"),
+    gulp = require('gulp'),
-    gutil       = require("gulp-util"),
+    gutil = require('gulp-util'),
-    concat      = require("gulp-concat"),
+    concat = require('gulp-concat'),
-    uglify      = require("gulp-uglify"),
+    uglify = require('gulp-uglify'),
-    less        = require("gulp-less"),
+    less = require('gulp-less'),
-    sass        = require("gulp-sass"),
+    sass = require('gulp-sass'),
-    cleanCSS    = require("gulp-clean-css"),
+    cleanCSS = require('gulp-clean-css'),
-    run         = require("run-sequence"),
+    run = require('run-sequence'),
-    prefix      = require("gulp-autoprefixer"),
+    prefix = require('gulp-autoprefixer'),
-    svgstore    = require("gulp-svgstore"),
+    svgstore = require('gulp-svgstore'),
-    svgmin      = require("gulp-svgmin"),
+    svgmin = require('gulp-svgmin'),
-    rename      = require("gulp-rename"),
+    rename = require('gulp-rename'),
-    s3          = require("gulp-s3"),
+    s3 = require('gulp-s3'),
-    replace     = require("gulp-replace"),
+    replace = require('gulp-replace'),
-    open        = require("gulp-open"),
+    open = require('gulp-open'),
-    size        = require("gulp-size"),
+    size = require('gulp-size'),
-    through     = require("through2");
+    through = require('through2');
 
 var root = __dirname,
-paths = {
+    paths = {
         plyr: {
             // Source paths
             src: {
-            less:       path.join(root, "src/less/**/*"),
+                less: path.join(root, 'src/less/**/*'),
-            scss:       path.join(root, "src/scss/**/*"),
+                scss: path.join(root, 'src/scss/**/*'),
-            js:         path.join(root, "src/js/**/*"),
+                js: path.join(root, 'src/js/**/*'),
-            sprite:     path.join(root, "src/sprite/*.svg")
+                sprite: path.join(root, 'src/sprite/*.svg'),
             },
             // Output paths
-        output:         path.join(root, "dist/")
+            output: path.join(root, 'dist/'),
         },
         demo: {
             // Source paths
             src: {
-            less:       path.join(root, "demo/src/less/**/*"),
+                less: path.join(root, 'demo/src/less/**/*'),
-            js:         path.join(root, "demo/src/js/**/*"),
+                js: path.join(root, 'demo/src/js/**/*'),
-            sprite:     path.join(root, "demo/src/sprite/**/*")
+                sprite: path.join(root, 'demo/src/sprite/**/*'),
             },
             // Output paths
-        output:         path.join(root, "demo/dist/"),
+            output: path.join(root, 'demo/dist/'),
             // Demo
-        root:           path.join(root, "demo/")
+            root: path.join(root, 'demo/'),
         },
-    upload: [path.join(root, "dist/**"), path.join(root, "demo/dist/**")]
+        upload: [path.join(root, 'dist/**'), path.join(root, 'demo/dist/**')],
-},
+    },
-
+    // Task arrays
-// Task arrays
+    tasks = {
-tasks = {
         less: [],
         scss: [],
         js: [],
-    sprite: []
+        sprite: [],
-},
+    },
-
+    // Fetch bundles from JSON
-// Fetch bundles from JSON
+    bundles = loadJSON(path.join(root, 'bundles.json')),
-bundles = loadJSON(path.join(root, "bundles.json")),
+    package = loadJSON(path.join(root, 'package.json'));
-package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
     try {
         return JSON.parse(fs.readFileSync(path));
-    }
+    } catch (err) {
-    catch(err) {
         return {};
     }
 }
@@ -78,37 +75,39 @@ function loadJSON(path) {
 // http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
 function createFile(filename, string) {
     var src = require('stream').Readable({
-        objectMode: true
+        objectMode: true,
     });
-    src._read = function () {
+    src._read = function() {
-        this.push(new gutil.File({
+        this.push(
-            cwd: "",
+            new gutil.File({
-            base: "",
+                cwd: '',
+                base: '',
                 path: filename,
                 contents: new Buffer(string),
                 // stats also required for some functions
                 // https://nodejs.org/api/fs.html#fs_class_fs_stats
                 stat: {
-                size: string.length
+                    size: string.length,
-            }
+                },
-        }));
+            }),
+        );
         this.push(null);
-    }
+    };
-    return src
+    return src;
 }
 
 var build = {
-    js: function (files, bundle) {
+    js: function(files, bundle) {
         for (var key in files) {
             (function(key) {
-                var name = "js-" + key;
+                var name = 'js-' + key;
                 tasks.js.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].js[key])
                         .pipe(concat(key))
-                        .pipe(uglify())
+                        .pipe(uglify().on('error', gutil.log))
                         .pipe(gulp.dest(paths[bundle].output));
                 });
             })(key);
@@ -116,17 +115,17 @@ var build = {
     },
     less: function(files, bundle) {
         for (var key in files) {
-            (function (key) {
+            (function(key) {
-                var name = "less-" + key;
+                var name = 'less-' + key;
                 tasks.less.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].less[key])
                         .pipe(less())
-                        .on("error", gutil.log)
+                        .on('error', gutil.log)
                         .pipe(concat(key))
-                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(prefix(['last 2 versions'], { cascade: true }))
                         .pipe(cleanCSS())
                         .pipe(gulp.dest(paths[bundle].output));
                 });
@@ -135,17 +134,17 @@ var build = {
     },
     scss: function(files, bundle) {
         for (var key in files) {
-            (function (key) {
+            (function(key) {
-                var name = "scss-" + key;
+                var name = 'scss-' + key;
                 tasks.scss.push(name);
 
-                gulp.task(name, function () {
+                gulp.task(name, function() {
                     return gulp
                         .src(bundles[bundle].scss[key])
                         .pipe(sass())
-                        .on("error", gutil.log)
+                        .on('error', gutil.log)
                         .pipe(concat(key))
-                        .pipe(prefix(["last 2 versions"], { cascade: true }))
+                        .pipe(prefix(['last 2 versions'], { cascade: true }))
                         .pipe(cleanCSS())
                         .pipe(gulp.dest(paths[bundle].output));
                 });
@@ -153,48 +152,52 @@ var build = {
         }
     },
     sprite: function(bundle) {
-        var name = "sprite-" + bundle;
+        var name = 'sprite-' + bundle;
         tasks.sprite.push(name);
 
         // Process Icons
-        gulp.task(name, function () {
+        gulp.task(name, function() {
             return gulp
                 .src(paths[bundle].src.sprite)
-                .pipe(svgmin({
+                .pipe(
-                    plugins: [{
+                    svgmin({
-                        removeDesc: true
+                        plugins: [
-                    }]
+                            {
-                }))
+                                removeDesc: true,
+                            },
+                        ],
+                    }),
+                )
                 .pipe(svgstore())
                 .pipe(rename({ basename: bundle }))
                 .pipe(gulp.dest(paths[bundle].output));
         });
-    }
+    },
 };
 
 // Plyr core files
-build.js(bundles.plyr.js, "plyr");
+build.js(bundles.plyr.js, 'plyr');
-build.less(bundles.plyr.less, "plyr");
+build.less(bundles.plyr.less, 'plyr');
-build.scss(bundles.plyr.scss, "plyr");
+build.scss(bundles.plyr.scss, 'plyr');
-build.sprite("plyr");
+build.sprite('plyr');
 
 // Demo files
-build.less(bundles.demo.less, "demo");
+build.less(bundles.demo.less, 'demo');
-build.js(bundles.demo.js, "demo");
+build.js(bundles.demo.js, 'demo');
-build.sprite("demo");
+build.sprite('demo');
 
 // Build all JS
-gulp.task("js", function(){
+gulp.task('js', function() {
     run(tasks.js);
 });
 
 // Build SCSS (for testing, default is LESS)
-gulp.task("scss", function(){
+gulp.task('scss', function() {
     run(tasks.scss);
 });
 
 // Watch for file changes
-gulp.task("watch", function () {
+gulp.task('watch', function() {
     // Plyr core
     gulp.watch(paths.plyr.src.js, tasks.js);
     gulp.watch(paths.plyr.src.less, tasks.less);
@@ -207,131 +210,144 @@ gulp.task("watch", function () {
 });
 
 // Default gulp task
-gulp.task("default", function(){
+gulp.task('default', function() {
-    run(tasks.js, tasks.less, tasks.sprite, "watch");
+    run(tasks.js, tasks.less, tasks.sprite, 'watch');
 });
 
 // Publish a version to CDN and demo
 // --------------------------------------------
 
 // Some options
-var aws = loadJSON(path.join(root, "aws.json")),
+var aws = loadJSON(path.join(root, 'aws.json')),
-version = package.version,
+    version = package.version,
-maxAge  = 31536000, // seconds 1 year
+    maxAge = 31536000, // seconds 1 year
-options = {
+    options = {
         cdn: {
             headers: {
-            "Cache-Control": "max-age=" + maxAge,
+                'Cache-Control': 'max-age=' + maxAge,
-            "Vary": "Accept-Encoding"
+                Vary: 'Accept-Encoding',
-        }
+            },
         },
         demo: {
             headers: {
-            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
+                'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
-            "Vary": "Accept-Encoding"
+                Vary: 'Accept-Encoding',
-        }
+            },
         },
         symlinks: function(version, filename) {
             return {
                 headers: {
                     // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
-                "x-amz-website-redirect-location": "/" + version + "/" + filename,
+                    'x-amz-website-redirect-location': '/' + version + '/' + filename,
-                "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
+                    'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
-            }
+                },
-        }
+            };
-    }
+        },
-};
+    };
 
 // If aws is setup
-if("cdn" in aws) {
+if ('cdn' in aws) {
-    var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
+    var regex = '(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*).(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:.[\\da-z\\-]+)*)?',
-    cdnpath         = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
+        cdnpath = new RegExp(aws.cdn.domain + '/' + regex, 'gi'),
-    semver          = new RegExp("v" + regex, "gi"),
+        semver = new RegExp('v' + regex, 'gi'),
-    localPath       = new RegExp("(\.\.\/)?dist", "gi"),
+        localPath = new RegExp('(../)?dist', 'gi'),
-    versionPath     = "https://" + aws.cdn.domain + "/" + version;
+        versionPath = 'https://' + aws.cdn.domain + '/' + version;
 }
 
 // Publish version to CDN bucket
-gulp.task("cdn", function () {
+gulp.task('cdn', function() {
-    console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
+    console.log('Uploading ' + version + ' to ' + aws.cdn.domain + '...');
 
     // Upload to CDN
-    return gulp.src(paths.upload)
+    return gulp
-        .pipe(size({
+        .src(paths.upload)
+        .pipe(
+            size({
                 showFiles: true,
-            gzip: true
+                gzip: true,
-        }))
+            }),
-        .pipe(rename(function (path) {
+        )
-            path.dirname = path.dirname.replace(".", version);
+        .pipe(
-        }))
+            rename(function(path) {
+                path.dirname = path.dirname.replace('.', version);
+            }),
+        )
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.cdn, options.cdn));
 });
 
 // Publish to demo bucket
-gulp.task("demo", function () {
+gulp.task('demo', function() {
-    console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
+    console.log('Uploading ' + version + ' demo to ' + aws.demo.domain + '...');
 
     // Replace versioned files in readme.md
-    gulp.src([root + "/readme.md"])
+    gulp
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
+        .src([root + '/readme.md'])
+        .pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
         .pipe(gulp.dest(root));
 
     // Replace versioned files in plyr.js
-    gulp.src(path.join(root, "src/js/plyr.js"))
+    gulp
-        .pipe(replace(semver, "v" + version))
+        .src(path.join(root, 'src/js/plyr.js'))
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
+        .pipe(replace(semver, 'v' + version))
-        .pipe(gulp.dest(path.join(root, "src/js/")));
+        .pipe(replace(cdnpath, aws.cdn.domain + '/' + version))
+        .pipe(gulp.dest(path.join(root, 'src/js/')));
 
     // Replace local file paths with remote paths in demo HTML
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-    gulp.src([paths.demo.root + "*.html"])
+    gulp
+        .src([paths.demo.root + '*.html'])
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.demo, options.demo));
 
     // Upload error.html to cdn (as well as demo site)
-    return gulp.src([paths.demo.root + "error.html"])
+    return gulp
+        .src([paths.demo.root + 'error.html'])
         .pipe(replace(localPath, versionPath))
         .pipe(s3(aws.cdn, options.demo));
 });
 
 // Open the demo site to check it's sweet
-gulp.task("symlinks", function () {
+gulp.task('symlinks', function() {
-    console.log("Updating symlinks...");
+    console.log('Updating symlinks...');
 
-    return gulp.src(paths.upload)
+    return gulp.src(paths.upload).pipe(
-        .pipe(through.obj(function (chunk, enc, callback) {
+        through.obj(function(chunk, enc, callback) {
             if (chunk.stat.isFile()) {
                 // Get the filename
-                var filename = chunk.path.split("/").reverse()[0];
+                var filename = chunk.path.split('/').reverse()[0];
 
                 // Create the 0 byte redirect files to upload
-                createFile(filename, "")
+                createFile(filename, '')
-                    .pipe(rename(function (path) {
+                    .pipe(
-                        path.dirname = path.dirname.replace(".", "latest");
+                        rename(function(path) {
-                    }))
+                            path.dirname = path.dirname.replace('.', 'latest');
+                        }),
+                    )
                     // Upload to S3 with correct headers
                     .pipe(s3(aws.cdn, options.symlinks(version, filename)));
             }
 
             callback(null, chunk);
-        }));
+        }),
+    );
 });
 
 // Open the demo site to check it's sweet
-gulp.task("open", function () {
+gulp.task('open', function() {
-    console.log("Opening " + aws.demo.domain + "...");
+    console.log('Opening ' + aws.demo.domain + '...');
 
     // A file must be specified or gulp will skip the task
     // Doesn't matter which file since we set the URL above
     // Weird, I know...
-    return gulp.src([paths.demo.root + "index.html"])
+    return gulp.src([paths.demo.root + 'index.html']).pipe(
-        .pipe(open("", {
+        open('', {
-            url: "http://" + aws.demo.domain
+            url: 'http://' + aws.demo.domain,
-        }));
+        }),
+    );
 });
 
 // Do everything
-gulp.task("publish", function () {
+gulp.task('publish', function() {
-    run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo", "symlinks");
+    run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo', 'symlinks');
 });

package.json

@@ -1,30 +1,38 @@
 {
     "name": "plyr",
-    "version": "2.0.14",
+    "version": "2.0.17",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "http://plyr.io",
     "main": "src/js/plyr.js",
     "dependencies": {},
     "devDependencies": {
         "gulp": "^3.9.1",
-        "gulp-autoprefixer": "^3.1.0",
+        "gulp-autoprefixer": "^4.0.0",
-        "gulp-clean-css": "^2.0.6",
+        "gulp-clean-css": "^3.9.0",
-        "gulp-concat": "^2.3.3",
+        "gulp-concat": "^2.6.1",
-        "gulp-less": "^3.0.5",
+        "gulp-less": "^3.3.2",
         "gulp-open": "^2.0.0",
-        "gulp-rename": "^1.2.0",
+        "gulp-rename": "^1.2.2",
-        "gulp-replace": "^0.5.3",
+        "gulp-replace": "^0.6.1",
-        "gulp-s3": "^0.3.0",
+        "gulp-s3": "^0.11.0",
-        "gulp-sass": "^2.3.1",
+        "gulp-sass": "^3.1.0",
         "gulp-size": "^2.1.0",
-        "gulp-svgmin": "^1.2.2",
+        "gulp-svgmin": "^1.2.4",
-        "gulp-svgstore": "^5.0.5",
+        "gulp-svgstore": "^6.1.0",
-        "gulp-uglify": "^1.5.3",
+        "gulp-uglify": "^3.0.0",
-        "gulp-util": "^3.0.7",
+        "gulp-util": "^3.0.8",
-        "run-sequence": "^1.1.5",
+        "run-sequence": "^2.2.0",
-        "through2": "^2.0.1"
+        "through2": "^2.0.3"
     },
-    "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player",
+        "DASH",
+        "Shaka",
+        "WordPress",
+        "HLS"
+    ],
     "repository": {
         "type": "git",
         "url": "git://github.com/sampotts/plyr.git"

readme.md

@@ -5,7 +5,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
 
 [Checkout the demo](https://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/demo/screenshot.png)](https://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/demo/screenshot.png)](https://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -137,7 +137,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 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/2.0.14/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.17/plyr.js"></script>
 ```
 
 ### CSS
@@ -150,11 +150,11 @@ 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/2.0.14/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.17/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/2.0.14/plyr.svg`.
+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/2.0.17/plyr.svg`.
 
 ## Advanced
 

src/less/plyr.less

@@ -3,13 +3,15 @@
 // https://github.com/selz/plyr
 // ==========================================================================
 
-@import "variables";
+@import 'variables';
-@import "mixins";
+@import 'mixins';
 
 // Animation
 // ---------------------------------------
 @keyframes plyr-progress {
-    to { background-position: @plyr-progress-loading-size 0; }
+    to {
+        background-position: @plyr-progress-loading-size 0;
+    }
 }
 
 // Styles
@@ -35,7 +37,10 @@
 
     & when (@plyr-touch-action = true) {
         // Fix 300ms delay
-        a, button, input, label {
+        a,
+        button,
+        input,
+        label {
             touch-action: manipulation;
         }
     }
@@ -62,9 +67,9 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        vertical-align: middle;
 
-        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
@@ -221,7 +226,7 @@
     width: 100%;
     padding: (@plyr-control-spacing * 2);
     transform: translateY(-(@plyr-control-spacing * 4));
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-base;
     text-align: center;
@@ -268,6 +273,11 @@
     align-items: center;
     line-height: 1;
     text-align: center;
+    pointer-events: none;
+
+    & > * {
+        pointer-events: all;
+    }
 
     // Spacing
     > button,
@@ -282,7 +292,7 @@
     .plyr__volume {
         margin-left: (@plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
+    [data-plyr='pause'] {
         margin-left: 0;
     }
 
@@ -298,7 +308,7 @@
         background: transparent;
         border-radius: 3px;
         cursor: pointer;
-        transition: background .3s ease, color .3s ease, opacity .3s ease;
+        transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
         color: inherit;
 
         svg {
@@ -347,7 +357,7 @@
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
-    transition: opacity .3s ease;
+    transition: opacity 0.3s ease;
 
     button {
         // Hover and tab focus
@@ -391,7 +401,7 @@
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     svg {
         position: relative;
@@ -465,9 +475,9 @@
     font-size: @plyr-font-size-small;
     line-height: 1.3;
 
-    transform: translate(-50%, 10px) scale(.8);
+    transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
 
     &::before {
         // Arrows
@@ -499,7 +509,7 @@
 // First tooltip
 .plyr__controls button:first-child .plyr__tooltip {
     left: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 0 100%;
 
     &::before {
@@ -510,7 +520,7 @@
 // Last tooltip
 .plyr__controls button:last-child .plyr__tooltip {
     right: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;
 
     &::before {
@@ -529,7 +539,6 @@
     }
 }
 
-
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@@ -538,7 +547,7 @@
     display: none;
     flex: 1;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
 
@@ -573,7 +582,8 @@
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
     vertical-align: top;
-    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     border: none;
     border-radius: 100px;
 
@@ -621,13 +631,13 @@
 }
 .plyr__progress--buffer {
     &::-webkit-progress-value {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-moz-progress-bar {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-ms-fill {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
 }
 .plyr--video .plyr__progress--buffer,
@@ -658,7 +668,8 @@
         @plyr-progress-loading-bg 50%,
         @plyr-progress-loading-bg 75%,
         transparent 75%,
-        transparent);
+        transparent
+    );
     color: transparent;
 }
 .plyr--video.plyr--loading .plyr__progress--buffer {
@@ -699,7 +710,7 @@
     flex: 1;
     position: relative;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
     }
@@ -723,14 +734,8 @@
 // Fullscreen
 // --------------------------------------------------------------
 .plyr--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000000;
     background: #000;
     border-radius: 0 !important;
 
@@ -745,12 +750,6 @@
         // Revert overflow change
         overflow: visible;
     }
-    .plyr__controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
 
     // Vimeo requires some different styling
     &.plyr--vimeo .plyr__video-wrapper {
@@ -759,3 +758,13 @@
         transform: translateY(-50%);
     }
 }
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+}

src/scss/plyr.scss

@@ -9,7 +9,9 @@
 // Animation
 // ---------------------------------------
 @keyframes plyr-progress {
-    to { background-position: $plyr-progress-loading-size 0; }
+    to {
+        background-position: $plyr-progress-loading-size 0;
+    }
 }
 
 // Styles
@@ -35,7 +37,10 @@
 
     @if $plyr-touch-action == true {
         // Fix 300ms delay
-      a, button, input, label {
+        a,
+        button,
+        input,
+        label {
             touch-action: manipulation;
         }
     }
@@ -56,7 +61,7 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type='range'] {
+    input[type="range"] {
         display: block;
         height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
         width: 100%;
@@ -137,13 +142,13 @@
 }
 
 // Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
+.plyr--video input[type="range"].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-video-control-color, .5);
+    outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
 }
 
 // Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
+.plyr--audio input[type="range"].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-audio-control-color, .5);
+    outline: 1px dotted transparentize($plyr-audio-control-color, 0.5);
 }
 
 // Screen reader only elements
@@ -220,7 +225,7 @@
     width: 100%;
     padding: ($plyr-control-spacing * 2);
     transform: translateY(-($plyr-control-spacing * 6));
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     color: $plyr-captions-color;
     font-size: $plyr-font-size-captions-base;
     text-align: center;
@@ -267,6 +272,11 @@
     align-items: center;
     line-height: 1;
     text-align: center;
+    pointer-events: none;
+    
+    & > * {
+        pointer-events: all;
+    }
     
     // Spacing
     > button,
@@ -292,12 +302,12 @@
         flex-shrink: 0;
         overflow: visible; // IE11
         vertical-align: middle;
-        padding: ($plyr-control-spacing * .7);
+        padding: ($plyr-control-spacing * 0.7);
         border: 0;
         background: transparent;
         border-radius: 3px;
         cursor: pointer;
-        transition: background .3s ease, color .3s ease, opacity .3s ease;
+        transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
         color: inherit;
 
         svg {
@@ -341,11 +351,14 @@
     right: 0;
     bottom: 0;
     padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing;
-    background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5));
+    background: linear-gradient(
+        transparentize($plyr-video-controls-bg, 1),
+        transparentize($plyr-video-controls-bg, 0.5)
+    );
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: $plyr-video-control-color;
-    transition: opacity .3s ease;
+    transition: opacity 0.3s ease;
 
     button {
         // Hover and tab focus
@@ -387,9 +400,9 @@
     background: $plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize(#000, .85);
+    box-shadow: 0 1px 1px transparentize(#000, 0.85);
     color: $plyr-video-control-color;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     svg {
         position: relative;
@@ -401,7 +414,7 @@
     }
 
     &:focus {
-        outline: 1px dotted transparentize($plyr-video-control-color, .5);
+        outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
     }
 }
 .plyr .plyr__play-large {
@@ -416,11 +429,11 @@
 }
 
 // States
-.plyr__controls [data-plyr='pause'],
+.plyr__controls [data-plyr="pause"],
-.plyr--playing .plyr__controls [data-plyr='play'] {
+.plyr--playing .plyr__controls [data-plyr="play"] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr='pause'] {
+.plyr--playing .plyr__controls [data-plyr="pause"] {
     display: inline-block;
 }
 
@@ -436,12 +449,12 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr='captions'],
+.plyr [data-plyr="captions"],
-.plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr="fullscreen"] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr='captions'],
+.plyr--captions-enabled [data-plyr="captions"],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
     display: inline-block;
 }
 
@@ -463,13 +476,13 @@
     font-size: $plyr-font-size-small;
     line-height: 1.3;
 
-    transform: translate(-50%, 10px) scale(.8);
+    transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
 
     &::before {
         // Arrows
-        content: '';
+        content: "";
         position: absolute;
         width: 0;
         height: 0;
@@ -497,7 +510,7 @@
 // First tooltip
 .plyr__controls button:first-child .plyr__tooltip {
     left: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 0 100%;
 
     &::before {
@@ -508,7 +521,7 @@
 // Last tooltip
 .plyr__controls button:last-child .plyr__tooltip {
     right: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;
 
     &::before {
@@ -618,13 +631,13 @@
 }
 .plyr__progress--buffer {
     &::-webkit-progress-value {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-moz-progress-bar {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-ms-fill {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
 }
 .plyr--video .plyr__progress--buffer,
@@ -655,7 +668,8 @@
         $plyr-progress-loading-bg 50%,
         $plyr-progress-loading-bg 75%,
         transparent 75%,
-        transparent);
+        transparent
+    );
     color: transparent;
 }
 .plyr--video.plyr--loading .plyr__progress--buffer {
@@ -682,7 +696,7 @@
 
     // Add a slash in before
     &::before {
-        content: '\2044';
+        content: "\2044";
         margin-right: $plyr-control-spacing;
     }
 }
@@ -713,21 +727,15 @@
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
 .plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios [data-plyr="mute"] {
     display: none !important;
 }
 
 // Fullscreen
 // --------------------------------------------------------------
 .plyr--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000000;
     background: #000;
     border-radius: 0 !important;
 
@@ -742,12 +750,6 @@
         // Revert overflow change
         overflow: visible;
     }
-    .plyr__controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
 
     // Vimeo requires some different styling
     &.plyr--vimeo .plyr__video-wrapper {
@@ -756,3 +758,13 @@
         transform: translateY(-50%);
     }
 }
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+}