Fix for control tooltips always showing

SASS fix (fixes #149 )
Seek tooltip, bug fixes for SASS, fullscreen and icons
2016-01-25 11:02:35 +11:00 · 2016-01-25 08:36:53 +11:00 · 2016-01-24 11:25:31 +11:00 · 2016-01-23 12:24:58 +11:00 · 2016-01-21 09:49:00 +11:00 · 2016-01-21 09:48:46 +11:00
30 changed files with 337 additions and 228 deletions
--- a/bundles.json
+++ b/bundles.json
@ -4,7 +4,7 @@
            "plyr.css":     ["src/less/plyr.less"]
        },
        "sass": {
-            "plyr.css":     ["src/less/plyr.sass"]
+            "plyr.css":     ["src/sass/plyr.sass"]
        },
        "js": {
            "plyr.js":      ["src/js/plyr.js"]
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,25 @@
 # Changelog

+## 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)
+- Fullscreen fixes for controls not always hiding/showing (fixes #149)
+- Screen reader icon fixes (title was being read twice due to the tooltip/hidden label)
+
+## v1.5.5
+- Fixed controls.md example
+- Bug fix for docs error page
+- Bug fix for controls tooltips
+
+## v1.5.4
+- Minor bug fix for clicking video to play/pause after source change
+
+## v1.5.3
+- Minor bug fix for occasional display of 0:00 as the media duration
+
 ## v1.5.2
 - `handlers` option renamed to `listeners`
 - Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)
--- a/controls.md
+++ b/controls.md
@ -46,65 +46,70 @@ You can include only the controls you need when specifying custom html.
 This is an example `html` option with all controls.

 ```javascript
-["<div class='player-controls'>",
-    "<div class='player-progress'>",
-        "<label for='seek{id}' class='sr-only'>Seek</label>",
-        "<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
-        "<progress class='player-progress-played' max='100' value='0'>",
+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.1' value='0' data-plyr='seek'>",
+        "<progress class='plyr__progress--played' max='100' value='0'>",
            "<span>0</span>% played",
        "</progress>",
-        "<progress class='player-progress-buffer' max='100' value='0'>",
+        "<progress class='plyr__progress--buffer' max='100' value='0'>",
            "<span>0</span>% buffered",
        "</progress>",
    "</div>",
-    "<span class='player-controls-left'>",
-        "<button type='button' data-player='restart'>",
+    "<span class='plyr__controls--left'>",
+        "<button type='button' data-plyr='restart'>",
            "<svg><use xlink:href='#icon-restart'></use></svg>",
-            "<span class='sr-only'>Restart</span>",
+            "<span class='plyr__sr-only'>Restart</span>",
        "</button>",
-        "<button type='button' data-player='rewind'>",
+        "<button type='button' data-plyr='rewind'>",
            "<svg><use xlink:href='#icon-rewind'></use></svg>",
-            "<span class='sr-only'>Rewind {seektime} secs</span>",
+            "<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
        "</button>",
-        "<button type='button' data-player='play'>",
+        "<button type='button' data-plyr='play'>",
            "<svg><use xlink:href='#icon-play'></use></svg>",
-            "<span class='sr-only'>Play</span>",
+            "<span class='plyr__sr-only'>Play</span>",
        "</button>",
-        "<button type='button' data-player='pause'>",
+        "<button type='button' data-plyr='pause'>",
            "<svg><use xlink:href='#icon-pause'></use></svg>",
-            "<span class='sr-only'>Pause</span>",
+            "<span class='plyr__sr-only'>Pause</span>",
        "</button>",
-        "<button type='button' data-player='fast-forward'>",
+        "<button type='button' data-plyr='fast-forward'>",
            "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
-            "<span class='sr-only'>Forward {seektime} secs</span>",
+            "<span class='plyr__sr-only'>Forward {seektime} secs</span>",
        "</button>",
-        "<span class='player-time'>",
-            "<span class='sr-only'>Current time</span>",
-            "<span class='player-current-time'>00:00</span>",
+        "<span class='plyr__time'>",
+            "<span class='plyr__sr-only'>Current time</span>",
+            "<span class='plyr__current-time'>00:00</span>",
        "</span>",
-        "<span class='player-time'>",
-            "<span class='sr-only'>Duration</span>",
-            "<span class='player-duration'>00:00</span>",
+        "<span class='plyr__time'>",
+            "<span class='plyr__sr-only'>Duration</span>",
+            "<span class='plyr__duration'>00:00</span>",
        "</span>",
    "</span>",
-    "<span class='player-controls-right'>",
-        "<button type='button' data-player='mute'>",
-            "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+    "<span class='plyr__controls--right'>",
+        "<button type='button' data-plyr='mute'>",
+            "<svg class='icon--muted'><use xlink:href='#icon-muted'></use></svg>",
            "<svg><use xlink:href='#icon-volume'></use></svg>",
-            "<span class='sr-only'>Toggle Mute</span>",
+            "<span class='plyr__sr-only'>Toggle Mute</span>",
        "</button>",
-        "<label for='volume{id}' class='sr-only'>Volume</label>",
-        "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
-        "<button type='button' data-player='captions'>",
-            "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
+        "<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
+        "<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>",
+        "<button type='button' data-plyr='captions'>",
+            "<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
            "<svg><use xlink:href='#icon-captions-off'></use></svg>",
-            "<span class='sr-only'>Toggle Captions</span>",
+            "<span class='plyr__sr-only'>Toggle Captions</span>",
        "</button>",
-        "<button type='button' data-player='fullscreen'>",
-            "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
+        "<button type='button' data-plyr='fullscreen'>",
+            "<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
            "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
-            "<span class='sr-only'>Toggle Fullscreen</span>",
+            "<span class='plyr__sr-only'>Toggle Fullscreen</span>",
        "</button>",
    "</span>",
 "</div>"].join("\n");
+
+// Setup the player
+plyr.setup('.js-player', {
+    html: controls
+});
 ```
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/dist/sprite.svg
+++ b/dist/sprite.svg
@ -1 +1 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><title>Captions Off</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><title>Captions On</title><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><title>Enter Fullscreen</title><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><title>Exit Fullscreen</title><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><title>Fast Forward</title><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><title>Muted</title><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>Pause</title><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><title>Play</title><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>Rewind</title><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><title>Volume</title><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1H1zm1 12V4h14v10H2z"/><path d="M3 11h3v2H3zM12 11h3v2h-3zM7 11h4v2H7z"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10.3 9.7c.7.677 1.4 0 1.4 0L16 5.4V10h2V3c0-.6-.4-1-1-1h-7v2h4.6l-4.3 4.3s-.7.723 0 1.4z"/><path d="M7 2v2H2v10h14v-1h2v2c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1V3c0-.6.4-1 1-1h6z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M7.7 8.3c-.7-.677-1.4 0-1.4 0L2 12.6V8H0v7c0 .6.4 1 1 1h7v-2H3.4l4.3-4.3s.7-.723 0-1.4z"/><path d="M11 16v-2h5V4H2v1H0V3c0-.6.4-1 1-1h16c.6 0 1 .4 1 1v12c0 .6-.4 1-1 1h-6z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M9.214 2c-.11 0-.225.032-.334.1L4.832 4.91C4.75 4.97 4.65 5 4.55 5H.995C.446 5 0 5.448 0 6v6c0 .552.446 1 .996 1H4.55c.1 0 .2.03.282.09L8.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM7.97 12.834L5.58 11.177c-.166-.115-.364-.178-.566-.178H2.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L7.97 5.165v7.67zM14.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/><path d="M13.957 9.2c.086 1.747 1.514 2.99 2.507 3.648.47.312 1.094.122 1.325-.408l.037-.086c.188-.43.045-.94-.336-1.194-.705-.473-1.585-1.247-1.623-2.065-.032-.676.553-1.468 1.663-2.27.398-.288.53-.84.285-1.275l-.042-.075c-.266-.475-.866-.624-1.3-.312-1.74 1.25-2.586 2.606-2.516 4.037z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><path d="M2 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2H4S2 2 2 4zm2 0h2v10H4V4zM10 4v10c0 2 2 2 2 2h2s2 0 2-2V4c0-2-2-2-2-2h-2s-2 0-2 2zm2 0h2v10h-2V4z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-restart" viewBox="0 0 16 16"><path d="M7.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C4 2.6 2.9 3.2 2 4.1-.7 6.8-.7 11.2 2 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L14 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
--- a/docs/dist/docs.js
+++ b/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]=[],p=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 d={get:p,enumerable:!0,configurable:!0};try{s.defineProperty(n,t,d)}catch(h){-2146823252===h.number&&(d.enumerable=!1,s.defineProperty(n,t,d))}}else s[i].__defineGetter__&&n.__defineGetter__(t,p)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",tooltips:!0,captions:{defaultActive:!0},onSetup:function(){console.log("✓ Setup done")}}),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){if(t in n){var o=document.querySelector(".js-media-player").plyr;switch(t){case n.video:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.0/example_captions_en.vtt","default":!0}]});break;case n.audio:o.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:o.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}s=t;for(var r=i.length-1;r>=0;r--)e(i[r].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)}}(),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)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"));
--- a/docs/error.html
+++ b/docs/error.html
@ -12,7 +12,7 @@
        <main>
            <h1>Doh.</h1>
            <p>Looks like something went wrong.</p>
