Readme

YouTube, Captions and Control improvements
- Controls improvements (Fixes #103) - YouTube bug fixes (Fixes #105) - Internationalization support (Fixes #101) - Captions legibility improvements
2015-08-08 14:37:28 +10:00 · 2015-08-08 14:37:12 +10:00 · 2015-08-08 11:14:19 +10:00 · 2015-08-08 11:14:11 +10:00 · 2015-08-08 11:13:03 +10:00 · 2015-08-07 11:50:01 +10:00
27 changed files with 277 additions and 286 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,11 @@
 # 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)

@ -21,7 +27,7 @@
 ## v1.2.1
 - Tooltip bug fix

-## v1.2.0
+# v1.2.0
 - Added YouTube support

 ## v1.1.13
--- a/controls.md
+++ b/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'>",
-        "<label id='mute{id}' for='mute{id}'>",
+        "<button type="button" data-player="mute">",
            "<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
            "<svg><use xlink:href='#icon-volume'></use></svg>",
            "<span class='sr-only'>Toggle Mute</span>",
-        "</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'>",
-        "<label for='captions{id}'>",
+        "<button type="button" data-player="captions">",
            "<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
            "<svg><use xlink:href='#icon-captions-off'></use></svg>",
            "<span class='sr-only'>Toggle Captions</span>",
-        "</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>",
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/dist/sprite.svg
+++ b/dist/sprite.svg
--- a/docs/dist/docs.js
+++ b/docs/dist/docs.js
--- a/docs/dist/templates.js
+++ b/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: {  }});
--- a/docs/error.html
+++ b/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.2.6/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.3.0/docs.css">
    </head>
    <body>
        <main>
--- a/docs/index.html
+++ b/docs/index.html
@ -8,10 +8,10 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css?2">
+        <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.2.6/docs.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/docs.css?1">
    </head>
    <body>
        <header>
@ -97,13 +97,13 @@
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.2.6/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.3.0/sprite.svg");
        </script>

        <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.2.6/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.2.6/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.3.0/docs.js?1"></script>
    </body>
 </html>
--- a/docs/src/templates/controls.html
+++ b/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">
-        <label id="mute{id}" for="mute{id}">
+        <button type="button" data-player="mute">
            <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
            <svg><use xlink:href="#icon-volume"></use></svg>
            <span class="sr-only">Toggle Mute</span>
-        </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">
-
-        <input class="sr-only" id="captions{id}" type="checkbox" data-player="captions">
-        <label for="captions{id}">
+        <button type="button" data-player="captions">
            <svg class="icon-captions-on"><use xlink:href="#icon-captions-on"></use></svg>
            <svg><use xlink:href="#icon-captions-off"></use></svg>
            <span class="sr-only">Toggle Captions</span>
-        </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>
--- a/gulpfile.js
+++ b/gulpfile.js
@ -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
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.2.6",
+  "version": "1.3.0",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -9,8 +9,8 @@ A simple, accessible HTML5 media player.
 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.
- **Lightweight** - just 7.5KB minified and gzipped.
+- **Accessible** - full support for VTT captions and screen readers.
+- **Lightweight** - just 8KB minified and gzipped.
 - **[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.
@ -18,6 +18,7 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
 - **[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. 
@ -39,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue

 Check `docs/index.html` and `docs/dist/docs.js` for an example setup. 

-**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.2.6/plyr.js` to `https://cdn.plyr.io/1.2.6/plyr.js`
+**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.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:
@ -59,11 +60,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css">
-<script src="https://cdn.plyr.io/1.2.6/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.3.0/plyr.css">
+<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.2.6/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. 
@ -182,6 +183,12 @@ 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>
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.2.6
+// plyr.js v1.3.0
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -83,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
@ -95,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'>"];
@ -108,7 +122,7 @@
            html.push(
                "<button type='button' data-player='restart'>",
                    "<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>",
-                    "<span class='sr-only'>Restart</span>",
+                    "<span class='sr-only'>" + config.i18n.restart + "</span>",
                "</button>"
            );
        }
@ -118,7 +132,7 @@
            html.push(
                "<button type='button' data-player='rewind'>",
                    "<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>"
            );
        }
