Merge pull request #795 from frogg/patch-1

Added link that explains Webkit's autoplay blocker
2018-03-10 23:29:22 +11:00 · 2018-02-24 16:19:55 +01:00 · 2018-02-06 10:51:42 +11:00 · 2018-01-28 23:03:05 -07:00 · 2018-01-07 22:40:20 +11:00 · 2018-01-05 21:23:45 +11:00
22 changed files with 5914 additions and 1019 deletions
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -1,8 +1,8 @@
-### Link to related issue (if applicable) 
+### Link to related issue (if applicable)

-### Sumary of proposed changes 
+### Sumary of proposed changes

 ### Task list

- [ ] Tested on [supported browsers](https://github.com/Selz/plyr#browser-support)
- [ ] Gulp build completed 
+- [ ] Tested on [supported browsers](https://github.com/sampotts/plyr#browser-support)
+- [ ] Gulp build completed
--- a/.jshintignore
+++ b/.jshintignore
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,2 @@
+{
+}
--- a/bower.json
+++ b/bower.json
@ -9,7 +9,7 @@
        "HTml5 Video"
    ],
    "authors": [
-        "Sam Potts <me@sampotts.me>"
+        "Sam Potts <sam@potts.es>"
    ],
    "dependencies": {},
    "main": [
@ -27,7 +27,7 @@
    ],
    "repository": {
        "type": "git",
-        "url": "git://github.com/selz/plyr.git"
+        "url": "git://github.com/sampotts/plyr.git"
    },
    "license": "MIT"
 }
--- a/changelog.md
+++ b/changelog.md
@ -1,8 +1,31 @@
 # Changelog

+## v2.0.18
+- Fix for YouTube .getVideoData() issue (fixes #709)
+
+## 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...
+
+## v2.0.13
+- Repo moved and Vimeo demo fix
+
 ## v2.0.12
- Ability to set custom `blankUrl` for source changes (https://github.com/Selz/plyr/pull/504)
- Ability to set caption button listener (https://github.com/Selz/plyr/pull/468)
+- Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504)
+- Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468)

 ## v2.0.11
 - Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
--- a/controls.md
+++ b/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.

--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
--- a/demo/dist/demo.js
+++ b/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,s=arguments.length;for(i=0;i<s;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="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!==r)&&(r.length||t!==n.video)){switch(t){case n.video:s.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:s.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:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[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 s=i[0],o=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=o.length-1;c>=0;c--)o[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,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","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"));
--- a/demo/error.html
+++ b/demo/error.html
@ -1,18 +1,25 @@
 <!doctype html>
 <html lang="en" class="error">
-    <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>
-        <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>
-</html>
+<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">
+
+    <!-- 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>
+
+</html>
--- a/demo/index.html
+++ b/demo/index.html
@ -1,88 +1,103 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Plyr - A simple HTML5 media player</title>
-        <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-        <meta name="author" content="Sam Potts">
-        <meta name="viewport" content="width=device-width, initial-scale=1">

-        <!-- Styles -->
-        <link rel="stylesheet" href="../dist/plyr.css">
+<head>
+    <meta charset="utf-8" />
+    <title>Plyr - A simple HTML5 media player</title>
+    <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+    <meta name="author" content="Sam Potts">
+    <meta name="viewport" content="width=device-width, initial-scale=1">

-        <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/demo.css">
-    </head>
-    <body>
-        <header>
-            <h1>Plyr</h1>
-            <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
-            <nav>
-                <ul>
-                    <li>
-                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
-                            <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
-                            <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-        </header>
+    <!-- Styles -->
+    <link rel="stylesheet" href="../dist/plyr.css">

-        <main role="main" id="main">
-            <nav class="btn__bar">
-                <ul>
-                    <li class="active">
-                        <button type="button" class="btn" data-source="video">Video</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn" data-source="audio">Audio</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
-                    </li>
-                </ul>
-            </nav>
-            <section>
-                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
-                    <!-- Video files -->
-                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+    <!-- Docs styles -->
+    <link rel="stylesheet" href="dist/demo.css">

-                    <!-- Text track file -->
-                    <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
+    <!-- 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>

-                    <!-- Fallback for browsers that don't support the <video> element -->
-                    <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
-                </video>
+<body>
+    <header>
+        <h1>Plyr</h1>
+        <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+        <nav>
+            <ul>
+                <li>
+                    <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
+                        <svg class="icon">
+                            <use xlink:href="#icon-github" />
+                        </svg>Download on GitHub
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
+                        target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
+                        <svg class="icon">
+                            <use xlink:href="#icon-twitter" />
+                        </svg>Tweet
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </header>