-            <a href="http://plyr.io" class="btn">Back to plyr.io</a>
+            <a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
        </main>
    </body>
 </html>
--- a/docs/index.html
+++ b/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.0/example_captions_en.vtt" default>
+                        <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.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>
--- a/docs/poster.jpg
+++ b/docs/poster.jpg
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@ -6,14 +6,13 @@

 // Setup the player
 plyr.setup('.js-media-player', {
-	debug: 		true,
-	title: 		'Video demo',
-	tooltips: 	true,
-	captions: {
-		defaultActive: true
+	debug: 				true,
+	title: 				'Video demo',
+	tooltips: 	{
+		controls: 		true
 	},
-	onSetup: function() {
-		console.log('✓ Setup done');
+	captions: {
+		defaultActive: 	true
 	}
 });

@ -66,7 +65,7 @@ shr.setup({
 			history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
 		}
 		if(!video) {
-			newSource(currentType);
+			newSource(currentType, true);
 		}
 	}

@ -84,11 +83,14 @@ shr.setup({
    }

 	// Set a new source
-	function newSource(type) {
-		if(!(type in types)) {
+	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;
 		}

+		// Get plyr instance
 		var player = document.querySelector('.js-media-player').plyr;

 		switch(type) {
@ -109,7 +111,7 @@ shr.setup({
 						kind:   'captions',
 						label:  'English',
 						srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
+						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.vtt',
 						default: true
 					}]
 				});
@ -153,12 +155,15 @@ shr.setup({
 				break;
 		}

+		// Set the current type for next time
 		currentType = type;

+		// Remove active classes
 		for (var x = buttons.length - 1; x >= 0; x--) {
 			toggleClass(buttons[x].parentElement, 'active', false);
 		}

+		// Set active on parent
 		toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
 	}
 })();
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@ -50,7 +50,12 @@ video,
    }
    .plyr__progress {
        border-radius: @border-radius-base @border-radius-base 0 0;
-        overflow: hidden;
+
+        progress,
+        [type='range'] {
+            border-radius: @border-radius-base @border-radius-base 0 0;
+            overflow: hidden;
+        }
    }
 }

