Fix for YouTube .getVideoData() issue (fixes #709)

Enable speed controls using Vimeo API

.github/issue_template.md

@@ -0,0 +1,28 @@
+<!--- 
+Please use this issue template as it makes replicating and fixing the issue easier! 
+--->
+
+- [ ] Issue does not already exist
+- [ ] Issue observed on https://plyr.io
+
+### Expected behaviour 
+
+### Actual behaviour
+
+### Environment
+
+- Browser:
+- Version:  
+- Operating System:
+- Version: 
+
+Players affected:
+- [ ] HTML5 Video
+- [ ] HTML5 Audio
+- [ ] YouTube
+- [ ] Vimeo
+
+### Steps to reproduce 
+- 
+
+### Relevant links

.github/pull_request_template.md

@@ -0,0 +1,8 @@
+### Link to related issue (if applicable)
+
+### Sumary of proposed changes
+
+### Task list
+
+- [ ] Tested on [supported browsers](https://github.com/sampotts/plyr#browser-support)
+- [ ] Gulp build completed

.jsbeautifyrc

@@ -0,0 +1,11 @@
+{
+    "html": {
+        "allowed_file_extensions": []
+    },
+    "css": {
+        "allowed_file_extensions": []
+    },
+    "js": {
+        "allowed_file_extensions": []
+    }
+}

.jshintrc

@@ -8,11 +8,11 @@
     "node"          : false,
     "rhino"         : false,
     "couch"         : false,
-    "wsh"           : true,   // Windows Scripting Host.
+    "wsh"           : false,   // Windows Scripting Host.
     "jquery"        : false,
 
     // Development.
-    "debug"         : false,  // Allow debugger statements e.g. browser breakpoints.
+    "debug"         : true,  // Allow debugger statements e.g. browser breakpoints.
     "devel"         : true,   // Allow developments statements e.g. `console.log();`.
 
     // ECMAScript 5.
@@ -25,7 +25,7 @@
     "bitwise"       : false,  // Prohibit bitwise operators (&, |, ^, etc.).
     "boss"          : false,  // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
     "curly"         : true,   // Require {} for every new block or scope.
-    "eqeqeq"        : false,  // Require triple equals i.e. `===`.
+    "eqeqeq"        : true,  // Require triple equals i.e. `===`.
     "eqnull"        : false,  // Tolerate use of `== null`.
     "evil"          : false,  // Tolerate use of `eval`.
     "expr"          : false,  // Tolerate `ExpressionStatement` as Programs.

.vscode/settings.json

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

bower.json

@@ -9,13 +9,13 @@
         "HTml5 Video"
     ],
     "authors": [
-        "Sam Potts <me@sampotts.me>"
+        "Sam Potts <sam@potts.es>"
     ],
     "dependencies": {},
     "main": [
         "dist/plyr.css",
         "dist/plyr.js",
-        "dist/sprite.svg",
+        "dist/plyr.svg",
         "src/less/plyr.less",
         "src/scss/plyr.scss",
         "src/js/plyr.js"
@@ -27,7 +27,7 @@
     ],
     "repository": {
         "type": "git",
-        "url": "git://github.com/selz/plyr.git"
+        "url": "git://github.com/sampotts/plyr.git"
     },
     "license": "MIT"
 }

changelog.md

@@ -1,9 +1,154 @@
 # Changelog
 