-                <ul>
-                    <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
-                    <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
-                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
-                    <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
-                </ul>
-            </section>
-        </main>
+    <main role="main" id="main">
+        <nav class="btn__bar">
+            <ul>
+                <li class="active">
+                    <button type="button" class="btn" data-source="video">Video</button>
+                </li>
+                <li>
+                    <button type="button" class="btn" data-source="audio">Audio</button>
+                </li>
+                <li>
+                    <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
+                </li>
+                <li>
+                    <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
+                </li>
+            </ul>
+        </nav>
+        <section>
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
+                <!-- Video files -->
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

-        <!-- Plyr core script -->
-        <script src="../dist/plyr.js"></script>
+                <!-- Text track file -->
+                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+                    default>

-        <!-- Docs script -->
-        <script src="dist/demo.js"></script>
+                <!-- Fallback for browsers that don't support the <video> element -->
+                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
+            </video>

-        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js" async></script>
+            <ul>
+                <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
+                <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
+                <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
+                <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
+            </ul>
+        </section>
+    </main>

-        <!-- Sharing libary (https://shr.one) -->
-        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
-        <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
-    </body>
-</html>
+    <!-- Plyr core script -->
+    <script src="../dist/plyr.js"></script>
+
+    <!-- Docs script -->
+    <script src="dist/demo.js"></script>
+
+    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+
+    <!-- Sharing libary (https://shr.one) -->
+    <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+    <script>
+        if (window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }
+    </script>
+</body>
+
+</html>
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@ -7,73 +7,73 @@
 /*global plyr*/

 // General functions
-;(function() {
+(function() {
    //document.body.addEventListener('ready', function(event) { console.log(event); });

    // Setup the player
    var instances = plyr.setup({
-        debug:              true,
-        title:              'Video demo',
-        iconUrl:            '../dist/plyr.svg',
+        debug: true,
+        title: "Video demo",
+        iconUrl: "../dist/plyr.svg",
        tooltips: {
-            controls:       true
+            controls: true
        },
        captions: {
-            defaultActive:  true
+            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',
-            audio:      'audio',
-            youtube:    'youtube',
-            vimeo:      'vimeo'
+            video: "video",
+            audio: "audio",
+            youtube: "youtube",
+            vimeo: "vimeo"
        },
-        currentType = window.location.hash.replace('#', ''),
-        historySupport = (window.history && window.history.pushState);
+        currentType = window.location.hash.replace("#", ""),
+        historySupport = window.history && window.history.pushState;

    // Bind to each button
    for (var i = buttons.length - 1; i >= 0; i--) {
-        buttons[i].addEventListener('click', function() {
-            var type = this.getAttribute('data-source');
+        buttons[i].addEventListener("click", function() {
+            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) {
-        if(event.state && 'type' in event.state) {
+    window.addEventListener("popstate", function(event) {
+        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) {
-            history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+        if (currentType in types) {
+            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);
-            }
-            else {
-                var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
-                element.className = name + (state ? ' ' + className : '');
+                element.classList[state ? "add" : "remove"](className);
+            } else {
+                var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + 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',
-                    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: true
-                    }]
+                    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: true
+                        }
+                    ]
                });
                break;

            case types.audio:
                player.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'
-                    }]
+                    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 types.youtube:
                player.source({
-                    type:       'video',
-                    title:      'View From A Blue Moon',
-                    sources: [{
-                        src:    'bTqVqk7FSmY',
-                        type:   'youtube'
-                    }]
+                    type: "video",
+                    title: "View From A Blue Moon",
+                    sources: [
+                        {
+                            src: "bTqVqk7FSmY",
+                            type: "youtube"
+                        }
+                    ]
                });
                break;

            case types.vimeo:
                player.source({
-                    type:       'video',
-                    title:      'View From A Blue Moon',
-                    sources: [{
-                        src:    '143418951',
-                        type:   'vimeo'
-                    }]
+                    type: "video",
+                    title: "View From A Blue Moon",
+                    sources: [
+                        {
+                            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) {
-    (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
-    (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');
+if (document.domain.indexOf("plyr.io") > -1) {
+    (function(i, s, o, g, r, a, m) {
+        i.GoogleAnalyticsObject = r;
+        (i[r] =
+            i[r] ||
+            function() {
+                (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");
 }
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@ -3,16 +3,16 @@
 // ==========================================================================

@font-face {
-    font-family: "Avenir";
-    src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
-    font-style:   normal;
-    font-weight:  @font-weight-base;
+    font-family: 'Avenir';
+    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');
+    font-style: normal;
+    font-weight: @font-weight-base;
+    font-display: swap;
 }
@font-face {
-    font-family: "Avenir";
-    src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
-    font-style:   normal;
-    font-weight:  @font-weight-bold;
-}
+    font-family: 'Avenir';
+    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');
+    font-style: normal;
+    font-weight: @font-weight-bold;
+    font-display: swap;
+}
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/gulpfile.js
+++ b/gulpfile.js
@ -4,72 +4,69 @@
 /*global require, __dirname,Buffer*/
 /*jshint -W079 */

-var fs          = require("fs"),
-    path        = require("path"),
-    gulp        = require("gulp"),
-    gutil       = require("gulp-util"),
-    concat      = require("gulp-concat"),
-    uglify      = require("gulp-uglify"),
-    less        = require("gulp-less"),
-    sass        = require("gulp-sass"),
-    cleanCSS    = require("gulp-clean-css"),
-    run         = require("run-sequence"),
-    prefix      = require("gulp-autoprefixer"),
-    svgstore    = require("gulp-svgstore"),
-    svgmin      = require("gulp-svgmin"),
-    rename      = require("gulp-rename"),
-    s3          = require("gulp-s3"),
-    replace     = require("gulp-replace"),
-    open        = require("gulp-open"),
-    size        = require("gulp-size"),
-    through     = require("through2");
+var fs = require('fs'),
+    path = require('path'),
+    gulp = require('gulp'),
+    gutil = require('gulp-util'),
+    concat = require('gulp-concat'),
+    uglify = require('gulp-uglify'),
+    less = require('gulp-less'),
+    sass = require('gulp-sass'),
+    cleanCSS = require('gulp-clean-css'),
+    run = require('run-sequence'),
+    prefix = require('gulp-autoprefixer'),
+    svgstore = require('gulp-svgstore'),
+    svgmin = require('gulp-svgmin'),
+    rename = require('gulp-rename'),
+    s3 = require('gulp-s3'),
+    replace = require('gulp-replace'),
+    open = require('gulp-open'),
+    size = require('gulp-size'),
+    through = require('through2');

 var root = __dirname,
-paths = {
-    plyr: {
-        // Source paths
-        src: {
-            less:       path.join(root, "src/less/**/*"),
-            scss:       path.join(root, "src/scss/**/*"),
-            js:         path.join(root, "src/js/**/*"),
-            sprite:     path.join(root, "src/sprite/*.svg")
+    paths = {
+        plyr: {
+            // Source paths
+            src: {
+                less: path.join(root, 'src/less/**/*'),
+                scss: path.join(root, 'src/scss/**/*'),
+                js: path.join(root, 'src/js/**/*'),
+                sprite: path.join(root, 'src/sprite/*.svg'),
+            },
+            // Output paths
+            output: path.join(root, 'dist/'),
        },
-        // Output paths
-        output:         path.join(root, "dist/")
-    },
-    demo: {
-        // Source paths
-        src: {
-            less:       path.join(root, "demo/src/less/**/*"),
-            js:         path.join(root, "demo/src/js/**/*"),
-            sprite:     path.join(root, "demo/src/sprite/**/*")
+        demo: {
+            // Source paths
+            src: {
+                less: path.join(root, 'demo/src/less/**/*'),
+                js: path.join(root, 'demo/src/js/**/*'),
+                sprite: path.join(root, 'demo/src/sprite/**/*'),
+            },
+            // Output paths
+            output: path.join(root, 'demo/dist/'),
+            // Demo
+            root: path.join(root, 'demo/'),
        },
-        // Output paths
-        output:         path.join(root, "demo/dist/"),
-        // 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
-tasks = {
-    less:   [],
-    scss:   [],
-    js:     [],
-    sprite: []
-},
-
-// Fetch bundles from JSON
-bundles = loadJSON(path.join(root, "bundles.json")),
-package = loadJSON(path.join(root, "package.json"));
+    // Task arrays
+    tasks = {
+        less: [],
+        scss: [],
+        js: [],
+        sprite: [],
+    },
+    // Fetch bundles from JSON
+    bundles = loadJSON(path.join(root, 'bundles.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 {};
    }
 }
@ -77,38 +74,40 @@ function loadJSON(path) {
 // Create a file from a string
 // 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 
+    var src = require('stream').Readable({
+        objectMode: true,
    });
-    src._read = function () {
-        this.push(new gutil.File({ 
-            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
-            } 
-        }));
+    src._read = function() {
+        this.push(
+            new gutil.File({
+                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,
+                },
+            }),
+        );
        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) {
-                var name = "less-" + key;
+            (function(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) {
-                var name = "scss-" + key;
+            (function(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({
-                    plugins: [{
-                        removeDesc: true
-                    }]
-                }))
+                .pipe(
+                    svgmin({
+                        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.less(bundles.plyr.less, "plyr");
-build.scss(bundles.plyr.scss, "plyr");
-build.sprite("plyr");
+build.js(bundles.plyr.js, 'plyr');
+build.less(bundles.plyr.less, 'plyr');
+build.scss(bundles.plyr.scss, 'plyr');
+build.sprite('plyr');

 // Demo files
-build.less(bundles.demo.less, "demo");
-build.js(bundles.demo.js, "demo");
-build.sprite("demo");
+build.less(bundles.demo.less, 'demo');
+build.js(bundles.demo.js, '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(){
-    run(tasks.js, tasks.less, tasks.sprite, "watch");
+gulp.task('default', function() {
+    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")),
-version = package.version,
-maxAge  = 31536000, // seconds 1 year
-options = {
-    cdn: {
-        headers: {
-            "Cache-Control": "max-age=" + maxAge,
-            "Vary": "Accept-Encoding"
-        }
-    },
-    demo: {
-        headers: {
-            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
-            "Vary": "Accept-Encoding"
-        }
-    },
-    symlinks: function(version, filename) {
-        return {
+var aws = loadJSON(path.join(root, 'aws.json')),
+    version = package.version,
+    maxAge = 31536000, // seconds 1 year
+    options = {
+        cdn: {
            headers: {
-                // http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
-                "x-amz-website-redirect-location": "/" + version + "/" + filename,
-                "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
-            }
-        }
-    }
-};
+                'Cache-Control': 'max-age=' + maxAge,
+                Vary: 'Accept-Encoding',
+            },
+        },
+        demo: {
+            headers: {
+                'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+                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,
+                    'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0',
+                },
+            };
+        },
+    };

 // If aws is setup
-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\\-]+)*)?",
-    cdnpath         = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
-    semver          = new RegExp("v" + regex, "gi"),
-    localPath       = new RegExp("(\.\.\/)?dist", "gi"),
-    versionPath     = "https://" + aws.cdn.domain + "/" + version;
+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\\-]+)*)?',
+        cdnpath = new RegExp(aws.cdn.domain + '/' + regex, 'gi'),
+        semver = new RegExp('v' + regex, 'gi'),
+        localPath = new RegExp('(../)?dist', 'gi'),
+        versionPath = 'https://' + aws.cdn.domain + '/' + version;
 }

 // Publish version to CDN bucket
-gulp.task("cdn", function () {
-    console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
+gulp.task('cdn', function() {
+    console.log('Uploading ' + version + ' to ' + aws.cdn.domain + '...');

    // Upload to CDN
-    return gulp.src(paths.upload)
-        .pipe(size({
-            showFiles: true,
-            gzip: true
-        }))
-        .pipe(rename(function (path) {
-            path.dirname = path.dirname.replace(".", version);
-        }))
+    return gulp
+        .src(paths.upload)
+        .pipe(
+            size({
+                showFiles: true,
+                gzip: true,
+            }),
+        )
+        .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 () {
-    console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
+gulp.task('demo', function() {
+    console.log('Uploading ' + version + ' demo to ' + aws.demo.domain + '...');

    // Replace versioned files in readme.md
-    gulp.src([root + "/readme.md"])
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
+    gulp
+        .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"))
-        .pipe(replace(semver, "v" + version))
-        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
-        .pipe(gulp.dest(path.join(root, "src/js/")));
+    gulp
+        .src(path.join(root, 'src/js/plyr.js'))
+        .pipe(replace(semver, 'v' + version))
+        .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 () {
-    console.log("Updating symlinks...");
+gulp.task('symlinks', function() {
+    console.log('Updating symlinks...');

-    return gulp.src(paths.upload)
-        .pipe(through.obj(function (chunk, enc, callback) {
+    return gulp.src(paths.upload).pipe(
+        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, "")
-                    .pipe(rename(function (path) {
-                        path.dirname = path.dirname.replace(".", "latest");
-                    }))
+                createFile(filename, '')
+                    .pipe(
+                        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 () {
-    console.log("Opening " + aws.demo.domain + "...");
+gulp.task('open', function() {
+    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"])
-        .pipe(open("", {
-            url: "http://" + aws.demo.domain
-        }));
+    return gulp.src([paths.demo.root + 'index.html']).pipe(
+        open('', {
+            url: 'http://' + aws.demo.domain,
+        }),
+    );
 });

 // Do everything
-gulp.task("publish", function () {
-    run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo", "symlinks");
+gulp.task('publish', function() {
+    run(tasks.js, tasks.less, tasks.sprite, 'cdn', 'demo', 'symlinks');
 });
--- a/license.md
+++ b/license.md
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2015 Selz.com
+Copyright (c) 2017 Sam Potts

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,51 +1,51 @@
 {
-  "name": "plyr",
-  "version": "2.0.12",
-  "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-clean-css": "^2.0.6",
-    "gulp-concat": "^2.3.3",
-    "gulp-less": "^3.0.5",
-    "gulp-open": "^2.0.0",
-    "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.3",
-    "gulp-s3": "^0.3.0",
-    "gulp-sass": "^2.3.1",
-    "gulp-size": "^2.1.0",
-    "gulp-svgmin": "^1.2.2",
-    "gulp-svgstore": "^5.0.5",
-    "gulp-uglify": "^1.5.3",
-    "gulp-util": "^3.0.7",
-    "run-sequence": "^1.1.5",
-    "through2": "^2.0.1"
-  },
-  "keywords": [
-    "HTML5 Video",
-    "HTML5 Audio",
-    "Media Player",
-    "DASH",
-    "Shaka",
-    "WordPress",
-    "HLS"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/selz/plyr.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/selz/plyr/issues"
-  },
-  "directories": {
-    "doc": "readme.md"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Sam Potts <sam@selz.com>"
+    "name": "plyr",
+    "version": "2.0.18",
+    "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": "^4.0.0",
+        "gulp-clean-css": "^3.9.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-less": "^3.3.2",
+        "gulp-open": "^2.0.0",
+        "gulp-rename": "^1.2.2",
+        "gulp-replace": "^0.6.1",
+        "gulp-s3": "^0.11.0",
+        "gulp-sass": "^3.1.0",
+        "gulp-size": "^2.1.0",
+        "gulp-svgmin": "^1.2.4",
+        "gulp-svgstore": "^6.1.0",
+        "gulp-uglify": "^3.0.0",
+        "gulp-util": "^3.0.8",
+        "run-sequence": "^2.2.0",
+        "through2": "^2.0.3"
+    },
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player",
+        "DASH",
+        "Shaka",
+        "WordPress",
+        "HLS"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/sampotts/plyr.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/sampotts/plyr/issues"
+    },
+    "directories": {
+        "doc": "readme.md"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Sam Potts <sam@potts.es>"
 }
--- a/readme.md
+++ b/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.selz.com/plyr/plyr_v1.8.9.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.
@ -34,12 +34,12 @@ Check out the [changelog](changelog.md) to see what's new with Plyr.

 ## Features currently being developed
 - Playback speed selection
- Quality selection 
+- Quality selection
 - Caption language selection
 - AirPlay
 - Picture in Picture (MacOS Sierra + Safari)

-[more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
+[more info](https://github.com/sampotts/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)

 ## Planned features
 - Playlists
@ -48,9 +48,9 @@ Check out the [changelog](changelog.md) to see what's new with Plyr.
 - Wistia video support
 - YouTube and Vimeo audio support
 - Audio captions
-...and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
+...and whatever else has been raised in [issues](https://github.com/sampotts/plyr/issues)

-If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
+If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/sampotts/plyr/issues/new) or, of course, forking and sending a pull request.

 ## CMS plugins

@ -63,6 +63,12 @@ Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
 ### [Kirby](https://github.com/dpschen/kirby-plyrtag)
 Created and maintained by Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))

+### [React](https://github.com/xDae/react-plyr)
+Created and maintained by Jose Miguel Bejarano ([@xDae](https://github.com/xDae))
+
+### [Vue](https://github.com/redxtech/vue-plyr)
+Created and maintained by Gabe Dunn ([@redxtech](https://github.com/redxtech))
+
 ## Using package managers
 You can grab the source using one of the following package managers.

@ -126,7 +132,7 @@ Note: `data-video-id` value can now be the ID or URL for the video. This attribu
 ```
 Note: `data-video-id` value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.

-### JavaScript 
+### JavaScript
 Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under [initialising](#initialising).

 ```html
@ -137,7 +143,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.12/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.18/plyr.js"></script>
 ```

 ### CSS
@ -150,16 +156,16 @@ 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.12/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.18/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.12/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.18/plyr.svg`.

 ## Advanced

 ### LESS & SASS/SCSS
-You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should already) as all declerations use the W3C definitions - e.g. `appearance: none;` will be prefixed to `-webkit-appearance: none;` by autoprefixer. 
+You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should already) as all declerations use the W3C definitions - e.g. `appearance: none;` will be prefixed to `-webkit-appearance: none;` by autoprefixer.

 The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.

@ -167,7 +173,7 @@ The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__
 The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons).

 #### Using the `iconUrl` option
-You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser limitations or if it's a relative path, just use the path directly. 
+You can however specify your own `iconUrl` option and Plyr will determine if the url is absolute and requires loading by AJAX/CORS due to current browser limitations or if it's a relative path, just use the path directly.

 If you're using the `<base>` tag on your site, you may need to use something like this:
 [svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
@ -213,7 +219,7 @@ Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/Doc
 plyr.setup('.js-player', options);
 ```

-The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>` or `[data-type]` (for embeds) element itself or a container element. 
+The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>` or `[data-type]` (for embeds) element itself or a container element.

 Passing just the options object:
 ```javascript
@ -223,13 +229,13 @@ plyr.setup(options);
 `setup()` will return an array of *instances* that can be used with the [API](#api) methods. See the [API](#api) section for more info.

 #### RangeTouch
-Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with `<input type="range">` elements whereby touching the track to set the value doesn't work and sliding the thumb can be tricky. To combat this, I've created [RangeTouch](https://rangetouch.com) which I'd recommend including in your solution. It's a tiny script with a nice benefit for users on touch devices. 
+Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with `<input type="range">` elements whereby touching the track to set the value doesn't work and sliding the thumb can be tricky. To combat this, I've created [RangeTouch](https://rangetouch.com) which I'd recommend including in your solution. It's a tiny script with a nice benefit for users on touch devices.

 #### Options
 Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements:

 ```html
-<video data-plyr='{ title: "testing" }'></video>
+<video data-plyr='{ "title": "testing", "volume": 10 }'></video>
 ```

 Note the single quotes encapsulating the JSON and double quotes on the object keys.
@ -290,7 +296,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
      <td><code>blankUrl</code></td>
      <td>String</td>
      <td><code>https://cdn.selz.com/plyr/blank.mp4</code></td>
-      <td>Specify a URL or path to a blank video file used to properly cancel network requests. See <a href="https://github.com/Selz/plyr/issues/174">issue #174</a> for more info.</td>
+      <td>Specify a URL or path to a blank video file used to properly cancel network requests. See <a href="https://github.com/sampotts/plyr/issues/174">issue #174</a> for more info.</td>
    </tr>
    <tr>
      <td><code>debug</code></td>
@ -302,7 +308,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
      <td><code>autoplay</code></td>
      <td>Boolean</td>
      <td><code>false</code></td>
-      <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
+      <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/">iOS and macOS</a> (an Apple limitation).</td>
    </tr>
    <tr>
      <td><code>seekTime</code></td>
@ -456,7 +462,7 @@ This will return an array of all instances that were setup. Another way is to us
 var players = plyr.get('.js-player');
 ```

-If no argument is passed, it will find all instances in the current document. This will return an array of all instances that were found in the given selector. 
+If no argument is passed, it will find all instances in the current document. This will return an array of all instances that were found in the given selector.

 A final option is to access the instance through the event handlers:

@ -904,21 +910,19 @@ These events also bubble up the DOM. The event target will be the container elem
 Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)

 ## Embeds
-YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.
+YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs. Plyr will automatically include them.

-Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.
-
-The embed third party API's can be accessed through the `getEmbed()` API method. 
+The embed third party API's can be accessed through the `getEmbed()` API method.

 More info on the respective API's here:

 - [YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
- [Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
+- [Vimeo API Reference](https://github.com/vimeo/player.js)

 *Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.

 ## Shortcuts
-By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input. 
+By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input.

 <table class="table" width="100%">
  <thead>
@ -933,7 +937,7 @@ By default, a player will bind the following keyboard shortcuts when it has focu
      <td><code>0</code> to <code>9</code></td>
      <td>✔</td>
      <td>Seek from 0 to 90% respectively</td>
-    </tr> 
+    </tr>
    <tr>
      <td><code>space</code></td>
      <td></td>
@ -982,7 +986,7 @@ By default, a player will bind the following keyboard shortcuts when it has focu
  </tbody>
 </table>

-## Streaming 
+## Streaming
 Because Plyr is an extension of the standard HTML5 video and audio elements, third party streaming plugins can be used with Plyr. Massive thanks to Matias Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's a few examples:

 - Using [hls.js](https://github.com/dailymotion/hls.js) - [Demo](http://codepen.io/sampotts/pen/JKEMqB)
@ -990,7 +994,7 @@ Because Plyr is an extension of the standard HTML5 video and audio elements, thi
 - Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN)

 ## Fullscreen
-Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). 
+Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen).

 ## Browser support

@ -1026,7 +1030,7 @@ Fullscreen in Plyr is supported by all browsers that [currently support it](http
 The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:

 ```javascript
-enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+enabled: !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
 ```
 If a User Agent is disabled but supports `<video>` and `<audio>` natively, it will use the native player.

@ -1039,7 +1043,7 @@ There's an API method for checking support. You can call `plyr.supported()` and
 If you find anything weird with Plyr, please let us know using the GitHub issues tracker.

 ## Author
-Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
+Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/sampotts/plyr/graphs/contributors)

 ## Donate
 Plyr costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated...
@ -1082,7 +1086,7 @@ Also these links helped created Plyr:
 ## Thanks
 [![Fastly](https://www.fastly.com/sites/all/themes/custom/fastly2016/logo.png)](https://www.fastly.com/)

-Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services. 
+Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.

 ## Copyright and License
 [The MIT license](license.md).
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -3,13 +3,15 @@
 // https://github.com/selz/plyr
 // ==========================================================================

-@import "variables";
-@import "mixins";
+@import 'variables';
+@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;
+}
--- a/src/scss/plyr.scss
+++ b/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
@ -34,10 +36,13 @@
    }

    @if $plyr-touch-action == true {
-      // Fix 300ms delay
-      a, button, input, label {
-        touch-action: manipulation;
-      }
+        // Fix 300ms delay
+        a,
+        button,
+        input,
+        label {
+            touch-action: manipulation;
+        }
    }

    // Focus
@ -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 {
-    outline: 1px dotted transparentize($plyr-video-control-color, .5);
+.plyr--video input[type="range"].tab-focus:focus {
+    outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
 }

 // Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-audio-control-color, .5);
+.plyr--audio input[type="range"].tab-focus:focus {
+    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,7 +272,12 @@
    align-items: center;
    line-height: 1;
    text-align: center;
-
+    pointer-events: none;
+    
+    & > * {
+        pointer-events: all;
+    }
+    
    // Spacing
    > button,
    .plyr__progress,
@ -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--playing .plyr__controls [data-plyr='play'] {
+.plyr__controls [data-plyr="pause"],
+.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='fullscreen'] {
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"] {
    display: none;
 }
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--captions-enabled [data-plyr="captions"],
+.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;
+}
Author	SHA1	Message	Date
Sam Potts	e0562752ea	Merge pull request #795 from frogg/patch-1 Added link that explains Webkit's autoplay blocker	2018-03-10 23:29:22 +11:00
Frederik Riedel	e6db374a72	Added link that explains Webkit's autoplay blocker	2018-02-24 16:19:55 +01:00
Sam Potts	ab7f277a1b	Merge pull request #769 from redxtech/add-vue-plyr-to-readme Add vue-plyr to readme	2018-02-06 10:51:42 +11:00
Gabriel Dunn	d5a1a7ca1c	Add vue-plyr to readme	2018-01-28 23:03:05 -07:00
Sam Potts	79a43120ae	Merge pull request #740 from gurinderhans/master double click player to toggle fullscreen	2018-01-07 22:40:20 +11:00
Sam Potts	b79ffacd9c	Merge pull request #726 from xDae/master Added react port	2018-01-05 21:23:45 +11:00
Sam Potts	888c6773d0	Merge pull request #743 from jwpage/patch-1 Fix `enabled` smartphone example in README	2018-01-03 11:45:33 +11:00
Johnson Page	cfd653f02a	Fix `enabled` smartphone example in README	2018-01-03 09:55:14 +11:00
Gurinder Hans	838bd49a1d	add comment about no fullscreen if player type is audio	2017-12-23 21:47:01 -08:00
Gurinder Hans	800e0dedfb	add double click to make full screen support	2017-12-23 21:41:08 -08:00
Jose Miguel Bejarano	e6cc4ba1f5	Added react port	2017-12-04 17:05:14 +02:00
Sam Potts	9c4b53d761	Fix for YouTube .getVideoData() issue (fixes #709 )	2017-11-14 13:28:52 +01:00
Sam Potts	0ec0addbda	Update readme.md	2017-11-07 09:16:41 +11:00
Sam Potts	d206b8ab34	Merge pull request #696 from yuriykuzin/enable-speed-controls-on-vimeo Enable speed controls using Vimeo API	2017-11-06 19:37:47 +11:00
Sam Potts	51c011b733	Merge branch 'master' into enable-speed-controls-on-vimeo	2017-11-06 19:37:02 +11:00
Sam Potts	3c99357f06	Vimeo fixes + small bug fixes	2017-11-04 23:18:47 +11:00
Sam Potts	a757acad15	Merge pull request #577 from brandon-pereira/master fix for svg4everybody conflicting with plyr	2017-11-04 22:25:27 +11:00
Sam Potts	7913cf837f	Merge branch 'master' into master	2017-11-04 22:25:17 +11:00
Sam Potts	e98d356ede	Merge branch 'master' into master	2017-11-04 22:22:49 +11:00
Sam Potts	c9c20345c0	Merge pull request #613 from vers-one/master Fix for handling explicitly set duration of audio	2017-11-04 22:19:47 +11:00
Sam Potts	aca06be7ac	Merge branch 'master' into master	2017-11-04 22:19:39 +11:00
Sam Potts	550cc6a19b	Merge branch 'master' into master	2017-11-04 22:19:17 +11:00
Sam Potts	e44e93c117	Merge pull request #617 from oemueller/patch-1 [bugfix] target is null exception	2017-11-04 22:17:00 +11:00
Sam Potts	a06a8150ef	Merge pull request #649 from waltercruz/master Adding title to the player html template	2017-11-04 22:16:28 +11:00
Sam Potts	e787934ee6	Merge branch 'master' into master	2017-11-04 22:16:16 +11:00
Sam Potts	be4b5ef4db	Merge branch 'master' into master	2017-11-04 22:14:55 +11:00
Sam Potts	55c5b8b07e	Typo	2017-11-04 21:32:19 +11:00
Sam Potts	a924d40620	Merge pull request #654 from jjui/patch-1 Enable start/stop toggle on whole element	2017-11-04 21:29:25 +11:00
Sam Potts	0074e77a7c	Update plyr.scss	2017-11-04 21:28:38 +11:00
Sam Potts	f3141690ee	Update plyr.less	2017-11-04 21:28:17 +11:00
Sam Potts	7ac5b0e18b	Merge pull request #678 from StudyTube/use-url-as-input-for-vimeo-player Add URL as a possible input option to Vimeo player	2017-11-04 21:24:55 +11:00
Sam Potts	5abf7e9535	Merge pull request #703 from gurupras/early-listener-fix Allow Plyr.setup event listeners to be set up as separate event listeners	2017-11-04 18:15:03 +11:00
Sam Potts	650ee2c18f	Merge pull request #700 from ashkanhosseini/master fix #684 memory leaks issues after destroy.	2017-11-04 18:11:35 +11:00
Guru Prasad Srinivasa	95734cf7cc	Allow setup event listeners to be set up as separate event listeners rather than in-conjunction with defaultListener This allows the setup listeners to do things like preventDefault()/stopImmediatePropagation() and have them work	2017-11-01 04:15:03 -04:00
Ashkan Hosseini	7234e2f5a3	fix #684 memory leaks issues after destroy.	2017-10-28 00:09:40 +03:00
Yuriy	e06b689f5c	Enable speed controls using Vimeo API	2017-10-26 17:11:19 +03:00
Yuriy Kuzin	1b3a6b340d	Add URL as a possible input option to Vimeo player This is reasonable to processing correctly private Vimeo links, like https://vimeo.com/25345658/fe46e209ac - that contain not only vimeo id, but also private key	2017-10-06 14:41:57 +03:00
Sam Potts	b3759e966d	Version bump	2017-10-05 22:47:27 +11:00
Sam Potts	34172b9aee	Fullscreen bug fix (fixes #664 )	2017-10-05 22:46:48 +11:00
Sam Potts	a21ffe983c	Demo fixes	2017-10-02 14:52:31 +11:00
Sam Potts	9fb79f29fd	Readme fix	2017-10-02 14:25:14 +11:00
Sam Potts	032d73408f	CDN URL updates	2017-10-02 14:18:44 +11:00
J	72412d26a5	Update plyr.less	2017-09-09 13:31:39 +02:00
J	bf02c69daa	Enable start/stop toggle on whole element Related to issue https://github.com/sampotts/plyr/issues/587	2017-09-09 13:25:22 +02:00
Walter Cruz	01f50f03f1	dding title to the player html template (build)	2017-08-28 10:32:56 -03:00
Walter Cruz	f50f0eb63d	Adding title to the player html template	2017-08-28 10:19:29 -03:00
Sam Potts	3fe0c7c84b	Update readme.md	2017-08-13 21:07:22 +10:00
Oliver	b114a6f42e	[bugfix] target is null exception when using 'play-large' without a 'play' button, the statement target = target[0]; caused an error. So it is necessary to check the value of target before accessing [0]	2017-07-12 22:17:25 +02:00
versfx	d0ceefe827	Gulp build	2017-07-06 23:41:34 -04:00
versfx	e756664750	Fix for https://github.com/sampotts/plyr/issues/601	2017-07-06 23:28:31 -04:00
Sam Potts	6828bc00f8	Delete notes.md	2017-05-16 10:31:07 +10:00
Sam Potts	e95c81cc5b	Update bower.json	2017-05-16 10:17:57 +10:00
Sam Potts	c0eee58732	Plugin versions	2017-05-16 10:14:01 +10:00
Sam Potts	bcf88cd024	Vimeo demo bug fix + repo move	2017-05-16 10:08:59 +10:00
Brandon Pereira	d27a0b3855	updated to check for global namespace	2017-05-01 16:53:54 -06:00
Brandon Pereira	a575aa25ac	fix for svg4everybody conflicting with plyr	2017-05-01 15:50:54 -06:00