--- a/gulpfile.js
+++ b/gulpfile.js
@ -253,6 +253,7 @@ gulp.task("docs", function () {

    // Upload error.html to cdn (as well as docs site)
    gulp.src([paths.docs.root + "error.html"])
+        .pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
        .pipe(gzip())
        .pipe(s3(aws.cdn, options.docs));
 });
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.5.2",
+  "version": "1.5.7",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -15,8 +15,9 @@ We wanted a lightweight, accessible and customizable media player that supports
 - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks
 - **Responsive** - as you'd expect these days
 - **HTML Video & Audio** - support for both formats
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo (beta)
+- **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
 - **[API](#api)** - toggle playback, volume, seeking, and more
+- **[Universal events](#events)** - no messing around with Vimeo and YouTube APIs, all events are universal across formats
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
 - **i18n support** - support for internationalization of controls
 - **No dependencies** - written in "vanilla" JavaScript, no jQuery required
@ -39,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue

 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.2/plyr.js` to `https://cdn.plyr.io/1.5.2/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.7/plyr.js` to `https://cdn.plyr.io/1.5.7/plyr.js`

 ### Bower
 If bower is your thang, you can grab Plyr using:
@ -59,11 +60,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.2/plyr.css">
-<script src="https://cdn.plyr.io/1.5.2/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.7/plyr.css">
+<script src="https://cdn.plyr.io/1.5.7/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.2/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.7/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.
@ -147,7 +148,6 @@ For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div
 </div>
 ```

-
 #### Cross Origin (CORS)
 You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>` elements. This is because the media is loaded from another domain. If your media is hosted on another domain, you may need to add this attribute.

@ -161,7 +161,7 @@ More info on CORS here:
 Here's an example of a default setup:

 ```html
-<script src="https://cdn.plyr.io/1.5.2/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.7/plyr.js"></script>
 <script>plyr.setup();</script>
 ```

@ -259,9 +259,13 @@ Options must be passed as an object to the `setup()` method as above.
  </tr>
  <tr>
    <td><code>tooltips</code></td>
-    <td>Boolean</td>
-    <td><code>false</code></td>
-    <td>Display control labels as tooltips on :hover &amp; :focus (by default, the labels are screen reader only).</td>
+    <td>Object</td>
+    <td><code>{ controls: false, seek: true }</code></td>
+    <td>
+		<strong>controls</strong>: Display control labels as tooltips on :hover &amp; :focus (by default, the labels are screen reader only).
+		<br><br>
+		<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
+	</td>
  </tr>
    <tr>
    <td><code>displayDuration</code></td>
@ -276,10 +280,10 @@ Options must be passed as an object to the `setup()` method as above.
    <td>See <code>plyr.js</code> in <code>/src</code> for more info. You probably don't need to change any of these.</td>
  </tr>
  <tr>
-    <td><code>handlers</code></td>
+    <td><code>listeners</code></td>
    <td>Object</td>
    <td>&mdash;</td>
-    <td>Allows early binding of handlers to Plyr's controls. See <code>controls</code> above for list of controls and see <code>plyr.js</code> in <code>/src</code> for more info.</td>
+    <td>Allows early binding of event listeners to the controls. See <code>controls</code> above for list of controls and see <code>plyr.js</code> in <code>/src</code> for more info.</td>
  </tr>
  <tr>
    <td><code>classes</code></td>
@ -613,19 +617,19 @@ You can listen for events on the element you setup Plyr on. Some events only app
  </thead>
  <tbody>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/canplay" title="/en-US/docs/Web/Events/canplay">canplay</a></code></td>
+		<td><code>canplay</code></td>
 		<td>✔</td>
-		<td>Sent when enough data is available that the media can be played, at least for a couple of frames.&nbsp; This corresponds to the <code>HAVE_ENOUGH_DATA</code>&nbsp;<code>readyState</code>.</td>
+		<td>Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the <code>HAVE_ENOUGH_DATA</code> <code>readyState</code>.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/canplaythrough" title="/en-US/docs/Web/Events/canplaythrough">canplaythrough</a></code></td>
+		<td><code>canplaythrough</code></td>
 		<td></td>
 		<td>Sent when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. <strong>Note</strong>: Manually setting the <code>currentTime</code> will eventually fire a <code>canplaythrough</code> event in firefox. Other browsers might not fire this event.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/emptied" title="/en-US/docs/Web/Events/emptied">emptied</a></code></td>
+		<td><code>emptied</code></td>
 		<td>✔</td>
-		<td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" class="internal" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a>&nbsp;method is called to reload it.</td>
+		<td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <code>load()</code> method is called to reload it.</td>
 	</tr>
 	<tr>
 		<td><code>ended</code></td>
@ -635,70 +639,70 @@ You can listen for events on the element you setup Plyr on. Some events only app
 	<tr>
 		<td><code>error</code></td>
 		<td>✔</td>
-		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information. See <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a> for details.</td>
+		<td>Sent when an error occurs.&nbsp; The element's <code>error</code> attribute contains more information.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/loadeddata" title="/en-US/docs/Web/Events/loadeddata">loadeddata</a></code></td>
+		<td><code>loadeddata/code></td>
 		<td>✔</td>
 		<td>The first frame of the media has finished loading.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/loadedmetadata" title="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a></code></td>
+		<td><code>loadedmetadata</code></td>
 		<td>✔</td>
 		<td>The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/loadstart" title="/en-US/docs/Web/Events/loadstart">loadstart</a></code></td>
+		<td><code>loadstart</code></td>
 		<td>✔</td>
 		<td>Sent when loading of the media begins.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/pause" title="/en-US/docs/Web/Events/pause">pause</a></code></td>
+		<td><code>pause</code></td>
 		<td></td>
 		<td>Sent when playback is paused.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/play" title="/en-US/docs/Web/Events/play">play</a></code></td>
+		<td><code>play</code></td>
 		<td></td>
 		<td>Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior <code>pause</code> event.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/playing" title="/en-US/docs/Web/Events/playing">playing</a></code></td>
+		<td><code>playing</code></td>
 		<td></td>
 		<td>Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/progress" title="/en-US/docs/Web/Events/progress">progress</a></code></td>
+		<td><code>progress</code></td>
 		<td></td>
 		<td>Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's <code>buffered</code> attribute.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/seeked" title="/en-US/docs/Web/Events/seeked">seeked</a></code></td>
+		<td><code>seeked</code></td>
 		<td>✔</td>
 		<td>Sent when a seek operation completes.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/seeking" title="/en-US/docs/Web/Events/seeking">seeking</a></code></td>
+		<td><code>seeking</code></td>
 		<td>✔</td>
 		<td>Sent when a seek operation begins.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/stalled" title="/en-US/docs/Web/Events/stalled">stalled</a></code></td>
+		<td><code>stalled</code></td>
 		<td>✔</td>
 		<td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/timeupdate" title="/en-US/docs/Web/Events/timeupdate">timeupdate</a></code></td>
+		<td><code>timeupdate</code></td>
 		<td></td>
 		<td>The time indicated by the element's <code>currentTime</code> attribute has changed.</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/volumechange" title="/en-US/docs/Web/Events/volumechange">volumechange</a></code></td>
+		<td><code>volumechange</code></td>
 		<td></td>
 		<td>Sent when the audio volume changes (both when the volume is set and when the <code>muted</code> attribute is changed).</td>
 	</tr>
 	<tr>
-		<td><code><a href="/en-US/docs/Web/Events/waiting" title="/en-US/docs/Web/Events/waiting">waiting</a></code></td>
+		<td><code>waiting</code></td>
 		<td>✔</td>
 		<td>Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</td>
 	</tr>
@ -725,6 +729,8 @@ You can listen for events on the element you setup Plyr on. Some events only app
 	</tbody>
 </table>

+Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)
+
 Here's an example of binding an event listener:

 ```javascript
@ -735,23 +741,7 @@ document.querySelector(".js-plyr").addEventListener("playing", function() {

 ## Embeds

-Currently only YouTube is supported. Vimeo will be coming soon. Some HTML5 media events are triggered on the `media` property of the `plyr` object:
- `play`
- `pause`
- `timeupdate`
- `progress`
-
-Due to the way the YouTube API works, the `timeupdate` and `progress` events are triggered by polling every 200ms so the event may trigger without an actual value change. Buffering progress is `media.buffered` in the `plyr` object. It is a a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered.
-
-```javascript
-document.querySelector(".js-plyr").plyr.media.addEventListener("play", function() {
-	console.log("play");
-});
-```
-
-The `.source()` API method can also be used but the video id must be passed as the argument.
-
-Currently caption control is not supported but I will work on this.
+YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.

 ## Fullscreen

--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.5.0
+// plyr.js v1.5.3
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -37,7 +37,10 @@
        seekTime:               10,
        volume:                 5,
        click:                  true,
-        tooltips:               false,
+        tooltips:               {
+            controls:           false,
+            seek:               true
+        },
        displayDuration:        true,
        iconPrefix:             'icon',
        selectors: {
@ -46,7 +49,7 @@
                container:      null,
                wrapper:        '.plyr__controls'
            },
-            labels:             '[data-plyr] .sr-only, label .sr-only',
+            labels:             '[data-plyr]',
            buttons: {
                seek:           '[data-plyr="seek"]',
                play:           '[data-plyr="play"]',
@ -159,15 +162,22 @@
        '<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>% ' + config.i18n.played,
                '</progress>',
                '<progress class="plyr__progress--buffer" max="100" value="0">',
                    '<span>0</span>% ' + config.i18n.buffered,
-                '</progress>',
-            '</div>',
-            '<span class="plyr__controls--left">'];
+                '</progress>'];
+
+        // Seek tooltip
+        if (config.tooltips.seek) {
+            html.push('<span class="plyr__tooltip">0:00</span>');
+        }
+
+        // Close progress
+        html.push('</div>',
+            '<span class="plyr__controls--left">');

        // Restart button
        if (_inArray(config.controls, 'restart')) {
@ -589,6 +599,7 @@
    }

    // Toggle aria-pressed state on a toggle button
+    // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
    function _toggleState(target, state) {
        // Bail if no target
        if(!target) {
@ -735,7 +746,8 @@
    // Player instance
    function Plyr(container) {
        var plyr = this;
-        plyr.container = container;
+        plyr.container = container,
+        plyr.timers = {};

        // Captions functions
        // Seek the manual caption time and update UI
@ -787,6 +799,9 @@
            else {
                plyr.captionsContainer.innerHTML = '';
            }
+
+            // Force redraw
+            // var redraw = plyr.captionsContainer.offsetHeight;
        }

        // Display captions container and button (for initialization)
@ -928,8 +943,8 @@
            container.insertAdjacentHTML('beforeend', html);

            // Setup tooltips
-            if (config.tooltips) {
-                var labels = _getElements(config.selectors.labels);
+            if (config.tooltips.controls) {
+                var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);

                for (var i = labels.length - 1; i >= 0; i--) {
                    var label = labels[i];
@ -975,6 +990,9 @@
                plyr.progress.played.bar      = _getElement(config.selectors.progress.played);
                plyr.progress.played.text     = plyr.progress.played.bar && plyr.progress.played.bar.getElementsByTagName('span')[0];

+                // Seek tooltip
+                plyr.progress.tooltip           = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
+
                // Volume
                plyr.volume                   = _getElement(config.selectors.buttons.volume);

@ -1472,6 +1490,9 @@
                                // Display a cue, if there is one
                                if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
                                    plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
+
+                                    // Force redraw
+                                    // var redraw = plyr.captionsContainer.offsetHeight;
                                }
                            });
                        }
@ -1742,39 +1763,10 @@
            // Set button state
            _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);

-            // Toggle controls visibility based on mouse movement and location
-            var hoverTimer, isMouseOver = false;
-
-            // Show the player controls
-            function _showControls() {
-                // Set shown class
-                _toggleClass(plyr.container, config.classes.hover, true);
-
-                // Clear timer every movement
-                window.clearTimeout(hoverTimer);
-
-                // If the mouse is not over the controls, set a timeout to hide them
-                if (!isMouseOver) {
-                    hoverTimer = window.setTimeout(function() {
-                        _toggleClass(plyr.container, config.classes.hover, false);
-                    }, 2000);
-                }
-            }
-
-            // Check mouse is over the controls
-            function _setMouseOver (event) {
-                isMouseOver = (event.type === 'mouseenter');
-            }
-
+            // Hide on entering full screen
            if (config.fullscreen.hideControls) {
-                // Hide on entering full screen
-                _toggleClass(plyr.controls, config.classes.hover, false);
-
-                // Keep an eye on the mouse location in relation to controls
-                _toggleListener(plyr.controls, 'mouseenter mouseleave', _setMouseOver, plyr.isFullscreen);
-
-                // Show the controls on mouse move
-                _toggleListener(plyr.container, 'mousemove', _showControls, plyr.isFullscreen);
+                //_toggleClass(plyr.controls, config.classes.hover, false);
+                _showControls(true);
            }

            // Trigger an event
@ -1924,10 +1916,10 @@
            var loading = (event.type === 'waiting');

            // Clear timer
-            clearTimeout(plyr.loadingTimer);
+            clearTimeout(plyr.timers.loading);

            // Timer to prevent flicker when seeking
-            plyr.loadingTimer = setTimeout(function() {
+            plyr.timers.loading = setTimeout(function() {
                _toggleClass(plyr.container, config.classes.loading, loading);
            }, (loading ? 250 : 0));
        }
@ -2034,6 +2026,9 @@
            if (plyr.duration) {
                _updateTimeDisplay(duration, plyr.duration);
            }
+
+            // Update the tooltip (if visible)
+            _updateSeekTooltip();
        }

        // Handle time change event
@ -2050,6 +2045,73 @@
            _updateProgress(event);
        }

+        // Update hover tooltip for seeking
+        function _updateSeekTooltip(event) {
+            // Bail if setting not true
+            if (!config.tooltips.seek) {
+                return;
+            }
+
+            // Calculate percentage
+            var clientRect  = plyr.progress.container.getBoundingClientRect(),
+                percent     = 0,
+                visible     = config.classes.tooltip + '--visible';
+
+            // Determine percentage, if already visible
+            if (!event) {
+                if(_hasClass(plyr.progress.tooltip, visible)) {
+                    percent = plyr.progress.tooltip.style.left.replace('%', '');
+                }
+                else {
+                    return;
+                }
+            }
+            else {
+                percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
+            }
+
+            // Set bounds
+            if (percent < 0) {
+                percent = 0;
+            }
+            else if (percent > 100) {
+                percent = 100;
+            }
+
+            // Display the time a click would seek to
+            _updateTimeDisplay(((plyr.media.duration / 100) * percent), plyr.progress.tooltip);
+
+            // Set position
+            plyr.progress.tooltip.style.left = percent + "%";
+
+            // Show/hide the tooltip
+            // If the event is a moues in/out and percentage is inside bounds
+            if(_inArray(['mouseenter', 'mouseleave'], event.type)) {
+                _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
+            }
+        }
+
+        // Show the player controls in fullscreen mode
+        function _showControls(force) {
+            // We're only worried about fullscreen
+            if (!plyr.isFullscreen) {
+                return;
+            }
+
+            // Set shown class
+            _toggleClass(plyr.container, config.classes.hover, true);
+
+            // Clear timer every movement
+            window.clearTimeout(plyr.timers.hover);
+
+            // If the mouse is not over the controls, set a timeout to hide them
+            plyr.timers.hover = window.setTimeout(function() {
+                if (!plyr.controls.mouseover || (force === true)) {
+                    _toggleClass(plyr.container, config.classes.hover, false);
+                }
+            }, 2000);
+        }
+
        // Add common function to retrieve media source
        function _source(source) {
            // If not null or undefined, parse it
@ -2321,19 +2383,16 @@
            // Captions
            _on(plyr.buttons.captions, 'click', _toggleCaptions);

-            // Click video
-            if (plyr.type === 'video' && config.click) {
-                _on(plyr.videoContainer, 'click', function() {
-                    if (plyr.media.paused) {
-                        _play();
-                    }
-                    else if (plyr.media.ended) {
-                        _seek();
-                        _play();
-                    }
-                    else {
-                        _pause();
-                    }
+            // Seek tooltip
+            _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
+
+            // Toggle controls visibility based on mouse movement and location
+            var hoverTimer, isMouseOver = false;
+
+            if (config.fullscreen.hideControls) {
+                // Keep an eye on the mouse location in relation to controls
+                _on(plyr.controls, 'mouseenter mouseleave', function() {
+                    plyr.controls.mouseover = (event.type === 'mouseenter');
                });
            }
        }
@ -2347,7 +2406,7 @@
            _on(plyr.media, 'timeupdate', _seekManualCaptions);

            // Display duration
-            _on(plyr.media, 'loadedmetadata', _displayDuration);
+            _on(plyr.media, 'durationchange loadedmetadata', _displayDuration);

            // Handle the media finishing
            _on(plyr.media, 'ended', function() {
@ -2372,6 +2431,28 @@
            // Loading
            _on(plyr.media, 'waiting canplay seeked', _checkLoading);

+            // Click video
+            if (config.click) {
+                _on(plyr.media, 'click', function() {
+                    if (plyr.media.paused) {
+                        _play();
+                    }
+                    else if (plyr.media.ended) {
+                        _seek();
+                        _play();
+                    }
+                    else {
+                        _pause();
+                    }
+                });
+            }
+
+            // Listen for mouse move to show controls
+            if (config.fullscreen.hideControls) {
+                // Show the controls on mouse move
+                _on(plyr.media, 'mousemove', _showControls);
+            }
+
            // Proxy events to container
            _on(plyr.media, config.events.join(' '), function(event) {
                _triggerEvent(plyr.container, event.type);
@ -2680,7 +2761,7 @@
 }));

 // Custom event polyfill
-//
+// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 (function () {
    function CustomEvent (event, params) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -32,7 +32,7 @@

 // Tooltips
@plyr-tooltip-bg:                @plyr-controls-bg;
-@plyr-tooltip-border-color:      fade(@plyr-gray-dark, 10%);
+@plyr-tooltip-border-color:      fade(darken(@plyr-controls-bg, 5%), 10%);
@plyr-tooltip-border-width:      1px;
@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;
@ -178,6 +178,7 @@
            height: 100%;
            border: 0;
            user-select: none;
+            pointer-events: none; // To allow mouse events to be captured
        }

        // Vimeo hack
@ -322,6 +323,7 @@

    // Tooltips
    &__tooltip {
+        visibility: hidden;
        position: absolute;
        z-index: 2;
        bottom: 100%;
@ -337,9 +339,9 @@
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, (@plyr-tooltip-padding * 3)) scale(.8);
+        transform: translate(-50%, 10px) scale(.8);
        transform-origin: 50% 100%;
-        transition: transform .2s .1s ease, opacity .2s .1s ease;
+        transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;

        // Arrows
        &::after,
@ -371,7 +373,9 @@
        }
    }
    button:hover .plyr__tooltip,
-    button.tab-focus:focus .plyr__tooltip {
+    button.tab-focus:focus .plyr__tooltip,
+    &__tooltip--visible {
+        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
@ -484,6 +488,11 @@
                border: 0;
            }
        }
+
+        // Seek tooltip to show time
+        .plyr__tooltip {
+            left: 0;
+        }
    }

    // Loading state
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -46,7 +46,7 @@ $plyr-control-color-hover:       null !default;

 // Tooltips
 $plyr-tooltip-bg:                $plyr-controls-bg !default;
-$plyr-tooltip-border-color:      transparentize(@gray-dark, .1) !default;
+$plyr-tooltip-border-color:      transparentize($plyr-gray-dark, .1) !default;
 $plyr-tooltip-border-width:      1px;
 $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;
@ -59,7 +59,7 @@ $plyr-progress-bg:               transparentize($plyr-gray, .2) !default;
 $plyr-progress-playing-bg:       $plyr-blue !default;
 $plyr-progress-buffered-bg:      transparentize($plyr-gray, .25) !default;
 $plyr-progress-loading-size:     40px !default;
-$plyr-progress-loading-bg:       transparentize(#000, .15); !default;
+$plyr-progress-loading-bg:       transparentize(#000, .15) !default;

 // Volume
 $plyr-volume-track-height:       6px !default;
@ -178,6 +178,8 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
            width: 100%;
            height: 100%;
            border: 0;
+            user-select: none;
+            pointer-events: none; // To allow mouse events to be captured
        }

        // Vimeo hack
@ -322,6 +324,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la

    // Tooltips
    &__tooltip {
+        visibility: hidden;
        position: absolute;
        z-index: 2;
        bottom: 100%;
@ -337,9 +340,9 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, ($plyr-tooltip-padding * 3)) scale(.8);
+        transform: translate(-50%, 10px) scale(.8);
        transform-origin: 50% 100%;
-        transition: transform .2s .1s ease, opacity .2s .1s ease;
+        transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;

        // Arrows
        &::after,
@ -371,7 +374,9 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
        }
    }
    button:hover .plyr__tooltip,
-    button.tab-focus:focus .plyr__tooltip {
+    button.tab-focus:focus .plyr__tooltip,
+    &__tooltip--visible {
+        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
@ -387,7 +392,7 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la

    // Playback progress
    // <progress> element
-    &-progress {
+    &__progress {
        position: absolute;
        bottom: 100%;
        left: 0;
@ -484,6 +489,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
                border: 0;
            }
        }
+
+        // Seek tooltip to show time
+        .plyr__tooltip {
+            left: 0;
+        }
    }

    // Loading state
@ -627,33 +637,33 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
            left: 0;
            right: 0;
        }
+    }

-        // Hide controls when playing in full screen
-        &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-        &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-            .plyr__controls {
-                transform: translateY(100%) translateY($plyr-control-spacing / 2);
-                transition: transform .3s .2s ease;
-            }
-            .plyr__captions {
-                bottom: ($plyr-control-spacing / 2);
-                transition: bottom .3s .2s ease;
-            }
-            &.plyr--hover .plyr__controls {
-                transform: translateY(0);
-            }
+    // Hide controls when playing in full screen
+    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
+    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
+        .plyr__controls {
+            transform: translateY(100%) translateY($plyr-control-spacing / 2);
+            transition: transform .3s .2s ease;
        }
+        .plyr__captions {
+            bottom: ($plyr-control-spacing / 2);
+            transition: bottom .3s .2s ease;
+        }
+        &.plyr--hover .plyr__controls {
+            transform: translateY(0);
+        }
+    }

-        // Captions
-        &.plyr--fullscreen .plyr__captions,
-        &--fullscreen-active .plyr__captions,
-        &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-            top: auto;
-            bottom: 90px;
+    // Captions
+    &.plyr--fullscreen .plyr__captions,
+    &--fullscreen-active .plyr__captions,
+    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
+        top: auto;
+        bottom: 90px;

-            @media (min-width: $plyr-bp-control-split) {
-                bottom: 60px;
-            }
+        @media (min-width: $plyr-bp-control-split) {
+            bottom: 60px;
        }
    }

--- a/src/sprite/icon-captions-off.svg
+++ b/src/sprite/icon-captions-off.svg
@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <title>Captions Off</title>
    <g>
        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z"></path>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-captions-on.svg
+++ b/src/sprite/icon-captions-on.svg
@ -1,10 +1,9 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Captions On</title>
    <g>
        <path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z"></path>
        <rect x="3" y="11" width="3" height="2"></rect>
        <rect x="12" y="11" width="3" height="2"></rect>
        <rect x="7" y="11" width="4" height="2"></rect>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-enter-fullscreen.svg
+++ b/src/sprite/icon-enter-fullscreen.svg
@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Enter Fullscreen</title>
-    <g>
-        <g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
-            <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
-            <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
-        </g>
+    <g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
+        <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
+        <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-exit-fullscreen.svg
+++ b/src/sprite/icon-exit-fullscreen.svg
@ -1,10 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Exit Fullscreen</title>
-    <g>
-        <g transform="translate(0.000000, 2.000000)">
-            <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
-            <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
-        </g>
+    <g transform="translate(0.000000, 2.000000)">
+        <path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
+        <path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<title>Fast Forward</title>
 	<path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
 </svg>
--- a/src/sprite/icon-muted.svg
+++ b/src/sprite/icon-muted.svg
@ -1,9 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<title>Muted</title>
    <g transform="translate(0.000000, 2.000000)">
        <path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z"></path>
        <path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z"></path>
        <path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Pause</title>
    <g transform="translate(2.000000, 2.000000)">
        <path d="M0,2 L0,12 C5.24848613e-17,14 2,14 2,14 L4,14 C4,14 6,14 6,12 C6,11.786438 6,11.572876 6,11 L6,2 C6,3.17446247e-09 4,0 4,0 L2,0 C2,0 0,0 0,2 Z M2,2 L4,2 L4,12 L2,12 L2,2 Z"></path>
        <path d="M8,2 L8,12 C8,14 10,14 10,14 L12,14 C12,14 14,14 14,12 C14,11.786438 14,11.572876 14,11 L14,2 C14,3.17446247e-09 12,0 12,0 L10,0 C10,0 8,0 8,2 Z M10,2 L12,2 L12,12 L10,12 L10,2 Z"></path>
    </g>
-</svg>
+</svg>
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<title>Play</title>
 	<path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
 </svg>
--- a/src/sprite/icon-restart.svg
+++ b/src/sprite/icon-restart.svg
@ -1,8 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
+<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 <path d="M7.7,1.2l0.7,6.4l2.1-2.1c1.9,1.9,1.9,5.1,0,7C9.6,13.5,8.3,14,7,14c-1.3,0-2.6-0.5-3.5-1.5
 	c-1.9-1.9-1.9-5.1,0-7c0.6-0.6,1.4-1.1,2.3-1.3L5.2,2.3C4,2.6,2.9,3.2,2,4.1c-2.7,2.7-2.7,7.1,0,9.9c1.3,1.3,3.1,2,4.9,2
 	c1.9,0,3.6-0.7,4.9-2c2.7-2.7,2.7-7.1,0-9.9l2.2-2.2L7.7,1.2z"/>
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg viewBox="0 0 18 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <title>Rewind</title>
 	<path d="M17.569,9.246 L7,3 C6.448,3 6,3.448 6,4 L6,5.954 L1,3 C0.448,3 0,3.448 0,4 L0,16 C0,16.552 0.448,17 1,17 L6,14.045 L6,16 C6,16.552 6.448,17 7,17 L17.569,10.754 C17.836,10.596 18,10.31 18,10 C18,9.69 17.836,9.403 17.569,9.246 L17.569,9.246 Z M6,11.722 L2,14.086 L2,5.914 L6,8.278 L6,11.722 L6,11.722 Z M8,14.086 L8,5.914 L14.915,10 L8,14.086 L8,14.086 Z" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>
-</svg>
+</svg>
--- a/src/sprite/icon-volume.svg
+++ b/src/sprite/icon-volume.svg
@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-	<title>Volume</title>
 	<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
 	<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
 </svg>
Author	SHA1	Message	Date
Sam Potts	b006b73c69	Fix for control tooltips always showing	2016-01-25 11:02:35 +11:00
Sam Potts	3127cea1b2	SASS fix (fixes #149 )	2016-01-25 08:36:53 +11:00
Sam Potts	a965d8a893	Seek tooltip, bug fixes for SASS, fullscreen and icons	2016-01-24 11:25:31 +11:00
Sam Potts	173e651e3f	Comment	2016-01-23 12:24:58 +11:00
Sam Potts	fa5cb828c0	Update controls.md	2016-01-21 09:49:00 +11:00
Sam Potts	5978810b7f	Update controls.md	2016-01-21 09:48:46 +11:00
Sam Potts	6c251794c8	Merge branch 'master' of github.com:selz/plyr	2016-01-21 09:43:40 +11:00
Sam Potts	76917751e3	Small bug fixes	2016-01-21 09:43:27 +11:00
Sam Potts	e75a9b89b0	Merge pull request #147 from christianpv/patch-3 Update bundles.json - Fix path to sass dir.	2016-01-21 09:06:08 +11:00
Christian Pena	a0fe61011f	Update bundles.json - Fix path to sass dir.	2016-01-20 12:40:04 -05:00
Sam Potts	84a1b03d7d	Docs update	2016-01-19 17:15:50 +11:00
Sam Potts	b9177e7892	Minor bug fix for clicking video to play/pause after source change	2016-01-19 11:36:30 +11:00
Sam Potts	fd12247a62	Fix for video click	2016-01-19 11:34:04 +11:00
Sam Potts	20a71300a5	Controls	2016-01-19 09:54:23 +11:00
Sam Potts	70c5b24678	Added reference	2016-01-19 09:35:10 +11:00
Sam Potts	a87e87f93c	Version bump	2016-01-19 09:32:04 +11:00
Sam Potts	1b54ff0ad3	Listen for durationchange	2016-01-19 09:30:37 +11:00
Sam Potts	3075e1eda2	Docs	2016-01-19 09:22:39 +11:00
Sam Potts	8d1e014a40	Docs	2016-01-19 00:46:00 +11:00
Sam Potts	0c52fe0c7c	Added events line	2016-01-19 00:43:22 +11:00
Sam Potts	bb25f8d02a	Removed broken links	2016-01-19 00:41:30 +11:00
Sam Potts	42c955c5eb	Removed onSetup from docs code	2016-01-19 00:33:22 +11:00