Merge branch 'master' of github.com:selz/plyr

Dynamically set YouTube autoplay from config

.gitignore

@@ -4,4 +4,6 @@ node_modules
 .DS_Store
 aws.json
 docs/index.dev.html
-*.mp4
+*.mp4
+notes.txt
+npm-debug.log

changelog.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## v1.5.18
+- Added 'ready' event for initial setup complete or source change occurs
+- Fixed SASS stylesheet references to transparentize
+- Added default font stack to controls 
+- Docs fixes inc controls HTML (fixes #180)
+
+## v1.5.17
+- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
+- Auto set title based on YouTube getVideoData() title property
+- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
+
+## v1.5.16
+- Cancel requests on source change (Fixes #174)
+
+## v1.5.15
+- Fix for CustomEvent polyfill and related bug (See #172)
+
+## v1.5.14
+- Volume storage fix (Fixes #171)
+
+## v1.5.13
+- Fix for manual caption rendering
+
+## v1.5.12
+- Added a duration option to pass the duration of the file
+- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
+- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
+- Firefox bug fix for event not defined
+
+## v1.5.11
+- iOS embed bug fixes (fixes #166)
+- Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)
+- SASS bug fix for default values (fixes #158)
+
+## v1.5.9 + v1.5.10
+- NPM bug fixes
+
+## v1.5.8
+- Fix for touch device seek tooltip
+- Seek improvements
+
+## v1.5.7
+- Fix for control tooltips always showing
+
 ## v1.5.6
 - Seek tooltip (option for tooltips changed, please check docs)
 - SASS compile error fixes (fixes #148)

controls.md

@@ -49,13 +49,14 @@ This is an example `html` option with all controls.
 var controls = ["<div class='plyr__controls'>",
     "<div class='plyr__progress'>",
         "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
-        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
+        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
         "<progress class='plyr__progress--played' max='100' value='0'>",
             "<span>0</span>% played",
         "</progress>",
         "<progress class='plyr__progress--buffer' max='100' value='0'>",
             "<span>0</span>% buffered",
         "</progress>",
+        "<span class='plyr__tooltip'>00:00</span>",
     "</div>",
     "<span class='plyr__controls--left'>",
         "<button type='button' data-plyr='restart'>",
@@ -80,11 +81,11 @@ var controls = ["<div class='plyr__controls'>",
         "</button>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Current time</span>",
-            "<span class='plyr__current-time'>00:00</span>",
+            "<span class='plyr__time--curent'>00:00</span>",
         "</span>",
         "<span class='plyr__time'>",
             "<span class='plyr__sr-only'>Duration</span>",
-            "<span class='plyr__duration'>00:00</span>",
+            "<span class='plyr__time--duration'>00:00</span>",
         "</span>",
     "</span>",
     "<span class='plyr__controls--right'>",

docs/dist/docs.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,n=arguments.length;for(i=0;n>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",n=e.Element[i],s=Object,o=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=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);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,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(!(t in n)||!o&&t==s||!s.length&&t==n.video)return void console.warn("Unregonized type.");var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.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.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),a||t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,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 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,n=arguments.length;for(i=0;n>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",n=e.Element[i],s=Object,o=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=o.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],n=0,s=i.length;s>n;n++)this.push(i[n]);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,n=t.length,s=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),s=!0);while(++i<n);s&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,n=0,s=i.length,o=!1;do for(e=i[n]+"",t=c(this,e);-1!==t;)this.splice(t,1),o=!0,t=c(this,e);while(++n<s);o&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),n=i?t!==!0&&"remove":t!==!1&&"add";return n&&this[n](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},s.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,s.defineProperty(n,t,p))}}else s[i].__defineGetter__&&n.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:{controls:!0},captions:{defaultActive:!0}}),shr.setup({count:{classname:"btn__count"}}),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var n=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=n+(i?" "+t:"")}}function t(t,o){if(t in n&&(o||t!=s)&&(s.length||t!=n.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case n.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},s=window.location.hash.replace("#",""),o=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),o&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),o){var a=!s.length;a&&(s=n.video),s in n&&history.replaceState({type:s},"",a?"":"#"+s),s!==n.video&&t(s,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,n,s,o,r){e.GoogleAnalyticsObject=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date,o=t.createElement(i),r=t.getElementsByTagName(i)[0],o.async=1,o.src=n,r.parentNode.insertBefore(o,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

docs/index.html

@@ -58,7 +58,7 @@
                         <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
 
                         <!-- 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.vtt" default>
+                        <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>
 
                         <!-- Fallback for browsers that don't support the <video> element -->
                         <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>

docs/src/js/docs.js

@@ -58,13 +58,19 @@ shr.setup({
 	// 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(!video) {
+
+		// If it's not video, load the source
+		if(currentType !== types.video) {
 			newSource(currentType, true);
 		}
 	}
@@ -86,7 +92,6 @@ shr.setup({
 	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)) {
-			console.warn('Unregonized type.');
 			return;
 		}
 
@@ -111,7 +116,7 @@ shr.setup({
 						kind:   'captions',
 						label:  'English',
 						srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt',
+						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
 						default: true
 					}]
 				});

gulpfile.js

@@ -214,8 +214,10 @@ options = {
 
 // If aws is setup
 if("cdn" in aws) {
-    var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
+    var regex       = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
-    localpath   = new RegExp("(\.\.\/)?dist", "gi");
+    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    semver          = new RegExp("v" + regex, "gi"),
+    localpath       = new RegExp("(\.\.\/)?dist", "gi");
 }
 
 // Publish version to CDN bucket
@@ -244,6 +246,11 @@ gulp.task("docs", function () {
         .pipe(replace(cdnpath, aws.cdn.bucket + "/" + 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(gulp.dest(path.join(root, "src/js/")));
+
     // Replace local file paths with remote paths in docs
     // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
     gulp.src([paths.docs.root + "*.html"])

package.json

@@ -1,9 +1,9 @@
 {
   "name": "plyr",
-  "version": "1.5.6",
+  "version": "1.5.19",
-  "description": "A simple HTML5 media player using custom controls",
+  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
-  "main": "gulpfile.js",
+  "main": "src/js/plyr.js",
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.0",
@@ -24,9 +24,6 @@
     "gulp-util": "^3.0.7",
     "run-sequence": "^1.1.5"
   },
-  "scripts": {
-    "preinstall": "npm install -g gulp"
-  },
   "keywords": [
     "HTML5 Video",
     "HTML5 Audio",
@@ -36,8 +33,15 @@
     "type": "git",
     "url": "git://github.com/selz/plyr.git"
   },
-  "authors": [
+  "license": "MIT",
-    "Sam Potts <me@sampotts.me>"
+  "bugs": {
-  ],
+    "url": "https://github.com/selz/plyr/issues"
-  "license": "MIT"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Sam Potts <sam@selz.com> (selz.com)"
 }

readme.md

@@ -1,9 +1,9 @@
 # Plyr
 A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
 
-[Checkout the demo](http://plyr.io)
+[Checkout the demo](https://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr-v1.5.jpg)](https://plyr.io)
 
 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@@ -25,9 +25,10 @@ We wanted a lightweight, accessible and customizable media player that supports
 Oh and yes, it works with Bootstrap.
 
 ## Changelog
-Check out the [changelog](changelog.md) to see what's been new with Plyr.
+Check out the [changelog](changelog.md) to see what's new with Plyr.
 
 ## Planned Development
+- Streaming
 - Playback speed
 - Playlists
 - Multiple language captions (with selection)
@@ -37,16 +38,28 @@ Check out the [changelog](changelog.md) to see what's been new with Plyr.
 If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
 
 ## Implementation
-
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.6/plyr.js` to `https://cdn.plyr.io/1.5.6/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.19/plyr.js` to `https://cdn.plyr.io/1.5.19/plyr.js`
+
+### Node Package Manager (NPM)
+[![npm version](https://badge.fury.io/js/plyr.svg)](https://badge.fury.io/js/plyr) 
+
+Using NPM, you can grab Plyr:
+```
+npm install plyr
+```
+[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
 
 ### Bower
+[![Bower version](https://badge.fury.io/bo/plyr.svg)](https://badge.fury.io/bo/plyr)
+
 If bower is your thang, you can grab Plyr using:
 ```
 bower install plyr
 ```
+[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)
+
 More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
 
 ### Ember
@@ -60,11 +73,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.19/plyr.css">
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.19/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.6/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.19/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -96,7 +109,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
 ```
 
 If you're using the `<base>` tag on your site, you may need to use something like this:
-[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
+[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
 
 More info on SVG sprites here:
 [http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
@@ -154,6 +167,11 @@ You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>`
 More info on CORS here:
 [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
 
+### Captions
+WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
+
+Be sure to [validate your caption files](https://quuz.org/webvtt/)
+
 ### JavaScript
 
 #### Quick setup
@@ -161,7 +179,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.19/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 
@@ -191,7 +209,7 @@ plyr.setup(options);
 
 #### Options
 
-Options must be passed as an object to the `setup()` method as above.
+Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
 
 <table class="table" width="100%">
 <thead>
@@ -239,6 +257,12 @@ Options must be passed as an object to the `setup()` method as above.
     <td><code>false</code></td>
     <td>Display debugging information on what Plyr is doing.</td>
   </tr>
+  <tr>
+    <td><code>autoplay</code></td>
+    <td>Boolean</td>
+    <td><code>false</code></td>
+    <td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
+  </tr>
   <tr>
     <td><code>seekTime</code></td>
     <td>Number</td>
@@ -267,7 +291,13 @@ Options must be passed as an object to the `setup()` method as above.
 		<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
 	</td>
   </tr>
-    <tr>
+  <tr>
+    <td><code>duration</code></td>
+    <td>Number</td>
+    <td><code>null</code></td>
+    <td>Specify a custom duration.</td>
+  </tr>
+  <tr>
     <td><code>displayDuration</code></td>
     <td>Boolean</td>
     <td><code>true</code></td>
@@ -454,16 +484,23 @@ Here's a list of the methods supported:
   </tr>
   <tr>
     <td><code>source(...)</code></td>
-    <td>Array or undefined</td>
+    <td>Object or undefined</td>
     <td>
       Get/Set the media source.
       <br><br>
-      <strong>string</strong><br>
-      <code>.source("/path/to/video.mp4")</code><br>
-      This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
-      <br><br>
       <strong>array</strong><br>
-      <code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
+      <pre><code>.source([
+      	{
+      		src: "/path/to/video.webm",
+      		type: "video/webm",
+      		...more attributes...
+      	},
+      	{
+      		src: "/path/to/video.mp4",
+      		type: "video/mp4",
+      		...more attributes...
+      	}
+      ])`</code></pre><br>
       This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
       <br><br>
       <strong>YouTube</strong><br>
@@ -586,8 +623,8 @@ Some more details on the object parameters
     </tr>
     <tr>
       <td><code>sources</code></td>
-      <td>Array or String</td>
+      <td>Array</td>
-      <td>This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
+      <td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
     </tr>
     <tr>
       <td><code>poster</code></td>
@@ -642,7 +679,7 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information.</td>
 	</tr>
 	<tr>
-		<td><code>loadeddata/code></td>
+		<td><code>loadeddata</code></td>
 		<td>✔</td>
 		<td>The first frame of the media has finished loading.</td>
 	</tr>
@@ -726,6 +763,11 @@ You can listen for events on the element you setup Plyr on. Some events only app
 		<td></td>
 		<td>Captions toggled off</td>
 	</tr>
+	<tr>
+		<td><code>ready</code></td>
+		<td></td>
+		<td>Triggered when initial setup is done or a source change has occurred.</td>
+	</tr>
 	</tbody>
 </table>
 
@@ -734,8 +776,8 @@ Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Event
 Here's an example of binding an event listener:
 
 ```javascript
-document.querySelector(".js-plyr").addEventListener("playing", function() {
+document.querySelector('.js-plyr').addEventListener('ready', function() {
-  /* Magic happens */
+	var player = event.target.plyr;
 });
 ```
 
@@ -743,6 +785,28 @@ document.querySelector(".js-plyr").addEventListener("playing", function() {
 
 YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.
 
+Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.
+
+The native API's can be accessed through the `embed` property of the plyr object. For example:
+
+```javascript
+document.querySelector('.js-plyr').addEventListener('ready', function() {
+	var player = event.target.plyr;
+
+	// YouTube
+	console.log(player.embed.getVideoData());
+
+	// Vimeo
+	console.log(player.embed.api('getColor'));
+});
+```
+
+More info on the respective API's here:
+[YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
+[Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
+
+*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
+
 ## Fullscreen
 
 Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `plyr-fullscreen` class to your container.
@@ -805,9 +869,12 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 - [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
 - [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
 - [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
+- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
 
 ## Used by
 - [Selz.com](https://selz.com)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
 
 Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
 

src/less/plyr.less

@@ -7,57 +7,58 @@
 // -------------------------------
 
 // Colors
-@plyr-blue:                      #3498DB;
+@plyr-blue:                          #3498DB;
-@plyr-gray-dark:                 #343F4A;
+@plyr-gray-dark:                     #343F4A;
-@plyr-gray:                      #565D64;
+@plyr-gray:                          #565D64;
-@plyr-gray-light:                #6B7D86;
+@plyr-gray-light:                    #6B7D86;
-@plyr-gray-lighter:              #CBD0D3;
+@plyr-gray-lighter:                  #CBD0D3;
-@plyr-off-white:                 #D6DADD;
+@plyr-off-white:                     #D6DADD;
 
 // Font sizes
-@plyr-font-size-small:           14px;
+@plyr-font-size-small:               14px;
-@plyr-font-size-base:            16px;
+@plyr-font-size-base:                16px;
 
 // Captions
-@plyr-font-size-captions-base:   ceil(@plyr-font-size-base * 1.25);
+@plyr-font-size-captions-base:       ceil(@plyr-font-size-base * 1.25);
-@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
+@plyr-font-size-captions-medium:     ceil(@plyr-font-size-base * 1.5);
-@plyr-font-size-captions-large:  (@plyr-font-size-base * 2);
+@plyr-font-size-captions-large:      (@plyr-font-size-base * 2);
 
 // Controls
-@plyr-control-spacing:           10px;
+@plyr-control-spacing:               10px;
-@plyr-controls-bg:               #fff;
+@plyr-controls-bg:                   #fff;
-@plyr-control-bg-hover:          @plyr-blue;
+@plyr-control-bg-hover:              @plyr-blue;
 .contrast-control-color(@plyr-controls-bg);
 .contrast-control-color-hover(@plyr-control-bg-hover);
 
 // Tooltips
-@plyr-tooltip-bg:                @plyr-controls-bg;
+@plyr-tooltip-bg:                    @plyr-controls-bg;
-@plyr-tooltip-border-color:      fade(@plyr-gray-dark, 10%);
+@plyr-tooltip-border-color:          fade(darken(@plyr-controls-bg, 75%), 10%);
-@plyr-tooltip-border-width:      1px;
+@plyr-tooltip-arrow-border-color:    fade(darken(@plyr-controls-bg, 75%), 20%);
-@plyr-tooltip-shadow:            0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
+@plyr-tooltip-border-width:          1px;
-@plyr-tooltip-color:             @plyr-control-color;
+@plyr-tooltip-shadow:                0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
-@plyr-tooltip-padding:           @plyr-control-spacing;
+@plyr-tooltip-color:                 @plyr-control-color;
-@plyr-tooltip-arrow-size:        6px;
+@plyr-tooltip-padding:               @plyr-control-spacing;
-@plyr-tooltip-radius:            3px;
+@plyr-tooltip-arrow-size:            6px;
+@plyr-tooltip-radius:                3px;
 
 // Progress
-@plyr-progress-bg:               fade(@plyr-gray, 20%);
+@plyr-progress-bg:                   fade(@plyr-gray, 20%);
-@plyr-progress-playing-bg:       @plyr-blue;
+@plyr-progress-playing-bg:           @plyr-blue;
-@plyr-progress-buffered-bg:      fade(@plyr-gray, 25%);
+@plyr-progress-buffered-bg:          fade(@plyr-gray, 25%);
-@plyr-progress-loading-size:     40px;
+@plyr-progress-loading-size:         40px;
-@plyr-progress-loading-bg:       fade(#000, 15%);
+@plyr-progress-loading-bg:           fade(#000, 15%);
 
 // Volume
-@plyr-volume-track-height:       6px;
+@plyr-volume-track-height:           6px;
-@plyr-volume-track-bg:           darken(@plyr-controls-bg, 10%);
+@plyr-volume-track-bg:               darken(@plyr-controls-bg, 10%);
-@plyr-volume-thumb-height:       (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-height:           (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-width:        (@plyr-volume-track-height * 2);
+@plyr-volume-thumb-width:            (@plyr-volume-track-height * 2);
-@plyr-volume-thumb-bg:           @plyr-control-color;
+@plyr-volume-thumb-bg:               @plyr-control-color;
-@plyr-volume-thumb-bg-focus:     @plyr-control-bg-hover;
+@plyr-volume-thumb-bg-focus:         @plyr-control-bg-hover;
 
 // Breakpoints
-@plyr-bp-control-split:          560px; // When controls split into left/right
+@plyr-bp-control-split:              560px; // When controls split into left/right
-@plyr-bp-captions-large:         768px; // When captions jump to the larger font size
+@plyr-bp-captions-large:             768px; // When captions jump to the larger font size
 
 // Animation
 // ---------------------------------------
@@ -110,8 +111,11 @@
 .seek-thumb() {
     background: transparent;
     border: 0;
-    width: (@plyr-control-spacing * 4);
+    width: 1px;
     height: @plyr-control-spacing;
+}
+.seek-thumb-touch() {
+    width: (@plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 .seek-track() {
@@ -126,6 +130,7 @@
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -163,6 +168,11 @@
         vertical-align: middle;
     }
 
+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
     // Container for embeds
     &__video-embed {
         padding-bottom: 56.25%; /* 16:9 */
@@ -178,7 +188,6 @@
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -187,6 +196,11 @@
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions
@@ -359,7 +373,7 @@
             @plyr-border-arrow-size: (@plyr-tooltip-arrow-size + (@plyr-tooltip-border-width * 1));
             bottom: -(@plyr-border-arrow-size + @plyr-tooltip-border-width);
             border-right: @plyr-border-arrow-size solid transparent;
-            border-top: @plyr-border-arrow-size solid @plyr-tooltip-border-color;
+            border-top: @plyr-border-arrow-size solid @plyr-tooltip-arrow-border-color;
             border-left: @plyr-border-arrow-size solid transparent;
             z-index: 1;
         }
@@ -384,9 +398,14 @@
     }
 
     // Common range styles
-    input[type='range'].tab-focus:focus {
+    input[type='range'] {
-        outline: 1px dotted fade(@plyr-gray-dark, 80%);
+        &::-ms-tooltip {
-        outline-offset: 3px;
+            display: none;
+        }
+        &.tab-focus:focus {
+            outline: 1px dotted fade(@plyr-gray-dark, 80%);
+            outline-offset: 3px;
+        }
     }
 
     // Playback progress
@@ -495,6 +514,21 @@
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            .seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            .seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            .seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;

src/sass/plyr.scss

@@ -7,71 +7,71 @@
 // -------------------------------
 
 // Colors
-$plyr-blue:                      #3498DB !default;
+$plyr-blue:                          #3498DB !default;
-$plyr-gray-dark:                 #343F4A !default;
+$plyr-gray-dark:                     #343F4A !default;
-$plyr-gray:                      #565D64 !default;
+$plyr-gray:                          #565D64 !default;
-$plyr-gray-light:                #6B7D86 !default;
+$plyr-gray-light:                    #6B7D86 !default;
-$plyr-gray-lighter:              #CBD0D3 !default;
+$plyr-gray-lighter:                  #CBD0D3 !default;
-$plyr-off-white:                 #D6DADD !default;
+$plyr-off-white:                     #D6DADD !default;
 
 // Font sizes
-$plyr-font-size-small:           14px !default;
+$plyr-font-size-small:               14px !default;
-$plyr-font-size-base:            16px !default;
+$plyr-font-size-base:                16px !default;
 
 // Captions
-$plyr-font-size-captions-base:   ceil($plyr-font-size-base * 1.25) !default;
+$plyr-font-size-captions-base:       ceil($plyr-font-size-base * 1.25) !default;
-$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
+$plyr-font-size-captions-medium:     ceil($plyr-font-size-base * 1.5) !default;
-$plyr-font-size-captions-large:  ($plyr-font-size-base * 2) !default;
+$plyr-font-size-captions-large:      ($plyr-font-size-base * 2) !default;
 
 // Controls
-$plyr-control-spacing:           10px !default;
+$plyr-control-spacing:               10px !default;
-$plyr-controls-bg:               #fff !default;
+$plyr-controls-bg:                   #fff !default;
-$plyr-control-bg-hover:          $plyr-blue !default;
+$plyr-control-bg-hover:              $plyr-blue !default;
-$plyr-control-color:             null !default;
-$plyr-control-color-hover:       null !default;
 
 // Contrast
 @if lightness($plyr-controls-bg) >= 65% {
-    $plyr-control-color: $plyr-gray-light;
+    $plyr-control-color:             $plyr-gray-light !default;
 }
 @else {
-    $plyr-control-color: $plyr-gray-lighter;
+    $plyr-control-color:             $plyr-gray-lighter !default;
 }
 @if lightness($plyr-control-bg-hover) >= 65% {
-    $plyr-control-color-hover: $plyr-gray;
+    $plyr-control-color-hover:       $plyr-gray !default;
 }
 @else {
-    $plyr-control-color-hover: #fff;
+    $plyr-control-color-hover:       #fff !default;
 }
 
 // Tooltips
-$plyr-tooltip-bg:                $plyr-controls-bg !default;
+$plyr-tooltip-bg:                    $plyr-controls-bg !default;
-$plyr-tooltip-border-color:      transparentize($plyr-gray-dark, .1) !default;
+$plyr-tooltip-border-color:          transparentize(darken($plyr-controls-bg, 75%), .9) !default;
-$plyr-tooltip-border-width:      1px;
+$plyr-tooltip-arrow-border-color:    transparentize(darken($plyr-controls-bg, 75%), .8) !default;
-$plyr-tooltip-shadow:            0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
+
-$plyr-tooltip-color:             $plyr-control-color !default;
+$plyr-tooltip-border-width:          1px;
-$plyr-tooltip-padding:           $plyr-control-spacing !default;
+$plyr-tooltip-shadow:                0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
-$plyr-tooltip-arrow-size:        6px !default;
+$plyr-tooltip-color:                 $plyr-control-color !default;
-$plyr-tooltip-radius:            3px !default;
+$plyr-tooltip-padding:               $plyr-control-spacing !default;
+$plyr-tooltip-arrow-size:            6px !default;
+$plyr-tooltip-radius:                3px !default;
 
 // Progress
-$plyr-progress-bg:               transparentize($plyr-gray, .2) !default;
+$plyr-progress-bg:                   transparentize($plyr-gray, .8) !default;
-$plyr-progress-playing-bg:       $plyr-blue !default;
+$plyr-progress-playing-bg:           $plyr-blue !default;
-$plyr-progress-buffered-bg:      transparentize($plyr-gray, .25) !default;
+$plyr-progress-buffered-bg:          transparentize($plyr-gray, .75) !default;
-$plyr-progress-loading-size:     40px !default;
+$plyr-progress-loading-size:         40px !default;
-$plyr-progress-loading-bg:       transparentize(#000, .15) !default;
+$plyr-progress-loading-bg:           transparentize(#000, .85) !default;
 
 // Volume
-$plyr-volume-track-height:       6px !default;
+$plyr-volume-track-height:           6px !default;
-$plyr-volume-track-bg:           darken($plyr-controls-bg, 10%) !default;
+$plyr-volume-track-bg:               darken($plyr-controls-bg, 10%) !default;
-$plyr-volume-thumb-height:       ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-height:           ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-width:        ($plyr-volume-track-height * 2) !default;
+$plyr-volume-thumb-width:            ($plyr-volume-track-height * 2) !default;
-$plyr-volume-thumb-bg:           $plyr-control-color !default;
+$plyr-volume-thumb-bg:               $plyr-control-color !default;
-$plyr-volume-thumb-bg-focus:     $plyr-control-bg-hover !default;
+$plyr-volume-thumb-bg-focus:         $plyr-control-bg-hover !default;
 
 // Breakpoints
-$plyr-bp-control-split:          560px !default; // When controls split into left/right
+$plyr-bp-control-split:              560px !default; // When controls split into left/right
-$plyr-bp-captions-large:         768px !default; // When captions jump to the larger font size
+$plyr-bp-captions-large:             768px !default; // When captions jump to the larger font size
 
 // Animation
 // ---------------------------------------
@@ -111,8 +111,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
 @mixin seek-thumb() {
     background: transparent;
     border: 0;
-    width: ($plyr-control-spacing * 4);
+    width: 1px;
     height: $plyr-control-spacing;
+}
+@mixin seek-thumb-touch() {
+    width: ($plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 @mixin seek-track() {
@@ -127,6 +130,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
     position: relative;
     max-width: 100%;
     min-width: 290px;
+    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
 
     // border-box everything
     // http://paulirish.com/2012/box-sizing-border-box-ftw/
@@ -164,6 +168,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         vertical-align: middle;
     }
 
+    // Hide default captions
+    video::-webkit-media-text-track-container {
+        display: none;
+    }
+
     // For embeds
     &__video-embed {
         padding-bottom: 56.25%; /* 16:9 */
@@ -179,7 +188,6 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             height: 100%;
             border: 0;
             user-select: none;
-            pointer-events: none; // To allow mouse events to be captured
         }
 
         // Vimeo hack
@@ -188,6 +196,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             padding-bottom: 200%;
             transform: translateY(-35.95%);
         }
+
+        // To allow mouse events to be captured if full support
+        &.plyr iframe {
+            pointer-events: none;
+        }
     }
 
     // Captions
@@ -206,7 +219,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         span {
             border-radius: 2px;
             padding: 3px 10px;
-            background: transparentize(#000, .9);
+            background: transparentize(#000, .1);
         }
         span:empty {
             display: none;
@@ -231,7 +244,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         background: $plyr-controls-bg;
         line-height: 1;
         text-align: center;
-        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .2);
+        box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
 
         // Clear floats
         &::after {
@@ -360,7 +373,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             $plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
             bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
             border-right: $plyr-border-arrow-size solid transparent;
-            border-top: $plyr-border-arrow-size solid $plyr-tooltip-border-color;
+            border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
             border-left: $plyr-border-arrow-size solid transparent;
             z-index: 1;
         }
@@ -496,6 +509,21 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            @include seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            @include seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            @include seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;
@@ -637,33 +665,33 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             left: 0;
             right: 0;
         }
+    }
 
-        // Hide controls when playing in full screen
+    // Hide controls when playing in full screen
-        &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
+    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-        &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
+    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-            .plyr__controls {
+        .plyr__controls {
-                transform: translateY(100%) translateY($plyr-control-spacing / 2);
+            transform: translateY(100%) translateY($plyr-control-spacing / 2);
-                transition: transform .3s .2s ease;
+            transition: transform .3s .2s ease;
-            }
-            .plyr__captions {
-                bottom: ($plyr-control-spacing / 2);
-                transition: bottom .3s .2s ease;
-            }
-            &.plyr--hover .plyr__controls {
-                transform: translateY(0);
-            }
         }
+        .plyr__captions {
+            bottom: ($plyr-control-spacing / 2);
+            transition: bottom .3s .2s ease;
+        }
+        &.plyr--hover .plyr__controls {
+            transform: translateY(0);
+        }
+    }
 
-        // Captions
+    // Captions
-        &.plyr--fullscreen .plyr__captions,
+    &.plyr--fullscreen .plyr__captions,
-        &--fullscreen-active .plyr__captions,
+    &--fullscreen-active .plyr__captions,
-        &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
+    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-            top: auto;
+        top: auto;
-            bottom: 90px;
+        bottom: 90px;
 
-            @media (min-width: $plyr-bp-control-split) {
+        @media (min-width: $plyr-bp-control-split) {
-                bottom: 60px;
+            bottom: 60px;
-            }
         }
     }