Merge branch 'beta'

# Conflicts: # readme.md
author: Sam Potts <sam@potts.es> 2018-03-17 23:30:16 +1100
committer: Sam Potts <sam@potts.es> 2018-03-17 23:30:16 +1100
commit: 600f0eb8a3cf49f5268e5c15487797d496bc19b6 (patch)
tree: ae7d43ee753035458e5927b66eb588ff26d58afd /demo
parent: e0562752eaa4553466b78fb6828d05147a0891d1 (diff)
parent: 5db73b13276bf50357cc98896421318de66ab042 (diff)
download: plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.lz
plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.xz
plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.zip
56 files changed, 1821 insertions, 1414 deletions
diff --git a/demo/dist/demo.css b/demo/dist/demo.css
index c01a1dd5..13560087 100644
--- a/demo/dist/demo.css
+++ b/demo/dist/demo.css
@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}@font-face{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:500;font-display:swap}@font-face{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:700;font-display:swap}html{font-size:100%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;text-align:center;color:#55646b;font-weight:500;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1,h2{letter-spacing:-.025em;color:#3498db;margin:0 0 10px;line-height:1.2;font-weight:700}h1{font-size:64px;font-size:4rem}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.875rem}li,ul{list-style:none;margin:0;padding:0}a{text-decoration:none;color:#3498db;border-bottom:1px dotted currentColor;-webkit-transition:background .3s ease,color .3s ease,border .3s ease;transition:background .3s ease,color .3s ease,border .3s ease}a:focus,a:hover{color:#343f4a;border-bottom-color:transparent}a:focus{outline:thin dotted #343f4a;outline-offset:1px}a.logo{border:0}.color--vimeo{color:#19b7ed}.color--youtube{color:#cc181e}*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none}html{height:100%;background:#f2f5f7 fixed}body{margin:0;padding:10px}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.125rem}@media (min-width:480px){header{padding-top:60px;padding-bottom:60px}}section{max-width:1200px;margin:0 auto 20px}@media (min-width:480px){section{margin-bottom:40px}}.icon{fill:currentColor;width:18px;height:18px;vertical-align:-3px}a svg,button svg,label svg{pointer-events:none}.btn .icon,a .icon{margin-right:10px}.btn:not(.btn-large) .icon{width:16px;height:16px}nav ul{list-style:none;margin:0;padding:0;font-size:0}nav li{display:inline-block;margin-top:10px;font-size:16px;font-size:1rem;white-space:nowrap}nav li+li{margin-left:20px}.btn__bar{position:relative;margin:0 auto 20px;max-width:1200px;white-space:nowrap}.btn__bar::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dbe3e8}.btn__bar ul{position:relative;z-index:1;display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn__bar li{margin:0}.btn__bar li:first-child .btn{border-radius:4px 0 0 4px}.btn__bar li:last-child .btn{border-radius:0 4px 4px 0}.btn__bar li+li .btn{margin-left:-1px}.btn__bar li.active .btn{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);box-shadow:inset 0 1px 1px rgba(0,0,0,.2);position:relative;z-index:1}.btn__bar li.active .btn .icon{color:inherit}.btn__bar li.active+li .btn:hover{z-index:0}.btn__bar .btn{position:relative;display:block;border-radius:0}.btn__bar .btn:focus,.btn__bar .btn:hover{z-index:1}@media (min-width:560px){.btn__bar{margin-bottom:40px}}.btn,.btn__count{display:inline-block;vertical-align:middle;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700}.btn{padding:10px 12px;background:-webkit-gradient(linear,left top,left bottom,from(#f8fafb),to(#e9eef1));background:linear-gradient(#f8fafb,#e9eef1);border:1px solid #cbd0d3;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05);text-shadow:0 1px 1px #fff;color:#55646b;-webkit-transition:background .1s ease,color .1s ease;transition:background .1s ease,color .1s ease;font-size:14px;font-size:.875rem}.btn:focus,.btn:hover{border-color:#b5bcc0;color:#55646b;outline:0}.btn--large{padding:10px 20px;font-size:16px;font-size:1rem}.btn--primary,.btn__bar li.active .btn{background-image:-webkit-gradient(linear,left top,left bottom,from(#3498db),to(#258cd1));background-image:linear-gradient(#3498db,#258cd1);background-color:#3498db;border-color:#217dbb;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(0,0,0,.15);text-shadow:0 1px 1px rgba(0,0,0,.1);color:#fff}.btn--primary:focus,.btn--primary:hover{color:#fff;border-color:#196090}.btn--youtube .icon{color:#cc181e}.btn--vimeo .icon{color:#19b7ed}.btn--twitter .icon{color:#4baaf4}.btn__count{position:relative;margin-left:10px;padding:10px 15px;background:#fff;border:1px solid #cbd0d3}.btn__count::before{content:"";position:absolute;display:block;width:8px;height:8px;left:1px;top:50%;margin-top:-4px;background:inherit;border:inherit;border-width:1px 0 0 1px;-webkit-transform:rotate(-45deg) translate(-50%,-50%);transform:rotate(-45deg) translate(-50%,-50%)}.error body,html.error{height:100%}.error body{width:100%;display:table;table-layout:fixed}.error main{display:table-cell;width:100%;vertical-align:middle}video{max-width:100%;vertical-align:middle}.plyr{margin:0 auto;border-radius:6px}.plyr--audio{max-width:520px}.plyr__video-wrapper::after{content:"";pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;border:1px solid rgba(0,0,0,.15);border-radius:inherit}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:5px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}
-\ No newline at end of file
+@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:300;src:url(https://cdn.plyr.io/static/fonts/gordita-light.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-light.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:400;src:url(https://cdn.plyr.io/static/fonts/gordita-regular.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-regular.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:500;src:url(https://cdn.plyr.io/static/fonts/gordita-medium.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-medium.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:600;src:url(https://cdn.plyr.io/static/fonts/gordita-bold.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-bold.woff) format("woff")}@font-face{font-display:swap;font-family:Gordita;font-style:normal;font-weight:900;src:url(https://cdn.plyr.io/static/fonts/gordita-black.woff2) format("woff2"),url(https://cdn.plyr.io/static/fonts/gordita-black.woff) format("woff")}@keyframes fadein{0%{opacity:0}100%{opacity:1}}/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a,button.faux-link{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:border-box}body,html{display:flex;width:100%}html{background:linear-gradient(to left top,#4dc1ff,#0074b3);background-attachment:fixed;height:100%}body{align-items:center;display:flex;flex-direction:column;min-height:100%}.grid{flex:1;overflow:auto}main{margin:auto;padding-bottom:1px;text-align:center}aside{align-items:center;background:#fff;color:#55646b;display:flex;flex-shrink:0;justify-content:center;padding:15px;position:relative;text-align:center;text-shadow:none;width:100%}aside .icon{fill:#4baaf4;margin-right:10px}aside p{margin:0}aside a,aside button.faux-link{color:#4baaf4}aside a.tab-focus,aside button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(75,170,244,.35);outline:0}.grid{margin:0 auto;padding:20px}@media only screen and (min-width:768px){.grid{align-items:center;display:flex;max-width:1280px;width:100%}.grid>*{flex:1}}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:15px;font-size:.9375rem;color:#fff;font-family:Gordita,Avenir,"Helvetica Neue",sans-serif;font-weight:500;line-height:1.75;text-shadow:0 1px 1px rgba(0,0,0,.15)}button,input,select,textarea{font:inherit}p,small{margin:0 0 20px}small{font-size:13px;font-size:.8125rem;display:block}h1{font-size:64px;font-size:4rem;font-weight:600;letter-spacing:-.025em;margin:0 0 10px}.button,.button__count{align-items:center;background:#fff;border:0;border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#55646b;display:inline-flex;padding:15px;position:relative;text-shadow:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle}.button{font-weight:600;padding-left:20px;padding-right:20px;transition:all .2s ease}.button:focus,.button:hover{color:#343f4a}.button:focus::after,.button:hover::after{display:none}.button:hover{box-shadow:0 2px 2px rgba(0,0,0,.1);transform:translateY(-1px)}.button:focus{outline:0}.button.tab-focus{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}.button:active{transform:translateY(1px)}.button--with-count{display:inline-flex}.button--with-count .button .icon{flex-shrink:0}.button__count{animation:fadein .2s ease;margin-left:10px}.button__count::before{border:5px solid transparent;border-left-width:0;border-right-color:#fff;content:'';height:0;position:absolute;right:100%;top:50%;transform:translateY(-50%);width:0}header{padding-bottom:20px;text-align:center}header .call-to-action{margin-top:30px}@media only screen and (min-width:768px){header{margin-right:60px;max-width:360px;padding-bottom:40px;text-align:left}}.icon{fill:currentColor;height:16px;vertical-align:-3px;width:16px}a svg,button svg,button.faux-link svg,label svg{pointer-events:none}.btn .icon,a .icon,button.faux-link .icon{margin-right:6px}button.faux-link{background:0 0;border:0;border-radius:0;cursor:pointer;font:inherit;line-height:1.75;margin:0;padding:0;position:relative;text-align:inherit;text-shadow:inherit;-moz-user-select:text;vertical-align:baseline;width:auto}a,button.faux-link{border-bottom:1px dotted currentColor;color:#fff;font-weight:600;position:relative;text-decoration:none;transition:all .2s ease}a::after,button.faux-link::after{background:currentColor;content:'';height:1px;left:50%;position:absolute;top:100%;transform:translateX(-50%);transition:width .2s ease;width:0}a:focus,a:hover,button.faux-link:focus,button.faux-link:hover{border-bottom-color:transparent;outline:0}a:focus::after,a:hover::after,button.faux-link:focus::after,button.faux-link:hover::after{width:100%}a.tab-focus,button.tab-focus.faux-link{box-shadow:0 0 0 3px rgba(255,255,255,.35);outline:0}a.no-border::after,button.no-border.faux-link::after{display:none}li,ul{list-style:none;margin:0;padding:0}audio,img,video{max-width:100%;vertical-align:middle}nav{display:flex;justify-content:center;margin-bottom:20px}video{max-width:100%;vertical-align:middle}.plyr{border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2);margin:20px auto}.plyr.plyr--audio{max-width:480px}.plyr__video-wrapper::after{border:1px solid rgba(0,0,0,.15);border-radius:inherit;bottom:0;content:'';left:0;pointer-events:none;position:absolute;right:0;top:0}.plyr__cite{display:none;margin-top:20px}.plyr__cite .icon{margin-right:4px}.plyr--audio~ul .plyr__cite--audio,.plyr--video:not(.plyr--youtube):not(.plyr--vimeo)~ul .plyr__cite--video,.plyr--vimeo~ul .plyr__cite--vimeo,.plyr--youtube~ul .plyr__cite--youtube{display:block}@keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:inherit;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui button.faux-link,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:12px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions span{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions span div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:13px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control[aria-pressed=false] .icon--pressed,.plyr__control[aria-pressed=false] .label--pressed,.plyr__control[aria-pressed=true] .icon--not-pressed,.plyr__control[aria-pressed=true] .label--not-pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__video-embed>div{padding-bottom:200%;position:relative;transform:translateY(-35.9375%)}.plyr--full-ui .plyr__video-embed iframe{pointer-events:none}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:13px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:1}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4f5b5f;display:flex;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%);transition:border-color .2s ease}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr__progress{display:flex;flex:1;position:relative}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:11px;left:0}.plyr__progress--buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin:-3px 0 0;padding:0;position:absolute;top:50%;width:100%}.plyr__progress--buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress--buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress--buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress--buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress--buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress--buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress--buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress--buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress--buffer{background-color:rgba(183,197,205,.66)}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value),transparent var(--value))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;transition:all .3s ease;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__time{font-size:11px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:12px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume,.plyr--is-ios [data-plyr=mute]{display:none!important}.plyr--has-error{pointer-events:none}.plyr--has-error::after{align-items:center;background:#000;color:#fff;content:attr(data-plyr-error);display:flex;font-size:13px;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 1px 1px #000;top:0;width:100%;z-index:10}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr--full-ui [hidden]{display:none}.plyr--full-ui [aria-hidden=true]{display:none}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important}.no-border{border:0}[hidden]{display:none}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;opacity:.001;overflow:hidden;padding:0;position:absolute;width:1px}
+\ No newline at end of file
diff --git a/demo/dist/demo.js b/demo/dist/demo.js
index c823e18e..674ba895 100644
--- a/demo/dist/demo.js
+++ b/demo/dist/demo.js
@@ -1 +1,243 @@
-"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"));
-\ No newline at end of file
+(function () {
+'use strict';
+
+// ==========================================================================
+// Plyr.io demo
+// This code is purely for the https://plyr.io website
+// Please see readme.md in the root or github.com/sampotts/plyr
+// ==========================================================================
+
+document.addEventListener('DOMContentLoaded', function () {
+    if (window.shr) {
+        window.shr.setup({
+            count: {
+                classname: 'button__count'
+            }
+        });
+    }
+
+    // Setup tab focus
+    var tabClassName = 'tab-focus';
+
+    // Remove class on blur
+    document.addEventListener('focusout', function (event) {
+        event.target.classList.remove(tabClassName);
+    });
+
+    // Add classname to tabbed elements
+    document.addEventListener('keydown', function (event) {
+        if (event.keyCode !== 9) {
+            return;
+        }
+
+        // Delay the adding of classname until the focus has changed
+        // This event fires before the focusin event
+        setTimeout(function () {
+            document.activeElement.classList.add(tabClassName);
+        }, 0);
+    });
+
+    // Setup the player
+    var player = new Plyr('#player', {
+        debug: true,
+        title: 'View From A Blue Moon',
+        iconUrl: '../dist/plyr.svg',
+        keyboard: {
+            global: true
+        },
+        tooltips: {
+            controls: true
+        },
+        captions: {
+            active: true
+        },
+        keys: {
+            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
+        },
+        ads: {
+            enabled: true,
+            publisherId: '918848828995742'
+        }
+    });
+
+    // Expose for tinkering in the console
+    window.player = player;
+
+    // Setup type toggle
+    var buttons = document.querySelectorAll('[data-source]');
+    var types = {
+        video: 'video',
+        audio: 'audio',
+        youtube: 'youtube',
+        vimeo: 'vimeo'
+    };
+    var currentType = window.location.hash.replace('#', '');
+    var historySupport = window.history && window.history.pushState;
+
+    // Toggle class on an element
+    function toggleClass(element, className, state) {
+        if (element) {
+            element.classList[state ? 'add' : 'remove'](className);
+        }
+    }
+
+    // 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) {
+            return;
+        }
+
+        switch (type) {
+            case types.video:
+                player.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'
+                    }],
+                    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
+                    }, {
+                        kind: 'captions',
+                        label: 'French',
+                        srclang: 'fr',
+                        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt'
+                    }]
+                };
+
+                break;
+
+            case types.audio:
+                player.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 types.youtube:
+                player.source = {
+                    type: 'video',
+                    title: 'View From A Blue Moon',
+                    sources: [{
+                        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                        provider: 'youtube'
+                    }]
+                };
+
+                break;
+
+            case types.vimeo:
+                player.source = {
+                    type: 'video',
+                    sources: [{
+                        src: 'https://vimeo.com/76979871',
+                        provider: 'vimeo'
+                    }]
+                };
+
+                break;
+
+            default:
+                break;
+        }
+
+        // Set the current type for next time
+        currentType = type;
+
+        // Remove active classes
+        Array.from(buttons).forEach(function (button) {
+            return toggleClass(button.parentElement, 'active', false);
+        });
+
+        // Set active on parent
+        toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
+
+        // Show cite
+        Array.from(document.querySelectorAll('.plyr__cite')).forEach(function (cite) {
+            cite.setAttribute('hidden', '');
+        });
+        document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
+    }
+
+    // Bind to each button
+    Array.from(buttons).forEach(function (button) {
+        button.addEventListener('click', function () {
+            var type = button.getAttribute('data-source');
+
+            newSource(type);
+
+            if (historySupport) {
+                window.history.pushState({ type: type }, '', '#' + type);
+            }
+        });
+    });
+
+    // List for backwards/forwards
+    window.addEventListener('popstate', function (event) {
+        if (event.state && 'type' in event.state) {
+            newSource(event.state.type);
+        }
+    });
+
+    // On load
+    if (historySupport) {
+        var video = !currentType.length;
+
+        // If there's no current type set, assume video
+        if (video) {
+            currentType = types.video;
+        }
+
+        // Replace current history state
+        if (currentType in types) {
+            window.history.replaceState({
+                type: currentType
+            }, '', video ? '' : '#' + currentType);
+        }
+
+        // If it's not video, load the source
+        if (currentType !== types.video) {
+            newSource(currentType, true);
+        }
+    }
+});
+
+// Google analytics
+// For demo site (https://plyr.io) only
+/* eslint-disable */
+if (window.location.host === 'plyr.io') {
+    (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', 'https://www.google-analytics.com/analytics.js', 'ga');
+    window.ga('create', 'UA-40881672-11', 'auto');
+    window.ga('send', 'pageview');
+}
+/* eslint-enable */
+
+}());
+
+//# sourceMappingURL=demo.js.map
diff --git a/demo/dist/demo.js.map b/demo/dist/demo.js.map
new file mode 100644
index 00000000..8eb61273
--- /dev/null
+++ b/demo/dist/demo.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["demo/src/js/demo.js"],"names":["document","addEventListener","window","shr","setup","tabClassName","target","classList","remove","event","keyCode","activeElement","add","player","Plyr","buttons","querySelectorAll","types","currentType","location","hash","replace","historySupport","history","pushState","toggleClass","element","className","state","newSource","type","init","length","video","source","audio","youtube","vimeo","from","forEach","button","parentElement","querySelector","setAttribute","removeAttribute","getAttribute","replaceState","host","i","s","o","g","r","a","m","GoogleAnalyticsObject","q","push","arguments","l","Date","createElement","getElementsByTagName","async","src","parentNode","insertBefore","ga"],"mappings":";;;AAAA;;;;;;AAMAA,SAASC,gBAAT,CAA0B,kBAA1B,EAA8C,YAAM;QAC5CC,OAAOC,GAAX,EAAgB;eACLA,GAAP,CAAWC,KAAX,CAAiB;mBACN;2BACQ;;SAFnB;;;;QAQEC,eAAe,WAArB;;;aAGSJ,gBAAT,CAA0B,UAA1B,EAAsC,iBAAS;cACrCK,MAAN,CAAaC,SAAb,CAAuBC,MAAvB,CAA8BH,YAA9B;KADJ;;;aAKSJ,gBAAT,CAA0B,SAA1B,EAAqC,iBAAS;YACtCQ,MAAMC,OAAN,KAAkB,CAAtB,EAAyB;;;;;;mBAMd,YAAM;qBACJC,aAAT,CAAuBJ,SAAvB,CAAiCK,GAAjC,CAAqCP,YAArC;SADJ,EAEG,CAFH;KAPJ;;;QAaMQ,SAAS,IAAIC,IAAJ,CAAS,SAAT,EAAoB;eACxB,IADwB;eAExB,uBAFwB;iBAGtB,kBAHsB;kBAIrB;oBACE;SALmB;kBAOrB;sBACI;SARiB;kBAUrB;oBACE;SAXmB;cAazB;oBACM;SAdmB;aAgB1B;qBACQ,IADR;yBAEY;;KAlBN,CAAf;;;WAuBOD,MAAP,GAAgBA,MAAhB;;;QAGME,UAAUf,SAASgB,gBAAT,CAA0B,eAA1B,CAAhB;QACMC,QAAQ;eACH,OADG;eAEH,OAFG;iBAGD,SAHC;eAIH;KAJX;QAMIC,cAAchB,OAAOiB,QAAP,CAAgBC,IAAhB,CAAqBC,OAArB,CAA6B,GAA7B,EAAkC,EAAlC,CAAlB;QACMC,iBAAiBpB,OAAOqB,OAAP,IAAkBrB,OAAOqB,OAAP,CAAeC,SAAxD;;;aAGSC,WAAT,CAAqBC,OAArB,EAA8BC,SAA9B,EAAyCC,KAAzC,EAAgD;YACxCF,OAAJ,EAAa;oBACDnB,SAAR,CAAkBqB,QAAQ,KAAR,GAAgB,QAAlC,EAA4CD,SAA5C;;;;;aAKCE,SAAT,CAAmBC,IAAnB,EAAyBC,IAAzB,EAA+B;;YAEvB,EAAED,QAAQb,KAAV,KAAqB,CAACc,IAAD,IAASD,SAASZ,WAAvC,IAAwD,CAACA,YAAYc,MAAb,IAAuBF,SAASb,MAAMgB,KAAlG,EAA0G;;;;gBAIlGH,IAAR;iBACSb,MAAMgB,KAAX;uBACWC,MAAP,GAAgB;0BACN,OADM;2BAEL,uBAFK;6BAGH,CAAC;6BACD,sEADC;8BAEA;qBAFD,CAHG;4BAOJ,sEAPI;4BAQJ,CACJ;8BACU,UADV;+BAEW,SAFX;iCAGa,IAHb;6BAIS,yEAJT;iCAKa;qBANT,EAQJ;8BACU,UADV;+BAEW,QAFX;iCAGa,IAHb;6BAIS;qBAZL;iBARZ;;;;iBA2BCjB,MAAMkB,KAAX;uBACWD,MAAP,GAAgB;0BACN,OADM;2BAEL,6DAFK;6BAGH,CACL;6BACS,6EADT;8BAEU;qBAHL,EAKL;6BACS,6EADT;8BAEU;qBAPL;iBAHb;;;;iBAiBCjB,MAAMmB,OAAX;uBACWF,MAAP,GAAgB;0BACN,OADM;2BAEL,uBAFK;6BAGH,CAAC;6BACD,yCADC;kCAEI;qBAFL;iBAHb;;;;iBAWCjB,MAAMoB,KAAX;uBACWH,MAAP,GAAgB;0BACN,OADM;6BAEH,CAAC;6BACD,4BADC;kCAEI;qBAFL;iBAFb;;;;;;;;;sBAeMJ,IAAd;;;cAGMQ,IAAN,CAAWvB,OAAX,EAAoBwB,OAApB,CAA4B;mBAAUd,YAAYe,OAAOC,aAAnB,EAAkC,QAAlC,EAA4C,KAA5C,CAAV;SAA5B;;;oBAGYzC,SAAS0C,aAAT,oBAAwCZ,IAAxC,QAAZ,EAA+D,QAA/D,EAAyE,IAAzE;;;cAGMQ,IAAN,CAAWtC,SAASgB,gBAAT,CAA0B,aAA1B,CAAX,EAAqDuB,OAArD,CAA6D,gBAAQ;iBAC5DI,YAAL,CAAkB,QAAlB,EAA4B,EAA5B;SADJ;iBAGSD,aAAT,mBAAuCZ,IAAvC,EAA+Cc,eAA/C,CAA+D,QAA/D;;;;UAIEN,IAAN,CAAWvB,OAAX,EAAoBwB,OAApB,CAA4B,kBAAU;eAC3BtC,gBAAP,CAAwB,OAAxB,EAAiC,YAAM;gBAC7B6B,OAAOU,OAAOK,YAAP,CAAoB,aAApB,CAAb;;sBAEUf,IAAV;;gBAEIR,cAAJ,EAAoB;uBACTC,OAAP,CAAeC,SAAf,CAAyB,EAAEM,UAAF,EAAzB,EAAmC,EAAnC,QAA2CA,IAA3C;;SANR;KADJ;;;WAaO7B,gBAAP,CAAwB,UAAxB,EAAoC,iBAAS;YACrCQ,MAAMmB,KAAN,IAAe,UAAUnB,MAAMmB,KAAnC,EAA0C;sBAC5BnB,MAAMmB,KAAN,CAAYE,IAAtB;;KAFR;;;QAOIR,cAAJ,EAAoB;YACVW,QAAQ,CAACf,YAAYc,MAA3B;;;YAGIC,KAAJ,EAAW;0BACOhB,MAAMgB,KAApB;;;;YAIAf,eAAeD,KAAnB,EAA0B;mBACfM,OAAP,CAAeuB,YAAf,CACI;sBACU5B;aAFd,EAII,EAJJ,EAKIe,QAAQ,EAAR,SAAiBf,WALrB;;;;YAUAA,gBAAgBD,MAAMgB,KAA1B,EAAiC;sBACnBf,WAAV,EAAuB,IAAvB;;;CArNZ;;;;;AA6NA,IAAIhB,OAAOiB,QAAP,CAAgB4B,IAAhB,KAAyB,SAA7B,EAAwC;KACnC,UAASC,CAAT,EAAYC,CAAZ,EAAeC,CAAf,EAAkBC,CAAlB,EAAqBC,CAArB,EAAwBC,CAAxB,EAA2BC,CAA3B,EAA8B;UACzBC,qBAAF,GAA0BH,CAA1B;UACEA,CAAF,IACIJ,EAAEI,CAAF,KACA,YAAW;aACNJ,EAAEI,CAAF,EAAKI,CAAL,GAASR,EAAEI,CAAF,EAAKI,CAAL,IAAU,EAApB,EAAwBC,IAAxB,CAA6BC,SAA7B;SAHR;UAKEN,CAAF,EAAKO,CAAL,GAAS,IAAI,IAAIC,IAAJ,EAAb;YACIX,EAAEY,aAAF,CAAgBX,CAAhB,CAAJ;YACID,EAAEa,oBAAF,CAAuBZ,CAAvB,EAA0B,CAA1B,CAAJ;UACEa,KAAF,GAAU,CAAV;UACEC,GAAF,GAAQb,CAAR;UACEc,UAAF,CAAaC,YAAb,CAA0Bb,CAA1B,EAA6BC,CAA7B;KAZJ,EAaGpD,MAbH,EAaWF,QAbX,EAaqB,QAbrB,EAa+B,+CAb/B,EAagF,IAbhF;WAcOmE,EAAP,CAAU,QAAV,EAAoB,gBAApB,EAAsC,MAAtC;WACOA,EAAP,CAAU,MAAV,EAAkB,UAAlB","file":"demo.js","sourcesContent":["// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see readme.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    if (window.shr) {\n        window.shr.setup({\n            count: {\n                classname: 'button__count',\n            },\n        });\n    }\n\n    // Setup tab focus\n    const tabClassName = 'tab-focus';\n\n    // Remove class on blur\n    document.addEventListener('focusout', event => {\n        event.target.classList.remove(tabClassName);\n    });\n\n    // Add classname to tabbed elements\n    document.addEventListener('keydown', event => {\n        if (event.keyCode !== 9) {\n            return;\n        }\n\n        // Delay the adding of classname until the focus has changed\n        // This event fires before the focusin event\n        setTimeout(() => {\n            document.activeElement.classList.add(tabClassName);\n        }, 0);\n    });\n\n    // Setup the player\n    const player = new Plyr('#player', {\n        debug: true,\n        title: 'View From A Blue Moon',\n        iconUrl: '../dist/plyr.svg',\n        keyboard: {\n            global: true,\n        },\n        tooltips: {\n            controls: true,\n        },\n        captions: {\n            active: true,\n        },\n        keys: {\n            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',\n        },\n        ads: {\n            enabled: true,\n            publisherId: '918848828995742',\n        },\n    });\n\n    // Expose for tinkering in the console\n    window.player = player;\n\n    // Setup type toggle\n    const buttons = document.querySelectorAll('[data-source]');\n    const types = {\n        video: 'video',\n        audio: 'audio',\n        youtube: 'youtube',\n        vimeo: 'vimeo',\n    };\n    let currentType = window.location.hash.replace('#', '');\n    const historySupport = window.history && window.history.pushState;\n\n    // Toggle class on an element\n    function toggleClass(element, className, state) {\n        if (element) {\n            element.classList[state ? 'add' : 'remove'](className);\n        }\n    }\n\n    // Set a new source\n    function newSource(type, init) {\n        // 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\n        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {\n            return;\n        }\n\n        switch (type) {\n            case types.video:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [{\n                        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',\n                        type: 'video/mp4',\n                    }],\n                    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',\n                    tracks: [\n                        {\n                            kind: 'captions',\n                            label: 'English',\n                            srclang: 'en',\n                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n                            default: true,\n                        },\n                        {\n                            kind: 'captions',\n                            label: 'French',\n                            srclang: 'fr',\n                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.audio:\n                player.source = {\n                    type: 'audio',\n                    title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',\n                    sources: [\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n                            type: 'audio/mp3',\n                        },\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n                            type: 'audio/ogg',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.youtube:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [{\n                        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n                        provider: 'youtube',\n                    }],\n                };\n\n                break;\n\n            case types.vimeo:\n                player.source = {\n                    type: 'video',\n                    sources: [{\n                        src: 'https://vimeo.com/76979871',\n                        provider: 'vimeo',\n                    }],\n                };\n\n                break;\n\n            default:\n                break;\n        }\n\n        // Set the current type for next time\n        currentType = type;\n\n        // Remove active classes\n        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));\n\n        // Set active on parent\n        toggleClass(document.querySelector(`[data-source=\"${type}\"]`), 'active', true);\n\n        // Show cite\n        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {\n            cite.setAttribute('hidden', '');\n        });\n        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');\n    }\n\n    // Bind to each button\n    Array.from(buttons).forEach(button => {\n        button.addEventListener('click', () => {\n            const type = button.getAttribute('data-source');\n\n            newSource(type);\n\n            if (historySupport) {\n                window.history.pushState({ type }, '', `#${type}`);\n            }\n        });\n    });\n\n    // List for backwards/forwards\n    window.addEventListener('popstate', event => {\n        if (event.state && 'type' in event.state) {\n            newSource(event.state.type);\n        }\n    });\n\n    // On load\n    if (historySupport) {\n        const video = !currentType.length;\n\n        // If there's no current type set, assume video\n        if (video) {\n            currentType = types.video;\n        }\n\n        // Replace current history state\n        if (currentType in types) {\n            window.history.replaceState(\n                {\n                    type: currentType,\n                },\n                '',\n                video ? '' : `#${currentType}`,\n            );\n        }\n\n        // If it's not video, load the source\n        if (currentType !== types.video) {\n            newSource(currentType, true);\n        }\n    }\n});\n\n// Google analytics\n// For demo site (https://plyr.io) only\n/* eslint-disable */\nif (window.location.host === 'plyr.io') {\n    (function(i, s, o, g, r, a, m) {\n        i.GoogleAnalyticsObject = r;\n        i[r] =\n            i[r] ||\n            function() {\n                (i[r].q = i[r].q || []).push(arguments);\n            };\n        i[r].l = 1 * new Date();\n        a = s.createElement(o);\n        m = s.getElementsByTagName(o)[0];\n        a.async = 1;\n        a.src = g;\n        m.parentNode.insertBefore(a, m);\n    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');\n    window.ga('create', 'UA-40881672-11', 'auto');\n    window.ga('send', 'pageview');\n}\n/* eslint-enable */\n"]}
+\ No newline at end of file
diff --git a/demo/dist/demo.min.js b/demo/dist/demo.min.js
new file mode 100644
index 00000000..c6033c5a
--- /dev/null
+++ b/demo/dist/demo.min.js
@@ -0,0 +1,2 @@
+!function(){"use strict";var e,t,o,i,r,a;document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{enabled:!0,publisherId:"918848828995742"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function a(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(r,n){if(r in o&&(n||r!==i)&&(i.length||r!==o.video)){switch(r){case o.video:e.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"}],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},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.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 o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=r,Array.from(t).forEach(function(e){return a(e.parentElement,"active",!1)}),a(document.querySelector('[data-source="'+r+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+r).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),r){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(e=window,t=document,o="script",i="ga",e.GoogleAnalyticsObject=i,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement(o),a=t.getElementsByTagName(o)[0],r.async=1,r.src="https://www.google-analytics.com/analytics.js",a.parentNode.insertBefore(r,a),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"))}();
+//# sourceMappingURL=demo.min.js.map
diff --git a/demo/dist/demo.min.js.map b/demo/dist/demo.min.js.map
new file mode 100644
index 00000000..6097401a
--- /dev/null
+++ b/demo/dist/demo.min.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["demo/src/js/demo.js"],"names":["i","s","o","r","a","m","document","addEventListener","window","shr","setup","event","target","classList","remove","keyCode","activeElement","add","player","Plyr","buttons","querySelectorAll","types","currentType","location","hash","replace","historySupport","history","pushState","toggleClass","element","className","state","newSource","type","init","length","video","source","audio","youtube","vimeo","from","forEach","button","parentElement","querySelector","cite","setAttribute","removeAttribute","getAttribute","replaceState","host","GoogleAnalyticsObject","q","push","arguments","l","Date","createElement","getElementsByTagName","async","src","parentNode","insertBefore","ga"],"mappings":"6BAoOcA,EAAGC,EAAGC,EAAMC,EAAGC,EAAGC,EA9NhCC,SAASC,iBAAiB,mBAAoB,WACtCC,OAAOC,YACAA,IAAIC,wBAEQ,4BASdH,iBAAiB,WAAY,SAAAI,KAC5BC,OAAOC,UAAUC,OAJN,wBAQZP,iBAAiB,UAAW,SAAAI,GACX,IAAlBA,EAAMI,oBAMC,oBACEC,cAAcH,UAAUI,IAhBpB,cAiBd,SAIDC,EAAS,IAAIC,KAAK,kBACb,QACA,gCACE,qCAEG,uBAGE,qBAGF,gBAGA,yDAGC,cACI,4BAKdD,OAASA,MAGVE,EAAUd,SAASe,iBAAiB,iBACpCC,SACK,cACA,gBACE,gBACF,SAEPC,EAAcf,OAAOgB,SAASC,KAAKC,QAAQ,IAAK,IAC9CC,EAAiBnB,OAAOoB,SAAWpB,OAAOoB,QAAQC,mBAG/CC,EAAYC,EAASC,EAAWC,GACjCF,KACQlB,UAAUoB,EAAQ,MAAQ,UAAUD,YAK3CE,EAAUC,EAAMC,MAEfD,KAAQb,IAAYc,GAAQD,IAASZ,KAAkBA,EAAYc,QAAUF,IAASb,EAAMgB,eAI1FH,QACCb,EAAMgB,QACAC,aACG,cACC,sCAEE,4EACC,qBAEF,qFAGM,iBACC,kBACE,SACJ,mFACI,SAGH,iBACC,iBACE,SACJ,wFAOhBjB,EAAMkB,QACAD,aACG,cACC,4EAGM,mFACC,kBAGD,mFACC,0BAOjBjB,EAAMmB,UACAF,aACG,cACC,sCAEE,mDACK,wBAMjBjB,EAAMoB,QACAH,aACG,sBAEG,sCACK,aAWZJ,QAGRQ,KAAKvB,GAASwB,QAAQ,SAAAC,UAAUf,EAAYe,EAAOC,cAAe,UAAU,OAGtExC,SAASyC,cAAT,iBAAwCZ,EAAxC,MAAmD,UAAU,SAGnEQ,KAAKrC,SAASe,iBAAiB,gBAAgBuB,QAAQ,SAAAI,KACpDC,aAAa,SAAU,eAEvBF,cAAT,gBAAuCZ,GAAQe,gBAAgB,oBAI7DP,KAAKvB,GAASwB,QAAQ,SAAAC,KACjBtC,iBAAiB,QAAS,eACvB4B,EAAOU,EAAOM,aAAa,iBAEvBhB,GAENR,UACOC,QAAQC,WAAYM,KAAAA,GAAQ,GAAnC,IAA2CA,cAMhD5B,iBAAiB,WAAY,SAAAI,GAC5BA,EAAMsB,OAAS,SAAUtB,EAAMsB,SACrBtB,EAAMsB,MAAME,QAK1BR,EAAgB,KACVW,GAASf,EAAYc,OAGvBC,MACchB,EAAMgB,OAIpBf,KAAeD,UACRM,QAAQwB,mBAED7B,GAEV,GACAe,EAAQ,GAAR,IAAiBf,GAKrBA,IAAgBD,EAAMgB,SACZf,GAAa,MAQN,YAAzBf,OAAOgB,SAAS6B,OACNrD,EAaPQ,OAbUP,EAaFK,SAbKJ,EAaK,SAbCC,EAa0D,OAZ1EmD,sBAAwBnD,IAC1B,GACIH,EAAA,IACA,YACKA,EAAA,GAAKuD,EAAIvD,EAAA,GAAKuD,OAASC,KAAKC,cAErC,GAAKC,EAAI,EAAI,IAAIC,OACb1D,EAAE2D,cAAc1D,KAChBD,EAAE4D,qBAAqB3D,GAAG,KAC5B4D,MAAQ,IACRC,IAEyB,kDADzBC,WAAWC,aAAa7D,EAAGC,UAE1B6D,GAAG,SAAU,iBAAkB,eAC/BA,GAAG,OAAQ","file":"demo.min.js","sourcesContent":["// ==========================================================================\n// Plyr.io demo\n// This code is purely for the https://plyr.io website\n// Please see readme.md in the root or github.com/sampotts/plyr\n// ==========================================================================\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    if (window.shr) {\n        window.shr.setup({\n            count: {\n                classname: 'button__count',\n            },\n        });\n    }\n\n    // Setup tab focus\n    const tabClassName = 'tab-focus';\n\n    // Remove class on blur\n    document.addEventListener('focusout', event => {\n        event.target.classList.remove(tabClassName);\n    });\n\n    // Add classname to tabbed elements\n    document.addEventListener('keydown', event => {\n        if (event.keyCode !== 9) {\n            return;\n        }\n\n        // Delay the adding of classname until the focus has changed\n        // This event fires before the focusin event\n        setTimeout(() => {\n            document.activeElement.classList.add(tabClassName);\n        }, 0);\n    });\n\n    // Setup the player\n    const player = new Plyr('#player', {\n        debug: true,\n        title: 'View From A Blue Moon',\n        iconUrl: '../dist/plyr.svg',\n        keyboard: {\n            global: true,\n        },\n        tooltips: {\n            controls: true,\n        },\n        captions: {\n            active: true,\n        },\n        keys: {\n            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',\n        },\n        ads: {\n            enabled: true,\n            publisherId: '918848828995742',\n        },\n    });\n\n    // Expose for tinkering in the console\n    window.player = player;\n\n    // Setup type toggle\n    const buttons = document.querySelectorAll('[data-source]');\n    const types = {\n        video: 'video',\n        audio: 'audio',\n        youtube: 'youtube',\n        vimeo: 'vimeo',\n    };\n    let currentType = window.location.hash.replace('#', '');\n    const historySupport = window.history && window.history.pushState;\n\n    // Toggle class on an element\n    function toggleClass(element, className, state) {\n        if (element) {\n            element.classList[state ? 'add' : 'remove'](className);\n        }\n    }\n\n    // Set a new source\n    function newSource(type, init) {\n        // 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\n        if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {\n            return;\n        }\n\n        switch (type) {\n            case types.video:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [{\n                        src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',\n                        type: 'video/mp4',\n                    }],\n                    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',\n                    tracks: [\n                        {\n                            kind: 'captions',\n                            label: 'English',\n                            srclang: 'en',\n                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',\n                            default: true,\n                        },\n                        {\n                            kind: 'captions',\n                            label: 'French',\n                            srclang: 'fr',\n                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.audio:\n                player.source = {\n                    type: 'audio',\n                    title: 'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',\n                    sources: [\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',\n                            type: 'audio/mp3',\n                        },\n                        {\n                            src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',\n                            type: 'audio/ogg',\n                        },\n                    ],\n                };\n\n                break;\n\n            case types.youtube:\n                player.source = {\n                    type: 'video',\n                    title: 'View From A Blue Moon',\n                    sources: [{\n                        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',\n                        provider: 'youtube',\n                    }],\n                };\n\n                break;\n\n            case types.vimeo:\n                player.source = {\n                    type: 'video',\n                    sources: [{\n                        src: 'https://vimeo.com/76979871',\n                        provider: 'vimeo',\n                    }],\n                };\n\n                break;\n\n            default:\n                break;\n        }\n\n        // Set the current type for next time\n        currentType = type;\n\n        // Remove active classes\n        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));\n\n        // Set active on parent\n        toggleClass(document.querySelector(`[data-source=\"${type}\"]`), 'active', true);\n\n        // Show cite\n        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {\n            cite.setAttribute('hidden', '');\n        });\n        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');\n    }\n\n    // Bind to each button\n    Array.from(buttons).forEach(button => {\n        button.addEventListener('click', () => {\n            const type = button.getAttribute('data-source');\n\n            newSource(type);\n\n            if (historySupport) {\n                window.history.pushState({ type }, '', `#${type}`);\n            }\n        });\n    });\n\n    // List for backwards/forwards\n    window.addEventListener('popstate', event => {\n        if (event.state && 'type' in event.state) {\n            newSource(event.state.type);\n        }\n    });\n\n    // On load\n    if (historySupport) {\n        const video = !currentType.length;\n\n        // If there's no current type set, assume video\n        if (video) {\n            currentType = types.video;\n        }\n\n        // Replace current history state\n        if (currentType in types) {\n            window.history.replaceState(\n                {\n                    type: currentType,\n                },\n                '',\n                video ? '' : `#${currentType}`,\n            );\n        }\n\n        // If it's not video, load the source\n        if (currentType !== types.video) {\n            newSource(currentType, true);\n        }\n    }\n});\n\n// Google analytics\n// For demo site (https://plyr.io) only\n/* eslint-disable */\nif (window.location.host === 'plyr.io') {\n    (function(i, s, o, g, r, a, m) {\n        i.GoogleAnalyticsObject = r;\n        i[r] =\n            i[r] ||\n            function() {\n                (i[r].q = i[r].q || []).push(arguments);\n            };\n        i[r].l = 1 * new Date();\n        a = s.createElement(o);\n        m = s.getElementsByTagName(o)[0];\n        a.async = 1;\n        a.src = g;\n        m.parentNode.insertBefore(a, m);\n    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');\n    window.ga('create', 'UA-40881672-11', 'auto');\n    window.ga('send', 'pageview');\n}\n/* eslint-enable */\n"]}
+\ No newline at end of file
diff --git a/demo/dist/demo.svg b/demo/dist/demo.svg
deleted file mode 100644
index 6f09b44b..00000000
--- a/demo/dist/demo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-github" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 .2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V14c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z"/></symbol><symbol id="icon-twitter" viewBox="0 0 16 16"><title>Twitter</title><path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/></symbol><symbol id="icon-vimeo" viewBox="0 0 16 16"><path d="M16 4.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C4 9.9 3.4 5 2 5c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z"/></symbol><symbol id="icon-youtube" viewBox="0 0 16 16"><path d="M15.8 4.8c-.2-1.3-.8-2.2-2.2-2.4C11.4 2 8 2 8 2s-3.4 0-5.6.4C1 2.6.3 3.5.2 4.8 0 6.1 0 8 0 8s0 1.9.2 3.2c.2 1.3.8 2.2 2.2 2.4C4.6 14 8 14 8 14s3.4 0 5.6-.4c1.4-.3 2-1.1 2.2-2.4C16 9.9 16 8 16 8s0-1.9-.2-3.2zM6 11V5l5 3-5 3z"/></symbol></svg>
-\ No newline at end of file
diff --git a/demo/error.html b/demo/error.html
index 6dc22cb1..915aa4b5 100644
--- a/demo/error.html
+++ b/demo/error.html
@@ -7,18 +7,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Docs styles -->
-    <link rel="stylesheet" href="dist/demo.css">
+    <link rel="stylesheet" href="dist/error.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">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-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>
+        <a href="javascript:history.back()" class="button">Go back</a>
     </main>
 </body>
 
diff --git a/demo/index.html b/demo/index.html
index b6941537..59fe08d0 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -3,66 +3,95 @@
 
 <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.">
+    <title>Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player</title>
+    <meta name="description" property="og: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">
+    <!-- Icons -->
+    <link rel="icon" href="https://cdn.plyr.io/static/icons/favicon.ico">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="https://cdn.plyr.io/static/icons/16x16.png" sizes="16x16">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.plyr.io/static/icons/180x180.png">
+
+    <!-- Opengraph -->
+    <meta property="og:title" content="Plyr - A simple, customizable HTML5 Video, Audio, YouTube and Vimeo player">
+    <meta property="og:site_name" content="Plyr">
+    <meta property="og:url" content="https://plyr.io">
+    <meta property="og:image" content="https://cdn.plyr.io/static/icons/1200x630.png">
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@sam_potts">
+    <meta name="twitter:creator" content="@sam_potts">
+    <meta name="twitter:card" content="summary_large_image">
 
     <!-- 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">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
 </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
+    <div class="grid">
+        <header>
+            <h1>Plyr</h1>
+            <p>A simple, accessible and customisable media player for
+                <button type="button" class="faux-link" data-source="video">
+                    <svg class="icon">
+                        <title>HTML5</title>
+                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
+                    </svg>Video</button>,
+                <button type="button" class="faux-link" data-source="audio">
+                    <svg class="icon">
+                        <title>HTML5</title>
+                        <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
+                    </svg>Audio</button>,
+                <button type="button" class="faux-link" data-source="youtube">
+                    <svg class="icon" role="presentation">
+                        <title>YouTube</title>
+                        <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
+                    M6,11V5l5,3L6,11z"></path>
+                    </svg>YouTube</button> and
+                <button type="button" class="faux-link" data-source="vimeo">
+                    <svg class="icon" role="presentation">
+                        <title>Vimeo</title>
+                        <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
+                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
+                    </svg>Vimeo</button>
+            </p>
+
+            <p>Premium video monitization from
+                <a href="https://vi.ai/publisher-video-monetization/?aid=plyrio" target="_blank" class="no-border">
+                    <img src="https://cdn.plyr.io/static/vi-logo-24x24.svg" alt="ai.vi">
+                    <span class="sr-only">ai.vi</span>
+                </a>
+            </p>
+
+            <div class="call-to-action">
+                <span class="button--with-count">
+                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
+                        <svg class="icon" role="presentation">
+                            <title>GitHub</title>
+                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+               C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
+               c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
+               c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
+               c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
+               c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
+                        </svg>
+                        Download on GitHub
                     </a>
-                </li>
-            </ul>
-        </nav>
-    </header>
+                </span>
+            </div>
+        </header>
 
-    <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>
+        <main>
+            <video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
                 <!-- 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">
@@ -70,34 +99,89 @@
                 <!-- 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>
+                <track kind="captions" label="Français" srclang="fr" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt">
 
                 <!-- 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>
 
             <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>
+                <li class="plyr__cite plyr__cite--video" hidden>
+                    <small>
+                        <svg class="icon">
+                            <title>HTML5</title>
+                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
+                        </svg>
+                        <a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm
+                    </small>
+                </li>
+                <li class="plyr__cite plyr__cite--audio" hidden>
+                    <small>
+                        <svg class="icon" title="HTML5">
+                            <title>HTML5</title>
+                            <path d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"></path>
+                        </svg>
+                        <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" hidden>
+                    <small>
+                        <a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on&nbsp;
+                        <span class="color--youtube">
+                            <svg class="icon" role="presentation">
+                                <title>YouTube</title>
+                                <path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
+                                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
+                                    M6,11V5l5,3L6,11z"></path>
+                            </svg>YouTube
+                        </span>
+                    </small>
+                </li>
+                <li class="plyr__cite plyr__cite--vimeo" hidden>
+                    <small>
+                        <a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on&nbsp;
+                        <span class="color--vimeo">
+                            <svg class="icon" role="presentation">
+                                <title>Vimeo</title>
+                                <path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
+                               C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
+                               c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"></path>
+                            </svg>Vimeo
+                        </span>
+                    </small>
+                </li>
             </ul>
-        </section>
-    </main>
+        </main>
+    </div>
+
+    <aside>
+        <svg class="icon">
+            <title>Twitter</title>
+            <path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
+       C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
+       c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
+       c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"></path>
+        </svg>
+        <p>If you think Plyr's good,
+            <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" data-shr-network="twitter">tweet it</a>
+        </p>
+    </aside>
+
+    <!-- Polyfills -->
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent"></script>
 
     <!-- Plyr core script -->
     <script src="../dist/plyr.js"></script>
 
-    <!-- Docs script -->
-    <script src="dist/demo.js"></script>
+    <!-- Sharing libary (https://shr.one) -->
+    <script src="https://cdn.shr.one/1.0.1/shr.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>
+    <!-- Docs script -->
+    <script src="dist/demo.js"></script>
 </body>
 
 </html>
 \ No newline at end of file
diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt b/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt
new file mode 100644
index 00000000..5da5f307
--- /dev/null
+++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.en.vtt
@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+The ocean floor rises 5 miles to the shores
+
+2
+00:00:12.001 --> 00:00:16.500
+of what people call, the seven mile miracle
+
+3
+00:00:25.500 --> 00:00:28.000
+What would it be like to be born on this island?
+
+4
+00:00:32.500 --> 00:00:34.500
+To grow up on these shores
+
+5
+00:00:37.500 --> 00:00:40.000
+To witness this water, every day
+
+6
+00:00:43.500 --> 00:00:46.000
+You're about to meet someone, who did
+
+7
+00:02:45.500 --> 00:02:49.000
+This is a film about John John Florence
+\ No newline at end of file
diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt b/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt
new file mode 100644
index 00000000..52e3af7d
--- /dev/null
+++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt
@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+Le fond de l'océan monte 5 miles des rives
+
+2
+00:00:12.001 --> 00:00:16.500
+de ce que les gens appellent le miracle de sept mile
+
+3
+00:00:25.500 --> 00:00:28.000
+Que serait-il d'être né sur cette île?
+
+4
+00:00:32.500 --> 00:00:34.500
+Pour grandir sur ces rivages
+
+5
+00:00:37.500 --> 00:00:40.000
+Pour assister à cette eau, tous les jours
+
+6
+00:00:43.500 --> 00:00:46.000
+Vous êtes sur le point de rencontrer quelqu'un, qui ne
+
+7
+00:02:45.500 --> 00:02:49.000
+Ceci est un film sur John John Florence
+\ No newline at end of file
diff --git a/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg b/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg
new file mode 100644
index 00000000..9e7b883c
--- /dev/null
+++ b/demo/media/View_From_A_Blue_Moon_Trailer-HD.jpg
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
new file mode 100644
index 00000000..5808cc7e
--- /dev/null
+++ b/demo/src/js/demo.js
@@ -0,0 +1,246 @@
+// ==========================================================================
+// Plyr.io demo
+// This code is purely for the https://plyr.io website
+// Please see readme.md in the root or github.com/sampotts/plyr
+// ==========================================================================
+
+document.addEventListener('DOMContentLoaded', () => {
+    if (window.shr) {
+        window.shr.setup({
+            count: {
+                classname: 'button__count',
+            },
+        });
+    }
+
+    // Setup tab focus
+    const tabClassName = 'tab-focus';
+
+    // Remove class on blur
+    document.addEventListener('focusout', event => {
+        event.target.classList.remove(tabClassName);
+    });
+
+    // Add classname to tabbed elements
+    document.addEventListener('keydown', event => {
+        if (event.keyCode !== 9) {
+            return;
+        }
+
+        // Delay the adding of classname until the focus has changed
+        // This event fires before the focusin event
+        setTimeout(() => {
+            document.activeElement.classList.add(tabClassName);
+        }, 0);
+    });
+
+    // Setup the player
+    const player = new Plyr('#player', {
+        debug: true,
+        title: 'View From A Blue Moon',
+        iconUrl: '../dist/plyr.svg',
+        keyboard: {
+            global: true,
+        },
+        tooltips: {
+            controls: true,
+        },
+        captions: {
+            active: true,
+        },
+        keys: {
+            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+        },
+        ads: {
+            enabled: true,
+            publisherId: '918848828995742',
+        },
+    });
+
+    // Expose for tinkering in the console
+    window.player = player;
+
+    // Setup type toggle
+    const buttons = document.querySelectorAll('[data-source]');
+    const types = {
+        video: 'video',
+        audio: 'audio',
+        youtube: 'youtube',
+        vimeo: 'vimeo',
+    };
+    let currentType = window.location.hash.replace('#', '');
+    const historySupport = window.history && window.history.pushState;
+
+    // Toggle class on an element
+    function toggleClass(element, className, state) {
+        if (element) {
+            element.classList[state ? 'add' : 'remove'](className);
+        }
+    }
+
+    // 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)) {
+            return;
+        }
+
+        switch (type) {
+            case types.video:
+                player.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',
+                    }],
+                    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,
+                        },
+                        {
+                            kind: 'captions',
+                            label: 'French',
+                            srclang: 'fr',
+                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+                        },
+                    ],
+                };
+
+                break;
+
+            case types.audio:
+                player.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 types.youtube:
+                player.source = {
+                    type: 'video',
+                    title: 'View From A Blue Moon',
+                    sources: [{
+                        src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                        provider: 'youtube',
+                    }],
+                };
+
+                break;
+
+            case types.vimeo:
+                player.source = {
+                    type: 'video',
+                    sources: [{
+                        src: 'https://vimeo.com/76979871',
+                        provider: 'vimeo',
+                    }],
+                };
+
+                break;
+
+            default:
+                break;
+        }
+
+        // Set the current type for next time
+        currentType = type;
+
+        // Remove active classes
+        Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+
+        // Set active on parent
+        toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+
+        // Show cite
+        Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+            cite.setAttribute('hidden', '');
+        });
+        document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+    }
+
+    // Bind to each button
+    Array.from(buttons).forEach(button => {
+        button.addEventListener('click', () => {
+            const type = button.getAttribute('data-source');
+
+            newSource(type);
+
+            if (historySupport) {
+                window.history.pushState({ type }, '', `#${type}`);
+            }
+        });
+    });
+
+    // List for backwards/forwards
+    window.addEventListener('popstate', event => {
+        if (event.state && 'type' in event.state) {
+            newSource(event.state.type);
+        }
+    });
+
+    // On load
+    if (historySupport) {
+        const video = !currentType.length;
+
+        // If there's no current type set, assume video
+        if (video) {
+            currentType = types.video;
+        }
+
+        // Replace current history state
+        if (currentType in types) {
+            window.history.replaceState(
+                {
+                    type: currentType,
+                },
+                '',
+                video ? '' : `#${currentType}`,
+            );
+        }
+
+        // If it's not video, load the source
+        if (currentType !== types.video) {
+            newSource(currentType, true);
+        }
+    }
+});
+
+// Google analytics
+// For demo site (https://plyr.io) only
+/* eslint-disable */
+if (window.location.host === 'plyr.io') {
+    (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', 'https://www.google-analytics.com/analytics.js', 'ga');
+    window.ga('create', 'UA-40881672-11', 'auto');
+    window.ga('send', 'pageview');
+}
+/* eslint-enable */
diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js
deleted file mode 100644
index eac1e99e..00000000
--- a/demo/src/js/lib/classlist.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/*
- * classList.js: Cross-browser full element.classList implementation.
- * 1.1.20150312
- *
- * By Eli Grey, http://eligrey.com
- * License: Dedicated to the public domain.
- *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
- */
-
-/*global self, document, DOMException */
-
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
-
-if ("document" in self) {
-
-// Full polyfill for browsers with no classList support
-if (!("classList" in document.createElement("_"))) {
-
-(function (view) {
-
-"use strict";
-
-if (!('Element' in view)) return;
-
-var
-	  classListProp = "classList"
-	, protoProp = "prototype"
-	, elemCtrProto = view.Element[protoProp]
-	, objCtr = Object
-	, strTrim = String[protoProp].trim || function () {
-		return this.replace(/^\s+|\s+$/g, "");
-	}
-	, arrIndexOf = Array[protoProp].indexOf || function (item) {
-		var
-			  i = 0
-			, len = this.length
-		;
-		for (; i < len; i++) {
-			if (i in this && this[i] === item) {
-				return i;
-			}
-		}
-		return -1;
-	}
-	// Vendors: please allow content code to instantiate DOMExceptions
-	, DOMEx = function (type, message) {
-		this.name = type;
-		this.code = DOMException[type];
-		this.message = message;
-	}
-	, checkTokenAndGetIndex = function (classList, token) {
-		if (token === "") {
-			throw new DOMEx(
-				  "SYNTAX_ERR"
-				, "An invalid or illegal string was specified"
-			);
-		}
-		if (/\s/.test(token)) {
-			throw new DOMEx(
-				  "INVALID_CHARACTER_ERR"
-				, "String contains an invalid character"
-			);
-		}
-		return arrIndexOf.call(classList, token);
-	}
-	, ClassList = function (elem) {
-		var
-			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
-			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
-			, i = 0
-			, len = classes.length
-		;
-		for (; i < len; i++) {
-			this.push(classes[i]);
-		}
-		this._updateClassName = function () {
-			elem.setAttribute("class", this.toString());
-		};
-	}
-	, classListProto = ClassList[protoProp] = []
-	, classListGetter = function () {
-		return new ClassList(this);
-	}
-;
-// Most DOMException implementations don't allow calling DOMException's toString()
-// on non-DOMExceptions. Error's toString() is sufficient here.
-DOMEx[protoProp] = Error[protoProp];
-classListProto.item = function (i) {
-	return this[i] || null;
-};
-classListProto.contains = function (token) {
-	token += "";
-	return checkTokenAndGetIndex(this, token) !== -1;
-};
-classListProto.add = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-	;
-	do {
-		token = tokens[i] + "";
-		if (checkTokenAndGetIndex(this, token) === -1) {
-			this.push(token);
-			updated = true;
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.remove = function () {
-	var
-		  tokens = arguments
-		, i = 0
-		, l = tokens.length
-		, token
-		, updated = false
-		, index
-	;
-	do {
-		token = tokens[i] + "";
-		index = checkTokenAndGetIndex(this, token);
-		while (index !== -1) {
-			this.splice(index, 1);
-			updated = true;
-			index = checkTokenAndGetIndex(this, token);
-		}
-	}
-	while (++i < l);
-
-	if (updated) {
-		this._updateClassName();
-	}
-};
-classListProto.toggle = function (token, force) {
-	token += "";
-
-	var
-		  result = this.contains(token)
-		, method = result ?
-			force !== true && "remove"
-		:
-			force !== false && "add"
-	;
-
-	if (method) {
-		this[method](token);
-	}
-
-	if (force === true || force === false) {
-		return force;
-	} else {
-		return !result;
-	}
-};
-classListProto.toString = function () {
-	return this.join(" ");
-};
-
-if (objCtr.defineProperty) {
-	var classListPropDesc = {
-		  get: classListGetter
-		, enumerable: true
-		, configurable: true
-	};
-	try {
-		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-	} catch (ex) { // IE 8 doesn't support enumerable:true
-		if (ex.number === -0x7FF5EC54) {
-			classListPropDesc.enumerable = false;
-			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
-		}
-	}
-} else if (objCtr[protoProp].__defineGetter__) {
-	elemCtrProto.__defineGetter__(classListProp, classListGetter);
-}
-
-}(self));
-
-} else {
-// There is full or partial native classList support, so just check if we need
-// to normalize the add/remove and toggle APIs.
-
-(function () {
-	"use strict";
-
-	var testElement = document.createElement("_");
-
-	testElement.classList.add("c1", "c2");
-
-	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
-	// classList.remove exist but support only one argument at a time.
-	if (!testElement.classList.contains("c2")) {
-		var createMethod = function(method) {
-			var original = DOMTokenList.prototype[method];
-
-			DOMTokenList.prototype[method] = function(token) {
-				var i, len = arguments.length;
-
-				for (i = 0; i < len; i++) {
-					token = arguments[i];
-					original.call(this, token);
-				}
-			};
-		};
-		createMethod('add');
-		createMethod('remove');
-	}
-
-	testElement.classList.toggle("c3", false);
-
-	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
-	// support the second argument.
-	if (testElement.classList.contains("c3")) {
-		var _toggle = DOMTokenList.prototype.toggle;
-
-		DOMTokenList.prototype.toggle = function(token, force) {
-			if (1 in arguments && !this.contains(token) === !force) {
-				return force;
-			} else {
-				return _toggle.call(this, token);
-			}
-		};
-
-	}
-
-	testElement = null;
-}());
-
-}
-
-}
-\ No newline at end of file
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
deleted file mode 100644
index 7d732dcd..00000000
--- a/demo/src/js/main.js
+++ /dev/null
@@ -1,203 +0,0 @@
-// ==========================================================================
-// Plyr.io demo
-// This code is purely for the plyr.io website
-// Please see readme.md in the root or github.com/selz/plyr
-// ==========================================================================
-
-/*global plyr*/
-
-// General functions
-(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",
-        tooltips: {
-            controls: true
-        },
-        captions: {
-            defaultActive: true
-        }
-    });
-    plyr.loadSprite("dist/demo.svg");
-
-    // Plyr returns an array regardless
-    var player = instances[0];
-
-    // Setup type toggle
-    var buttons = document.querySelectorAll("[data-source]"),
-        types = {
-            video: "video",
-            audio: "audio",
-            youtube: "youtube",
-            vimeo: "vimeo"
-        },
-        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");
-
-            newSource(type);
-
-            if (historySupport) {
-                history.pushState({ type: type }, "", "#" + type);
-            }
-        });
-    }
-
-    // List for backwards/forwards
-    window.addEventListener("popstate", function(event) {
-        if (event.state && "type" in event.state) {
-            newSource(event.state.type);
-        }
-    });
-
-    // On load
-    if (historySupport) {
-        var video = !currentType.length;
-
-        // If there's no current type set, assume video
-        if (video) {
-            currentType = types.video;
-        }
-
-        // Replace current history state
-        if (currentType in types) {
-            history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType);
-        }
-
-        // If it's not video, load the source
-        if (currentType !== types.video) {
-            newSource(currentType, true);
-        }
-    }
-
-    // Toggle class on an element
-    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 : "");
-            }
-        }
-    }
-
-    // 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)) {
-            return;
-        }
-
-        switch (type) {
-            case types.video:
-                player.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: 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.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"
-                        }
-                    ]
-                });
-                break;
-
-            case types.vimeo:
-                player.source({
-                    type: "video",
-                    title: "View From A Blue Moon",
-                    sources: [
-                        {
-                            src: "147865858",
-                            type: "vimeo"
-                        }
-                    ]
-                });
-                break;
-        }
-
-        // Set the current type for next time
-        currentType = type;
-
-        // Remove active classes
-        for (var x = buttons.length - 1; x >= 0; x--) {
-            toggleClass(buttons[x].parentElement, "active", false);
-        }
-
-        // Set active on parent
-        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");
-}
diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less
deleted file mode 100644
index 502196cf..00000000
--- a/demo/src/less/components/base.less
+++ /dev/null
@@ -1,48 +0,0 @@
-// ==========================================================================
-// Base layout
-// ==========================================================================
-
-// BORDER-BOX ALL THE THINGS! 
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {  
-    box-sizing: border-box; 
-}
-
-// Hidden
-[hidden] {
-    display: none;
-}
-
-// Base
-html {
-    height: 100%;
-    background: @body-background fixed;
-}
-body {
-    margin: 0;
-    padding: (@padding-base / 2);
-}
-
-// Header
-header {
-    padding: @padding-base;
-    margin-bottom: @padding-base;
-
-    p {
-        .font-size(18);
-    }
-    @media (min-width: @screen-sm) {
-        padding-top: (@padding-base * 3);
-        padding-bottom: (@padding-base * 3);
-    }
-}
-
-// Sections
-section {
-    max-width: @example-width-video;
-    margin: 0 auto @padding-base;
-
-    @media (min-width: @screen-sm) {
-        margin-bottom: (@padding-base * 2);
-    }
-}
-\ No newline at end of file
diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less
deleted file mode 100644
index c99a0836..00000000
--- a/demo/src/less/components/buttons.less
+++ /dev/null
@@ -1,172 +0,0 @@
-// ==========================================================================
-// Buttons
-// ==========================================================================
-
-nav {
-	ul {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		font-size: 0;
-	}
-	li {
-		display: inline-block;
-		margin-top: (@padding-base / 2);
-		.font-size();
-		white-space: nowrap;
-	}
-	li + li {
-		margin-left: @padding-base;
-	}
-}
-
-// Tabs
-.btn__bar {
-	position: relative;
-	margin: 0 auto @padding-base;
-	max-width: @example-width-video;
-	white-space: nowrap;
-
-	&::before {
-		content: "";
-		position: absolute;
-		top: 50%;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: @gray-lighter;
-	}
-
-	ul {
-		position: relative;
-		z-index: 1;
-		display: inline-block;
-		user-select: none;
-	}
-	li {
-		margin: 0;
-
-		&:first-child .btn {
-			border-radius: 4px 0 0 4px;
-		}
-		&:last-child .btn {
-			border-radius: 0 4px 4px 0;
-		}
-		& + li .btn {
-			margin-left: -1px;
-		}
-
-		&.active .btn {
-			&:extend(.btn--primary);
-			box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
-			position: relative;
-			z-index: 1;
-
-			.icon {
-				color: inherit;
-			}
-		}
-		&.active + li .btn:hover {
-			z-index: 0;
-		}
-	}
-	.btn {
-		position: relative;
-		display: block;
-		border-radius: 0;
-
-		&:hover,
-		&:focus {
-			z-index: 1;
-		}
-	}
-
-	@media (min-width: 560px) {
-		margin-bottom: (@padding-base * 2);
-	}
-}
-
-// Shared
-.btn,
-.btn__count {
-	display: inline-block;
-	vertical-align: middle;
-	border-radius: @border-radius-base;
-	user-select: none;
-	font-weight: @font-weight-bold;
-}
-
-// Buttons
-.btn {
-	padding: (@padding-base / 2) ((@padding-base / 2) + 2);
-	background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
-	border: 1px solid @gray-light;
-	box-shadow: 0 1px 1px rgba(0,0,0, .05);
-	text-shadow: 0 1px 1px #fff;
-	color: @gray;
-	transition: background .1s ease, color .1s ease;
-	.font-size(@font-size-small);
-
-	&:hover,
-	&:focus {
-		border-color: darken(@gray-light, 8%);
-		color: @gray;
-		outline: 0;
-	}
-}
-
-// Sizes
-.btn--large {
-	padding: (@padding-base / 2) @padding-base;
-	.font-size();
-}
-
-// Styles
-.btn--primary {
-	background-image: linear-gradient(@link-color, darken(@link-color, 5%));
-	background-color: @link-color;
-	border-color: darken(@link-color, 10%);
-	box-shadow: 0 1px 1px rgba(0,0,0, .15);
-	text-shadow: 0 1px 1px rgba(0,0,0, .1);
-	color: #fff;
-
-	&:hover,
-	&:focus {
-		color: #fff;
-		border-color: darken(@link-color, 20%);
-	}
-}
-.btn--youtube .icon {
-	color: @color-youtube;
-}
-.btn--vimeo .icon {
-	color: @color-vimeo;
-}
-.btn--twitter .icon {
-	color: @color-twitter;
-}
-
-// Count bubble
-.btn__count {
-	position: relative;
-	margin-left: (@padding-base / 2);
-	padding: (@padding-base / 2) (@padding-base * .75);
-	background: #fff;
-	border: 1px solid @gray-light;
-
-	&::before {
-		content: "";
-		position: absolute;
-		display: block;
-		width: @arrow-size;
-		height: @arrow-size;
-		left: 1px;
-		top: 50%;
-		margin-top: -(@arrow-size / 2);
-
-		background: inherit;
-		border: inherit;
-		border-width: 1px 0 0 1px;
-		transform: rotate(-45deg) translate(-50%, -50%);
-	}
-}
diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less
deleted file mode 100644
index 951be36d..00000000
--- a/demo/src/less/components/type.less
+++ /dev/null
@@ -1,75 +0,0 @@
-// ==========================================================================
-// Typography
-// ==========================================================================
-
-// Base
-html {
-    font-size: 100%;
-}
-body {
-    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    text-align: center;
-    color: @gray;
-    font-weight: @font-weight-base;
-    .font-smoothing();
-}
-
-// Headings
-h1,
-h2 {
-    letter-spacing: -.025em;
-    color: @brand-primary;
-    margin: 0 0 (@padding-base / 2);
-    line-height: 1.2;
-    font-weight: @font-weight-bold;
-}
-h1 {
-    .font-size(@font-size-h1);
-}
-
-// Paragraph and small
-p,
-small {
-    margin: 0 0 @padding-base;
-}
-small {
-    display: block;
-    padding: 0 (@padding-base / 2);
-    .font-size(@font-size-small);
-}
-
-// Lists
-ul,
-li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-// Links
-a {
-    text-decoration: none;
-    color: @link-color;
-    border-bottom: 1px dotted currentColor;
-    transition: background .3s ease, color .3s ease, border .3s ease;
-
-    &:hover,
-    &:focus {
-        color: @gray-dark;
-        border-bottom-color: rgba(0,0,0,0);
-    }
-    &:focus {
-        .tab-focus();
-    }
-    &.logo {
-        border: 0;
-    }
-}
-
-.color--vimeo {
-    color: @color-vimeo;
-}
-.color--youtube {
-    color: @color-youtube;
-}
diff --git a/demo/src/less/demo.less b/demo/src/less/demo.less
deleted file mode 100644
index ac15a3c0..00000000
--- a/demo/src/less/demo.less
+++ /dev/null
@@ -1,26 +0,0 @@
-// ==========================================================================
-// Plyr.io Demo Page
-// ==========================================================================
-
-// CSS Reset
-@import "lib/normalize.less";
-
-// Mixins
-@import "lib/mixins.less";
-
-// Variables
-@import "variables.less";
-
-// Animation
-@import "lib/animation.less";
-
-// Type
-@import "lib/fontface.less";
-@import "components/type.less";
-
-// Components
-@import "components/base.less";
-@import "components/icons.less";
-@import "components/buttons.less";
-@import "components/error.less";
-@import "components/examples.less";
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
deleted file mode 100644
index 82a2a160..00000000
--- a/demo/src/less/lib/fontface.less
+++ /dev/null
@@ -1,18 +0,0 @@
-// ==========================================================================
-// Fonts
-// ==========================================================================
-
-@font-face {
-    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('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;
-}
diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less
deleted file mode 100644
index 923df1ea..00000000
--- a/demo/src/less/lib/mixins.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// ==========================================================================
-// Mixins
-// ==========================================================================
-
-// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
-// ---------------------------------------
-.clearfix() {
-    zoom: 1;
-    &:before, 
-    &:after { content: ""; display: table; }
-    &:after { clear: both; }
-}
-
-// Webkit-style focus
-// ---------------------------------------
-.tab-focus() {
-    // Default
-    outline: thin dotted @gray-dark;
-    // Webkit
-    outline-offset: 1px;
-}
-
-// Use rems for font sizing
-// Leave <body> at 100%/16px
-// ---------------------------------------
-.font-size(@font-size: 16){
-    @rem: round((@font-size / 16), 3);
-    font-size: (@font-size * 1px);
-    font-size: ~"@{rem}rem";
-}
-
-// Font smoothing
-// ---------------------------------------
-.font-smoothing(@mode: on) when (@mode = on) {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-}
-.font-smoothing(@mode: on) when (@mode = off) {
-    -moz-osx-font-smoothing: auto;
-    -webkit-font-smoothing: subpixel-antialiased;
-}
-\ No newline at end of file
diff --git a/demo/src/less/lib/normalize.less b/demo/src/less/lib/normalize.less
deleted file mode 100644
index 562891ab..00000000
--- a/demo/src/less/lib/normalize.less
+++ /dev/null
@@ -1,406 +0,0 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
-
-/* ==========================================================================
-   HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined in IE 8/9.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-    display: block;
-}
-
-/**
- * Correct `inline-block` display not defined in IE 8/9.
- */
-
-audio,
-canvas,
-video {
-    display: inline-block;
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9.
- * Hide the `template` element in IE, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-    display: none;
-}
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-    background: transparent;
-}
-
-/**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-    outline: 0;
-}
-
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
- */
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
- */
-
-b,
-strong {
-    font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari 5 and Chrome.
- */
-
-dfn {
-    font-style: italic;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-    background: #ff0;
-    color: #000;
-}
-
-/**
- * Correct font family set oddly in Safari 5 and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
-}
-
-/**
- * Improve readability of pre-formatted text in all browsers.
- */
-
-pre {
-    white-space: pre-wrap;
-}
-
-/**
- * Set consistent quote types.
- */
-
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-    font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sup {
-    top: -0.5em;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-/* ==========================================================================
-   Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9.
- */
-
-img {
-    border: 0;
-}
-
-/**
- * Correct overflow displayed oddly in IE 9.
- */
-
-svg:not(:root) {
-    overflow: hidden;
-}
-
-/* ==========================================================================
-   Figures
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari 5.
- */
-
-figure {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Forms
-   ========================================================================== */
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
- */
-
-button,
-input,
-select,
-textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
-    margin: 0; /* 3 */
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-button,
-input {
-    line-height: normal;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
- */
-
-button,
-select {
-    text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-    cursor: default;
-}
-
-/**
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
- */
-
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-\ No newline at end of file
diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less
deleted file mode 100644
index 4768cdd6..00000000
--- a/demo/src/less/variables.less
+++ /dev/null
@@ -1,48 +0,0 @@
-// ==========================================================================
-// Variables
-// ==========================================================================
-
-// Colors
-@gray-dark:                 #343f4a;
-@gray:                      #55646b;
-@gray-light:                #cbd0d3;
-@gray-lighter:              #dbe3e8;
-@off-white:                 #f2f5f7;
-
-@brand-primary:             #3498db;
-@brand-secondary:           #02BD9B;
-
-// Brands
-@color-twitter:             #4BAAF4;
-@color-youtube:             #cc181e;
-@color-vimeo:               #19b7ed;
-
-// Base
-@body-background:           @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
-
-// Type
-@font-size-base:            16;
-@font-size-small:           14;
-@font-size-h1:              64;
-@font-weight-base:          500;
-@font-weight-bold:          700;
-
-// Elements
-@link-color:                @brand-primary;
-@padding-base:              20px;
-@arrow-size:                8px;
-
-// Icons
-@icon-size:                 18px;
-
-// Breakpoints
-@screen-sm:                 480px;
-@screen-md:                 768px;
-
-// Radii
-@border-radius-base:        4px;
-@border-radius-large:       6px;
-
-// Examples
-@example-width-audio:       520px;
-@example-width-video:       1200px;
diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
new file mode 100644
index 00000000..2f89b858
--- /dev/null
+++ b/demo/src/sass/bundles/demo.scss
@@ -0,0 +1,46 @@
+// ==========================================================================
+// Plyr.io Demo Page
+// ==========================================================================
+@charset 'UTF-8';
+
+// Settings
+@import '../settings/breakpoints';
+@import '../settings/colors';
+@import '../settings/cosmetic';
+@import '../settings/icons';
+@import '../settings/layout';
+@import '../settings/plyr';
+@import '../settings/spacing';
+@import '../settings/type';
+
+// Libs
+@import '../lib/fontface';
+@import '../lib/animation';
+@import '../lib/mixins';
+@import '../lib/normalize';
+@import '../lib/reset';
+
+// Layout
+@import '../layout/core';
+@import '../layout/grid';
+
+// Type
+@import '../type/base';
+@import '../type/headings';
+
+// Components
+@import '../components/buttons';
+@import '../components/header';
+@import '../components/icons';
+@import '../components/links';
+@import '../components/lists';
+@import '../components/media';
+@import '../components/navigation';
+@import '../components/players';
+
+// Plyr
+@import '../../../../src/sass/plyr';
+
+// Utils
+@import '../utilities/cosmetic';
+@import '../utilities/hidden';
diff --git a/demo/src/sass/bundles/error.scss b/demo/src/sass/bundles/error.scss
new file mode 100644
index 00000000..29c98947
--- /dev/null
+++ b/demo/src/sass/bundles/error.scss
@@ -0,0 +1,29 @@
+// ==========================================================================
+// Plyr.io Error Page
+// ==========================================================================
+@charset 'UTF-8';
+
+// Libs
+@import '../lib/fontface';
+@import '../lib/mixins';
+@import '../lib/normalize';
+@import '../lib/reset';
+
+// Settings
+@import '../settings/colors';
+@import '../settings/cosmetic';
+@import '../settings/icons';
+@import '../settings/layout';
+@import '../settings/spacing';
+@import '../settings/type';
+
+// Layout
+@import '../layout/error';
+
+// Type
+@import '../type/base';
+@import '../type/headings';
+
+// Components
+@import '../components/buttons';
+@import '../components/links';
diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
new file mode 100644
index 00000000..1b2d652e
--- /dev/null
+++ b/demo/src/sass/components/buttons.scss
@@ -0,0 +1,83 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+// Shared
+.button,
+.button__count {
+    align-items: center;
+    background: $color-button-background;
+    border: 0;
+    border-radius: $border-radius-base;
+    box-shadow: 0 1px 1px rgba(#000, 0.1);
+    color: $color-button-text;
+    display: inline-flex;
+    padding: ($spacing-base * 0.75);
+    position: relative;
+    text-shadow: none;
+    user-select: none;
+    vertical-align: middle;
+}
+
+// Buttons
+.button {
+    font-weight: $font-weight-bold;
+    padding-left: $spacing-base;
+    padding-right: $spacing-base;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus {
+        color: $gray-dark;
+
+        // Remove the underline/border
+        &::after {
+            display: none;
+        }
+    }
+
+    &:hover {
+        box-shadow: 0 2px 2px rgba(#000, 0.1);
+        transform: translateY(-1px);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &.tab-focus {
+        @include tab-focus();
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+}
+
+// Button group
+.button--with-count {
+    display: inline-flex;
+
+    .button .icon {
+        flex-shrink: 0;
+    }
+}
+
+// Count bubble
+.button__count {
+    animation: fadein 0.2s ease;
+    margin-left: ($spacing-base / 2);
+
+    &::before {
+        border: $arrow-size solid transparent;
+        border-left-width: 0;
+        border-right-color: $color-button-background;
+        content: '';
+        height: 0;
+        position: absolute;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+    }
+}
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
new file mode 100644
index 00000000..eab2214e
--- /dev/null
+++ b/demo/src/sass/components/header.scss
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Header
+// ==========================================================================
+
+header {
+    padding-bottom: $spacing-base;
+    text-align: center;
+
+    .call-to-action {
+        margin-top: ($spacing-base * 1.5);
+    }
+
+    @media only screen and (min-width: $screen-md) {
+        margin-right: ($spacing-base * 3);
+        max-width: 360px;
+        padding-bottom: ($spacing-base * 2);
+        text-align: left;
+    }
+}
diff --git a/demo/src/less/components/icons.less b/demo/src/sass/components/icons.scss
index 9530b601..b2b353a6 100644
--- a/demo/src/less/components/icons.less
+++ b/demo/src/sass/components/icons.scss
@@ -4,23 +4,20 @@
 
 // Base size icon styles
 .icon {
-	fill: currentColor;
-	width: @icon-size;
-	height: @icon-size;
-	vertical-align: -3px;
+    fill: currentColor;
+    height: $icon-size;
+    vertical-align: -3px;
+    width: $icon-size;
 }
 
 // Within elements
 a svg,
 button svg,
 label svg {
-	pointer-events: none;
+    pointer-events: none;
 }
+
 a .icon,
 .btn .icon {
-	margin-right: (@padding-base / 2);
-}
-.btn:not(.btn-large) .icon {
-	width: (@icon-size - 2);
-	height: (@icon-size - 2);
+    margin-right: floor($spacing-base / 3);
 }
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
new file mode 100644
index 00000000..b2930862
--- /dev/null
+++ b/demo/src/sass/components/links.scss
@@ -0,0 +1,49 @@
+// ==========================================================================
+// Links
+// ==========================================================================
+
+// Make a <button> look like an <a>
+button.faux-link {
+    @extend a; // stylelint-disable-line
+    @include cancel-button-styles();
+}
+
+// Links
+a {
+    border-bottom: 1px dotted currentColor;
+    color: $color-link;
+    font-weight: $font-weight-bold;
+    position: relative;
+    text-decoration: none;
+    transition: all 0.2s ease;
+
+    &::after {
+        background: currentColor;
+        content: '';
+        height: 1px;
+        left: 50%;
+        position: absolute;
+        top: 100%;
+        transform: translateX(-50%);
+        transition: width 0.2s ease;
+        width: 0;
+    }
+
+    &:hover,
+    &:focus {
+        border-bottom-color: transparent;
+        outline: 0;
+
+        &::after {
+            width: 100%;
+        }
+    }
+
+    &.tab-focus {
+        @include tab-focus();
+    }
+
+    &.no-border::after {
+        display: none;
+    }
+}
diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss
new file mode 100644
index 00000000..bae3d11d
--- /dev/null
+++ b/demo/src/sass/components/lists.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// Lists
+// ==========================================================================
+
+// Lists
+ul,
+li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
diff --git a/demo/src/sass/components/media.scss b/demo/src/sass/components/media.scss
new file mode 100644
index 00000000..c6744bcc
--- /dev/null
+++ b/demo/src/sass/components/media.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Basic media
+// ==========================================================================
+
+img,
+video,
+audio {
+    max-width: 100%;
+    vertical-align: middle;
+}
diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss
new file mode 100644
index 00000000..fe14c000
--- /dev/null
+++ b/demo/src/sass/components/navigation.scss
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Navigation
+// ==========================================================================
+
+nav {
+    display: flex;
+    justify-content: center;
+    margin-bottom: $spacing-base;
+}
diff --git a/demo/src/less/components/examples.less b/demo/src/sass/components/players.scss
index a9e72d21..90e2bc94 100644
--- a/demo/src/less/components/examples.less
+++ b/demo/src/sass/components/players.scss
@@ -10,31 +10,34 @@ video {
 
 // Example players
 .plyr {
-    margin: 0 auto;
-    border-radius: @border-radius-large;
-}
-.plyr--audio {
-    max-width: @example-width-audio;
+    border-radius: $border-radius-base;
+    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    margin: $spacing-base auto;
+
+    &.plyr--audio {
+        max-width: 480px;
+    }
 }
+
 .plyr__video-wrapper::after {
-    content: "";
-    pointer-events: none;
-    position: absolute;
-    top: 0;
+    border: 1px solid rgba(#000, 0.15);
+    border-radius: inherit;
     bottom: 0;
+    content: '';
     left: 0;
+    pointer-events: none;
+    position: absolute;
     right: 0;
-    border: 1px solid fade(#000, 15%);
-    border-radius: inherit;
+    top: 0;
 }
 
 // Style full supported player
 .plyr__cite {
     display: none;
-    margin-top: @padding-base;
+    margin-top: $spacing-base;
 
     .icon {
-        margin-right: (@padding-base / 4);
+        margin-right: ceil($spacing-base / 6);
     }
 }
 
diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss
new file mode 100644
index 00000000..0501c1df
--- /dev/null
+++ b/demo/src/sass/layout/core.scss
@@ -0,0 +1,64 @@
+// ==========================================================================
+// Core
+// ==========================================================================
+
+html,
+body {
+    display: flex;
+    width: 100%;
+}
+
+html {
+    background: $page-background;
+    background-attachment: fixed;
+    height: 100%;
+}
+
+body {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+
+.grid {
+    flex: 1;
+    overflow: auto;
+}
+
+main {
+    margin: auto;
+    padding-bottom: 1px; // Collapsing margins
+    text-align: center;
+}
+
+aside {
+    align-items: center;
+    background: #fff;
+    color: $gray;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    padding: ($spacing-base * 0.75);
+    position: relative;
+    text-align: center;
+    text-shadow: none;
+    width: 100%;
+
+    .icon {
+        fill: $color-twitter;
+        margin-right: ($spacing-base / 2);
+    }
+
+    p {
+        margin: 0;
+    }
+
+    a {
+        color: $color-twitter;
+
+        &.tab-focus {
+            @include tab-focus($color-twitter);
+        }
+    }
+}
diff --git a/demo/src/less/components/error.less b/demo/src/sass/layout/error.scss
index b1427173..385ecbf3 100644
--- a/demo/src/less/components/error.less
+++ b/demo/src/sass/layout/error.scss
@@ -7,13 +7,24 @@ html.error,
 .error body {
     height: 100%;
 }
+
+html.error {
+    background: $page-background;
+    background-attachment: fixed;
+}
+
 .error body {
+    align-items: center;
+    display: flex;
     width: 100%;
-    display: table;
-    table-layout: fixed;
 }
+
 .error main {
-    display: table-cell;
+    padding: $spacing-base;
+    text-align: center;
     width: 100%;
-    vertical-align: middle;
-}
-\ No newline at end of file
+
+    p {
+        @include font-size($font-size-large);
+    }
+}
diff --git a/demo/src/sass/layout/grid.scss b/demo/src/sass/layout/grid.scss
new file mode 100644
index 00000000..40dd829e
--- /dev/null
+++ b/demo/src/sass/layout/grid.scss
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Super basic grid
+// ==========================================================================
+
+.grid {
+    margin: 0 auto;
+    padding: $spacing-base;
+
+    @media only screen and (min-width: $screen-md) {
+        align-items: center;
+        display: flex;
+        max-width: $container-max-width;
+        width: 100%;
+
+        > * {
+            flex: 1;
+        }
+    }
+}
diff --git a/demo/src/less/lib/animation.less b/demo/src/sass/lib/animation.scss
index 386c6613..3c14b0a7 100644
--- a/demo/src/less/lib/animation.less
+++ b/demo/src/sass/lib/animation.scss
@@ -3,7 +3,11 @@
 // ==========================================================================
 
 // Fade
-@keyframes fade-in {
-	0% 		{ opacity: 0 }
-	100% 	{ opacity: 1 }
-}
-\ No newline at end of file
+@keyframes fadein {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss
new file mode 100644
index 00000000..e7e4edf8
--- /dev/null
+++ b/demo/src/sass/lib/fontface.scss
@@ -0,0 +1,45 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
+@font-face {
+    font-display: swap;
+    font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-light;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-regular;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-medium;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
+        url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-bold;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Gordita';
+    font-style: normal;
+    font-weight: $font-weight-black;
+    src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
+}
diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss
new file mode 100644
index 00000000..cdfcb87d
--- /dev/null
+++ b/demo/src/sass/lib/mixins.scss
@@ -0,0 +1,54 @@
+// ==========================================================================
+// Mixins
+// ==========================================================================
+
+// Convert a <button> into an <a>
+// ---------------------------------------
+@mixin cancel-button-styles() {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    cursor: pointer;
+    font: inherit;
+    line-height: $line-height-base;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-align: inherit;
+    text-shadow: inherit;
+    -moz-user-select: text; // stylelint-disable-line
+    vertical-align: baseline;
+    width: auto;
+}
+
+// Nicer focus styles
+// ---------------------------------------
+@mixin tab-focus($color: $tab-focus-default-color) {
+    box-shadow: 0 0 0 3px rgba($color, 0.35);
+    outline: 0;
+}
+
+// Use rems for font sizing
+// Leave <body> at 100%/16px
+// ---------------------------------------
+@function calculate-rem($size) {
+    $rem: $size / 16;
+    @return #{$rem}rem;
+}
+
+@mixin font-size($size: 16) {
+    font-size: $size * 1px; // Fallback in px
+    font-size: calculate-rem($size);
+}
+
+// Font smoothing
+// ---------------------------------------
+@mixin font-smoothing($enabled: true) {
+    @if $enabled {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+    } @else {
+        -moz-osx-font-smoothing: auto;
+        -webkit-font-smoothing: subpixel-antialiased;
+    }
+}
diff --git a/demo/src/sass/lib/normalize.scss b/demo/src/sass/lib/normalize.scss
new file mode 100644
index 00000000..4f8542c1
--- /dev/null
+++ b/demo/src/sass/lib/normalize.scss
@@ -0,0 +1,450 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers (opinionated).
+   */
+
+body {
+    margin: 0;
+}
+
+/**
+   * Add the correct display in IE 9-.
+   */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+    display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 9-.
+   * 1. Add the correct display in IE.
+   */
+
+figcaption,
+figure,
+main {
+    /* 1 */
+    display: block;
+}
+
+/**
+   * Add the correct margin in IE 8.
+   */
+
+figure {
+    margin: 1em 40px;
+}
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * 1. Remove the gray background on active links in IE 10.
+   * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+   */
+
+a {
+    background-color: transparent; /* 1 */
+    -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+   */
+
+b,
+strong {
+    font-weight: inherit;
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font style in Android 4.3-.
+   */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+   * Add the correct background and color in IE 9-.
+   */
+
+mark {
+    background-color: #ff0;
+    color: #000;
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+    font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 9-.
+   */
+
+audio,
+video {
+    display: inline-block;
+}
+
+/**
+   * Add the correct display in iOS 4-7.
+   */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+   * Remove the border on images inside links in IE 10-.
+   */
+
+img {
+    border-style: none;
+}
+
+/**
+   * Hide the overflow in IE.
+   */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers (opinionated).
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: sans-serif; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+    /* 1 */
+    overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+    /* 1 */
+    text-transform: none;
+}
+
+/**
+   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+   *    controls in Android 4.
+   * 2. Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+html [type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button; /* 2 */
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+    outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+    padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+}
+
+/**
+   * 1. Add the correct display in IE 9-.
+   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+}
+
+/**
+   * Remove the default vertical scrollbar in IE.
+   */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10-.
+   * 2. Remove the padding in IE 10-.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in IE 9-.
+   * 1. Add the correct display in Edge, IE, and Firefox.
+   */
+
+details,
+menu {
+    display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+    display: list-item;
+}
+
+/* Scripting
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 9-.
+   */
+
+canvas {
+    display: inline-block;
+}
+
+/**
+   * Add the correct display in IE.
+   */
+
+template {
+    display: none;
+}
+
+/* Hidden
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10-.
+   */
+
+[hidden] {
+    display: none;
+}
diff --git a/demo/src/sass/lib/reset.scss b/demo/src/sass/lib/reset.scss
new file mode 100644
index 00000000..50798b10
--- /dev/null
+++ b/demo/src/sass/lib/reset.scss
@@ -0,0 +1,11 @@
+// ==========================================================================
+// Resets
+// ==========================================================================
+
+// BORDER-BOX ALL THE THINGS!
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+}
diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss
new file mode 100644
index 00000000..65940ad6
--- /dev/null
+++ b/demo/src/sass/settings/breakpoints.scss
@@ -0,0 +1,6 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+$screen-sm: 480px;
+$screen-md: 768px;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
new file mode 100644
index 00000000..65d3f7b7
--- /dev/null
+++ b/demo/src/sass/settings/colors.scss
@@ -0,0 +1,32 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+// Greyscale
+$gray-dark: #343f4a;
+$gray: #55646b;
+$gray-light: #cbd0d3;
+$gray-lighter: #dbe3e8;
+$off-white: #f2f5f7;
+
+// Text
+$color-text: #fff;
+
+// Plyr
+$color-brand-primary: #1aafff;
+
+// Brands
+$color-twitter: #4baaf4;
+$color-youtube: #cc181e;
+$color-vimeo: #19b7ed;
+
+// Elements
+$color-link: #fff;
+$color-background: $color-brand-primary;
+
+// Buttons
+$color-button-background: #fff;
+$color-button-text: $gray;
+
+// Focus
+$tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
new file mode 100644
index 00000000..d750efe2
--- /dev/null
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -0,0 +1,12 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+// Button count arrow size
+$arrow-size: 5px;
+
+// Radii
+$border-radius-base: 4px;
+
+// Background
+$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
diff --git a/demo/src/sass/settings/icons.scss b/demo/src/sass/settings/icons.scss
new file mode 100644
index 00000000..ad16a645
--- /dev/null
+++ b/demo/src/sass/settings/icons.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+$icon-size: 16px;
diff --git a/demo/src/sass/settings/layout.scss b/demo/src/sass/settings/layout.scss
new file mode 100644
index 00000000..8d1fbd28
--- /dev/null
+++ b/demo/src/sass/settings/layout.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Layout
+// ==========================================================================
+
+$container-max-width: 1280px;
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
new file mode 100644
index 00000000..3d30ce71
--- /dev/null
+++ b/demo/src/sass/settings/plyr.scss
@@ -0,0 +1,18 @@
+// ==========================================================================
+// Plyr Settings
+// ==========================================================================
+
+// Font
+$plyr-font-family: inherit;
+
+// Sizes
+$plyr-font-size-base: 13px;
+$plyr-font-size-small: 12px;
+$plyr-font-size-time: 11px;
+$plyr-font-size-badges: 9px;
+
+// Captions
+$plyr-font-size-captions-base: $plyr-font-size-base;
+$plyr-font-size-captions-small: $plyr-font-size-small;
+$plyr-font-size-captions-medium: 18px;
+$plyr-font-size-captions-large: 21px;
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
new file mode 100644
index 00000000..a19b0a95
--- /dev/null
+++ b/demo/src/sass/settings/spacing.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+$spacing-base: 20px;
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
new file mode 100644
index 00000000..e8f0b2c8
--- /dev/null
+++ b/demo/src/sass/settings/type.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+
+$font-size-base: 15;
+$font-size-small: 13;
+$font-size-large: 18;
+$font-size-h1: 64;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 900;
+
+$line-height-base: 1.75;
+
+$letter-spacing-headings: -0.025em;
diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss
new file mode 100644
index 00000000..452298bd
--- /dev/null
+++ b/demo/src/sass/type/base.scss
@@ -0,0 +1,35 @@
+// ==========================================================================
+// Base
+// ==========================================================================
+
+// Set to 100% for rem sizing
+html {
+    font-size: 100%;
+}
+
+body {
+    @include font-smoothing();
+    @include font-size($font-size-base);
+    color: $color-text;
+    font-family: $font-sans-serif;
+    font-weight: $font-weight-medium;
+    line-height: $line-height-base;
+    text-shadow: 0 1px 1px rgba(#000, 0.15);
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+p,
+small {
+    margin: 0 0 $spacing-base;
+}
+
+small {
+    @include font-size($font-size-small);
+    display: block;
+}
diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss
new file mode 100644
index 00000000..c2abc97e
--- /dev/null
+++ b/demo/src/sass/type/headings.scss
@@ -0,0 +1,10 @@
+// ==========================================================================
+// Headings
+// ==========================================================================
+
+h1 {
+    @include font-size($font-size-h1);
+    font-weight: $font-weight-bold;
+    letter-spacing: $letter-spacing-headings;
+    margin: 0 0 ($spacing-base / 2);
+}
diff --git a/demo/src/sass/utilities/cosmetic.scss b/demo/src/sass/utilities/cosmetic.scss
new file mode 100644
index 00000000..91374d9d
--- /dev/null
+++ b/demo/src/sass/utilities/cosmetic.scss
@@ -0,0 +1,7 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+.no-border {
+    border: 0;
+}
diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss
new file mode 100644
index 00000000..665bfd76
--- /dev/null
+++ b/demo/src/sass/utilities/hidden.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Hidden
+// ==========================================================================
+
+[hidden] {
+    display: none;
+}
+
+// Hide only visually, but have it available for screen readers: h5bp.com/v
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    opacity: 0.001;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
diff --git a/demo/src/sprite/icon-github.svg b/demo/src/sprite/icon-github.svg
deleted file mode 100755
index 685dd746..00000000
--- a/demo/src/sprite/icon-github.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
-	C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
-	c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
-	c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
-	c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
-	c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"/>
-</svg>
diff --git a/demo/src/sprite/icon-twitter.svg b/demo/src/sprite/icon-twitter.svg
deleted file mode 100755
index b3f644b1..00000000
--- a/demo/src/sprite/icon-twitter.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-	 <title>Twitter</title>
-<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
-	C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
-	c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
-	c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-vimeo.svg b/demo/src/sprite/icon-vimeo.svg
deleted file mode 100755
index 83dd3dc0..00000000
--- a/demo/src/sprite/icon-vimeo.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
-	C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
-	c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-youtube.svg b/demo/src/sprite/icon-youtube.svg
deleted file mode 100755
index 8b5d6897..00000000
--- a/demo/src/sprite/icon-youtube.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
-	s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
-	 M6,11V5l5,3L6,11z"/>
-</svg>
author	Sam Potts <sam@potts.es>	2018-03-17 23:30:16 +1100
committer	Sam Potts <sam@potts.es>	2018-03-17 23:30:16 +1100
commit	600f0eb8a3cf49f5268e5c15487797d496bc19b6 (patch)
tree	ae7d43ee753035458e5927b66eb588ff26d58afd /demo
parent	e0562752eaa4553466b78fb6828d05147a0891d1 (diff)
parent	5db73b13276bf50357cc98896421318de66ab042 (diff)
download	plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.lz plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.tar.xz plyr-600f0eb8a3cf49f5268e5c15487797d496bc19b6.zip