@ -128,11 +142,11 @@
            html.push(
                "<button type='button' data-player='play'>",
                    "<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='#" + config.iconPrefix + "-pause'></use></svg>",
-                    "<span class='sr-only'>Pause</span>",
+                    "<span class='sr-only'>" + config.i18n.pause + "</span>",
                "</button>"
            );
        }
@ -142,7 +156,7 @@
            html.push(
                "<button type='button' data-player='fast-forward'>",
                    "<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>"
            );
        }
@ -151,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>"
            );
@ -161,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>"
            );
@ -176,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'>",
-                "<label id='mute{id}' for='mute{id}'>",
+                "<button type='button' data-player='mute'>",
                    "<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>",
                    "<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>",
-                    "<span class='sr-only'>Toggle Mute</span>",
-                "</label>"
+                    "<span class='sr-only'>" + config.i18n.toggleMute + "</span>",
+                "</button>"
            );
        }

        // 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'>"
            );
        }
@ -196,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'>",
-                "<label for='captions{id}'>",
+                "<button type='button' data-player='captions'>",
                    "<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>",
                    "<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>",
-                    "<span class='sr-only'>Toggle Captions</span>",
-                "</label>"
+                    "<span class='sr-only'>" + config.i18n.toggleCaptions + "</span>",
+                "</button>"
            );
        }

@ -211,7 +223,7 @@
                "<button type='button' data-player='fullscreen'>",
                    "<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-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>"
            );
        }
@ -478,18 +490,15 @@
        element.dispatchEvent(fauxEvent);
    }

-    // Toggle checkbox
-    function _toggleCheckbox(event) {
-        // Only listen for return key
-        if(event.keyCode && event.keyCode != 13) {
-            return true;
-        }
-
-        // Toggle the checkbox
-        event.target.checked = !event.target.checked;
-
-        // Trigger change event
-        _triggerEvent(event.target, "change");
+    // Toggle aria-pressed state on a toggle button
+    function _toggleState(target, state) {
+        // Get state
+        state = (typeof state === "boolean" ? state : !target.getAttribute("aria-pressed"));
+        
+        // Set the attribute on target
+        target.setAttribute("aria-pressed", state);
+        
+        return state;
    }

    // Get percentage
@ -637,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
@ -656,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);
            }
        }

@ -795,15 +804,15 @@
            }
        }

-        // Setup aria attributes
-        function _setupAria() {
+        // Setup aria attribute for play
+        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) {
@ -912,10 +921,11 @@
                    iv_load_policy: 3,
                    cc_lang_pref: "en",
                    wmode: "transparent",
-                    modestbranding: 1
+                    modestbranding: 1,
+                    disablekb: 1
                },
                events: {
-                    onReady: function(event) {
+                    "onReady": function(event) {
                        // Get the instance
                        var instance = event.target;

@ -924,7 +934,7 @@
                        player.media.pause = function() { instance.pauseVideo(); };
                        player.media.stop = function() { instance.stopVideo(); };
                        player.media.duration = instance.getDuration();
-                        player.media.paused = (instance.getPlayerState() == 2);
+                        player.media.paused = true;
                        player.media.currentTime = instance.getCurrentTime();
                        player.media.muted = instance.isMuted();

@ -960,7 +970,7 @@
                            }
                        }
                    },
-                    onStateChange: function(event) {
+                    "onStateChange": function(event) {
                        // Get the instance
                        var instance = event.target;

@ -1009,10 +1019,10 @@
        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;
@ -1087,7 +1097,7 @@

                                    // 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());
                                    }
                                });
                            }
@ -1169,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);
@ -1223,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") {
@ -1253,7 +1267,11 @@

            // YouTube
            if(player.type == "youtube") {
-                player.embed.seekTo(player.media.currentTime);
+                player.embed.seekTo(targetTime);
+
+                if(paused) {
+                    _pause();
+                }

                // Trigger timeupdate
                _triggerEvent(player.media, "timeupdate");
@ -1312,6 +1330,9 @@

            // Set class hook
            _toggleClass(player.container, config.classes.fullscreen.active, player.isFullscreen);
+
+            // Set button state
+            _toggleState(player.buttons.fullscreen, player.isFullscreen);
            
            // Toggle controls visibility based on mouse movement and location
            var hoverTimer, isMouseOver = false;
@ -1398,10 +1419,13 @@
        // 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;

@ -1434,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));
            }
        }

