Merge branch 'master' into master

5 files changed, 222 insertions, 180 deletions

diff --git a/demo/dist/demo.js b/demo/dist/demo.js
index 5c035bd1..62799f2b 100644
--- 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,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"));
\ No newline at end of file
+"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="classList",i="prototype",o=t.Element[i],s=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(t){for(var e=0,i=this.length;e<i;e++)if(e in this&&this[e]===t)return e;return-1},a=function(t,e){this.name=t,this.code=DOMException[t],this.message=e},c=function(t,e){if(""===e)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(t,e)},l=function(t){for(var e=n.call(t.getAttribute("class")||""),i=e?e.split(/\s+/):[],o=0,s=i.length;o<s;o++)this.push(i[o]);this._updateClassName=function(){t.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(t){return this[t]||null},u.contains=function(t){return t+="",c(this,t)!==-1},u.add=function(){var t,e=arguments,i=0,o=e.length,s=!1;do t=e[i]+"",c(this,t)===-1&&(this.push(t),s=!0);while(++i<o);s&&this._updateClassName()},u.remove=function(){var t,e,i=arguments,o=0,s=i.length,n=!1;do for(t=i[o]+"",e=c(this,t);e!==-1;)this.splice(e,1),n=!0,e=c(this,t);while(++o<s);n&&this._updateClassName()},u.toggle=function(t,e){t+="";var i=this.contains(t),o=i?e!==!0&&"remove":e!==!1&&"add";return o&&this[o](t),e===!0||e===!1?e:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(o,e,p)}catch(h){h.number===-2146823252&&(p.enumerable=!1,s.defineProperty(o,e,p))}}else s[i].__defineGetter__&&o.__defineGetter__(e,d)}}(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[s]=t[s]||function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].l=1*new Date,n=e.createElement(i),r=e.getElementsByTagName(i)[0],n.async=1,n.src=o,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
diff --git a/demo/error.html b/demo/error.html
index c9ba8c36..6dc22cb1 100644
--- 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>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index b21fa6cc..b6941537 100644
--- 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></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>
+    <!-- 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/1.0.1/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/1.0.1/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>
\ No newline at end of file
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
index e2926df5..7d732dcd 100644
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@@ -12,68 +12,68 @@
 
     // 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:    '147865858',
-                        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");
 }
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index a7da5ad9..cdecc256 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -4,15 +4,17 @@
 
 @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;
+    src: url("//cdn.plyr.io/static/fonts/avenir-medium.woff2") format("woff2"),
+        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";
-    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;
-}
\ No newline at end of file
+    src: url("//cdn.plyr.io/static/fonts/avenir-bold.woff2") format("woff2"),
+        url("//cdn.plyr.io/static/fonts/avenir-bold.woff") format("woff");
+    font-style: normal;
+    font-weight: @font-weight-bold;
+    font-display: swap;
+}