-# v1.8.2
+## v2.0.18
+- Fix for YouTube .getVideoData() issue (fixes #709)
+
+## v2.0.17
+- Vimeo controls fix (fixes #697)
+- SVG4everybody compatibility fix
+- Allow Plyr.setup event listeners to be set up as separate event listeners (https://github.com/sampotts/plyr/pull/703)
+- Added title to the layer html template (for custom controls) (https://github.com/sampotts/plyr/pull/649)
+- Target is null bug fix (https://github.com/sampotts/plyr/pull/617)
+- fix #684 memory leaks issues after destroy (https://github.com/sampotts/plyr/pull/700)
+
+## v2.0.16
+- Fullscreen bug fix (fixes #664)
+
+## v2.0.15
+- Demo fix
+
+## v2.0.14
+- CDN URL updates. Sorry, still working on V3 as hard as I can...
+
+## v2.0.13
+- Repo moved and Vimeo demo fix
+
+## v2.0.12
+- Ability to set custom `blankUrl` for source changes (https://github.com/sampotts/plyr/pull/504)
+- Ability to set caption button listener (https://github.com/sampotts/plyr/pull/468)
+
+## v2.0.11
+- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
+- Fix for YouTube controls on iPad (fixes #391)
+
+## v2.0.10
+- Added seek event fixes for Vimeo and YouTube (fixes #409)
+- Added support for embed URLs rather than ID only (fixes #345)
+
+## v2.0.9
+- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
+
+## v2.0.8
+- Added `isPaused()` API method (thanks to @darrena092)
+- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
+- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
+- Fix for Firefox VTT compatibility (thanks to @magourex)
+- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
+- Added Issue and PR templates with the aim of reducing duplicate or duff issues
+
+## v2.0.7
+- Fixed `getCurrentTime()` method (fixes #351)
+- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
+
+## v2.0.6
+- Fixed merge issue with `Updated define to work with AMD imports #326` PR
+- Code formatting
+
+## v2.0.5
+- Fix for Vimeo in IE9 & IE10
+- Fix for HTML5 elements not firing `ready` event
+
+## v2.0.4
+- Fix for Firefox full screen (fixes #343)
+
+## v2.0.3
+- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored
+
+## v2.0.2
+- Added 'global' keyboard shortcut option
+
+## v2.0.1
+- Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)
+
+# v2.0.0
+This version contains several potential ***breaking changes***:
+
+- `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the *instance* rather than the *element*. This is because the reference to the instance is no longer added to the original element (see below).
+- The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.
+- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This *may* break any custom styling based on DOM position.
+- Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-)
+
+And some other changes and bug fixes:
+
+- New `get()` method on the global plyr object to get all instances inside a container
+- New API methods:
+	- `getOriginal()` to get the original, *unmodified* element plyr was setup on (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getContainer()` to get the players outer wrapper element
+	- `getMedia()` to get the players media element (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getEmbed()` to access the YouTube or Vimeo API directly
+	- `getType()` to get the type of the player
+	- `isReady()` to determine if an instance has completed setup and necessary APIs are loaded (for YouTube / Vimeo)
+	- `on()` to provide an easy way to listen to events
+	- `stop()` to, you guessed it, stop the player
+- `destroy()` now works correctly for YouTube and Vimeo (fixes #272)
+- New `destroyed` event when `destroy()` has completed (original element is passed as event.target)
+- Default volume is now 10 (max) rather than 5
+- Sprite is only loaded once (fixes #259)
+- Fixes for Vimeo post message bugs on source change or destroy (fixes #318)
+- Save caption state in storage (fixes #311)
+- Added keyboard shortcuts to the current focused player (with `keyboardShortcuts` boolean option to disable) (fixes #309)
+- Fix for captions bug (fixes #332)
+- Change to AMD (fixes #298)
+
+## v1.8.12
+- Vimeo keyboard focus fix (Fixes #317)
+- Fix for Vimeo on basic support devices
+
+## v1.8.11
+- Fix for keyboard navigation on Vimeo (Fixes #317)
+- Fix for bug introduced in v1.8.9 related to additional controls
+- Vimeo API upgrade
+- Fix for YouTube bug introduced in v1.8.9
+- Added support for passing array to .setup() (Fixes #319)
+
+## v1.8.10
+- Fix for seek issues introduced in v1.8.9
+
+## v1.8.9
+- Fix for fullscreen not being defined (Fixes #295)
+- Fix for multiline captions (Fixes #314)
+- Clean up of type checks and fix for `restart()` (Fixes #315)
+- Fix for `MEDIA_ERR_SRC_NOT_SUPPORTED` when calling `.source()` API method
+
+## v1.8.8
+- Added getCurrentTime API method (fixes #292)
+- Fix for !hideControls on touch devices (fixes #303)
+
+## v1.8.7
+- Line height fix
+
+## v1.8.6
+- Reverted font size change
+
+## v1.8.5
+- Fixed overflow issues (fixes #286)
+
+## v1.8.4
+- Fix for large play button on small videos
+
+## v1.8.3
+- Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback
+- Fixed IE11 icon loading (fixes #269)
+- Updated screenshot (fixes #281)
+- Added WordPress plugin (fixes #239)
+- Added Neos plugin
+- Added HLS, Shaka and dash.js examples (see #235 for more)
+- Improvements for controls hiding and showing on touch devices
+
+## v1.8.2
 - Fixed event bubbling
 
-# v1.8.1
+## v1.8.1
 - Fixed inaccurate log message
 
 # v1.8.0

controls.md

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

demo/dist/demo.js

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

demo/error.html

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

demo/index.html

@@ -1,88 +1,103 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Plyr - A simple HTML5 media player</title>
-        <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
-        <meta name="author" content="Sam Potts">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- Styles -->
-        <link rel="stylesheet" href="../dist/plyr.css">
+<head>
+    <meta charset="utf-8" />
+    <title>Plyr - A simple HTML5 media player</title>
+    <meta name="description" content="A simple HTML5 media player with custom controls and WebVTT captions.">
+    <meta name="author" content="Sam Potts">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/demo.css">
-    </head>
-    <body>
-        <header>
-            <h1>Plyr</h1>
-            <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a> from <a href="https://twitter.com/selz" target="_blank">@selz</a></p>
-            <nav>
-                <ul>
-                    <li>
-                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
-                            <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
-                        </a>
-                    </li>
-                    <li>
-                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
-                            <svg class="icon"><use xlink:href="#icon-twitter"/></svg>Tweet
-                        </a>
-                    </li>
-                </ul>
-            </nav>
-        </header>
+    <!-- Styles -->
+    <link rel="stylesheet" href="../dist/plyr.css">
 
-        <main role="main" id="main">
-            <nav class="btn__bar">
-                <ul>
-                    <li class="active">
-                        <button type="button" class="btn" data-source="video">Video</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn" data-source="audio">Audio</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
-                    </li>
-                    <li>
-                        <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
-                    </li>
-                </ul>
-            </nav>
-            <section>
-                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
-                    <!-- Video files -->
-                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
-                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
+    <!-- Docs styles -->
+    <link rel="stylesheet" href="dist/demo.css">
 
-                    <!-- Text track file -->
-                    <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
+    <!-- Preload -->
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2">
+    <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2">
+</head>
 
-                    <!-- Fallback for browsers that don't support the <video> element -->
-                    <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
-                </video>
+<body>
+    <header>
+        <h1>Plyr</h1>
+        <p>A simple, accessible HTML5 media player by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
+        <nav>
+            <ul>
+                <li>
+                    <a href="https://github.com/sampotts/plyr" target="_blank" class="btn btn--large btn--primary" data-shr-network="github">
+                        <svg class="icon">
+                            <use xlink:href="#icon-github" />
+                        </svg>Download on GitHub
+                    </a>
+                </li>
+                <li>
+                    <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts"
+                        target="_blank" class="btn btn--large btn--twitter" data-shr-network="twitter">
+                        <svg class="icon">
+                            <use xlink:href="#icon-twitter" />
+                        </svg>Tweet
+                    </a>
+                </li>
+            </ul>
+        </nav>
+    </header>
 
-                <ul>
-                    <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
-                    <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
-                    <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small>
-                    <li 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>
-                </ul>
-            </section>
-        </main>
+    <main role="main" id="main">
+        <nav class="btn__bar">
+            <ul>
+                <li class="active">
+                    <button type="button" class="btn" data-source="video">Video</button>
+                </li>
+                <li>
+                    <button type="button" class="btn" data-source="audio">Audio</button>
+                </li>
+                <li>
+                    <button type="button" class="btn btn--youtube" data-source="youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</button>
+                </li>
+                <li>
+                    <button type="button" class="btn btn--vimeo" data-source="vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</button>
+                </li>
+            </ul>
+        </nav>
+        <section>
+            <video poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
+                <!-- Video files -->
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
+                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
 
-        <!-- Plyr core script -->
-        <script src="../dist/plyr.js"></script>
+                <!-- Text track file -->
+                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
+                    default>
 
-        <!-- Docs script -->
-        <script src="dist/demo.js"></script>
+                <!-- Fallback for browsers that don't support the <video> element -->
+                <a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
+            </video>
 
-        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js"></script>
+            <ul>
+                <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
+                <li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a> &copy; Kishi Bashi</small></li>
+                <li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
+                <li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
+            </ul>
+        </section>
+    </main>
+
+    <!-- Plyr core script -->
+    <script src="../dist/plyr.js"></script>
+
+    <!-- Docs script -->
+    <script src="dist/demo.js"></script>
+
+    <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+    <script src="https://cdn.rangetouch.com/1.0.1/rangetouch.js" async></script>
+
+    <!-- Sharing libary (https://shr.one) -->
+    <script src="https://cdn.shr.one/1.0.1/shr.js"></script>
+    <script>
+        if (window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }
+    </script>
+</body>
 
-        <!-- Sharing libary (https://shr.one) -->
-        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
-        <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
-    </body>
 </html>

demo/src/js/main.js

@@ -7,179 +7,197 @@
 /*global plyr*/
 
 // General functions
-;(function() {
-	document.body.addEventListener('ready', function(event) { console.log(event); });
+(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');
+    // 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].plyr;
+    // 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);
+    // 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');
+    // 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);
+            newSource(type);
 
-			if (historySupport) {
-				history.pushState({ 'type': type }, '', '#' + 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);
-		}
-	});
+    // 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;
+    // On load
+    if (historySupport) {
+        var video = !currentType.length;
 
-		// If there's no current type set, assume video
-		if(video) {
-			currentType = types.video;
-		}
+        // 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));
-		}
+        // 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);
-		}
-	}
+        // 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) {
+    // 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 : '');
+                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;
-		}
+    // 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.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
-						type:   'video/mp4'
-					},
-					{
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
-						type:   'video/webm'
-					}],
-					poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
-					tracks:     [{
-						kind:   'captions',
-						label:  'English',
-						srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-						default: true
-					}]
-				});
-				break;
+        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 – “It All Began With A Burst”',
-					sources: [{
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-						type:   'audio/mp3'
-					},
-					{
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-						type:   'audio/ogg'
-					}]
-				});
-				break;
+            case types.audio:
+                player.source({
+                    type: "audio",
+                    title: "Kishi Bashi – “It All Began With A Burst”",
+                    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.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:    '143418951',
-				        type:   'vimeo'
-				    }]
-				});
-				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;
+        // 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);
-		}
+        // 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);
-	}
+        // 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');
+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");
 }

demo/src/less/components/base.less

@@ -39,9 +39,10 @@ header {
 
 // Sections
 section {
-    padding-bottom: @padding-base;
+    max-width: @example-width-video;
+    margin: 0 auto @padding-base;
 
     @media (min-width: @screen-sm) {
-        padding-bottom: (@padding-base * 2);
+        margin-bottom: (@padding-base * 2);
     }
 }

demo/src/less/components/examples.less

@@ -2,11 +2,6 @@
 // Examples
 // ==========================================================================
 
-section {
-    margin: 0 auto @padding-base;
-    max-width: @example-width-video;
-}
-
 // For non supported browsers
 video {
     max-width: 100%;
@@ -21,7 +16,7 @@ video {
 .plyr--audio {
     max-width: @example-width-audio;
 }
-.plyr--video::after {
+.plyr__video-wrapper::after {
     content: "";
     pointer-events: none;
     position: absolute;

demo/src/less/lib/fontface.less

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

gulpfile.js

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

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Selz.com
+Copyright (c) 2017 Sam Potts
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,47 +1,51 @@
 {
-  "name": "plyr",
-  "version": "1.8.2",
-  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
-  "homepage": "http://plyr.io",
-  "main": "src/js/plyr.js",
-  "dependencies": {},
-  "devDependencies": {
-    "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^3.1.0",
-    "gulp-clean-css": "^2.0.6",
-    "gulp-concat": "^2.3.3",
-    "gulp-less": "^3.0.5",
-    "gulp-open": "^2.0.0",
-    "gulp-rename": "^1.2.0",
-    "gulp-replace": "^0.5.3",
-    "gulp-s3": "^0.3.0",
-    "gulp-sass": "^2.3.1",
-    "gulp-size": "^2.1.0",
-    "gulp-svgmin": "^1.2.2",
-    "gulp-svgstore": "^5.0.5",
-    "gulp-uglify": "^1.5.3",
-    "gulp-util": "^3.0.7",
-    "run-sequence": "^1.1.5",
-    "through2": "^2.0.1"
-  },
-  "keywords": [
-    "HTML5 Video",
-    "HTML5 Audio",
-    "Media Player"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/selz/plyr.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/selz/plyr/issues"
-  },
-  "directories": {
-    "doc": "readme.md"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "Sam Potts <sam@selz.com>"
+    "name": "plyr",
+    "version": "2.0.18",
+    "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
+    "homepage": "http://plyr.io",
+    "main": "src/js/plyr.js",
+    "dependencies": {},
+    "devDependencies": {
+        "gulp": "^3.9.1",
+        "gulp-autoprefixer": "^4.0.0",
+        "gulp-clean-css": "^3.9.0",
+        "gulp-concat": "^2.6.1",
+        "gulp-less": "^3.3.2",
+        "gulp-open": "^2.0.0",
+        "gulp-rename": "^1.2.2",
+        "gulp-replace": "^0.6.1",
+        "gulp-s3": "^0.11.0",
+        "gulp-sass": "^3.1.0",
+        "gulp-size": "^2.1.0",
+        "gulp-svgmin": "^1.2.4",
+        "gulp-svgstore": "^6.1.0",
+        "gulp-uglify": "^3.0.0",
+        "gulp-util": "^3.0.8",
+        "run-sequence": "^2.2.0",
+        "through2": "^2.0.3"
+    },
+    "keywords": [
+        "HTML5 Video",
+        "HTML5 Audio",
+        "Media Player",
+        "DASH",
+        "Shaka",
+        "WordPress",
+        "HLS"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/sampotts/plyr.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/sampotts/plyr/issues"
+    },
+    "directories": {
+        "doc": "readme.md"
+    },
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "author": "Sam Potts <sam@potts.es>"
 }

src/less/plyr.less

@@ -3,13 +3,15 @@
 // https://github.com/selz/plyr
 // ==========================================================================
 
-@import "variables";
-@import "mixins";
+@import 'variables';
+@import 'mixins';
 
 // Animation
 // ---------------------------------------
 @keyframes plyr-progress {
-    to { background-position: @plyr-progress-loading-size 0; }
+    to {
+        background-position: @plyr-progress-loading-size 0;
+    }
 }
 
 // Styles
@@ -19,7 +21,7 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-family: @plyr-font-family;
     direction: ltr;
 
     & when (@plyr-border-box = true) {
@@ -35,11 +37,19 @@
 
     & when (@plyr-touch-action = true) {
         // Fix 300ms delay
-        a, button, input, label {
+        a,
+        button,
+        input,
+        label {
             touch-action: manipulation;
         }
     }
 
+    // Focus
+    &:focus {
+        outline: 0;
+    }
+
     // Media elements
     video,
     audio {
@@ -57,9 +67,9 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        vertical-align: middle;
 
-        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
@@ -168,16 +178,17 @@
     position: relative;
     background: #000;
     border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
+    border-radius: inherit;
+
+    // Require overflow and z-index to force border-radius
     overflow: hidden;
+    z-index: 0;
 
     iframe {
         position: absolute;
@@ -215,7 +226,7 @@
     width: 100%;
     padding: (@plyr-control-spacing * 2);
     transform: translateY(-(@plyr-control-spacing * 4));
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-base;
     text-align: center;
@@ -225,6 +236,8 @@
         border-radius: 2px;
         padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
         background: @plyr-captions-bg;
+        box-decoration-break: clone;
+        line-height: 150%;
     }
     span:empty {
         display: none;
@@ -237,12 +250,15 @@
 .plyr--captions-active .plyr__captions {
     display: block;
 }
-.plyr--fullscreen-active .plyr__captions {
-    font-size: @plyr-font-size-captions-large;
-}
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-(@plyr-control-spacing * 1.5));
 }
+// Large captions in full screen on larger screens
+@media (min-width: @plyr-bp-screen-lg) {
+    .plyr--fullscreen-active .plyr__captions {
+        font-size: @plyr-font-size-captions-large;
+    }
+}
 
 // Controls
 // --------------------------------------------------------------
@@ -255,11 +271,13 @@
 .plyr__controls {
     display: flex;
     align-items: center;
-
     line-height: 1;
     text-align: center;
+    pointer-events: none;
 
-    transition: opacity .3s ease;
+    & > * {
+        pointer-events: all;
+    }
 
     // Spacing
     > button,
@@ -274,7 +292,7 @@
     .plyr__volume {
         margin-left: (@plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
+    [data-plyr='pause'] {
         margin-left: 0;
     }
 
@@ -290,7 +308,7 @@
         background: transparent;
         border-radius: 3px;
         cursor: pointer;
-        transition: background .3s ease, color .3s ease, opacity .3s ease;
+        transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
         color: inherit;
 
         svg {
@@ -324,6 +342,7 @@
 // Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
+    pointer-events: none;
 }
 
 // Video controls
@@ -332,11 +351,13 @@
     left: 0;
     right: 0;
     bottom: 0;
+    z-index: 2;
     padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
     background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
+    transition: opacity 0.3s ease;
 
     button {
         // Hover and tab focus
@@ -354,7 +375,6 @@
     border-radius: inherit;
     background: @plyr-audio-controls-bg;
     border: @plyr-audio-controls-border;
-    box-shadow: @plyr-audio-controls-box-shadow;
     color: @plyr-audio-control-color;
 
     button {
@@ -371,6 +391,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -378,9 +399,9 @@
     background: @plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+    box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     svg {
         position: relative;
@@ -454,9 +475,9 @@
     font-size: @plyr-font-size-small;
     line-height: 1.3;
 
-    transform: translate(-50%, 10px) scale(.8);
+    transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
 
     &::before {
         // Arrows
@@ -488,7 +509,7 @@
 // First tooltip
 .plyr__controls button:first-child .plyr__tooltip {
     left: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 0 100%;
 
     &::before {
@@ -499,7 +520,7 @@
 // Last tooltip
 .plyr__controls button:last-child .plyr__tooltip {
     right: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;
 
     &::before {
@@ -518,7 +539,6 @@
     }
 }
 
-
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@@ -527,7 +547,7 @@
     display: none;
     flex: 1;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
 
@@ -562,7 +582,8 @@
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
     vertical-align: top;
-    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
     border: none;
     border-radius: 100px;
 
@@ -610,13 +631,13 @@
 }
 .plyr__progress--buffer {
     &::-webkit-progress-value {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-moz-progress-bar {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-ms-fill {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
 }
 .plyr--video .plyr__progress--buffer,
@@ -647,7 +668,8 @@
         @plyr-progress-loading-bg 50%,
         @plyr-progress-loading-bg 75%,
         transparent 75%,
-        transparent);
+        transparent
+    );
     color: transparent;
 }
 .plyr--video.plyr--loading .plyr__progress--buffer {
@@ -663,7 +685,6 @@
     display: inline-block;
     vertical-align: middle;
     font-size: @plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@@ -689,7 +710,7 @@
     flex: 1;
     position: relative;
 
-    input[type="range"] {
+    input[type='range'] {
         position: relative;
         z-index: 2;
     }
@@ -712,18 +733,11 @@
 
 // Fullscreen
 // --------------------------------------------------------------
-.plyr--fullscreen,
 .plyr--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000000;
     background: #000;
-    border-radius: 0;
+    border-radius: 0 !important;
 
     video {
         height: 100%;
@@ -732,11 +746,9 @@
         height: 100%;
         width: 100%;
     }
-    .plyr__controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
     }
 
     // Vimeo requires some different styling
@@ -746,3 +758,13 @@
         transform: translateY(-50%);
     }
 }
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+}

src/less/variables.less

@@ -11,7 +11,8 @@
 // Colors
 @plyr-color-main:                       #3498db;
 
-// Font sizes
+// Font
+@plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 @plyr-font-size-small:                  14px;
 @plyr-font-size-base:                   16px;
 
@@ -32,7 +33,6 @@
 @plyr-video-control-bg-hover:           @plyr-color-main;
 @plyr-audio-controls-bg:                #fff;
 @plyr-audio-controls-border:            1px solid #dbe3e8;
-@plyr-audio-controls-box-shadow:        0 1px 1px fade(#000, 5%);
 @plyr-audio-control-color:              #565D64;
 @plyr-audio-control-color-hover:        #fff;
 @plyr-audio-control-bg-hover:           @plyr-color-main;
@@ -69,3 +69,4 @@
 // Breakpoints
 @plyr-bp-screen-sm:                     480px;
 @plyr-bp-screen-md:                     768px;
+@plyr-bp-screen-lg:                     1024px;

src/scss/plyr.scss

@@ -9,7 +9,9 @@
 // Animation
 // ---------------------------------------
 @keyframes plyr-progress {
-    to { background-position: $plyr-progress-loading-size 0; }
+    to {
+        background-position: $plyr-progress-loading-size 0;
+    }
 }
 
 // Styles
@@ -19,7 +21,7 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-family: $plyr-font-family;
     direction: ltr;
 
     @if $plyr-border-box == true {
@@ -34,10 +36,18 @@
     }
 
     @if $plyr-touch-action == true {
-      // Fix 300ms delay
-      a, button, input, label {
-        touch-action: manipulation;
-      }
+        // Fix 300ms delay
+        a,
+        button,
+        input,
+        label {
+            touch-action: manipulation;
+        }
+    }
+
+    // Focus
+    &:focus {
+        outline: 0;
     }
 
     // Media elements
@@ -51,7 +61,7 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type='range'] {
+    input[type="range"] {
         display: block;
         height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
         width: 100%;
@@ -132,13 +142,13 @@
 }
 
 // Video range inputs
-.plyr--video input[type='range'].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-video-control-color, .5);
+.plyr--video input[type="range"].tab-focus:focus {
+    outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
 }
 
 // Audio range inputs
-.plyr--audio input[type='range'].tab-focus:focus {
-    outline: 1px dotted transparentize($plyr-audio-control-color, .5);
+.plyr--audio input[type="range"].tab-focus:focus {
+    outline: 1px dotted transparentize($plyr-audio-control-color, 0.5);
 }
 
 // Screen reader only elements
@@ -167,18 +177,18 @@
     position: relative;
     background: #000;
     border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
 .plyr__video-embed {
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
-    overflow: hidden;
     border-radius: inherit;
 
+    // Require overflow and z-index to force border-radius
+    overflow: hidden;
+    z-index: 0;
+
     iframe {
         position: absolute;
         top: 0;
@@ -215,7 +225,7 @@
     width: 100%;
     padding: ($plyr-control-spacing * 2);
     transform: translateY(-($plyr-control-spacing * 6));
-    transition: transform .3s ease;
+    transition: transform 0.3s ease;
     color: $plyr-captions-color;
     font-size: $plyr-font-size-captions-base;
     text-align: center;
@@ -225,6 +235,8 @@
         border-radius: 2px;
         padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
         background: $plyr-captions-bg;
+        box-decoration-break: clone;
+        line-height: 150%;
     }
     span:empty {
         display: none;
@@ -237,12 +249,15 @@
 .plyr--captions-active .plyr__captions {
     display: block;
 }
-.plyr--fullscreen-active .plyr__captions {
-    font-size: $plyr-font-size-captions-large;
-}
 .plyr--hide-controls .plyr__captions {
     transform: translateY(-($plyr-control-spacing * 2));
 }
+// Large captions in full screen on larger screens
+@media (min-width: $plyr-bp-screen-lg) {
+    .plyr--fullscreen-active .plyr__captions {
+        font-size: $plyr-font-size-captions-large;
+    }
+}
 
 // Controls
 // --------------------------------------------------------------
@@ -255,11 +270,13 @@
 .plyr__controls {
     display: flex;
     align-items: center;
-
     line-height: 1;
     text-align: center;
+    pointer-events: none;
     
-    transition: opacity .3s ease;
+    & > * {
+        pointer-events: all;
+    }
     
     // Spacing
     > button,
@@ -285,12 +302,12 @@
         flex-shrink: 0;
         overflow: visible; // IE11
         vertical-align: middle;
-        padding: ($plyr-control-spacing * .7);
+        padding: ($plyr-control-spacing * 0.7);
         border: 0;
         background: transparent;
         border-radius: 3px;
         cursor: pointer;
-        transition: background .3s ease, color .3s ease, opacity .3s ease;
+        transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
         color: inherit;
 
         svg {
@@ -324,6 +341,7 @@
 // Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
+    pointer-events: none;
 }
 
 // Video controls
@@ -333,10 +351,14 @@
     right: 0;
     bottom: 0;
     padding: ($plyr-control-spacing * 5) $plyr-control-spacing $plyr-control-spacing;
-    background: linear-gradient(transparentize($plyr-video-controls-bg, 1), transparentize($plyr-video-controls-bg, .5));
+    background: linear-gradient(
+        transparentize($plyr-video-controls-bg, 1),
+        transparentize($plyr-video-controls-bg, 0.5)
+    );
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: $plyr-video-control-color;
+    transition: opacity 0.3s ease;
 
     button {
         // Hover and tab focus
@@ -354,7 +376,6 @@
     border-radius: inherit;
     background: $plyr-audio-controls-bg;
     border: $plyr-audio-controls-border;
-    box-shadow: $plyr-audio-controls-box-shadow;
     color: $plyr-audio-control-color;
 
     button {
@@ -371,6 +392,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -378,9 +400,9 @@
     background: $plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85);
+    box-shadow: 0 1px 1px transparentize(#000, 0.85);
     color: $plyr-video-control-color;
-    transition: all .3s ease;
+    transition: all 0.3s ease;
 
     svg {
         position: relative;
@@ -392,7 +414,7 @@
     }
 
     &:focus {
-        outline: 1px dotted transparentize($plyr-video-control-color, .5);
+        outline: 1px dotted transparentize($plyr-video-control-color, 0.5);
     }
 }
 .plyr .plyr__play-large {
@@ -407,11 +429,11 @@
 }
 
 // States
-.plyr__controls [data-plyr='pause'],
-.plyr--playing .plyr__controls [data-plyr='play'] {
+.plyr__controls [data-plyr="pause"],
+.plyr--playing .plyr__controls [data-plyr="play"] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr='pause'] {
+.plyr--playing .plyr__controls [data-plyr="pause"] {
     display: inline-block;
 }
 
@@ -427,12 +449,12 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr='captions'],
-.plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr="captions"],
+.plyr [data-plyr="fullscreen"] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr='captions'],
-.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--captions-enabled [data-plyr="captions"],
+.plyr--fullscreen-enabled [data-plyr="fullscreen"] {
     display: inline-block;
 }
 
@@ -454,13 +476,13 @@
     font-size: $plyr-font-size-small;
     line-height: 1.3;
 
-    transform: translate(-50%, 10px) scale(.8);
+    transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;
-    transition: transform .2s .1s ease, opacity .2s .1s ease;
+    transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
 
     &::before {
         // Arrows
-        content: '';
+        content: "";
         position: absolute;
         width: 0;
         height: 0;
@@ -488,7 +510,7 @@
 // First tooltip
 .plyr__controls button:first-child .plyr__tooltip {
     left: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 0 100%;
 
     &::before {
@@ -499,7 +521,7 @@
 // Last tooltip
 .plyr__controls button:last-child .plyr__tooltip {
     right: 0;
-    transform: translate(0, 10px) scale(.8);
+    transform: translate(0, 10px) scale(0.8);
     transform-origin: 100% 100%;
 
     &::before {
@@ -609,13 +631,13 @@
 }
 .plyr__progress--buffer {
     &::-webkit-progress-value {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-moz-progress-bar {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
     &::-ms-fill {
-        transition: width .2s ease;
+        transition: width 0.2s ease;
     }
 }
 .plyr--video .plyr__progress--buffer,
@@ -646,7 +668,8 @@
         $plyr-progress-loading-bg 50%,
         $plyr-progress-loading-bg 75%,
         transparent 75%,
-        transparent);
+        transparent
+    );
     color: transparent;
 }
 .plyr--video.plyr--loading .plyr__progress--buffer {
@@ -662,7 +685,6 @@
     display: inline-block;
     vertical-align: middle;
     font-size: $plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@@ -674,7 +696,7 @@
 
     // Add a slash in before
     &::before {
-        content: '\2044';
+        content: "\2044";
         margin-right: $plyr-control-spacing;
     }
 }
@@ -705,24 +727,17 @@
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
 .plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'] {
+.plyr--is-ios [data-plyr="mute"] {
     display: none !important;
 }
 
 // Fullscreen
 // --------------------------------------------------------------
-.plyr--fullscreen,
 .plyr--fullscreen-active {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000000;
     background: #000;
-    border-radius: 0;
+    border-radius: 0 !important;
 
     video {
         height: 100%;
@@ -731,11 +746,9 @@
         height: 100%;
         width: 100%;
     }
-    .plyr__controls {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
+    .plyr__video-embed {
+        // Revert overflow change
+        overflow: visible;
     }
 
     // Vimeo requires some different styling
@@ -745,3 +758,13 @@
         transform: translateY(-50%);
     }
 }
+
+// Fallback for unsupported browsers
+.plyr--fullscreen-fallback.plyr--fullscreen-active {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000000;
+}

src/scss/variables.scss

@@ -13,6 +13,7 @@ $plyr-sr-only-important:                true !default;
 $plyr-color-main:                       #3498db !default;
 
 // Font sizes
+$plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
 $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;
 
@@ -33,7 +34,6 @@ $plyr-video-control-color-hover:        #fff !default;
 $plyr-video-control-bg-hover:           $plyr-color-main !default;
 $plyr-audio-controls-bg:                #fff !default;
 $plyr-audio-controls-border:            1px solid #dbe3e8 !default;
-$plyr-audio-controls-box-shadow:        0 1px 1px transparentize(#000, .95) !default;
 $plyr-audio-control-color:              #565D64 !default;
 $plyr-audio-control-color-hover:        #fff !default;
 $plyr-audio-control-bg-hover:           $plyr-color-main;
@@ -70,3 +70,4 @@ $plyr-range-selected-bg:                $plyr-color-main !default;
 // Breakpoints
 $plyr-bp-screen-sm:                     480px !default;
 $plyr-bp-screen-md:                     768px !default;
+$plyr-bp-screen-lg:                     1024px !default;