@ -1446,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);
        }

@ -1730,9 +1757,7 @@
            });

            // Mute
-            _on(player.buttons.mute, "change", function() {
-                _toggleMute(this.checked);
-            });
+            _on(player.buttons.mute, "click", _toggleMute);

            // Fullscreen
            _on(player.buttons.fullscreen, "click", _toggleFullscreen);
@ -1752,9 +1777,7 @@
            _on(player.media, "loadedmetadata", _displayDuration);

            // Captions
-            _on(player.buttons.captions, "change", function() { 
-                _toggleCaptions(this.checked);
-            });
+            _on(player.buttons.captions, "click", _toggleCaptions);

            // Handle the media finishing
            _on(player.media, "ended", function() {
@ -1779,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() {
@ -1899,7 +1919,7 @@
                }

                // Set up aria-label for Play button with the title option
-                _setupAria();
+                _setupPlayAria();
            }

            // Successful setup
@ -2025,7 +2045,9 @@
                element.plyr = (Object.keys(instance).length ? instance : false);

                // Callback
-                config.onSetup.apply(element.plyr);
+                if(typeof config.onSetup === "function") {
+                    config.onSetup.apply(element.plyr);
+                }
            }

            // Add to return array even if it's already setup
@ -2035,4 +2057,4 @@
        return players;
    }

-}(this.plyr = this.plyr || {}));
+}(this.plyr = this.plyr || {}));
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -17,7 +17,11 @@
 // 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;
@ -189,26 +193,31 @@
        bottom: 0;
        left: 0;
        width: 100%;
-        padding: 20px;
-        min-height: 2.5em;
+        padding: (@control-spacing * 2) (@control-spacing * 2) (@control-spacing * 3);
        color: #fff;
-        font-size: @font-size-base;
-        font-weight: 600;
-        text-shadow: 
-        -1px -1px 0 @gray, 
-        1px -1px 0 @gray, 
-        -1px 1px 0 @gray, 
-        1px 1px 0 @gray;
+        font-size: @font-size-captions-base;
        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 {
@ -236,17 +245,20 @@
            }
        }
        
-        input + label, 
+        // Buttons
        button {
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px;
            padding: (@control-spacing / 2) @control-spacing;
-            
-            transition: background .3s ease, color .3s ease, opacity .3s ease;
+            overflow: hidden;
+            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;
                height: 18px;
@ -254,41 +266,27 @@
                fill: currentColor;
                transition: fill .3s ease;
            }
-        }
-        input + label,
-        .inverted:checked + label {
-            opacity: .5;
-        }
-        button, 
-        .inverted + label,
-        input:checked + label {
-            color: @control-color;
-            opacity: 1;
-        }
-        button {
-            border: 0;
-            background: transparent;
-            overflow: hidden;
-        }
        
-        // Specificity for overriding .inverted
-        button:focus,
-        button:hover,
-        [type="checkbox"]:focus + label,
-        [type="checkbox"] + label:hover {
-            background: @control-bg-hover;
-            color: @control-color-hover;
-            opacity: 1;
-        }
-        button:focus,
-        input:focus + label {
-            outline: 0;
+            // Hover and tab focus
+            &.tab-focus,
+            &:hover {
+                background: @control-bg-hover;
+                color: @control-color-hover;
+            }
+            // Default focus
+            &: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;
@ -309,7 +307,7 @@

            // Add a slash in before
            &::before {
-                content: "\2044";
+                content: '\2044';
                margin-right: @control-spacing;
            }
        }
