Readme

- Controls improvements (Fixes #103)
- YouTube bug fixes (Fixes #105)
- Internationalization support (Fixes #101)
- Captions legibility improvements

bower.json

@@ -17,7 +17,7 @@
         "dist/plyr.js",
         "dist/sprite.svg",
         "src/less/plyr.less",
-        "src/sass/plyr.sass",
+        "src/sass/plyr.scss",
         "src/js/plyr.js"
     ],
     "ignore": [

bundles.json

@@ -17,6 +17,7 @@
         "js": {
             "docs.js": [
                 "docs/src/js/lib/hogan-3.0.2.mustache.js",
+                "docs/src/js/lib/classlist.js",
                 "docs/dist/templates.js",
                 "docs/src/js/docs.js"
             ]

changelog.md

@@ -1,5 +1,62 @@
 # Changelog
 
+# v1.3.0
+- Internationalization support (i18n) using default controls (required markup changes to controls)
+- ARIA enhancements for controls (required markup changes to controls)
+- Captions legibility improvements
+- YouTube bug fixes
+
+## v1.2.6
+- SASS updates and fixes (cheers @ChristianPV)
+
+## v1.2.5
+- Fix for YouTube quality (let them decide quality)
+
+## v1.2.4
+- Fix for omitted kind attribute on <track> (fixes #88)
+
+## v1.2.3
+- Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)
+- Docs tidy up
+- Fullscreen for Safari fix (Fixes #96)
+
+## v1.2.2
+- Fix for :focus keyboard vs mouse (Fixes #61)
+- Fix for caption positioning in full screen (Fixes #92)
+
+## v1.2.1
+- Tooltip bug fix
+
+# v1.2.0
+- Added YouTube support
+
+## v1.1.13
+- Added icon prefix option for when using default controls
+
+## v1.1.13
+- Logic tweaks for hiding controls in fullscreen
+
+## v1.1.12
+- Bug fix for Chrome Canary
+
+## v1.1.11
+- Bug fix 
+
+## v1.1.10
+- Bug fix 
+
+## v1.1.9
+- Bug fix for 1.1.8
+
+## v1.1.8
+- setVolume API method improvements (Fixes #83)
+
+## v1.1.7
+- Restore classname on destroy()
+
+## v1.1.6
+- New API methods (fixes #77), Fix for non strict mode (fixes #78)
+
 ## v1.1.5
 - Fix for incorrect `isFullscreen()` return value in Mozilla (Fixes #38)
 

controls.md

@@ -1,10 +1,36 @@
-# Controls HTML
+# Controls
 
 This is the markup that is rendered for the Plyr controls. You can use the default controls or provide a customized version of markup based on your needs. 
 
-The demo Plyr setup uses a Hogan template. This purely to allow for localization at a later date. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured.
+## Internationalization using default controls
 
-## Requirements
+You can provide an `i18n` object as one of your options when initialising the plugin which we be used when rendering the controls. 
+
+### Example
+
+```javascript
+i18n: {
+    restart:            "Restart",
+    rewind:             "Rewind {seektime} secs",
+    play:               "Play",
+    pause:              "Pause",
+    forward:            "Forward {seektime} secs",
+    played:             "played",
+    buffered:           "buffered",
+    currentTime:        "Current time",
+    duration:           "Duration",
+    volume:             "Volume",
+    toggleMute:         "Toggle Mute",
+    toggleCaptions:     "Toggle Captions",
+    toggleFullscreen:   "Toggle Fullscreen"
+}
+```
+
+Note: `{seektime}` will be replaced with your configured seek time or the default. For example "Forward {seektime} secs" would render as "Forward 10 secs".
+
+## Using custom HTML
+
+The example on [plyr.io](http://plyr.io) setup uses a Hogan template. Check out `controls.html` in `/src/templates` to get an idea of how the default html is structured.
 
 The classes and data attributes used in your template should match the `selectors` option. 
 
@@ -15,7 +41,7 @@ You need to add several placeholders to your html template that are replaced whe
 
 You can include only the controls you need when specifying custom html. 
 
-## Example
+### Example
 
 This is an example `html` option with all controls.
 
@@ -62,20 +88,18 @@ This is an example `html` option with all controls.
         "</span>",
     "</span>",
     "<span class='player-controls-right'>",
-        "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+        "<button type="button" data-player="mute">",
-        "<label id='mute{id}' for='mute{id}'>",
             "<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>",
-        "</label>",
+        "</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'>",
-        "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
+        "<button type="button" data-player="captions">",
-        "<label for='captions{id}'>",
             "<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>",
-        "</label>",
+        "</button>",
         "<button type='button' data-player='fullscreen'>",
             "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
             "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",

docs/dist/templates.js

@@ -1,2 +1,2 @@
     var templates = {};
-    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("    <div class=\"player-progress\">");t.b("\n" + i);t.b("        <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b("        <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b("        <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% played");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("        <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% buffered");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <span class=\"player-controls-left\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b("            <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b("            <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"player-controls-right\">");t.b("\n" + i);t.b("        <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("        <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("            <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b("        </label>");t.b("\n");t.b("\n" + i);t.b("        <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("        <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("        <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("        <label for=\"captions{id}\">");t.b("\n" + i);t.b("            <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b("        </label>");t.b("\n");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("            <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("    <div class=\"player-progress\">");t.b("\n" + i);t.b("        <label for=\"seek{id}\" class=\"sr-only\">Seek</label>");t.b("\n" + i);t.b("        <input id=\"seek{id}\" class=\"player-progress-seek\" type=\"range\" min=\"0\" max=\"100\" step=\"0.5\" value=\"0\" data-player=\"seek\">");t.b("\n" + i);t.b("        <progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% played");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("        <progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("            <span>0</span>% buffered");t.b("\n" + i);t.b("        </progress>");t.b("\n" + i);t.b("    </div>");t.b("\n" + i);t.b("    <span class=\"player-controls-left\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-restart\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Rewind {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"play\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Forward {seektime} secs</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Current time</span>");t.b("\n" + i);t.b("            <span class=\"player-current-time\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("        <span class=\"player-time\">");t.b("\n" + i);t.b("            <span class=\"sr-only\">Duration</span>");t.b("\n" + i);t.b("            <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("        </span>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("    <span class=\"player-controls-right\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"mute\">");t.b("\n" + i);t.b("            <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-volume\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Mute</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <label for=\"volume{id}\" class=\"sr-only\">Volume</label>");t.b("\n" + i);t.b("        <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" step=\"0.5\" value=\"0\" data-player=\"volume\">");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"captions\">");t.b("\n" + i);t.b("            <svg class=\"icon-captions-on\"><use xlink:href=\"#icon-captions-on\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-captions-off\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Captions</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("        <button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("            <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-exit-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <svg><use xlink:href=\"#icon-enter-fullscreen\"></use></svg>");t.b("\n" + i);t.b("            <span class=\"sr-only\">Toggle Fullscreen</span>");t.b("\n" + i);t.b("        </button>");t.b("\n" + i);t.b("    </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});

docs/error.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.1.12/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.3.0/docs.css">
     </head>
     <body>
         <main>

docs/index.html

@@ -8,31 +8,41 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <!-- Styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.12/plyr.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/plyr.css?3">
 
         <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.1.12/docs.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/docs.css?1">
     </head>
     <body>
         <header>
             <h1>Plyr</h1>
             <p>A simple HTML5 media player with custom controls and WebVTT captions by <a href="https://twitter.com/sam_potts" target="_blank">@sam_potts</a></p>
-            <ul class="actions">
+            <nav>
+                <ul>
                     <li>
-                    <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-download">Download on GitHub</a>
+                        <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary">Download on GitHub</a>
                         <span class="btn-count js-stargazers-count">&hellip;</span>
                     </li>
                     <li>
-                    <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn btn-twitter js-popup" data-window-height="250" data-window-width="500">Tweet</a>
+                        <a href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&url=http%3A%2F%2Fplyr.io&via=Sam_Potts" target="_blank" class="btn js-popup" data-window-height="250" data-window-width="500">Tweet</a>
                         <span class="btn-count js-tweet-count">&hellip;</span>
                     </li>
                 </ul>
+            </nav>
         </header>
 
-        <main>
+        <main role="main" id="main">
-            <section class="example-video">
+            <nav class="btn-bar nav-panel">
+                <ul>
+                    <li><a href="#video" class="btn active btn-small">Video</a></li>
+                    <li><a href="#youtube" class="btn btn-small">YouTube</a></li>
+                    <li><a href="#audio" class="btn btn-small">Audio</a></li>
+                </ul>
+            </nav>
+            <div class="panels">
+                <section class="panel example-video active" id="video">
                     <div class="player">
-                    <video poster="https://cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
+                        <video poster="https://cdn.plyr.io/static/poster.jpg" controls crossorigin>
                             <!-- Video files -->
                             <source src="https://cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
                             <source src="https://cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
@@ -46,29 +56,28 @@
                     </div>
                     <small>Big Buck Bunny. More info can be found at <a href="https://peach.blender.org" target="_blank">peach.blender.org</a>.</small>
                 </section>
-
+                <section class="panel example-video" id="youtube">
-            <section class="example-audio">
+                    <div class="player">
+                        <div data-video-id="Au87oAJ2jeE" data-type="youtube"></div>
+                    </div>
+                    <small>Envato's "Made By" interview of <a href="https://www.youtube.com/watch?v=Au87oAJ2jeE" target="_blank">Dan Cederholm</a> from <a href="https://dribbble.com" target="_blank">Dribbble</a>.</small>
+                </section>
+                <section class="panel example-audio" id="audio">
                     <div class="player">
                         <audio controls>
                             <!-- Audio files -->
-                        <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+                            <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
-                        <source src="https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
+                            <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
                             
                             <!-- Fallback for browsers that don't support the <audio> element -->
-                        <a href="https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
+                            <a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
                         </audio>
                     </div>
                     <small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
                 </section>
+            </div>
         </main>
 
-        <footer>
-            <p>Used by &hellip;</p>
-            <a href="https://selz.com" target="_blank" class="logo">
-                <img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
-            </a>
-        </footer>
-
         <!-- Load SVG defs -->
         <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
         <script>
@@ -83,18 +92,18 @@
                 a.send();
                 a.onload = function(){
                     var c = d.createElement("div");
-                    c.style.display="none";
+                    c.setAttribute("hidden", "");
                     c.innerHTML = a.responseText;
                     b.insertBefore(c, b.childNodes[0]);
                 }
             }
-        })(document, "https://cdn.plyr.io/1.1.12/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.3.0/sprite.svg");
         </script>
 
         <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.1.12/plyr.js?1"></script>
+        <script src="https://cdn.plyr.io/1.3.0/plyr.js?1"></script>
 
         <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.1.12/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.3.0/docs.js?1"></script>
     </body>
 </html>

docs/src/js/docs.js

@@ -10,10 +10,15 @@ plyr.setup({
 	volume: 9,
 	title: 	"Video demo",
 	html: 	templates.controls.render({}),
+	tooltips: true,
 	captions: {
 		defaultActive: true
 	},
 	onSetup: function() {
+		if(!("media" in this)) {
+			return;
+		}
+
 		var player 	= this,
 			type 	= player.media.tagName.toLowerCase(),
 			toggle 	= document.querySelector("[data-toggle='fullscreen']");
@@ -26,6 +31,8 @@ plyr.setup({
 	}
 });
 
+// General functions
+(function() { 
 	// Popup
 	function popup(event) {
 		// Prevent the link opening
@@ -101,7 +108,7 @@ function displayCount(selector, count) {
 
 	// Add star
 	function formatGitHubCount(count) {
-	return "★ " + count;
+		return "★ " + count;
 	}
 
 	// Check if it's in session storage first
@@ -136,6 +143,33 @@ else {
 		});
 	}
 
+	// Tabs
+	var tabs = document.querySelectorAll(".nav-panel a"),
+		panels = document.querySelectorAll(".panels > .panel"),
+		activeClass = "active";
+
+	for (var i = tabs.length - 1; i >= 0; i--) {
+		tabs[i].addEventListener("click", togglePanel);
+	}
+
+	function togglePanel(event) {
+		event.preventDefault();
+
+		var tab = event.target,
+			panel = document.querySelector(tab.getAttribute("href"));
+
+		for (var i = panels.length - 1; i >= 0; i--) {
+			panels[i].classList.remove(activeClass);
+		}
+
+		for (var x = tabs.length - 1; x >= 0; x--) {
+			tabs[x].classList.remove(activeClass);
+		}
+
+		panel.classList.add(activeClass);
+		event.target.classList.add(activeClass);
+	}
+})();
 
 // Google analytics 
 // For demo site (http://[www.]plyr.io) only

docs/src/js/lib/classlist.js

@@ -0,0 +1,237 @@
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 1.1.20150312
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: Dedicated to the public domain.
+ *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
+ */
+
+/*global self, document, DOMException */
+
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
+if ("document" in self) {
+
+// Full polyfill for browsers with no classList support
+if (!("classList" in document.createElement("_"))) {
+
+(function (view) {
+
+"use strict";
+
+if (!('Element' in view)) return;
+
+var
+	  classListProp = "classList"
+	, protoProp = "prototype"
+	, elemCtrProto = view.Element[protoProp]
+	, objCtr = Object
+	, strTrim = String[protoProp].trim || function () {
+		return this.replace(/^\s+|\s+$/g, "");
+	}
+	, arrIndexOf = Array[protoProp].indexOf || function (item) {
+		var
+			  i = 0
+			, len = this.length
+		;
+		for (; i < len; i++) {
+			if (i in this && this[i] === item) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	// Vendors: please allow content code to instantiate DOMExceptions
+	, DOMEx = function (type, message) {
+		this.name = type;
+		this.code = DOMException[type];
+		this.message = message;
+	}
+	, checkTokenAndGetIndex = function (classList, token) {
+		if (token === "") {
+			throw new DOMEx(
+				  "SYNTAX_ERR"
+				, "An invalid or illegal string was specified"
+			);
+		}
+		if (/\s/.test(token)) {
+			throw new DOMEx(
+				  "INVALID_CHARACTER_ERR"
+				, "String contains an invalid character"
+			);
+		}
+		return arrIndexOf.call(classList, token);
+	}
+	, ClassList = function (elem) {
+		var
+			  trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
+			, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
+			, i = 0
+			, len = classes.length
+		;
+		for (; i < len; i++) {
+			this.push(classes[i]);
+		}
+		this._updateClassName = function () {
+			elem.setAttribute("class", this.toString());
+		};
+	}
+	, classListProto = ClassList[protoProp] = []
+	, classListGetter = function () {
+		return new ClassList(this);
+	}
+;
+// Most DOMException implementations don't allow calling DOMException's toString()
+// on non-DOMExceptions. Error's toString() is sufficient here.
+DOMEx[protoProp] = Error[protoProp];
+classListProto.item = function (i) {
+	return this[i] || null;
+};
+classListProto.contains = function (token) {
+	token += "";
+	return checkTokenAndGetIndex(this, token) !== -1;
+};
+classListProto.add = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+	;
+	do {
+		token = tokens[i] + "";
+		if (checkTokenAndGetIndex(this, token) === -1) {
+			this.push(token);
+			updated = true;
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.remove = function () {
+	var
+		  tokens = arguments
+		, i = 0
+		, l = tokens.length
+		, token
+		, updated = false
+		, index
+	;
+	do {
+		token = tokens[i] + "";
+		index = checkTokenAndGetIndex(this, token);
+		while (index !== -1) {
+			this.splice(index, 1);
+			updated = true;
+			index = checkTokenAndGetIndex(this, token);
+		}
+	}
+	while (++i < l);
+
+	if (updated) {
+		this._updateClassName();
+	}
+};
+classListProto.toggle = function (token, force) {
+	token += "";
+
+	var
+		  result = this.contains(token)
+		, method = result ?
+			force !== true && "remove"
+		:
+			force !== false && "add"
+	;
+
+	if (method) {
+		this[method](token);
+	}
+
+	if (force === true || force === false) {
+		return force;
+	} else {
+		return !result;
+	}
+};
+classListProto.toString = function () {
+	return this.join(" ");
+};
+
+if (objCtr.defineProperty) {
+	var classListPropDesc = {
+		  get: classListGetter
+		, enumerable: true
+		, configurable: true
+	};
+	try {
+		objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+	} catch (ex) { // IE 8 doesn't support enumerable:true
+		if (ex.number === -0x7FF5EC54) {
+			classListPropDesc.enumerable = false;
+			objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+		}
+	}
+} else if (objCtr[protoProp].__defineGetter__) {
+	elemCtrProto.__defineGetter__(classListProp, classListGetter);
+}
+
+}(self));
+
+} else {
+// There is full or partial native classList support, so just check if we need
+// to normalize the add/remove and toggle APIs.
+
+(function () {
+	"use strict";
+
+	var testElement = document.createElement("_");
+
+	testElement.classList.add("c1", "c2");
+
+	// Polyfill for IE 10/11 and Firefox <26, where classList.add and
+	// classList.remove exist but support only one argument at a time.
+	if (!testElement.classList.contains("c2")) {
+		var createMethod = function(method) {
+			var original = DOMTokenList.prototype[method];
+
+			DOMTokenList.prototype[method] = function(token) {
+				var i, len = arguments.length;
+
+				for (i = 0; i < len; i++) {
+					token = arguments[i];
+					original.call(this, token);
+				}
+			};
+		};
+		createMethod('add');
+		createMethod('remove');
+	}
+
+	testElement.classList.toggle("c3", false);
+
+	// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+	// support the second argument.
+	if (testElement.classList.contains("c3")) {
+		var _toggle = DOMTokenList.prototype.toggle;
+
+		DOMTokenList.prototype.toggle = function(token, force) {
+			if (1 in arguments && !this.contains(token) === !force) {
+				return force;
+			} else {
+				return _toggle.call(this, token);
+			}
+		};
+
+	}
+
+	testElement = null;
+}());
+
+}
+
+}

docs/src/less/components/base.less

@@ -0,0 +1,52 @@
+// ==========================================================================
+// Base layout
+// ==========================================================================
+
+// BORDER-BOX ALL THE THINGS! 
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*, *::after, *::before {  
+    box-sizing: border-box; 
+}
+
+// Hidden
+[hidden] {
+    display: none;
+}
+
+// Base
+html {
+    height: 100%;
+    font-size: 100%;
+    background: linear-gradient(#fff, @body-background) fixed;
+}
+body {
+    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    text-align: center;
+    color: @gray;
+    .font-smoothing(on);
+    padding: 0 (@padding-base / 2);
+}
+
+// Header
+header {
+    padding: @padding-base;
+    margin-bottom: @padding-base;
+
+    p {
+        .font-size(18);
+    }
+    @media (min-width: @screen-sm) {
+        padding-top: (@padding-base * 3);
+        padding-bottom: (@padding-base * 3);
+    }
+}
+
+// Sections
+section {
+    padding-bottom: @padding-base;
+
+    @media (min-width: @screen-sm) {
+        padding-bottom: (@padding-base * 2);
+    }
+}

docs/src/less/components/buttons.less

@@ -0,0 +1,146 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+nav {
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		font-size: 0;
+	}
+	li {
+		display: inline-block;
+		margin-top: (@padding-base / 2);
+		.font-size();
+		white-space: nowrap;
+	}
+	li + li {
+		margin-left: @padding-base;
+	}
+}
+
+// Tabs
+.btn-bar {
+	position: relative;
+	margin: 0 auto @padding-base;
+	max-width: @example-width-video;
+	white-space: nowrap;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background: @gray-lighter;
+	}
+
+	ul {
+		position: relative;
+		z-index: 1;
+		display: inline-block;
+		user-select: none;
+	}
+	li {
+		margin: 0;
+
+		&:first-child .btn {
+			border-radius: 4px 0 0 4px;
+		}
+		&:last-child .btn {
+			border-radius: 0 4px 4px 0;
+		}
+		& + li .btn {
+			margin-left: -1px;
+		}
+	}
+	.btn {
+		display: block;
+		border-radius: 0;
+	}
+	.active {
+		&:extend(.btn-primary);
+	}
+	.btn.active {
+		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (min-width: 560px) {
+		margin-bottom: (@padding-base * 2);
+	}
+}
+
+// Shared 
+.btn,
+.btn-count {
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: @border-radius-base;
+	font-weight: 600;
+	user-select: none;
+}
+
+// Buttons 
+.btn {
+	padding: (@padding-base / 2) @padding-base;
+	background: @body-background;
+	border: 1px solid @gray-light;
+	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+	text-shadow: 0 1px 1px #fff;
+	color: @gray;
+
+	&:hover,
+	&:focus {
+		background-color: #fff;
+		border-color: darken(@gray-light, 5%);
+		color: @link-color;
+		outline: 0;
+	}
+}
+.btn-primary {
+	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-color: @link-color;
+	border-color: darken(@link-color, 10%);
+	box-shadow: 0 1px 1px rgba(0,0,0, .15);
+	text-shadow: 0 1px 1px rgba(0,0,0, .1);
+	color: #fff;
+	
+	&:hover,
+	&:focus {
+		color: #fff;
+		border-color: darken(@link-color, 20%);
+	}
+}
+.btn-small {
+	padding-top: ceil(@padding-base / 3);
+	padding-bottom: ceil(@padding-base / 3);
+}
+
+// Count bubble
+.btn-count {
+	position: relative;
+	margin-left: 6px;
+	padding: ((@padding-base / 2) - 1px);
+	background: #fff;
+	border: 1px solid @gray-light;
+
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: @arrow-size;
+		height: @arrow-size;
+		left: 1px;
+		top: 50%;
+		margin-top: -(@arrow-size / 2);
+
+		background: inherit;
+		border: inherit;
+		border-width: 1px 0 0 1px;
+		transform: rotate(-45deg) translate(-50%, -50%);
+	}
+}

docs/src/less/components/error.less

@@ -0,0 +1,19 @@
+// ==========================================================================
+// Errors (AWS pages)
+// ==========================================================================
+
+// Error page
+html.error,
+.error body {
+    height: 100%;
+}
+.error body {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+}
+.error main {
+    display: table-cell;
+    width: 100%;
+    vertical-align: middle;
+}

docs/src/less/components/examples.less

@@ -0,0 +1,61 @@
+// ==========================================================================
+// Examples
+// ==========================================================================
+
+// Example players
+.example-audio .player,
+.example-video .player {
+    margin: 0 auto @padding-base;
+
+    &-controls {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
+}
+.example-audio .player {
+    max-width: @example-width-audio;
+
+    &-controls {
+        border-radius: @border-radius-base;
+    }
+    &-progress {
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        overflow: hidden;
+    }
+}
+// Base styles
+.example-video .player {
+    max-width: @example-width-video;
+
+    video,
+    iframe {
+        border-radius: @border-radius-base;
+    }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
+}
+
+// Style full supported player
+.example-video .player-video,
+.example-video .player-youtube {
+    video,
+    iframe {
+        border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
+    &-fullscreen,
+    &.fullscreen-active {
+        max-width: none;
+
+        .player-controls,
+        video,
+        iframe {
+            border-radius: 0;
+        }
+        iframe {
+            -webkit-mask-image: none;
+        }
+    }
+}

docs/src/less/components/panels.less

@@ -0,0 +1,13 @@
+// ==========================================================================
+// Panels
+// ==========================================================================
+
+// Panels
+.panel {
+    display: none;
+
+    &.active {
+        display: block;
+        animation: fade-in .3s ease;
+    }
+}

docs/src/less/components/type.less

@@ -0,0 +1,47 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+// Headings
+h1,
+h2 {
+    letter-spacing: -.025em;
+    color: #2E3C44;
+    margin: 0 0 (@padding-base / 2);
+    line-height: 1.2;
+    .font-smoothing();
+}
+h1 {
+    .font-size(64);
+    color: #3498DB;
+}
+
+// Paragraph and small
+p,
+small {
+    margin: 0 0 @padding-base;
+}
+small {
+    display: block;
+    padding: 0 (@padding-base / 2);
+    .font-size(14);
+}
+
+// Links
+a {
+    text-decoration: none;
+    color: @link-color;
+    border-bottom: 1px solid currentColor;
+    transition: background .3s ease, color .3s ease;
+
+    &:hover,
+    &:focus {
+        color: @gray-dark;
+    }
+    &:focus {
+        .tab-focus();
+    }
+    &.logo {
+        border: 0;
+    }
+}

docs/src/less/docs.less

@@ -2,232 +2,33 @@
 // HTML5 Video Player Demo Page
 // ==========================================================================
 
-// Reset
+// CSS Reset
 @import "lib/normalize.less";
+
 // Mixins
 @import "lib/mixins.less";
-// Fonts - docs only!
-@import "lib/fontface.less";
 
 // Variables
-// ---------------------------------------
+@import "variables.less";
-// Colors
-@blue:                      #3498DB;
-@gray-dark:                 #343f4a;
-@gray:                      #565d64;
-@gray-light:                #cbd0d3;
 
-// Elements
+// Animation
-@link-color:                @blue;
+@import "lib/animation.less";
-@padding-base:              20px;
-@arrow-size:                8px;
 
-// Breakpoints
+// Base layout
-@screen-md:                 768px;
+@import "components/base.less";
-
-// BORDER-BOX ALL THE THINGS! 
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {  
-    box-sizing: border-box; 
-}
-
-// Base
-body {
-    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: #fff;
-    line-height: 1.5;
-    text-align: center;
-    color: #6D797F;
-}
-
-// Error page
-html.error,
-.error body {
-    height: 100%;
-}
-.error body {
-    width: 100%;
-    display: table;
-    table-layout: fixed;
-}
-.error main {
-    display: table-cell;
-    width: 100%;
-    vertical-align: middle;
-}
 
 // Type
-h1,
+@import "lib/fontface.less";
-h2 {
+@import "components/type.less";
-    letter-spacing: -.025em;
-    color: #2E3C44;
-    margin: 0 0 (@padding-base / 2);
-    line-height: 1.2;
-    .font-smoothing();
-}
-h1 {
-    .font-size(64);
-    color: #3498DB;
-}
-p,
-small {
-    margin: 0 0 @padding-base;
-}
-small {
-    display: block;
-    padding: 0 (@padding-base / 2);
-    .font-size(14);
-}
 
-// Header
+// Buttons
-header {
+@import "components/buttons.less";
-    padding: @padding-base;
-    margin-bottom: @padding-base;
 
-    p {
+// Panels
-        .font-size(18);
+@import "components/panels.less";
-    }
-    @media (min-width: 560px) {
-        padding-top: (@padding-base * 3);
-        padding-bottom: (@padding-base * 3);
-    }
-}
 
-// Sections
+// Error
-section {
+@import "components/error.less";
-    padding-bottom: @padding-base;
 
-    @media (min-width: 560px) {
+// Examples
-        padding-bottom: (@padding-base * 2);
+@import "components/examples.less";
-    }
-}
-
-// Links & Buttons
-.actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    font-size: 0;
-
-    li {
-        display: inline-block;
-        margin-top: (@padding-base / 2);
-        .font-size();
-        white-space: nowrap;
-    }
-    li + li {
-        margin-left: @padding-base;
-    }
-}
-a {
-    text-decoration: none;
-    color: @link-color;
-    border-bottom: 1px solid currentColor;
-    transition: all .3s ease;
-
-    &:hover,
-    &:focus {
-        color: #000;
-    }
-    &:focus {
-        .tab-focus();
-    }
-    &.logo {
-        border: 0;
-    }
-}
-.btn,
-.btn-count {
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: 3px;
-    .font-smoothing(on);
-    font-weight: 600;
-    user-select: none;
-}
-.btn {
-    padding: (@padding-base / 2) @padding-base;
-    background: @link-color;
-    border: 0;
-    color: #fff;
-    
-    &:hover,
-    &:focus {
-        color: #fff;
-        background: darken(@link-color, 5%);
-    }
-
-    &-twitter {
-        background: #8799A2;
-
-        &:hover,
-        &:focus {
-            background: darken(#8799A2, 5%);
-        }
-    }
-}
-.btn-count {
-    position: relative;
-    margin-left: 6px;
-    padding: ((@padding-base / 2) - 1px);
-    background: #fff;
-    border: 1px solid @gray-light;
-
-    &::before {
-        content: "";
-        position: absolute;
-        display: block;
-        width: @arrow-size;
-        height: @arrow-size;
-        left: 1px;
-        top: 50%;
-        margin-top: -(@arrow-size / 2);
-
-        background: inherit;
-        border: inherit;
-        border-width: 1px 0 0 1px;
-        transform: rotate(-45deg) translate(-50%, -50%);
-    }
-}
-
-// Example players
-.example-audio .player,
-.example-video .player {
-    margin: 0 auto @padding-base;
-
-    &-controls {
-        border-radius: 0 0 4px 4px;
-    }
-}
-.example-audio .player {
-    max-width: 520px;
-
-    &-controls {
-        border-radius: 4px;
-    }
-    &-progress {
-        border-radius: 4px 4px 0 0;
-        overflow: hidden;
-    }
-}
-.example-video .player {
-    max-width: 1200px;
-
-    video {
-        border-radius: 4px 4px 0 0;
-    }
-    &-fullscreen,
-    &.fullscreen-active {
-        max-width: none;
-    }
-}
-
-
-// Footer
-footer {
-    margin-bottom: @padding-base;
-
-    p {
-        margin-bottom: (@padding-base / 2);
-    }
-}

docs/src/less/lib/animation.less

@@ -0,0 +1,9 @@
+// ==========================================================================
+// Animations
+// ==========================================================================
+
+// Fade
+@keyframes fade-in {
+	0% 		{ opacity: 0 }
+	100% 	{ opacity: 1 }
+}

docs/src/less/lib/fontface.less

@@ -1,16 +1,18 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
 @font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), 
+            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
-            url("//cdn.plyr.io/fonts/avenir-medium.ttf")  format("truetype");
     font-style:   normal;
     font-weight:  400;
 }
 @font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), 
+            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
-            url("//cdn.plyr.io/fonts/avenir-bold.ttf")  format("truetype");
     font-style:   normal;
     font-weight:  600;
 }

docs/src/less/lib/mixins.less

@@ -17,7 +17,6 @@
     // Default
     outline: thin dotted @gray-dark;
     // Webkit
-    //outline: 5px auto -webkit-focus-ring-color;
     outline-offset: 1px;
 }
 
@@ -25,7 +24,7 @@
 // Leave <body> at 100%/16px
 // ---------------------------------------
 .font-size(@font-size: 16){
-    @rem: round((@font-size / 16), 1);
+    @rem: round((@font-size / 16), 3);
     font-size: (@font-size * 1px);
     font-size: ~"@{rem}rem";
 }

docs/src/less/variables.less

@@ -0,0 +1,30 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+// Colors
+@blue:                      #3498db;
+@gray-dark:                 #343f4a;
+@gray:                      #55646b;
+@gray-light:                #cbd0d3;
+@gray-lighter:              #dbe3e8;
+@off-white:                 #f2f5f7;
+
+// Base
+@body-background: 			@off-white;
+
+// Elements
+@link-color:                @blue;
+@padding-base:              20px;
+@arrow-size:                8px;
+
+// Breakpoints
+@screen-sm:                 480px;
+@screen-md:                 768px;
+
+// Radii
+@border-radius-base: 		4px;
+
+// Examples
+@example-width-audio: 		520px;
+@example-width-video: 		1200px;

docs/src/templates/controls.html

@@ -40,23 +40,18 @@
         </span>
     </span>
     <span class="player-controls-right">
-        <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
+        <button type="button" data-player="mute">
-        <label id="mute{id}" for="mute{id}">
             <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>
-        </label>
+        </button>
-
         <label for="volume{id}" class="sr-only">Volume</label>
         <input id="volume{id}" class="player-volume" type="range" min="0" max="10" step="0.5" value="0" data-player="volume">
-
+        <button type="button" data-player="captions">
-        <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
-        <label for="captions{id}">
             <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>
-        </label>
+        </button>
-
         <button type="button" data-player="fullscreen">
             <svg class="icon-exit-fullscreen"><use xlink:href="#icon-exit-fullscreen"></use></svg>
             <svg><use xlink:href="#icon-enter-fullscreen"></use></svg>

gulpfile.js

@@ -165,11 +165,6 @@ build.templates();
 build.less(bundles.docs.less, "docs");
 build.js(bundles.docs.js, "docs");
 
-// Default gulp task
-gulp.task("default", function(){
-    run("templates", tasks.js, tasks.less, "sprite");
-});
-
 // Build all JS (inc. templates)
 gulp.task("js", function(){
     run("templates", tasks.js);
@@ -185,12 +180,17 @@ gulp.task("watch", function () {
     // Plyr core
     gulp.watch(paths.plyr.src.js, tasks.js);
     gulp.watch(paths.plyr.src.less, tasks.less);
-    gulp.watch(paths.plyr.src.sprite, "sprite");
+    gulp.watch(paths.plyr.src.sprite, ["sprite"]);
 
     // Docs
     gulp.watch(paths.docs.src.js, tasks.js);
     gulp.watch(paths.docs.src.less, tasks.less);
-    gulp.watch(paths.docs.src.templates, "js");
+    gulp.watch(paths.docs.src.templates, ["js"]);
+});
+
+// Default gulp task
+gulp.task("default", function(){
+    run("templates", tasks.js, tasks.less, "sprite", "watch");
 });
 
 // Publish a version to CDN and docs
@@ -203,7 +203,7 @@ maxAge  = 31536000, // seconds 1 year
 options = {
     cdn: {
         headers: {
-            "Cache-Control": "max-age=" + maxAge + ", no-transform, public",
+            "Cache-Control": "max-age=" + maxAge,
             "Vary": "Accept-Encoding"
         },
         gzippedOnly: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.1.12",
+  "version": "1.3.0",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",

readme.md

@@ -3,20 +3,22 @@ A simple, accessible HTML5 media player.
 
 [Checkout the demo](http://plyr.io)
 
-[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?2)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io)
 
 ## Why?
-We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
+We wanted a lightweight, accessible and customisable media player that just 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. 
 
 ## Features
-- **Accessible** - full support for captions and screen readers.
+- **Accessible** - full support for VTT captions and screen readers.
-- **Lightweight** - just 6.4KB minified and gzipped.
+- **Lightweight** - just 8KB minified and gzipped.
-- **Customisable** - make the player look how you want with the markup you want.
+- **[Customisable](#html)** - make the player look how you want with the markup you want.
 - **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.
 - **Audio & Video** - support for both formats.
-- **API** - toggle playback, volume, seeking, and more.
+- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
-- **Fullscreen** - supports native fullscreen with fallback to "full window" modes.
+- **[API](#api)** - toggle playback, volume, seeking, and more.
+- **[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. 
 
 Oh and yes, it works with Bootstrap. 
@@ -25,10 +27,11 @@ Oh and yes, it works with Bootstrap.
 Check out [the changelog](changelog.md)
 
 ## Planned development
-- Playlists (audio and video)
+- Playlists
-- YouTube and Vimeo support
+- ~~YouTube~~ and Vimeo support
 - Playback speed
 - Multiple language captions (with selection)
+- Audio captions
 ... and whatever else has been raised in [issues](https://github.com/Selz/plyr/issues)
 
 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.
@@ -37,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.1.12/plyr.js` to `https://cdn.plyr.io/1.1.12/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.3.0/plyr.js` to `https://cdn.plyr.io/1.3.0/plyr.js`
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -57,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.1.12/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/plyr.css">
-<script src="https://cdn.plyr.io/1.1.12/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.3.0/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.1.12/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.3.0/sprite.svg`.
 
 ### CSS
 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. 
@@ -78,13 +81,13 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
 (function(d, p){
 	var a = new XMLHttpRequest(),
 		b = d.body;
-	a.open("GET",p,!0);
+	a.open("GET", p, true);
 	a.send();
 	a.onload = function(){
 		var c = d.createElement("div");
 		c.style.display = "none";
 		c.innerHTML = a.responseText;
-		b.insertBefore(c,b.childNodes[0])
+		b.insertBefore(c, b.childNodes[0]);
 	}
 })(document, "dist/sprite.svg");
 </script>
@@ -126,6 +129,14 @@ And the same for `<audio>`
 </div>
 ```	
 
+For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`):
+
+```html
+<div class="player">
+	<div data-video-id="L1h9xxCU20g" data-type="youtube"></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. 
 
@@ -172,6 +183,18 @@ You can pass the following options to the setup method using `plyr.setup({...})`
     <td><code>["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"]</code></td>
     <td>Toggle which control elements you would like to display when using the default controls html. If you specify a <code>html</code> option, this is redundant. The default value is to display everything.</td>
   </tr>
+  <tr>
+    <td><code>i18n</code></td>
+    <td>Object</td>
+    <td><code><a href="controls.md">See controls.md</a></code></td>
+    <td>Used for internationalisation (i18n) of the tooltips/labels within the buttons.</td>
+  </tr>
+  <tr>
+    <td><code>iconPrefix</code></td>
+    <td>String</td>
+    <td><code>icon</code></td>
+    <td>Specify the id prefix for the icons used in the default controls (e.g. "icon-play" would be "icon"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.</td>
+  </tr>
   <tr>
     <td><code>debug</code></td>
     <td>Boolean</td>
@@ -329,7 +352,7 @@ Here's a list of the methods supported:
   <tr>
     <td><code>support(...)</code></td>
     <td>String</td>
-    <td>Determine if a player supports a certain MIME type.</td>
+    <td>Determine if a player supports a certain MIME type. This is not supported for embedded content (YouTube).</td>
   </tr>
   <tr>
     <td><code>source(...)</code></td>
@@ -344,6 +367,9 @@ Here's a list of the methods supported:
       <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>
       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>
+      Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
     </td>
   </tr>
   <tr>
@@ -378,6 +404,26 @@ media.addEventListener("playing", function() {
 A complete list of events can be found here:
 [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
 
+## 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(".player").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. 
+
 ## 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 `player-fullscreen` class to your container.

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.1.11
+// plyr.js v1.3.0
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -9,6 +9,7 @@
 
 (function (api) {
     "use strict";
+    /*global YT*/
 
     // Globals
     var fullscreen, config;
@@ -22,6 +23,7 @@
         click:                  true,
         tooltips:               false,
         displayDuration:        true,
+        iconPrefix:             "icon",
         selectors: {
             container:          ".player",
             controls:           ".player-controls",
@@ -48,16 +50,16 @@
             duration:           ".player-duration"
         },
         classes: {
-            video:              "player-video",
             videoWrapper:       "player-video-wrapper",
-            audio:              "player-audio",
+            embedWrapper:       "player-video-embed",
+            type:               "player-{0}",
             stopped:            "stopped",
             playing:            "playing",
             muted:              "muted",
             loading:            "loading",
             tooltip:            "player-tooltip",
             hidden:             "sr-only",
-            hover:              "hover",
+            hover:              "player-hover",
             captions: {
                 enabled:        "captions-enabled",
                 active:         "captions-active"
@@ -81,7 +83,21 @@
             key:                "plyr_volume"
         },
         controls:               ["restart", "rewind", "play", "fast-forward", "current-time", "duration", "mute", "volume", "captions", "fullscreen"],
-        onSetup:                function() {}, 
+        i18n: {
+            restart:            "Restart",
+            rewind:             "Rewind {seektime} secs",
+            play:               "Play",
+            pause:              "Pause",
+            forward:            "Forward {seektime} secs",
+            played:             "played",
+            buffered:           "buffered",
+            currentTime:        "Current time",
+            duration:           "Duration",
+            volume:             "Volume",
+            toggleMute:         "Toggle Mute",
+            toggleCaptions:     "Toggle Captions",
+            toggleFullscreen:   "Toggle Fullscreen"
+        }
     };
 
     // Build the default HTML
@@ -93,10 +109,10 @@
                 "<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'>",
-                    "<span>0</span>% played",
+                    "<span>0</span>% " + config.i18n.played,
                 "</progress>",
                 "<progress class='player-progress-buffer' max='100' value='0'>",
-                    "<span>0</span>% buffered",
+                    "<span>0</span>% " + config.i18n.buffered,
                 "</progress>",
             "</div>",
             "<span class='player-controls-left'>"];
@@ -105,8 +121,8 @@
         if(_inArray(config.controls, "restart")) {
             html.push(
                 "<button type='button' data-player='restart'>",
-                    "<svg><use xlink:href='#icon-restart'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>",
-                    "<span class='sr-only'>Restart</span>",
+                    "<span class='sr-only'>" + config.i18n.restart + "</span>",
                 "</button>"
             );
         }
@@ -115,8 +131,8 @@
         if(_inArray(config.controls, "rewind")) {
             html.push(
                 "<button type='button' data-player='rewind'>",
-                    "<svg><use xlink:href='#icon-rewind'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>",
-                    "<span class='sr-only'>Rewind {seektime} secs</span>",
+                    "<span class='sr-only'>" + config.i18n.rewind + "</span>",
                 "</button>"
             );
         }
@@ -125,12 +141,12 @@
         if(_inArray(config.controls, "play")) {
             html.push(
                 "<button type='button' data-player='play'>",
-                    "<svg><use xlink:href='#icon-play'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-play'></use></svg>",
-                    "<span class='sr-only'>Play</span>",
+                    "<span class='sr-only'>" + config.i18n.play + "</span>",
                 "</button>",
                 "<button type='button' data-player='pause'>",
-                    "<svg><use xlink:href='#icon-pause'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-pause'></use></svg>",
-                    "<span class='sr-only'>Pause</span>",
+                    "<span class='sr-only'>" + config.i18n.pause + "</span>",
                 "</button>"
             );
         }
@@ -139,8 +155,8 @@
         if(_inArray(config.controls, "fast-forward")) {
             html.push(
                 "<button type='button' data-player='fast-forward'>",
-                    "<svg><use xlink:href='#icon-fast-forward'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-fast-forward'></use></svg>",
-                    "<span class='sr-only'>Forward {seektime} secs</span>",
+                    "<span class='sr-only'>" + config.i18n.forward + "</span>",
                 "</button>"
             );
         }
@@ -149,7 +165,7 @@
         if(_inArray(config.controls, "current-time")) {
             html.push(
                 "<span class='player-time'>",
-                    "<span class='sr-only'>Current time</span>",
+                    "<span class='sr-only'>" + config.i18n.currentTime + "</span>",
                     "<span class='player-current-time'>00:00</span>",
                 "</span>"
             );
@@ -159,7 +175,7 @@
         if(_inArray(config.controls, "duration")) {
             html.push(
                 "<span class='player-time'>",
-                    "<span class='sr-only'>Duration</span>",
+                    "<span class='sr-only'>" + config.i18n.duration + "</span>",
                     "<span class='player-duration'>00:00</span>",
                 "</span>"
             );
@@ -174,19 +190,18 @@
         // Toggle mute button
         if(_inArray(config.controls, "mute")) {
             html.push(
-                "<input class='inverted sr-only' id='mute{id}' type='checkbox' data-player='mute'>",
+                "<button type='button' data-player='mute'>",
-                "<label id='mute{id}' for='mute{id}'>",
+                    "<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>",
-                    "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>",
-                    "<svg><use xlink:href='#icon-volume'></use></svg>",
+                    "<span class='sr-only'>" + config.i18n.toggleMute + "</span>",
-                    "<span class='sr-only'>Toggle Mute</span>",
+                "</button>"
-                "</label>"
             );
         }
 
         // Volume range control
         if(_inArray(config.controls, "volume")) {
             html.push(
-                "<label for='volume{id}' class='sr-only'>Volume</label>",
+                "<label for='volume{id}' class='sr-only'>" + config.i18n.volume + "</label>",
                 "<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>"
             );
         }
@@ -194,12 +209,11 @@
         // Toggle captions button
         if(_inArray(config.controls, "captions")) {
             html.push(
-                "<input class='sr-only' id='captions{id}' type='checkbox' data-player='captions'>",
+                "<button type='button' data-player='captions'>",
-                "<label for='captions{id}'>",
+                    "<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
-                    "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>",
-                    "<svg><use xlink:href='#icon-captions-off'></use></svg>",
+                    "<span class='sr-only'>" + config.i18n.toggleCaptions + "</span>",
-                    "<span class='sr-only'>Toggle Captions</span>",
+                "</button>"
-                "</label>"
             );
         }
 
@@ -207,9 +221,9 @@
         if(_inArray(config.controls, "fullscreen")) {
             html.push(
                 "<button type='button' data-player='fullscreen'>",
-                    "<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
+                    "<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>",
-                    "<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
+                    "<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>",
-                    "<span class='sr-only'>Toggle Fullscreen</span>",
+                    "<span class='sr-only'>" + config.i18n.toggleFullscreen + "</span>",
                 "</button>"
             );
         }
@@ -330,6 +344,18 @@
         return false;
     }
 
+    // Inject a script
+    function _injectScript(source) {
+        if(document.querySelectorAll("script[src='" + source + "']").length) {
+            return;
+        }
+
+        var tag = document.createElement("script");
+        tag.src = source;
+        var firstScriptTag = document.getElementsByTagName("script")[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+    }
+
     // Element exists in an array
     function _inArray(haystack, needle) {
         return Array.prototype.indexOf && (haystack.indexOf(needle) != -1);
@@ -464,18 +490,15 @@
         element.dispatchEvent(fauxEvent);
     }
 
-    // Toggle checkbox
+    // Toggle aria-pressed state on a toggle button
-    function _toggleCheckbox(event) {
+    function _toggleState(target, state) {
-        // Only listen for return key
+        // Get state
-        if(event.keyCode && event.keyCode != 13) {
+        state = (typeof state === "boolean" ? state : !target.getAttribute("aria-pressed"));
-            return true;
-        }
         
-        // Toggle the checkbox
+        // Set the attribute on target
-        event.target.checked = !event.target.checked;
+        target.setAttribute("aria-pressed", state);
         
-        // Trigger change event
+        return state;
-        _triggerEvent(event.target, "change");
     }
 
     // Get percentage
@@ -515,12 +538,12 @@
             },
             browserPrefixes = "webkit moz o ms khtml".split(" ");
 
-        // check for native support
+        // Check for native support
         if (typeof document.cancelFullScreen != "undefined") {
             fullscreen.supportsFullScreen = true;
         }
         else {
-            // check for fullscreen support by vendor prefix
+            // Check for fullscreen support by vendor prefix
             for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
                 fullscreen.prefix = browserPrefixes[i];
 
@@ -537,12 +560,6 @@
             }
         }
 
-        // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported
-        // https://bugs.webkit.org/show_bug.cgi?id=121496
-        if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
-             fullscreen.supportsFullScreen = false;
-        }
-
         // Update methods to do something useful
         if (fullscreen.supportsFullScreen) {
             // Yet again Microsoft awesomeness, 
@@ -551,9 +568,8 @@
 
             fullscreen.isFullScreen = function(element) {
                 if(typeof element == "undefined") {
-                    element = document;
+                    element = document.body;
                 }
-
                 switch (this.prefix) {
                     case "":
                         return document.fullscreenElement == element;
@@ -564,7 +580,10 @@
                 }
             };
             fullscreen.requestFullScreen = function(element) {
-                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+                if(typeof element == "undefined") {
+                    element = document.body;
+                }
+                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
             };
             fullscreen.cancelFullScreen = function() {
                 return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
@@ -627,7 +646,7 @@
                     player.currentCaption = player.captions[player.subcount][1];
 
                 // Render the caption
-                player.captionsContainer.innerHTML = player.currentCaption;
+                player.captionsContainer.innerHTML = player.currentCaption.trim();
             }
             else {
                 // Clear the caption
@@ -646,7 +665,7 @@
 
             if (config.captions.defaultActive) {
                 _toggleClass(player.container, config.classes.captions.active, true);
-                player.buttons.captions.checked = true;
+                _toggleState(player.buttons.captions, true);
             }
         }
 
@@ -785,15 +804,15 @@
             }
         }
 
-        // Setup aria attributes
+        // Setup aria attribute for play
-        function _setupAria() {
+        function _setupPlayAria() {
             // If there's no play button, bail
             if(!player.buttons.play) {
                 return;
             }
 
             // Find the current text
-            var label = player.buttons.play.innerText || "Play";
+            var label = player.buttons.play.innerText || config.i18n.play;
 
             // If there's a media title set, use that for the label
             if (typeof(config.title) !== "undefined" && config.title.length) {
@@ -816,7 +835,7 @@
                 player.media.removeAttribute("controls");
         
                 // Add type class
-                _toggleClass(player.container, config.classes[player.type], true);
+                _toggleClass(player.container, config.classes.type.replace("{0}", player.type), true);
 
                 // If there's no autoplay attribute, assume the video is stopped and add state class
                 _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
@@ -840,20 +859,170 @@
                 }
             }
 
+            // YouTube
+            if(player.type == "youtube") {
+                _setupYouTube(player.media.getAttribute("data-video-id"));
+            }
+
             // Autoplay
             if(player.media.getAttribute("autoplay") !== null) {
                 _play();
             }
         }
 
+        // Setup YouTube
+        function _setupYouTube(id) {
+            // Remove old containers
+            var containers = _getElements("[id^='youtube']");
+            for (var i = containers.length - 1; i >= 0; i--) {
+                _remove(containers[i]);
+            }
+
+            // Create the YouTube container
+            var container = document.createElement("div");
+            container.setAttribute("id", "youtube-" + Math.floor(Math.random() * (10000)));
+            player.media.appendChild(container);
+
+            // Add embed class for responsive
+            _toggleClass(player.media, config.classes.videoWrapper, true);
+            _toggleClass(player.media, config.classes.embedWrapper, true);
+
+            if(typeof YT === "object") {
+                _YTReady(id, container);
+            }
+            else {
+                // Load the API
+                _injectScript("https://www.youtube.com/iframe_api");
+
+                // Setup callback for the API
+                window.onYouTubeIframeAPIReady = function () { _YTReady(id, container); }
+            }
+        }
+
+        // Handle API ready
+        function _YTReady(id, container) {
+            _log("YouTube API Ready");
+
+            // Setup timers object
+            // We have to poll YouTube for updates
+            if(!("timer" in player)) {
+                player.timer = {};
+            }
+
+            // Setup instance
+            // https://developers.google.com/youtube/iframe_api_reference
+            player.embed = new YT.Player(container.id, {
+                videoId: id,
+                playerVars: {
+                    autoplay: 0,
+                    controls: (player.supported.full ? 0 : 1),
+                    rel: 0,
+                    showinfo: 0,
+                    iv_load_policy: 3,
+                    cc_lang_pref: "en",
+                    wmode: "transparent",
+                    modestbranding: 1,
+                    disablekb: 1
+                },
+                events: {
+                    "onReady": function(event) {
+                        // Get the instance
+                        var instance = event.target;
+
+                        // Create a faux HTML5 API using the YouTube API
+                        player.media.play = function() { instance.playVideo(); };
+                        player.media.pause = function() { instance.pauseVideo(); };
+                        player.media.stop = function() { instance.stopVideo(); };
+                        player.media.duration = instance.getDuration();
+                        player.media.paused = true;
+                        player.media.currentTime = instance.getCurrentTime();
+                        player.media.muted = instance.isMuted();
+
+                        // Trigger timeupdate
+                        _triggerEvent(player.media, "timeupdate");
+
+                        // Reset timer
+                        window.clearInterval(player.timer.buffering);
+
+                        // Setup buffering
+                        player.timer.buffering = window.setInterval(function() { 
+                            // Get loaded % from YouTube
+                            player.media.buffered = instance.getVideoLoadedFraction();
+                            
+                            // Trigger progress
+                            _triggerEvent(player.media, "progress");
+
+                            // Bail if we're at 100%
+                            if(player.media.buffered === 1) {
+                                window.clearInterval(player.timer.buffering);
+                            }
+                        }, 200);
+
+                        if(player.supported.full) {
+                            // Only setup controls once
+                            if(!player.container.querySelectorAll(config.selectors.controls).length) {
+                                _setupInterface();
+                            }
+
+                            // Display duration if available
+                            if(config.displayDuration) {
+                                _displayDuration();
+                            }
+                        }
+                    },
+                    "onStateChange": function(event) {
+                        // Get the instance
+                        var instance = event.target;
+
+                        // Reset timer
+                        window.clearInterval(player.timer.playing);
+
+                        // Handle events
+                        // -1   Unstarted
+                        // 0    Ended
+                        // 1    Playing
+                        // 2    Paused
+                        // 3    Buffering
+                        // 5    Video cued    
+                        switch(event.data) {
+                            case 0: 
+                                player.media.paused = true;
+                                _triggerEvent(player.media, "ended");
+                                break;
+
+                            case 1:
+                                player.media.paused = false;
+                                _triggerEvent(player.media, "play");
+
+                                // Poll to get playback progress
+                                player.timer.playing = window.setInterval(function() {
+                                    // Set the current time
+                                    player.media.currentTime = instance.getCurrentTime();
+
+                                    // Trigger timeupdate
+                                    _triggerEvent(player.media, "timeupdate");
+                                }, 200);
+
+                                break;
+
+                            case 2:
+                                player.media.paused = true;
+                                _triggerEvent(player.media, "pause");
+                                break;
+                        }
+                    }
+                }
+            });
+        }
+
         // Setup captions
         function _setupCaptions() {
             if(player.type === "video") {
                 // Inject the container
-                player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>");
+                player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "' aria-live='assertive'><span></span></div>");
 
                 // Cache selector
-                player.captionsContainer = _getElement(config.selectors.captions);
+                player.captionsContainer = _getElement(config.selectors.captions).querySelector("span");
 
                 // Determine if HTML5 textTracks is supported
                 player.usingTextTracks = false;
@@ -868,8 +1037,8 @@
 
                 for (var i = 0; i < children.length; i++) {
                     if (children[i].nodeName.toLowerCase() === "track") {
-                        kind = children[i].getAttribute("kind");
+                        kind = children[i].kind;
-                        if (kind === "captions") {
+                        if (kind === "captions" || kind === "subtitles") {
                             captionSrc = children[i].getAttribute("src");
                         }
                     }
@@ -902,8 +1071,7 @@
                     _showCaptions(player);
 
                     // Disable unsupported browsers than report false positive
-                    if ((player.browser.name === "IE" && player.browser.version === 10) || 
+                    if ((player.browser.name === "IE" && player.browser.version >= 10) || 
-                            (player.browser.name === "IE" && player.browser.version === 11) || 
                         (player.browser.name === "Firefox" && player.browser.version >= 31) || 
                         (player.browser.name === "Chrome" && player.browser.version >= 43) || 
                         (player.browser.name === "Safari" && player.browser.version >= 7)) {
@@ -922,14 +1090,14 @@
                         for (var y=0; y < tracks.length; y++) {
                             var track = tracks[y];
 
-                            if (track.kind === "captions") {
+                            if (track.kind === "captions" || track.kind === "subtitles") {
                                 _on(track, "cuechange", function() {
                                     // Clear container
                                     player.captionsContainer.innerHTML = "";
 
                                     // Display a cue, if there is one
                                     if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) {
-                                        player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
+                                        player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
                                     }
                                 });
                             }
@@ -997,7 +1165,7 @@
 
         // Setup fullscreen
         function _setupFullscreen() {
-            if(player.type === "video" && config.fullscreen.enabled) {
+            if(player.type != "audio" && config.fullscreen.enabled) {
                 // Check for native support
                 var nativeSupport = fullscreen.supportsFullScreen;
 
@@ -1011,6 +1179,9 @@
                     _log("Fullscreen not supported and fallback disabled.");
                 }
 
+                // Toggle state
+                _toggleState(player.buttons.fullscreen, false);
+
                 // Set control hide class hook
                 if(config.fullscreen.hideControls) {
                     _toggleClass(player.container, config.classes.fullscreen.hideControls, true);
@@ -1065,7 +1236,8 @@
         // Seek to time
         // The input parameter can be an event or a number
         function _seek(input) {
-            var targetTime = 0;
+            var targetTime = 0,
+                paused = player.media.paused;
 
             // Explicit position
             if (typeof input === "number") {
@@ -1093,6 +1265,18 @@
             }
             catch(e) {}
 
+            // YouTube
+            if(player.type == "youtube") {
+                player.embed.seekTo(targetTime);
+
+                if(paused) {
+                    _pause();
+                }
+
+                // Trigger timeupdate
+                _triggerEvent(player.media, "timeupdate");
+            }
+
             // Logging
             _log("Seeking to " + player.media.currentTime + " seconds");
 
@@ -1147,9 +1331,42 @@
             // Set class hook
             _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
 
-            // Remove hover class because mouseleave doesn't occur
+            // Set button state
-            if (player.isFullscreen) {
+            _toggleState(player.buttons.fullscreen, player.isFullscreen);
+            
+            // Toggle controls visibility based on mouse movement and location
+            var hoverTimer, isMouseOver = false;
+
+            // Show the player controls
+            function _showControls() {
+                // Set shown class
+                _toggleClass(player.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(player.container, config.classes.hover, false);
+                    }, 2000);
+                }
+            }
+
+            // Check mouse is over the controls
+            function _setMouseOver (event) {
+                isMouseOver = (event.type === "mouseenter");
+            }
+
+            if(config.fullscreen.hideControls) {           
+                // Hide on entering full screen
                 _toggleClass(player.controls, config.classes.hover, false);
+
+                // Keep an eye on the mouse location in relation to controls
+                _toggleHandler(player.controls, "mouseenter mouseleave", _setMouseOver, player.isFullscreen);
+
+                // Show the controls on mouse move
+                _toggleHandler(player.container, "mousemove", _showControls, player.isFullscreen);
             }
         }
 
@@ -1173,8 +1390,6 @@
                 }                
             }
 
-            _log(volume);
-
             // Maximum is 10
             if(volume > 10) {
                 volume = 10;
@@ -1187,6 +1402,14 @@
             // Set the player volume
             player.media.volume = parseFloat(volume / 10);
 
+            // YouTube
+            if(player.type == "youtube") {
+                player.embed.setVolume(player.media.volume * 100);
+
+                // Trigger timeupdate
+                _triggerEvent(player.media, "volumechange");
+            }
+
             // Toggle muted state
             if(player.media.muted && volume > 0) {
                 _toggleMute();
@@ -1196,12 +1419,23 @@
         // Mute
         function _toggleMute(muted) {
             // If the method is called without parameter, toggle based on current value
-            if(typeof muted === "undefined") {
+            if(typeof muted !== "boolean") {
                 muted = !player.media.muted;
             }
 
+            // Set button state
+            _toggleState(player.buttons.mute, muted);
+
             // Set mute on the player
             player.media.muted = muted;
+
+            // YouTube
+            if(player.type === "youtube") {
+                player.embed[player.media.muted ? "mute" : "unMute"]();
+
+                // Trigger timeupdate
+                _triggerEvent(player.media, "volumechange");
+            }
         }
 
         // Update volume UI and storage
@@ -1224,7 +1458,7 @@
             
             // Update checkbox for mute state
             if(player.supported.full && player.buttons.mute) {
-                player.buttons.mute.checked = (volume === 0);
+                _toggleState(player.buttons.mute, (volume === 0));
             }
         }
 
@@ -1236,11 +1470,14 @@
             }
 
             // If the method is called without parameter, toggle based on current value
-            if(typeof show === "undefined") {
+            if(typeof show !== "boolean") {
                 show = (player.container.className.indexOf(config.classes.captions.active) === -1);
-                player.buttons.captions.checked = show;
             }
 
+            // Toggle state
+            _toggleState(player.buttons.captions, show);
+
+            // Add class hook
             _toggleClass(player.container, config.classes.captions.active, show);
         }
 
@@ -1292,9 +1529,14 @@
                         value       = (function() { 
                                         var buffered = player.media.buffered;
 
-                                        if(buffered.length) {
+                                        // HTML5
+                                        if(buffered && buffered.length) {
                                             return _getPercentage(buffered.end(0), player.media.duration);
                                         }
+                                        // YouTube returns between 0 and 1
+                                        else if(typeof buffered == "number") {
+                                            return (buffered * 100);
+                                        }
 
                                         return 0;                                   
                                     })();
@@ -1388,6 +1630,22 @@
         // Update source
         // Sources are not checked for support so be careful
         function _parseSource(sources) {
+            // YouTube
+            if(player.type === "youtube" && typeof sources === "string") {
+                // Destroy YouTube instance
+                player.embed.destroy();
+
+                // Re-setup YouTube
+                // We don't use loadVideoBy[x] here since it has issues
+                _setupYouTube(sources);
+
+                // Update times
+                _timeUpdate();
+
+                // Bail
+                return;
+            }
+
             // Pause playback (webkit freaks out)
             _pause();
 
@@ -1441,6 +1699,34 @@
             // IE doesn't support input event, so we fallback to change
             var inputEvent = (player.browser.name == "IE" ? "change" : "input");
 
+            // Detect tab focus
+            function checkFocus() {
+                var focused = document.activeElement;
+                if (!focused || focused == document.body) {
+                    focused = null;
+                }
+                else if (document.querySelector){
+                    focused = document.querySelector(":focus");
+                }
+                for (var button in player.buttons) {
+                    var element = player.buttons[button];
+
+                    _toggleClass(element, "tab-focus", (element === focused));
+                }
+            }
+            _on(window, "keyup", function(event) {
+                var code = (event.keyCode ? event.keyCode : event.which);
+
+                if(code == 9) { checkFocus(); }
+            });
+            for (var button in player.buttons) {
+                var element = player.buttons[button];
+
+                _on(element, "blur", function() {
+                    _toggleClass(element, "tab-focus", false);
+                });
+            }
+
             // Play
             _on(player.buttons.play, "click", function() { 
                 _play(); 
@@ -1471,9 +1757,7 @@
             });
 
             // Mute
-            _on(player.buttons.mute, "change", function() {
+            _on(player.buttons.mute, "click", _toggleMute);
-                _toggleMute(this.checked);
-            });
 
             // Fullscreen
             _on(player.buttons.fullscreen, "click", _toggleFullscreen);
@@ -1493,9 +1777,7 @@
             _on(player.media, "loadedmetadata", _displayDuration);
 
             // Captions
-            _on(player.buttons.captions, "change", function() { 
+            _on(player.buttons.captions, "click", _toggleCaptions);
-                _toggleCaptions(this.checked);
-            });
 
             // Handle the media finishing
             _on(player.media, "ended", function() {
@@ -1509,10 +1791,7 @@
             });
 
             // Check for buffer progress
-            _on(player.media, "progress", _updateProgress);
+            _on(player.media, "progress playing", _updateProgress);
-
-            // Also check on start of playing
-            _on(player.media, "playing", _updateProgress);
 
             // Handle native mute
             _on(player.media, "volumechange", _updateVolume);
@@ -1523,9 +1802,6 @@
             // Loading
             _on(player.media, "waiting canplay seeked", _checkLoading);
 
-            // Toggle checkboxes on return key (as they look like buttons)
-            _on(player.checkboxes, "keyup", _toggleCheckbox);
-
             // Click video
             if(player.type === "video" && config.click) {
                 _on(player.videoContainer, "click", function() {
@@ -1541,16 +1817,11 @@
                     }
                 });
             }
-
-            // Bind to mouse hover 
-            if(config.fullscreen.hideControls) {
-                _on(player.controls, "mouseenter mouseleave", function(event) {
-                    _toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
-                });
-            }
         }
 
         // Destroy an instance
+        // Event listeners are removed when elements are removed
+        // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
         function _destroy() {
             // Bail if the element is not initialized
             if(!player.init) {
@@ -1560,12 +1831,18 @@
             // Reset container classname
             player.container.setAttribute("class", config.selectors.container.replace(".", ""));
 
-            // Event listeners are removed when elements are removed
+            // Remove init flag
-            // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
+            player.init = false;
 
             // Remove controls
             _remove(_getElement(config.selectors.controls));
 
+            // YouTube
+            if(player.type === "youtube") {
+                player.embed.destroy();
+                return;
+            }
+
             // If video, we need to remove some more
             if(player.type === "video") {
                 // Remove captions
@@ -1582,9 +1859,6 @@
             // http://stackoverflow.com/questions/19469881/javascript-remove-all-event-listeners-of-specific-type
             var clone = player.media.cloneNode(true);
             player.media.parentNode.replaceChild(clone, player.media);
-
-            // Remove init flag
-            player.init = false;
         }
 
         // Setup a player
@@ -1601,10 +1875,19 @@
             player.browser = _browserSniff();
 
             // Get the media element
-            player.media = player.container.querySelectorAll("audio, video")[0];
+            player.media = player.container.querySelectorAll("audio, video, div")[0];
 
             // Set media type
-            player.type = player.media.tagName.toLowerCase();
+            var tagName = player.media.tagName.toLowerCase();
+            switch(tagName) {
+                case "div":
+                    player.type = player.media.getAttribute("data-type");
+                    break;
+
+                default:
+                    player.type = tagName;
+                    break;
+            }
         
             // Check for full support
             player.supported = api.supported(player.type);
@@ -1620,23 +1903,37 @@
             // Setup media
             _setupMedia();
 
-            // If there's full support
+            // Setup interface
-            if(player.supported.full) {
+            if(player.type == "video" || player.type == "audio") {
-                // Inject custom controls
+                // Bail if no support
-                _injectControls();
+                if(!player.supported.full) {
-
+                    return;
-                // Find the elements
-                if(!_findElements()) {
-                    return false;
                 }
 
+                // Setup UI
+                _setupInterface();
+
                 // Display duration if available
                 if(config.displayDuration) {
                     _displayDuration();
                 }
 
                 // Set up aria-label for Play button with the title option
-                _setupAria();
+                _setupPlayAria();
+            }
+
+            // Successful setup
+            player.init = true;
+        }
+
+        function _setupInterface() {
+            // Inject custom controls
+            _injectControls();
+
+            // Find the elements
+            if(!_findElements()) {
+                return false;
+            }
 
             // Captions
             _setupCaptions();
@@ -1652,10 +1949,6 @@
             _listeners();
         }
 
-            // Successful setup
-            player.init = true;
-        }
-
         // Initialize instance 
         _init();
 
@@ -1706,6 +1999,11 @@
                 full  = (basic && !oldIE);
                 break; 
 
+            case "youtube": 
+                basic = true;
+                full  = (!oldIE && !iPhone);
+                break; 
+
             default:
                 basic = (audio && video);
                 full  = (basic && !oldIE);
@@ -1747,8 +2045,10 @@
                 element.plyr = (Object.keys(instance).length ? instance : false);
 
                 // Callback
+                if(typeof config.onSetup === "function") {
                     config.onSetup.apply(element.plyr);
                 }
+            }
 
             // Add to return array even if it's already setup
             players.push(element.plyr);

src/less/plyr.less

@@ -1,32 +1,39 @@
 // ==========================================================================
-// HTML5 Media Player
+// Plyr styles
+// https://github.com/selz/plyr
 // ==========================================================================
 
 // Variables
 // -------------------------------
+
 // Colors
 @blue:                      #3498DB;
-@gray-dark:                 #343f4a;
+@gray-dark:                 #343F4A;
-@gray:                      #565d64;
+@gray:                      #565D64;
-@gray-light:                #cbd0d3;
+@gray-light:                #6B7D86;
-@off-white:                 #d6dadd;
+@gray-lighter:              #CBD0D3;
+@off-white:                 #D6DADD;
 
 // Font sizes
 @font-size-small:           14px;
 @font-size-base:            16px;
-@font-size-large:           ceil((@font-size-base * 1.5)); 
+
+// Captions
+@font-size-captions-base:   ceil(@font-size-base * 1.25);
+@font-size-captions-medium: ceil(@font-size-base * 1.5);
+@font-size-captions-large:  (@font-size-base * 2); 
 
 // Controls
 @control-spacing:           10px;
-@controls-bg:               @gray-dark;
+@controls-bg:               #fff;
 @control-bg-hover:          @blue;
-@control-color:             @gray-light;
+.contrast-control-color(@controls-bg);
-@control-color-inactive:    @gray;
+.contrast-control-color-hover(@control-bg-hover);
-@control-color-hover:       #fff;
 
 // Tooltips
 @tooltip-bg:                @controls-bg;
-@tooltip-color:             #fff;
+@tooltip-border-color:      @off-white;
+@tooltip-color:             @control-color;
 @tooltip-padding:           @control-spacing;   
 @tooltip-arrow-size:        5px;
 @tooltip-radius:            3px;
@@ -40,7 +47,7 @@
 
 // Volume
 @volume-track-height:       6px;
-@volume-track-bg:           @gray;
+@volume-track-bg:           darken(@controls-bg, 10%);
 @volume-thumb-height:       (@volume-track-height * 2);
 @volume-thumb-width:        (@volume-track-height * 2);
 @volume-thumb-bg:           @control-color;
@@ -50,18 +57,40 @@
 @bp-control-split:          560px; // When controls split into left/right
 @bp-captions-large:         768px; // When captions jump to the larger font size
 
-// Utility classes & mixins
+// Animation
-// -------------------------------
+// ---------------------------------------
-// Screen reader only
+
-.sr-only {
+@keyframes progress {
-    position: absolute !important;
+    to { background-position: @progress-loading-size 0; }
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden;
 }
+
+// Mixins
+// -------------------------------
+
+// Contrast
+.contrast-control-color(@color: "") when (lightness(@color) >= 65%) {
+    @control-color: @gray-light;
+}
+.contrast-control-color(@color: "") when (lightness(@color) < 65%) {
+    @control-color: @gray-lighter;
+}
+.contrast-control-color-hover(@color: "") when (lightness(@color) >= 65%) {
+    @control-color-hover: @gray;
+}
+.contrast-control-color-hover(@color: "") when (lightness(@color) < 65%) {
+    @control-color-hover: #fff;
+}
+
+// Font smoothing
+.font-smoothing(@mode: on) when (@mode = on) {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+}
+.font-smoothing(@mode: on) when (@mode = off) {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+}
+
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 .clearfix() {
     zoom: 1;
@@ -75,14 +104,7 @@
     outline-offset: 0;
 }
 
-// Animation
-// ---------------------------------------
-@keyframes progress {
-    to { background-position: @progress-loading-size 0; }
-}
-
 // <input type="range"> styling
-// ---------------------------------------
 .volume-thumb() {
     height: @volume-thumb-height;
     width: @volume-thumb-width;
@@ -109,15 +131,16 @@
     border: 0;
 }
 
-// Font smoothing
+// Screen reader only
-// ---------------------------------------
+// -------------------------------
-.font-smoothing(@mode: on) when (@mode = on) {
+.sr-only {
-    -moz-osx-font-smoothing: grayscale;
+    position: absolute !important;
-    -webkit-font-smoothing: antialiased;
+    clip: rect(1px, 1px, 1px, 1px);
-}
+    padding: 0 !important;
-.font-smoothing(@mode: on) when (@mode = off) {
+    border: 0 !important;
-    -moz-osx-font-smoothing: auto;
+    height: 1px !important;
-    -webkit-font-smoothing: subpixel-antialiased;
+    width: 1px !important;
+    overflow: hidden;
 }
 
 // Styles
@@ -141,12 +164,28 @@
     &-video-wrapper {
         position: relative;
     }
-    video {
+    video,
+    audio {
         width: 100%;
         height: auto;
         vertical-align: middle;
     }
 
+    // For embeds
+    &-video-embed {
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
     // Captions
     &-captions {
         display: none;
@@ -154,26 +193,31 @@
         bottom: 0;
         left: 0;
         width: 100%;
-        padding: 20px;
+        padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3);
-        min-height: 2.5em;
         color: #fff;
-        font-size: @font-size-base;
+        font-size: @font-size-captions-base;
-        font-weight: 600;
-        text-shadow: 
-        -1px -1px 0 @gray, 
-        1px -1px 0 @gray, 
-        -1px 1px 0 @gray, 
-        1px 1px 0 @gray;
         text-align: center;
         .font-smoothing();
 
+        span {
+            border-radius: 2px;
+            padding: 3px 10px;
+            background: rgba(0,0,0, .9);
+        }
+        span:empty {
+            display: none;
+        }
+
         @media (min-width: @bp-captions-large) {
-            font-size: @font-size-large;
+            font-size: @font-size-captions-medium;
         }
     }
     &.captions-active &-captions {
         display: block;
     }
+    &.fullscreen-active &-captions {
+        font-size: @font-size-captions-large;
+    }
 
     // Player controls
     &-controls {
@@ -184,6 +228,7 @@
         background: @controls-bg;
         line-height: 1;
         text-align: center;
+        box-shadow: 0 1px 1px rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .2);
 
         // Layout
         &-right {
@@ -200,16 +245,19 @@
             }
         }
         
-        input + label, 
+        // Buttons
         button {
             display: inline-block;
             vertical-align: middle;
             margin: 0 2px;
             padding: (@control-spacing / 2) @control-spacing;
-            
+            overflow: hidden;
-            transition: background .3s ease;
+            border: 0;
+            background: transparent;
             border-radius: 3px;
             cursor: pointer;
+            color: @control-color;
+            transition: background .3s ease, color .3s ease, opacity .3s ease;
             
             svg {
                 width: 18px;
@@ -218,39 +266,27 @@
                 fill: currentColor;
                 transition: fill .3s ease;
             }
-        }
-        input + label,
-        .inverted:checked + label {
-            color: @control-color-inactive;
-        }
-        button, 
-        .inverted + label,
-        input:checked + label {
-            color: @control-color;
-        }
-        button {
-            border: 0;
-            background: transparent;
-            overflow: hidden;
-        }
         
-        // Specificity for overriding .inverted
+            // Hover and tab focus
-        button:focus,
+            &.tab-focus,
-        button:hover,
+            &:hover {
-        [type="checkbox"]:focus + label,
-        [type="checkbox"] + label:hover {
                 background: @control-bg-hover;
                 color: @control-color-hover;
             }
-        button:focus,
+            // Default focus
-        input:focus + label {
+            &:focus {
                 outline: 0;
             }
+        }
+
+        // Hide toggle icons by default
         .icon-exit-fullscreen,
         .icon-muted,
         .icon-captions-on {
             display: none;
         }
+
+        // Player time
         .player-time {
             display: inline-block;
             vertical-align: middle;
@@ -271,16 +307,14 @@
 
             // Add a slash in before
             &::before {
-                content: "\2044";
+                content: '\2044';
                 margin-right: @control-spacing;
-                color: darken(@control-color, 30%);
             }
         }
     }
 
     // Tooltips
     &-tooltip {
-        visibility: hidden;
         position: absolute;
         z-index: 2;
         bottom: 100%;
@@ -289,39 +323,38 @@
 
         opacity: 0;
         background: @tooltip-bg;
+        border: 1px solid @tooltip-border-color;
         border-radius: @tooltip-radius;
         color: @tooltip-color;
         font-size: @font-size-small;
         line-height: 1.5;
         font-weight: 600;
 
-        transform: translate(-50%, (@tooltip-padding * 3));
+        transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;
       
+        // Arrow
         &::after {
-            content: "";
+            content: '';
-            display: block;
             position: absolute;
+            z-index: 1;
+            top: 100%;
             left: 50%;
-            bottom: -@tooltip-arrow-size;
+            display: block;
-            margin-left: -@tooltip-arrow-size;
+            width: 10px;
-            width: 0;
+            height: 10px;
-            height: 0;
+            background: @tooltip-bg;
-            transition: inherit;
+            transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
-            border-style: solid;
+            border: 1px solid @tooltip-border-color;
-            border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
+            border-width: 0 1px 1px 0;
-            border-color: @controls-bg transparent transparent;
         }
     }
-    label:hover .player-tooltip,
-    input:focus + label .player-tooltip, 
     button:hover .player-tooltip,
-    button:focus .player-tooltip {
+    button.tab-focus:focus .player-tooltip {
-        visibility: visible;
         opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
     }
-    label:hover .player-tooltip,
     button:hover .player-tooltip {
         z-index: 3;
     }
@@ -339,7 +372,7 @@
 
         &-buffer[value],
         &-played[value],
-        &-seek[type=range] {
+        &-seek[type='range'] {
             position: absolute;
             left: 0;
             top: 0;
@@ -379,7 +412,7 @@
         // Seek control
         // <input[type='range']> element
         // Specificity is for bootstrap compatibility
-        &-seek[type=range] {
+        &-seek[type='range'] {
             z-index: 4;
             cursor: pointer;
             outline: 0;
@@ -454,7 +487,7 @@
     // Volume control
     // <input[type='range']> element
     // Specificity is for bootstrap compatibility
-    &-volume[type=range] {
+    &-volume[type='range'] {
         display: inline-block;
         vertical-align: middle;
         -webkit-appearance: none;
@@ -520,7 +553,6 @@
     // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
     &.ios &-volume,
     &.ios [data-player='mute'],
-    &.ios [data-player='mute'] + label,
     &-audio.ios &-controls-right {
         display: none;
     }
@@ -559,18 +591,6 @@
         .player-video-wrapper {
             height: 100%;
             width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
-                    bottom: 60px;
-                }
-                @media (min-width: @bp-captions-large) {
-                    bottom: 80px;
-                }
-            }
         }  
         .player-controls {
             position: absolute;
@@ -580,13 +600,28 @@
         }
 
         // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
                 transform: translateY(100%) translateY(@control-spacing / 2);
-            transition: transform .3s 1s ease;
+                transition: transform .3s .2s ease;
-
+            }
-            &.hover {
+            &.player-hover .player-controls {
                 transform: translateY(0);
-                transition-delay: 0;
+            }
+            .player-captions {
+                bottom: (@control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: @bp-control-split) {
+                bottom: 60px;
             }
         }
     }
@@ -604,15 +639,11 @@
 
     // Some options are hidden by default
     [data-player='captions'],
-    [data-player='captions'] + label,
+    [data-player='fullscreen'] {
-    [data-player='fullscreen'],
-    [data-player='fullscreen'] + label {
         display: none;
     }
     &.captions-enabled [data-player='captions'],
-    &.captions-enabled [data-player='captions'] + label,
+    &.fullscreen-enabled [data-player='fullscreen'] {
-    &.fullscreen-enabled [data-player='fullscreen'],
-    &.fullscreen-enabled [data-player='fullscreen'] + label {
         display: inline-block;
     }
 }

src/sass/plyr.scss

@@ -1,32 +1,50 @@
 // ==========================================================================
-// HTML5 Media Player
+// Plyr styles
+// https://github.com/selz/plyr
 // ==========================================================================
 
 // Variables
 // -------------------------------
+
 // Colors
 $blue:                      #3498DB !default;
-$gray-dark:               #343f4a !default;
+$gray-dark:                 #343F4A !default;
-$gray:                    #565d64 !default;
+$gray:                      #565D64 !default;
-$gray-light:              #cbd0d3 !default;
+$gray-light:                #6B7D86 !default;
-$off-white:               #d6dadd !default;
+$gray-lighter:              #CBD0D3 !default;
+$off-white:                 #D6DADD !default;
 
 // Font sizes
 $font-size-small:           14px !default;
 $font-size-base:            16px !default;
-$font-size-large:         ceil(($font-size-base * 1.5)) !default;
+
+// Captions
+$font-size-captions-base:   ceil(@font-size-base * 1.25) !default;
+$font-size-captions-medium: ceil(@font-size-base * 1.5) !default;
+$font-size-captions-large:  (@font-size-base * 2) !default;
 
 // Controls
 $control-spacing:           10px !default;
-$controls-bg:             $gray-dark !default;
+$controls-bg:               #fff !default;
 $control-bg-hover:          $blue !default;
-$control-color:           $gray-light !default;
+$control-color:             null !default;
-$control-color-inactive:  $gray !default;
+$control-color-hover:       null !default;
-$control-color-hover:     #fff !default;
+
+// Contrast
+@if lightness($controls-bg) >= 65% {
+  $control-color: $gray-light;
+} @else {
+  $control-color: $gray-lighter;
+}
+@if lightness($control-bg-hover) >= 65% {
+  $control-color-hover: $gray;
+} @else {
+  $control-color-hover: #fff;
+}
 
 // Tooltips
 $tooltip-bg:                $controls-bg !default;
-$tooltip-color:           #fff !default;
+$tooltip-color:             $control-color !default;
 $tooltip-padding:           $control-spacing !default;   
 $tooltip-arrow-size:        5px !default;
 $tooltip-radius:            3px !default;
@@ -40,7 +58,7 @@ $progress-loading-bg:     rgba(0,0,0, .15) !default;
 
 // Volume
 $volume-track-height:       6px !default;
-$volume-track-bg:         $gray !default;
+$volume-track-bg:           darken($controls-bg, 10%) !default;
 $volume-thumb-height:       ($volume-track-height * 2) !default;
 $volume-thumb-width:        ($volume-track-height * 2) !default;
 $volume-thumb-bg:           $control-color !default;
@@ -50,24 +68,32 @@ $volume-thumb-bg-focus:   $control-bg-hover !default;
 $bp-control-split:          560px !default; // When controls split into left/right
 $bp-captions-large:         768px !default; // When captions jump to the larger font size
 
-// Utility classes & mixins
+// Animation
-// -------------------------------
+// ---------------------------------------
-// Screen reader only
+
-.sr-only {
+@keyframes progress {
-    position: absolute !important;
+    to { background-position: $progress-loading-size 0; }
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0 !important;
-    border: 0 !important;
-    height: 1px !important;
-    width: 1px !important;
-    overflow: hidden;
 }
+
+// Font smoothing
+@mixin font-smoothing($mode: on)
+{
+  @if ($mode == 'on') {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+  @else if ($mode == 'off') {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
+}
+
 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
 @mixin clearfix()
 {
     zoom: 1;
     &:before, 
-    &:after { content: ""; display: table; }
+    &:after { content: ''; display: table; }
     &:after { clear: both; }
 }
 // Tab focus styles
@@ -77,14 +103,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
     outline-offset: 0;
 }
 
-// Animation
-// ---------------------------------------
-@keyframes progress {
-    to { background-position: $progress-loading-size 0; }
-}
-
 // <input type="range"> styling
-// ---------------------------------------
 @mixin volume-thumb()
 {
     height: $volume-thumb-height;
@@ -115,17 +134,16 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
     border: 0;
 }
 
-// Font smoothing
+// Screen reader only
-// ---------------------------------------
+// -------------------------------
-@mixin font-smoothing($mode: on)
+.sr-only {
-{
+    position: absolute !important;
-    @if $mode == 'on' {
+    clip: rect(1px, 1px, 1px, 1px);
-        -moz-osx-font-smoothing: grayscale;
+    padding: 0 !important;
-        -webkit-font-smoothing: antialiased;
+    border: 0 !important;
-    } @else if $mode == 'off' {
+    height: 1px !important;
-        -moz-osx-font-smoothing: auto;
+    width: 1px !important;
-        -webkit-font-smoothing: subpixel-antialiased;
+    overflow: hidden;
-    }
 }
 
 // Styles
@@ -149,12 +167,28 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
     &-video-wrapper {
         position: relative;
     }
-    video {
+    video,
+    audio {
         width: 100%;
         height: auto;
         vertical-align: middle;
     }
 
+    // For embeds
+    &-video-embed {
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
     // Captions
     &-captions {
         display: none;
@@ -162,26 +196,31 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         bottom: 0;
         left: 0;
         width: 100%;
-        padding: 20px;
+        padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3);
-        min-height: 2.5em;
         color: #fff;
-        font-size: $font-size-base;
+        font-size: $font-size-captions-base;
-        font-weight: 600;
-        text-shadow:
-        -1px -1px 0 $gray,
-        1px -1px 0 $gray,
-        -1px 1px 0 $gray,
-        1px 1px 0 $gray;
         text-align: center;
         @include font-smoothing();
 
-        @media (min-width: $bp-captions-large) {
+        span {
-            font-size: $font-size-large;
+            border-radius: 2px;
+            padding: 3px 10px;
+            background: rgba(0,0,0, .9);
+        }
+        span:empty {
+            display: none;
+        }
+
+        @media (min-width: @bp-captions-large) {
+            font-size: $font-size-captions-medium;
         }
     }
     &.captions-active &-captions {
         display: block;
     }
+    &.fullscreen-active &-captions {
+        font-size: $font-size-captions-large;
+    }
 
     // Player controls
     &-controls {
@@ -192,6 +231,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         background: $controls-bg;
         line-height: 1;
         text-align: center;
+        box-shadow: 0 1px 1px rgba(red($gray-dark), green($gray-dark), blue($gray-dark), .2);
 
         // Layout
         &-right {
@@ -208,16 +248,19 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
             }
         }
         
-        input + label,
+        // Buttons
         button {
             display: inline-block;
             vertical-align: middle;
             margin: 0 2px;
             padding: ($control-spacing / 2) $control-spacing;
-
+            overflow: hidden;
-            transition: background .3s ease;
+            border: 0;
+            background: transparent;
             border-radius: 3px;
             cursor: pointer;
+            color: $control-color;
+            transition: background .3s ease, color .3s ease, opacity .3s ease;
             
             svg {
                 width: 18px;
@@ -226,39 +269,27 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
                 fill: currentColor;
                 transition: fill .3s ease;
             }
-        }
-        input + label,
-        .inverted:checked + label {
-            color: $control-color-inactive;
-        }
-        button,
-        .inverted + label,
-        input:checked + label {
-            color: $control-color;
-        }
-        button {
-            border: 0;
-            background: transparent;
-            overflow: hidden;
-        }
         
-        // Specificity for overriding .inverted
+            // Hover and tab focus
-        button:focus,
+            &.tab-focus,
-        button:hover,
+            &:hover {
-        [type="checkbox"]:focus + label,
-        [type="checkbox"] + label:hover {
                 background: $control-bg-hover;
                 color: $control-color-hover;
             }
-        button:focus,
+            // Default focus
-        input:focus + label {
+            &:focus {
                 outline: 0;
             }
+        }
+        
+        // Hide toggle icons by default
         .icon-exit-fullscreen,
         .icon-muted,
         .icon-captions-on {
             display: none;
         }
+        
+        // Time display
         .player-time {
             display: inline-block;
             vertical-align: middle;
@@ -279,16 +310,14 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
 
             // Add a slash in before
             &::before {
-                content: "\2044";
+                content: '\2044';
                 margin-right: $control-spacing;
-                color: darken($control-color, 30%);
             }
         }
     }
 
     // Tooltips
     &-tooltip {
-        visibility: hidden;
         position: absolute;
         z-index: 2;
         bottom: 100%;
@@ -303,11 +332,12 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         line-height: 1.5;
         font-weight: 600;
 
-        transform: translate(-50%, ($tooltip-padding * 3));
+        transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;
 
         &::after {
-            content: "";
+            content: '';
             display: block;
             position: absolute;
             left: 50%;
@@ -321,15 +351,11 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
             border-color: $controls-bg transparent transparent;
         }
     }
-    label:hover .player-tooltip,
-    input:focus + label .player-tooltip,
     button:hover .player-tooltip,
     button:focus .player-tooltip {
-        visibility: visible;
         opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
     }
-    label:hover .player-tooltip,
     button:hover .player-tooltip {
         z-index: 3;
     }
@@ -347,7 +373,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
 
         &-buffer[value],
         &-played[value],
-        &-seek[type=range] {
+        &-seek[type='range'] {
             position: absolute;
             left: 0;
             top: 0;
@@ -387,7 +413,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         // Seek control
         // <input[type='range']> element
         // Specificity is for bootstrap compatibility
-        &-seek[type=range] {
+        &-seek[type='range'] {
             z-index: 4;
             cursor: pointer;
             outline: 0;
@@ -462,7 +488,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
     // Volume control
     // <input[type='range']> element
     // Specificity is for bootstrap compatibility
-    &-volume[type=range] {
+    &-volume[type='range'] {
         display: inline-block;
         vertical-align: middle;
         -webkit-appearance: none;
@@ -528,7 +554,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
     // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
     &.ios &-volume,
     &.ios [data-player='mute'],
-    &.ios [data-player='mute'] + label,
     &-audio.ios &-controls-right {
         display: none;
     }
@@ -567,18 +592,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         .player-video-wrapper {
             height: 100%;
             width: 100%;
-
-            .player-captions {
-                top: auto;
-                bottom: 90px;
-
-                @media (min-width: $bp-control-split) and (max-width: ($bp-captions-large - 1)) {
-                    bottom: 60px;
-                }
-                @media (min-width: $bp-captions-large) {
-                    bottom: 80px;
-                }
-            }
         }
         .player-controls {
             position: absolute;
@@ -588,13 +601,28 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
         }
 
         // Hide controls when playing in full screen
-        &.fullscreen-hide-controls.playing .player-controls {
+        &.fullscreen-hide-controls.playing {
+            .player-controls {
                 transform: translateY(100%) translateY($control-spacing / 2);
-            transition: transform .3s 1s ease;
+                transition: transform .3s .2s ease;
-
+            }
-            &.hover {
+            &.player-hover .player-controls {
                 transform: translateY(0);
-                transition-delay: 0;
+            }
+            .player-captions {
+                bottom: ($control-spacing / 2);
+                transition: bottom .3s .2s ease;
+            }
+        }
+
+        // Captions
+        .player-captions,
+        &.fullscreen-hide-controls.playing.player-hover .player-captions {
+            top: auto;
+            bottom: 90px;
+
+            @media (min-width: $bp-control-split) {
+                bottom: 60px;
             }
         }
     }
@@ -612,15 +640,11 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
 
     // Some options are hidden by default
     [data-player='captions'],
-    [data-player='captions'] + label,
+    [data-player='fullscreen'] {
-    [data-player='fullscreen'],
-    [data-player='fullscreen'] + label {
         display: none;
     }
     &.captions-enabled [data-player='captions'],
-    &.captions-enabled [data-player='captions'] + label,
+    &.fullscreen-enabled [data-player='fullscreen'] {
-    &.fullscreen-enabled [data-player='fullscreen'],
-    &.fullscreen-enabled [data-player='fullscreen'] + label {
         display: inline-block;
     }
 }

src/sprite/icon-captions-off.svg

@@ -1,8 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-captions-off</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <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" id="Shape" sketch:type="MSShapeGroup"></path>

src/sprite/icon-captions-on.svg

@@ -1,8 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-captions-on</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <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" id="Shape" sketch:type="MSShapeGroup"></path>

src/sprite/icon-enter-fullscreen.svg

@@ -1,8 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>expand</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">

src/sprite/icon-exit-fullscreen.svg

@@ -1,8 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>collapse</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1">
         <g id="collapse" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">

src/sprite/icon-fast-forward.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
 <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>

src/sprite/icon-muted.svg

@@ -1,9 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>muted</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <g id="sound" sketch:type="MSLayerGroup" 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" id="Shape" sketch:type="MSShapeGroup"></path>

src/sprite/icon-pause.svg

@@ -1,8 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>pause</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <g id="pause" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">

src/sprite/icon-play.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
 <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>

src/sprite/icon-restart.svg

@@ -1,9 +1,5 @@
 <?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" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-restart</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <path d="M17,2 C16.448,2 16,2.448 16,3 L16,7.318 L7,2 C6.448,2 6,2.448 6,3 L6,4.954 L1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L6,13.045 L6,15 C6,15.552 6.448,16 7,16 L16,10.682 L16,15 C16,15.552 16.448,16 17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L17,2 Z M6,10.722 L2,13.086 L2,4.914 L6,7.278 L6,10.722 L6,10.722 Z M8,13.086 L8,4.914 L14.915,9 L8,13.086 L8,13.086 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 9.000000) scale(-1, 1) translate(-9.000000, -9.000000) "></path>
     </g>

src/sprite/icon-rewind.svg

@@ -1,8 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="18px" height="21px" 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">
+<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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>rewind</title>
-    <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
         <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" id="Shape" sketch:type="MSShapeGroup" transform="translate(9.000000, 10.000000) rotate(-180.000000) translate(-9.000000, -10.000000) "></path>

src/sprite/icon-volume.svg

@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 18 18">
 <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>