@ -317,7 +315,6 @@

    // Tooltips
    &-tooltip {
-        visibility: hidden;
        position: absolute;
        z-index: 2;
        bottom: 100%;
@ -339,7 +336,7 @@
      
        // Arrow
        &::after {
-            content: "";
+            content: '';
            position: absolute;
            z-index: 1;
            top: 100%;
@ -353,15 +350,11 @@
            border-width: 0 1px 1px 0;
        }
    }
-    label:hover .player-tooltip,
-    input.tab-focus:focus + label .player-tooltip, 
    button:hover .player-tooltip,
    button.tab-focus:focus .player-tooltip {
-        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
-    label:hover .player-tooltip,
    button:hover .player-tooltip {
        z-index: 3;
    }
@ -379,7 +372,7 @@

        &-buffer[value],
        &-played[value],
-        &-seek[type=range] {
+        &-seek[type='range'] {
            position: absolute;
            left: 0;
            top: 0;
@ -419,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;
@ -494,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;
@ -560,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;
    }
@ -647,15 +639,11 @@

    // Some options are hidden by default
    [data-player='captions'],
-    [data-player='captions'] + label,
-    [data-player='fullscreen'],
-    [data-player='fullscreen'] + label {
+    [data-player='fullscreen'] {
        display: none;
    }
    &.captions-enabled [data-player='captions'],
-    &.captions-enabled [data-player='captions'] + label,
-    &.fullscreen-enabled [data-player='fullscreen'],
-    &.fullscreen-enabled [data-player='fullscreen'] + label {
+    &.fullscreen-enabled [data-player='fullscreen'] {
        display: inline-block;
    }
 }
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -17,34 +17,31 @@ $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:               #fff !default;
-$control-bg-hover:          $blue !default; !default
+$control-bg-hover:          $blue !default;
+$control-color:             null !default;
+$control-color-hover:       null !default;

 // Contrast
-@mixin contrast-control-color($color: "") {
-  $control-color: null !global;
-  @if lightness($color) >= 65% {
-    $control-color: $gray-light;
-  } @else if(lightness($color) < 65%) {
-    $control-color: $gray-lighter;
-  }
+@if lightness($controls-bg) >= 65% {
+  $control-color: $gray-light;
+} @else {
+  $control-color: $gray-lighter;
 }
-@mixin contrast-control-color-hover($color: "") {
-  $control-color-hover: null !global;
-  @if lightness($color) >= 65% {
-    $control-color-hover: $gray;
-  } @else if lightness($color) < 65% {
-    $control-color-hover: #fff;
-  }
+@if lightness($control-bg-hover) >= 65% {
+  $control-color-hover: $gray;
+} @else {
+  $control-color-hover: #fff;
 }

-@include contrast-control-color($controls-bg);
-@include contrast-control-color-hover($control-bg-hover);
-
 // Tooltips
 $tooltip-bg:                $controls-bg !default;
 $tooltip-color:             $control-color !default;
@ -56,7 +53,7 @@ $tooltip-radius:            3px !default;
 $progress-bg:               rgba(red($gray), green($gray), blue($gray), .2) !default;
 $progress-playing-bg:       $blue !default;
 $progress-buffered-bg:      rgba(red($gray), green($gray), blue($gray), .25) !default;
-$progress-loading-size:     40px !default
+$progress-loading-size:     40px !default;
 $progress-loading-bg:       rgba(0,0,0, .15) !default;

 // Volume
@ -96,7 +93,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
 {
    zoom: 1;
    &:before, 
-    &:after { content: ""; display: table; }
+    &:after { content: ''; display: table; }
    &:after { clear: both; }
 }
 // Tab focus styles
@ -199,26 +196,31 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
        bottom: 0;
        left: 0;
        width: 100%;
-        padding: 20px;
-        min-height: 2.5em;
+        padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3);
        color: #fff;
-        font-size: $font-size-base;
-        font-weight: 600;
-        text-shadow: 
-        -1px -1px 0 $gray, 
-        1px -1px 0 $gray, 
-        -1px 1px 0 $gray, 
-        1px 1px 0 $gray;
+        font-size: $font-size-captions-base;
        text-align: center;
        @include font-smoothing();

-        @media (min-width: $bp-captions-large) {
-            font-size: $font-size-large;
+        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-captions-medium;
        }
    }
    &.captions-active &-captions {
        display: block;
    }
+    &.fullscreen-active &-captions {
+        font-size: $font-size-captions-large;
+    }

    // Player controls
    &-controls {
@ -246,17 +248,20 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
            }
        }
        
-        input + label, 
+        // Buttons
        button {
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px;
            padding: ($control-spacing / 2) $control-spacing;
-            
-            transition: background .3s ease, color .3s ease, opacity .3s ease;
+            overflow: hidden;
+            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;
                height: 18px;
@ -264,41 +269,27 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
                fill: currentColor;
                transition: fill .3s ease;
            }
-        }
-        input + label,
-        .inverted:checked + label {
-            opacity: .5;
-        }
-        button, 
-        .inverted + label,
-        input:checked + label {
-            color: $control-color;
-            opacity: 1;
-        }
-        button {
-            border: 0;
-            background: transparent;
-            overflow: hidden;
+        
+            // Hover and tab focus
+            &.tab-focus,
+            &:hover {
+                background: $control-bg-hover;
+                color: $control-color-hover;
+            }
+            // Default focus
+            &:focus {
+                outline: 0;
+            }
        }
        
-        // Specificity for overriding .inverted
-        button:focus,
-        button:hover,
-        [type="checkbox"]:focus + label,
-        [type="checkbox"] + label:hover {
-            background: $control-bg-hover;
-            color: $control-color-hover;
-            opacity: 1;
-        }
-        button:focus,
-        input:focus + label {
-            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;
@ -319,7 +310,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger

            // Add a slash in before
            &::before {
-                content: "\2044";
+                content: '\2044';
                margin-right: $control-spacing;
            }
        }
@ -327,7 +318,6 @@ $bp-captions-large:         768px !default; // When captions jump to the larger

    // Tooltips
    &-tooltip {
-        visibility: hidden;
        position: absolute;
        z-index: 2;
        bottom: 100%;
@ -347,7 +337,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
        transition: transform .2s .1s ease, opacity .2s .1s ease;

        &::after {
-            content: "";
+            content: '';
            display: block;
            position: absolute;
            left: 50%;
@ -361,15 +351,11 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
            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) scale(1);
    }
-    label:hover .player-tooltip,
    button:hover .player-tooltip {
        z-index: 3;
    }
@ -387,7 +373,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger

        &-buffer[value],
        &-played[value],
-        &-seek[type=range] {
+        &-seek[type='range'] {
            position: absolute;
            left: 0;
            top: 0;
@ -427,7 +413,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
        // Seek control
        // <input[type='range']> element
        // Specificity is for bootstrap compatibility
-        &-seek[type=range] {
+        &-seek[type='range'] {
            z-index: 4;
            cursor: pointer;
            outline: 0;
@ -502,7 +488,7 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
    // 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;
@ -568,7 +554,6 @@ $bp-captions-large:         768px !default; // When captions jump to the larger
    // 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;
    }
@ -655,15 +640,11 @@ $bp-captions-large:         768px !default; // When captions jump to the larger

    // Some options are hidden by default
    [data-player='captions'],
-    [data-player='captions'] + label,
-    [data-player='fullscreen'],
-    [data-player='fullscreen'] + label {
+    [data-player='fullscreen'] {
        display: none;
    }
    &.captions-enabled [data-player='captions'],
-    &.captions-enabled [data-player='captions'] + label,
-    &.fullscreen-enabled [data-player='fullscreen'],
-    &.fullscreen-enabled [data-player='fullscreen'] + label {
+    &.fullscreen-enabled [data-player='fullscreen'] {
        display: inline-block;
    }
 }
--- a/src/sprite/icon-captions-off.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-captions-off</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <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>
--- a/src/sprite/icon-captions-on.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-captions-on</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <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>
--- a/src/sprite/icon-enter-fullscreen.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>expand</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <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)">
--- a/src/sprite/icon-exit-fullscreen.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>collapse</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1">
        <g id="collapse" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!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">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path d="M17.569 8.246l-10.569-6.246c-0.552 0-1 0.448-1 1v1.954l-5-2.954c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l5-2.955v1.955c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754zM6 10.722l-4 2.364v-8.172l4 2.364v3.444zM8 13.086v-8.172l6.915 4.086-6.915 4.086z"></path>
 </svg>
--- a/src/sprite/icon-muted.svg
+++ b/src/sprite/icon-muted.svg
@ -1,9 +1,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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>muted</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
+<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">
    <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>
--- a/src/sprite/icon-pause.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>pause</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <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)">
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!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">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path d="M5 4.914l6.915 4.086-6.915 4.086v-8.172zM4 2c-0.552 0-1 0.448-1 1v12c0 0.552 0.448 1 1 1l10.569-6.246c0.267-0.158 0.431-0.444 0.431-0.754s-0.164-0.597-0.431-0.754l-10.569-6.246z"></path>
 </svg>
--- a/src/sprite/icon-restart.svg
+++ b/src/sprite/icon-restart.svg
@ -1,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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>icon-restart</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
+<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">
    <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>
--- a/src/sprite/icon-rewind.svg
+++ b/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">
-    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-    <title>rewind</title>
-    <desc>Created with Sketch.</desc>
+<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">
    <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>
--- a/src/sprite/icon-volume.svg
+++ b/src/sprite/icon-volume.svg
@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generated by IcoMoon.io -->
-<!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">
+<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
 <path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
 </svg>
Author	SHA1	Message	Date
Sam Potts	34c9bdc84c	Readme	2015-08-08 14:37:28 +10:00
Sam Potts	38a206892b	YouTube, Captions and Control improvements - Controls improvements (Fixes #103) - YouTube bug fixes (Fixes #105) - Internationalization support (Fixes #101) - Captions legibility improvements	2015-08-08 14:37:12 +10:00
Sam Potts	12a737a49e	Merge branch 'master' of github.com:selz/plyr	2015-08-08 11:14:19 +10:00
Sam Potts	e7946189c6	Icon updates	2015-08-08 11:14:11 +10:00
Sam Potts	850720d8f2	Merge pull request #106 from calvintam236/master Fixed certain YouTube player issues	2015-08-08 11:13:03 +10:00
Sam Potts	b130a13c8a	Merge pull request #107 from ChristianPV/patch-1 Update plyr.scss - Make it work V3!	2015-08-07 11:50:01 +10:00
khrizpv	75c090e8b9	Update plyr.scss - Make it work V3!	2015-08-06 14:21:36 -03:00
Calvin Tam	f983f0771b	Revert "Eliminated running try catch when player.type="youtube"" This reverts commit `5fcfd5fa4f`.	2015-08-05 20:36:48 -07:00
Calvin Tam	9f1e5a55f4	Disabled YouTube embed player keyboard control to match with plyr's control	2015-08-05 20:33:04 -07:00
Calvin Tam	5fcfd5fa4f	Eliminated running try catch when player.type="youtube"	2015-08-05 20:09:05 -07:00
Calvin Tam	e135309670	Fixed youtube video cannot seek before video started with controls	2015-08-05 19:57:24 -07:00
Calvin Tam	e97b616811	Fixed events are not fired in YouTube embed player	2015-08-05 19:55:30 -07:00
Sam Potts	c504ecffe6	Merge pull request #104 from ChristianPV/patch-1 Update plyr.scss - Make it work V2!	2015-08-01 00:35:21 +10:00
khrizpv	9534db823d	Update plyr.scss - Make it work V2! Hi, thanks for accepting my previous pull request. I made this request because the variables control-color and control-color-hover weren't being set inside the mixin so i took them out and it's working now again. I hope you can merge this as it isnt completly working yet and sorry for the delay. Thanks again! :)	2015-07-31 10:59:03 -03:00
Sam Potts	1ba1bec066	Merge branch 'master' of github.com:selz/plyr # Conflicts: # src/sass/plyr.scss	2015-07-31 21:34:07 +10:00
Sam Potts	aad4a720dc	Tooltip fix for NVDA	2015-07-31 21:32:12 +10:00