v2.0.10

- Added seek event fixes for Vimeo and YouTube (fixes #409) - Added support for embed URLs rather than ID only (fixes #345)
Added seek event fixes (fixes #409 ), Added support for URLs (fixes #345 )
2016-11-02 18:14:06 +11:00 · 2016-11-02 18:09:40 +11:00 · 2016-11-02 16:59:28 +11:00 · 2016-10-30 00:49:17 -04:00 · 2016-10-23 15:18:53 +11:00 · 2016-10-23 15:18:08 +11:00
43 changed files with 2416 additions and 1540 deletions
--- a/.github/issue_template.md
+++ b/.github/issue_template.md
@ -0,0 +1,18 @@
+- [ ] Issue does not already exist
+- [ ] Issue observed on https://plyr.io
+
+### Expected behaviour 
+
+### Actual behaviour
+
+### Environment
+
+- Browser:
+- Version:  
+- Operating System:
+- Version: 
+
+### Steps to reproduce 
+- 
+
+### Relevant links
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -0,0 +1,8 @@
+### Link to related issue (if applicable) 
+
+### Sumary of proposed changes 
+
+### Task list
+
+- [ ] Tested on [supported browsers](https://github.com/Selz/plyr#browser-support)
+- [ ] Gulp build completed 
--- a/.jsbeautifyrc
+++ b/.jsbeautifyrc
@ -0,0 +1,11 @@
+{
+    "html": {
+        "allowed_file_extensions": []
+    },
+    "css": {
+        "allowed_file_extensions": []
+    },
+    "js": {
+        "allowed_file_extensions": []
+    }
+}
--- a/.jshintrc
+++ b/.jshintrc
@ -8,11 +8,11 @@
    "node"          : false,
    "rhino"         : false,
    "couch"         : false,
-    "wsh"           : true,   // Windows Scripting Host.
+    "wsh"           : false,   // Windows Scripting Host.
    "jquery"        : false,

    // Development.
-    "debug"         : false,  // Allow debugger statements e.g. browser breakpoints.
+    "debug"         : true,  // Allow debugger statements e.g. browser breakpoints.
    "devel"         : true,   // Allow developments statements e.g. `console.log();`.

    // ECMAScript 5.
@ -25,7 +25,7 @@
    "bitwise"       : false,  // Prohibit bitwise operators (&, |, ^, etc.).
    "boss"          : false,  // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
    "curly"         : true,   // Require {} for every new block or scope.
-    "eqeqeq"        : false,  // Require triple equals i.e. `===`.
+    "eqeqeq"        : true,  // Require triple equals i.e. `===`.
    "eqnull"        : false,  // Tolerate use of `== null`.
    "evil"          : false,  // Tolerate use of `eval`.
    "expr"          : false,  // Tolerate `ExpressionStatement` as Programs.
--- a/bower.json
+++ b/bower.json
@ -15,7 +15,7 @@
    "main": [
        "dist/plyr.css",
        "dist/plyr.js",
-        "dist/sprite.svg",
+        "dist/plyr.svg",
        "src/less/plyr.less",
        "src/scss/plyr.scss",
        "src/js/plyr.js"
--- a/bundles.json
+++ b/bundles.json
@ -10,14 +10,14 @@
            "plyr.js":      ["src/js/plyr.js"]
        }
    },
-    "docs": {
+    "demo": {
        "less": {
-            "docs.css":     ["docs/src/less/docs.less"]
+            "demo.css":     ["demo/src/less/demo.less"]
        },
        "js": {
-            "docs.js": [
-                "docs/src/js/lib/classlist.js",
-                "docs/src/js/docs.js"
+            "demo.js": [
+                "demo/src/js/lib/classlist.js",
+                "demo/src/js/main.js"
            ]
        }
    }
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,152 @@
 # Changelog

+## v2.0.10
+- Added seek event fixes for Vimeo and YouTube (fixes #409)
+- Added support for embed URLs rather than ID only (fixes #345)
+
+## v2.0.9
+- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
+
+## v2.0.8
+- Added `isPaused()` API method (thanks to @darrena092)
+- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
+- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
+- Fix for Firefox VTT compatibility (thanks to @magourex)
+- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
+- Added Issue and PR templates with the aim of reducing duplicate or duff issues
+
+## v2.0.7
+- Fixed `getCurrentTime()` method (fixes #351)
+- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
+
+## v2.0.6
+- Fixed merge issue with `Updated define to work with AMD imports #326` PR
+- Code formatting 
+
+## v2.0.5
+- Fix for Vimeo in IE9 & IE10 
+- Fix for HTML5 elements not firing `ready` event
+
+## v2.0.4
+- Fix for Firefox full screen (fixes #343)
+
+## v2.0.3
+- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored
+
+## v2.0.2
+- Added 'global' keyboard shortcut option
+
+## v2.0.1
+- Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)
+
+# v2.0.0
+This version contains several potential ***breaking changes***:
+
+- `setup()` has been reverted to pre v1.8.0 behaviour; meaning it will return the *instance* rather than the *element*. This is because the reference to the instance is no longer added to the original element (see below).
+- The reference to the `plyr` instance is now added to the media element rather than original container. This is because if a container with multiple children was passed to `setup()` the references to all instances would have been added to the container, creating issues. I would recommend using the return value from `setup()` or the new `get()` method to access the instance.
+- Players will always be wrapped in their own div now - this makes `setup()` and `destroy()` cleaner. This *may* break any custom styling based on DOM position. 
+- Players no longer seek to 0 on 'ended' - this is to fix a bug with Microsoft Edge as it triggers 'ended' on media change for whatever reason. They'll never change ;-) 
+
+And some other changes and bug fixes:
+
+- New `get()` method on the global plyr object to get all instances inside a container
+- New API methods:
+	- `getOriginal()` to get the original, *unmodified* element plyr was setup on (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getContainer()` to get the players outer wrapper element
+	- `getMedia()` to get the players media element (`<video>`, `<audio>` or empty `<div>` for YouTube and Vimeo)
+	- `getEmbed()` to access the YouTube or Vimeo API directly
+	- `getType()` to get the type of the player
+	- `isReady()` to determine if an instance has completed setup and necessary APIs are loaded (for YouTube / Vimeo)
+	- `on()` to provide an easy way to listen to events
+	- `stop()` to, you guessed it, stop the player
+- `destroy()` now works correctly for YouTube and Vimeo (fixes #272)
+- New `destroyed` event when `destroy()` has completed (original element is passed as event.target)
+- Default volume is now 10 (max) rather than 5
+- Sprite is only loaded once (fixes #259)
+- Fixes for Vimeo post message bugs on source change or destroy (fixes #318)
+- Save caption state in storage (fixes #311)
+- Added keyboard shortcuts to the current focused player (with `keyboardShortcuts` boolean option to disable) (fixes #309)
+- Fix for captions bug (fixes #332)
+- Change to AMD (fixes #298)
+
+## v1.8.12
+- Vimeo keyboard focus fix (Fixes #317)
+- Fix for Vimeo on basic support devices
+
+## v1.8.11
+- Fix for keyboard navigation on Vimeo (Fixes #317)
+- Fix for bug introduced in v1.8.9 related to additional controls 
+- Vimeo API upgrade
+- Fix for YouTube bug introduced in v1.8.9
+- Added support for passing array to .setup() (Fixes #319)
+
+## v1.8.10
+- Fix for seek issues introduced in v1.8.9
+
+## v1.8.9
+- Fix for fullscreen not being defined (Fixes #295)
+- Fix for multiline captions (Fixes #314)
+- Clean up of type checks and fix for `restart()` (Fixes #315)
+- Fix for `MEDIA_ERR_SRC_NOT_SUPPORTED` when calling `.source()` API method
+
+## v1.8.8
+- Added getCurrentTime API method (fixes #292)
+- Fix for !hideControls on touch devices (fixes #303)
+
+## v1.8.7
+- Line height fix
+
+## v1.8.6
+- Reverted font size change
+
+## v1.8.5
+- Fixed overflow issues (fixes #286)
+
+## v1.8.4
+- Fix for large play button on small videos
+
+## v1.8.3
+- Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback
+- Fixed IE11 icon loading (fixes #269)
+- Updated screenshot (fixes #281)
+- Added WordPress plugin (fixes #239)
+- Added Neos plugin
+- Added HLS, Shaka and dash.js examples (see #235 for more)
+- Improvements for controls hiding and showing on touch devices
+
+## v1.8.2
+- Fixed event bubbling 
+
+## v1.8.1
+- Fixed inaccurate log message
+
+# v1.8.0
+- ***(Important)*** `setup()` now returns the element Plyr was setup on rather than the `plyr` object. This means `var player = plyr.setup()[0];` would now be `var player = plyr.setup()[0].plyr;`. This improves support for React and other virtual dom frameworks as mentioned in #254
+- Fixed using a relative URL for `iconUrl` in IE (fixes #269) 
+
+# v1.7.0
+- SASS cleanup (fixes #265)
+- Docs tidy up to help quick start (fixes #253)
+- Fix for issues with data attribute options passing (fixes #257)
+- ***(Important)*** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal) 
+- Renamed the 'docs' folder to `demo` to avoid confusion - the readme is the docs after all
+
+## v1.6.20
+- Fix for multiple sprites being requested (fixes #259)
+
+## v1.6.19
+- Fix for scroll direction issues on volume control (fixes #258)
+
+## v1.6.18
+- Reduced rounding of seek value from 1 decimal point to 4 (fixes #242)
+
+## v1.6.17
+- Added `disableContextMenu` option to hide the right click context menu (fixes #248 and #225)
+
+## v1.6.16
+- Always hide standard controls (fixes #225)
+- Fix for Tooltips overflowing (fixes #230)
+
 ## v1.6.15
 - Restore scroll position when exiting full screen (fixes #236)

@ -85,18 +232,18 @@
 - Docs fixes inc controls HTML (fixes #180)

 ## v1.5.17
- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
+- Expose YouTube and Vimeo API (docs update required) (fixes #176)
 - Auto set title based on YouTube getVideoData() title property
 - Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end

 ## v1.5.16
- Cancel requests on source change (Fixes #174)
+- Cancel requests on source change (fixes #174)

 ## v1.5.15
- Fix for CustomEvent polyfill and related bug (See #172)
+- Fix for CustomEvent polyfill and related bug (see #172)

 ## v1.5.14
- Volume storage fix (Fixes #171)
+- Volume storage fix (fixes #171)

 ## v1.5.13
 - Fix for manual caption rendering
@ -199,11 +346,11 @@
 ## v1.2.3
 - Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)
 - Docs tidy up
- Fullscreen for Safari fix (Fixes #96)
+- 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)
+- Fix for :focus keyboard vs mouse (fixes #61)
+- Fix for caption positioning in full screen (fixes #92)

 ## v1.2.1
 - Tooltip bug fix
@ -230,7 +377,7 @@
 - Bug fix for 1.1.8

 ## v1.1.8
- setVolume API method improvements (Fixes #83)
+- setVolume API method improvements (fixes #83)

 ## v1.1.7
 - Restore classname on destroy()
@ -239,7 +386,7 @@
 - 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)
+- Fix for incorrect `isFullscreen()` return value in Mozilla (fixes #38)

 ## v1.1.4
 - Minor bug fixes
@ -263,17 +410,17 @@
 - Display duration on `metadataloaded`

 ## v1.0.30
- Fixed bug with media longer than 60 minutes (Fixes #69)
+- Fixed bug with media longer than 60 minutes (fixes #69)

 ## v1.0.29
- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47)
+- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (fixes #47)
 - Fixed a bug with caption toggle in 1.0.28

 ## v1.0.28
 - Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)

 ## v1.0.27
- Keyboard accessibility improvements (Fixes #66)
+- Keyboard accessibility improvements (fixes #66)

 ## v1.0.26
 - Fixes for SASS (cheers @brunowego)
@ -284,29 +431,29 @@
 - Classnames for left/right controls changed

 ## v1.0.24
- Added tooltip option to display labels as tooltips (Fixes #50)
+- Added tooltip option to display labels as tooltips (fixes #50)

 ## v1.0.23
- Handling loading states in the UI (Fixes #36)
+- Handling loading states in the UI (fixes #36)

 ## v1.0.22
 - Added support() API method for checking mimetype support
- Added source() API method for setting media source(s) (Fixes #44)
+- Added source() API method for setting media source(s) (fixes #44)
 - Added poster() API method for setting poster source
 - Refactored captions logic for manual captions

 ## v1.0.21
- Added an <input type="range"> for seeking to improve experience (and support dragging) (Fixes #40, #42)
- Icons for restart and captions improved (and some IDs changed) (Fixes #49)
+- Added an <input type="range"> for seeking to improve experience (and support dragging) (fixes #40, #42)
+- Icons for restart and captions improved (and some IDs changed) (fixes #49)

 ## v1.0.20
 - Default controls included (Fixes #45)
- Volume changes on `input` as well as `change` (Fixes #43)
+- Volume changes on `input` as well as `change` (fixes #43)
 - Fix for undefined Play text
 - License changed to MIT

 ## v1.0.19
- Fixed firefox fullscreen issue (Fixes #38)
+- Fixed firefox fullscreen issue (fixes #38)

 ## v1.0.18
 - Added CDN references
@ -330,7 +477,7 @@
 - Minor tweaks

 ## v1.0.12
- Handle native events (Issue #34)
+- Handle native events (issue #34)

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

        <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/docs.css">
+        <link rel="stylesheet" href="dist/demo.css">
    </head>
    <body>
        <main>
--- a/demo/index.html
+++ b/demo/index.html
@ -11,7 +11,7 @@
        <link rel="stylesheet" href="../dist/plyr.css">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="dist/docs.css">
+        <link rel="stylesheet" href="dist/demo.css">
    </head>
    <body>
        <header>
@ -51,7 +51,6 @@
                </ul>
            </nav>
            <section>
-                <div class="js-media-player">
                <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin>
                    <!-- Video files -->
                    <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
@ -61,9 +60,8 @@
                    <track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

                    <!-- Fallback for browsers that don't support the <video> element -->
-                        <a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
+                    <a href="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" download>Download</a>
                </video>
-                </div>

                <ul>
                    <li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> &copy; Brainfarm</small></li>
@ -78,10 +76,10 @@
        <script src="../dist/plyr.js"></script>

        <!-- Docs script -->
-        <script src="dist/docs.js"></script>
+        <script src="dist/demo.js"></script>

        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
-        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js"></script>
+        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js" async></script>

        <!-- Sharing libary (https://shr.one) -->
        <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
--- a/demo/src/js/lib/classlist.js
+++ b/demo/src/js/lib/classlist.js
--- a/demo/src/js/main.js
+++ b/demo/src/js/main.js
@ -0,0 +1,185 @@
+// ==========================================================================
+// Plyr.io demo
+// This code is purely for the plyr.io website
+// Please see readme.md in the root or github.com/selz/plyr
+// ==========================================================================
+
+/*global plyr*/
+
+// General functions
+;(function() {
+    //document.body.addEventListener('ready', function(event) { console.log(event); });
+    
+    // Setup the player
+    var instances = plyr.setup({
+        debug:              true,
+        title:              'Video demo',
+        iconUrl:            '../dist/plyr.svg',
+        tooltips: {
+            controls:       true
+        },
+        captions: {
+            defaultActive:  true
+        }
+    });
+    plyr.loadSprite('dist/demo.svg');
+
+    // Plyr returns an array regardless
+    var player = instances[0];
+
+    // Setup type toggle
+    var buttons = document.querySelectorAll('[data-source]'),
+        types = {
+            video:      'video',
+            audio:      'audio',
+            youtube:    'youtube',
+            vimeo:      'vimeo'
+        },
+        currentType = window.location.hash.replace('#', ''),
+        historySupport = (window.history && window.history.pushState);
+
+    // Bind to each button
+    for (var i = buttons.length - 1; i >= 0; i--) {
+        buttons[i].addEventListener('click', function() {
+            var type = this.getAttribute('data-source');
+
+            newSource(type);
+
+            if (historySupport) {
+                history.pushState({ 'type': type }, '', '#' + type);
+            }
+        });
+    }
+
+    // List for backwards/forwards
+    window.addEventListener('popstate', function(event) {
+        if(event.state && 'type' in event.state) {
+            newSource(event.state.type);
+        }
+    });
+
+    // On load
+    if(historySupport) {
+        var video = !currentType.length;
+
+        // If there's no current type set, assume video
+        if(video) {
+            currentType = types.video;
+        }
+
+        // Replace current history state
+        if(currentType in types) {
+            history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
+        }
+
+        // If it's not video, load the source
+        if(currentType !== types.video) {
+            newSource(currentType, true);
+        }
+    }
+
+    // Toggle class on an element
+    function toggleClass(element, className, state) {
+        if (element) {
+            if (element.classList) {
+                element.classList[state ? 'add' : 'remove'](className);
+            }
+            else {
+                var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
+                element.className = name + (state ? ' ' + className : '');
+            }
+        }
+    }
+
+    // Set a new source
+    function newSource(type, init) {
+        // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+        if(!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+            return;
+        }
+
+        switch(type) {
+            case types.video:
+                player.source({
+                    type:       'video',
+                    title:      'View From A Blue Moon',
+                    sources: [{
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
+                        type:   'video/mp4'
+                    },
+                    {
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
+                        type:   'video/webm'
+                    }],
+                    poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                    tracks:     [{
+                        kind:   'captions',
+                        label:  'English',
+                        srclang:'en',
+                        src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                        default: true
+                    }]
+                });
+                break;
+
+            case types.audio:
+                player.source({
+                    type:       'audio',
+                    title:      'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
+                    sources: [{
+                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+                        type:   'audio/mp3'
+                    },
+                    {
+                        src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+                        type:   'audio/ogg'
+                    }]
+                });
+                break;
+
+            case types.youtube:
+                player.source({
+                    type:       'video',
+                    title:      'View From A Blue Moon',
+                    sources: [{
+                        src:    'bTqVqk7FSmY',
+                        type:   'youtube'
+                    }]
+                });
+                break;
+
+            case types.vimeo:
+                player.source({
+                    type:       'video',
+                    title:      'View From A Blue Moon',
+                    sources: [{
+                        src:    '143418951',
+                        type:   'vimeo'
+                    }]
+                });
+                break;
+        }
+
+        // Set the current type for next time
+        currentType = type;
+
+        // Remove active classes
+        for (var x = buttons.length - 1; x >= 0; x--) {
+            toggleClass(buttons[x].parentElement, 'active', false);
+        }
+
+        // Set active on parent
+        toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
+    }
+})();
+
+// Google analytics
+// For demo site (http://[www.]plyr.io) only
+if(document.domain.indexOf('plyr.io') > -1) {
+    (function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-40881672-11', 'auto');
+    ga('send', 'pageview');
+}
--- a/demo/src/less/components/base.less
+++ b/demo/src/less/components/base.less
@ -39,9 +39,10 @@ header {

 // Sections
 section {
-    padding-bottom: @padding-base;
+    max-width: @example-width-video;
+    margin: 0 auto @padding-base;

    @media (min-width: @screen-sm) {
-        padding-bottom: (@padding-base * 2);
+        margin-bottom: (@padding-base * 2);
    }
 }
--- a/demo/src/less/components/buttons.less
+++ b/demo/src/less/components/buttons.less
--- a/demo/src/less/components/error.less
+++ b/demo/src/less/components/error.less
--- a/demo/src/less/components/examples.less
+++ b/demo/src/less/components/examples.less
@ -2,11 +2,6 @@
 // Examples
 // ==========================================================================

-section {
-    margin: 0 auto @padding-base;
-    max-width: @example-width-video;
-}
-
 // For non supported browsers
 video {
    max-width: 100%;
@ -21,7 +16,7 @@ video {
 .plyr--audio {
    max-width: @example-width-audio;
 }
-.plyr--video::after {
+.plyr__video-wrapper::after {
    content: "";
    pointer-events: none;
    position: absolute;
--- a/demo/src/less/components/icons.less
+++ b/demo/src/less/components/icons.less
--- a/demo/src/less/components/type.less
+++ b/demo/src/less/components/type.less
--- a/demo/src/less/demo.less
+++ b/demo/src/less/demo.less
@ -1,5 +1,5 @@
 // ==========================================================================
-// HTML5 Video Player Demo Page
+// Plyr.io Demo Page
 // ==========================================================================

 // CSS Reset
--- a/demo/src/less/lib/animation.less
+++ b/demo/src/less/lib/animation.less
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
--- a/demo/src/less/lib/mixins.less
+++ b/demo/src/less/lib/mixins.less
--- a/demo/src/less/lib/normalize.less
+++ b/demo/src/less/lib/normalize.less
--- a/demo/src/less/variables.less
+++ b/demo/src/less/variables.less
--- a/demo/src/sprite/icon-github.svg
+++ b/demo/src/sprite/icon-github.svg
--- a/demo/src/sprite/icon-twitter.svg
+++ b/demo/src/sprite/icon-twitter.svg
--- a/demo/src/sprite/icon-vimeo.svg
+++ b/demo/src/sprite/icon-vimeo.svg
--- a/demo/src/sprite/icon-youtube.svg
+++ b/demo/src/sprite/icon-youtube.svg
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
--- a/docs/dist/docs.js
+++ b/docs/dist/docs.js
@ -1 +0,0 @@
-"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}}),plyr.loadSprite("dist/docs.svg"),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,n){if(t in s&&(n||t!=o)&&(o.length||t!=s.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case s.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case s.audio:r.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case s.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}o=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},o=window.location.hash.replace("#",""),n=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),n&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var a=!o.length;a&&(o=s.video),o in s&&history.replaceState({type:o},"",a?"":"#"+o),o!==s.video&&t(o,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@ -1,180 +0,0 @@
-// ==========================================================================
-// Docs example
-// ==========================================================================
-
-/*global plyr*/
-
-// Setup the player
-plyr.setup('.js-media-player', {
-	debug: 				true,
-	title: 				'Video demo',
-	iconUrl: 			'../dist/plyr.svg',
-	tooltips: 	{
-		controls: 		true
-	},
-	captions: {
-		defaultActive: 	true
-	}
-});
-plyr.loadSprite('dist/docs.svg');
-
-// General functions
-(function() {
-	var buttons = document.querySelectorAll('[data-source]'),
-		types = {
-			video: 		'video',
-			audio: 		'audio',
-			youtube: 	'youtube',
-			vimeo: 		'vimeo'
-		},
-		currentType = window.location.hash.replace('#', ''),
-		historySupport = (window.history && window.history.pushState);
-
-	// Bind to each button
-	for (var i = buttons.length - 1; i >= 0; i--) {
-		buttons[i].addEventListener('click', function() {
-			var type = this.getAttribute('data-source');
-
-			newSource(type);
-
-			if (historySupport) {
-				history.pushState({ 'type': type }, '', '#' + type);
-			}
-		});
-	}
-
-	// List for backwards/forwards
-	window.addEventListener('popstate', function(event) {
-		if(event.state && 'type' in event.state) {
-			newSource(event.state.type);
-		}
-	});
-
-	// On load
-	if(historySupport) {
-		var video = !currentType.length;
-
-		// If there's no current type set, assume video
-		if(video) {
-			currentType = types.video;
-		}
-
-		// Replace current history state
-		if(currentType in types) {
-			history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
-		}
-
-		// If it's not video, load the source
-		if(currentType !== types.video) {
-			newSource(currentType, true);
-		}
-	}
-
-	// Toggle class on an element
-	function toggleClass(element, className, state) {
-        if (element) {
-            if (element.classList) {
-                element.classList[state ? 'add' : 'remove'](className);
-            }
-            else {
-                var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
-                element.className = name + (state ? ' ' + className : '');
-            }
-        }
-    }
-
-	// Set a new source
-	function newSource(type, init) {
-		// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-		if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
-			return;
-		}
-
-		// Get plyr instance
-		var player = document.querySelector('.js-media-player').plyr;
-
-		switch(type) {
-			case types.video:
-				player.source({
-					type:       'video',
-					title: 		'View From A Blue Moon',
-					sources: [{
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
-						type:   'video/mp4'
-					},
-					{
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
-						type:   'video/webm'
-					}],
-					poster:     'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
-					tracks:     [{
-						kind:   'captions',
-						label:  'English',
-						srclang:'en',
-						src:    'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
-						default: true
-					}]
-				});
-				break;
-
-			case types.audio:
-				player.source({
-					type:       'audio',
-					title: 		'Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;',
-					sources: [{
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
-						type:   'audio/mp3'
-					},
-					{
-						src:    'https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
-						type:   'audio/ogg'
-					}]
-				});
-				break;
-
-			case types.youtube:
-				player.source({
-					type:       'video',
-					title: 		'View From A Blue Moon',
-					sources: [{
-				        src:    'bTqVqk7FSmY',
-				        type:   'youtube'
-				    }]
-				});
-				break;
-
-			case types.vimeo:
-				player.source({
-					type:       'video',
-					title: 		'View From A Blue Moon',
-					sources: [{
-				        src:    '143418951',
-				        type:   'vimeo'
-				    }]
-				});
-				break;
-		}
-
-		// Set the current type for next time
-		currentType = type;
-
-		// Remove active classes
-		for (var x = buttons.length - 1; x >= 0; x--) {
-			toggleClass(buttons[x].parentElement, 'active', false);
-		}
-
-		// Set active on parent
-		toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
-	}
-})();
-
-// Google analytics
-// For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf('plyr.io') > -1) {
-	(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
-	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-	ga('create', 'UA-40881672-11', 'auto');
-	ga('send', 'pageview');
-}
--- a/gulpfile.js
+++ b/gulpfile.js
@ -37,19 +37,19 @@ paths = {
        // Output paths
        output:         path.join(root, "dist/")
    },
-    docs: {
+    demo: {
        // Source paths
        src: {
-            less:       path.join(root, "docs/src/less/**/*"),
-            js:         path.join(root, "docs/src/js/**/*"),
-            sprite:     path.join(root, "docs/src/sprite/**/*")
+            less:       path.join(root, "demo/src/less/**/*"),
+            js:         path.join(root, "demo/src/js/**/*"),
+            sprite:     path.join(root, "demo/src/sprite/**/*")
        },
        // Output paths
-        output:         path.join(root, "docs/dist/"),
-        // Docs
-        root:           path.join(root, "docs/")
+        output:         path.join(root, "demo/dist/"),
+        // Demo
+        root:           path.join(root, "demo/")
    },
-    upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")]
+    upload: [path.join(root, "dist/**"), path.join(root, "demo/dist/**")]
 },

 // Task arrays
@ -178,10 +178,10 @@ build.less(bundles.plyr.less, "plyr");
 build.scss(bundles.plyr.scss, "plyr");
 build.sprite("plyr");

-// Docs files
-build.less(bundles.docs.less, "docs");
-build.js(bundles.docs.js, "docs");
-build.sprite("docs");
+// Demo files
+build.less(bundles.demo.less, "demo");
+build.js(bundles.demo.js, "demo");
+build.sprite("demo");

 // Build all JS
 gulp.task("js", function(){
@ -200,10 +200,10 @@ gulp.task("watch", function () {
    gulp.watch(paths.plyr.src.less, tasks.less);
    gulp.watch(paths.plyr.src.sprite, tasks.sprite);

-    // Docs
-    gulp.watch(paths.docs.src.js, tasks.js);
-    gulp.watch(paths.docs.src.less, tasks.less);
-    gulp.watch(paths.docs.src.sprite, tasks.sprite);
+    // Demo
+    gulp.watch(paths.demo.src.js, tasks.js);
+    gulp.watch(paths.demo.src.less, tasks.less);
+    gulp.watch(paths.demo.src.sprite, tasks.sprite);
 });

 // Default gulp task
@ -211,7 +211,7 @@ gulp.task("default", function(){
    run(tasks.js, tasks.less, tasks.sprite, "watch");
 });

-// Publish a version to CDN and docs
+// Publish a version to CDN and demo
 // --------------------------------------------

 // Some options
@ -225,7 +225,7 @@ options = {
            "Vary": "Accept-Encoding"
        }
    },
-    docs: {
+    demo: {
        headers: {
            "Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
            "Vary": "Accept-Encoding"
@ -245,15 +245,15 @@ options = {
 // If aws is setup
 if("cdn" in aws) {
    var regex       = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
-    cdnpath         = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
+    cdnpath         = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
    semver          = new RegExp("v" + regex, "gi"),
    localPath       = new RegExp("(\.\.\/)?dist", "gi"),
-    versionPath     = "https://" + aws.cdn.bucket + "/" + version;
+    versionPath     = "https://" + aws.cdn.domain + "/" + version;
 }

 // Publish version to CDN bucket
 gulp.task("cdn", function () {
-    console.log("Uploading " + version + " to " + aws.cdn.bucket + "...");
+    console.log("Uploading " + version + " to " + aws.cdn.domain + "...");

    // Upload to CDN
    return gulp.src(paths.upload)
@ -268,34 +268,34 @@ gulp.task("cdn", function () {
        .pipe(s3(aws.cdn, options.cdn));
 });

-// Publish to Docs bucket
-gulp.task("docs", function () {
-    console.log("Uploading " + version + " docs to " + aws.docs.bucket + "...");
+// Publish to demo bucket
+gulp.task("demo", function () {
+    console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");

    // Replace versioned files in readme.md
    gulp.src([root + "/readme.md"])
-        .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
        .pipe(gulp.dest(root));

    // Replace versioned files in plyr.js
    gulp.src(path.join(root, "src/js/plyr.js"))
        .pipe(replace(semver, "v" + version))
-        .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
+        .pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
        .pipe(gulp.dest(path.join(root, "src/js/")));

-    // Replace local file paths with remote paths in docs HTML
+    // Replace local file paths with remote paths in demo HTML
    // e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
-    gulp.src([paths.docs.root + "*.html"])
+    gulp.src([paths.demo.root + "*.html"])
        .pipe(replace(localPath, versionPath))
-        .pipe(s3(aws.docs, options.docs));
+        .pipe(s3(aws.demo, options.demo));

-    // Upload error.html to cdn (as well as docs site)
-    return gulp.src([paths.docs.root + "error.html"])
+    // Upload error.html to cdn (as well as demo site)
+    return gulp.src([paths.demo.root + "error.html"])
        .pipe(replace(localPath, versionPath))
-        .pipe(s3(aws.cdn, options.docs));
+        .pipe(s3(aws.cdn, options.demo));
 });

-// Open the docs site to check it's sweet
+// Open the demo site to check it's sweet
 gulp.task("symlinks", function () {
    console.log("Updating symlinks...");

@ -318,20 +318,20 @@ gulp.task("symlinks", function () {
        }));
 });

-// Open the docs site to check it's sweet
+// Open the demo site to check it's sweet
 gulp.task("open", function () {
-    console.log("Opening " + aws.docs.bucket + "...");
+    console.log("Opening " + aws.demo.domain + "...");

    // A file must be specified or gulp will skip the task
    // Doesn't matter which file since we set the URL above
    // Weird, I know...
-    return gulp.src([paths.docs.root + "index.html"])
+    return gulp.src([paths.demo.root + "index.html"])
        .pipe(open("", {
-            url: "http://" + aws.docs.bucket
+            url: "http://" + aws.demo.domain
        }));
 });

 // Do everything
 gulp.task("publish", function () {
-    run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs", "symlinks");
+    run(tasks.js, tasks.less, tasks.sprite, "cdn", "demo", "symlinks");
 });
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.6.15",
+  "version": "2.0.10",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "http://plyr.io",
  "main": "src/js/plyr.js",
@ -27,7 +27,11 @@
  "keywords": [
    "HTML5 Video",
    "HTML5 Audio",
-    "Media Player"
+    "Media Player",
+    "DASH",
+    "Shaka",
+    "WordPress",
+    "HLS"
  ],
  "repository": {
    "type": "git",
@ -38,7 +42,7 @@
    "url": "https://github.com/selz/plyr/issues"
  },
  "directories": {
-    "doc": "docs"
+    "doc": "readme.md"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
--- a/readme.md
+++ b/readme.md
@ -3,7 +3,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

 [Checkout the demo](https://plyr.io)

-[![Image of Plyr](https://cdn.selz.com/plyr/1.5/plyr_v1.6.6.png)](https://plyr.io)
+[![Image of Plyr](https://cdn.selz.com/plyr/plyr_v1.8.9.png)](https://plyr.io)

 ## Why?
 We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
@ -13,46 +13,63 @@ We wanted a lightweight, accessible and customizable media player that supports
 - **Lightweight** - under 10KB 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
+- **Responsive** - works with any screen size
 - **HTML Video & Audio** - support for both formats
 - **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
+- **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
 - **[API](#api)** - toggle playback, volume, seeking, and more
- **[Universal events](#events)** - no messing around with Vimeo and YouTube APIs, all events are universal across formats
+- **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
+- **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
 - **i18n support** - support for internationalization of controls
 - **No dependencies** - written in "vanilla" JavaScript, no jQuery required
+- **SASS and LESS** - to include in your build processes

 Oh and yes, it works with Bootstrap.

 ## Changelog
 Check out the [changelog](changelog.md) to see what's new with Plyr.

-## Planned Development
- Streaming
- Playback speed
+## Features currently being developed
+- Playback speed (#53)
+- Quality selection (#218)
+- Caption language selection (#385)
+- AirPlay
+- Picture in Picture (MacOS Sierra + Safari) (#366)
+[more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
+
+## Planned features
 - Playlists
- Multiple language captions (with selection)
+- Google cast
+- Facebook video support
+- Wistia video support
+- YouTube and Vimeo audio support
 - 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.

-## Implementation
-Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
+## CMS plugins

-**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.6.15/plyr.js` to `https://cdn.plyr.io/1.6.15/plyr.js`
+### [WordPress](https://wordpress.org/plugins/plyr/)
+Created and maintained by Ryan Anthony Drake ([@iamryandrake](https://github.com/iamryandrake))
+
+### [Neos](https://packagist.org/packages/jonnitto/plyr)
+Created and maintained by Jon Uhlmann ([@jonnitto](https://github.com/jonnitto))
+
+### [Kirby](https://github.com/dpschen/kirby-plyrtag)
+Created and maintained by Dominik Pschenitschni ([@dpschen](https://github.com/dpschen))
+
+## Using package managers
+You can grab the source using one of the following package managers.

 ### npm
-
-Using `npm`, you can grab Plyr:
 ```
 npm install plyr
 ```
 [https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)

 ### Bower
-
-If bower is your thang, you can grab Plyr using:
 ```
 bower install plyr
 ```
@ -67,24 +84,81 @@ ember addon:install ember-cli-plyr
 ```
 More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr)

-### CDN
-If you want to use our CDN, you can use the following:
+## Quick setup
+Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp).

+### HTML
+Plyr extends upon the standard HTML5 markup so that's all you need for those types. More info on advanced HTML markup can be found under [initialising](#initialising).
+
+#### HTML5 Video
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.6.15/plyr.css">
-<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
+<video poster="/path/to/poster.jpg" controls>
+  <source src="/path/to/video.mp4" type="video/mp4">
+  <source src="/path/to/video.webm" type="video/webm">
+  <!-- Captions are optional -->
+  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
+</video>
 ```

-The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.15/plyr.svg`.
-
-### CSS & Styling
-If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
-
+#### HTML5 Audio
 ```html
-<link rel="stylesheet" href="dist/plyr.css">
+<audio controls>
+  <source src="/path/to/audio.mp3" type="audio/mp3">
+  <source src="/path/to/audio.ogg" type="audio/ogg">
+</audio>
 ```

-The default setup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options. Check out the source for more on this.
+For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div>`):
+
+#### YouTube embed
+```html
+<div data-type="youtube" data-video-id="bTqVqk7FSmY"></div>
+```
+
+Note: `data-video-id` value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
+
+#### Vimeo embed
+```html
+<div data-type="vimeo" data-video-id="143418951"></div>
+```
+Note: `data-video-id` value can now be the ID or URL for the video. This attribute name will change in a future release to reflect this change.
+
+### JavaScript 
+Include the `plyr.js` script before the closing `</body>` tag and then call `plyr.setup()`. More info on `setup()` can be found under [initialising](#initialising).
+
+```html
+<script src="path/to/plyr.js"></script>
+<script>plyr.setup();</script>
+```
+
+If you want to use our CDN for the JavaScript, you can use the following:
+
+```html
+<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script>
+```
+
+### CSS
+Include the `plyr.css` stylsheet into your `<head>`
+
+```html
+<link rel="stylesheet" href="path/to/plyr.css">
+```
+
+If you want to use our CDN for the default CSS, you can use the following:
+
+```html
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css">
+```
+
+### SVG Sprite
+The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.10/plyr.svg`.
+
+## Advanced
+
+### LESS & SASS/SCSS
+You can use `plyr.less` or `plyr.scss` file included in `/src` as part of your build and change variables to suit your design. The LESS and SASS require you to use the [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) plugin (you should already) as all declerations use the W3C definitions - e.g. `appearance: none;` will be prefixed to `-webkit-appearance: none;` by autoprefixer. 
+
+The HTML markup uses the BEM methodology with `plyr` as the block, e.g. `.plyr__controls`. You can change the class hooks in the options to match any custom CSS you write. Check out the JavaScript source for more on this.

 ### SVG
 The icons used in the Plyr controls are loaded in an SVG sprite. The sprite is automatically loaded from our CDN by default. If you already have an icon build system in place, you can include the source plyr icons (see `/src/sprite` for source icons).
@ -100,103 +174,62 @@ More info on SVG sprites here:
 and the AJAX technique here:
 [http://css-tricks.com/ajaxing-svg-sprite/](http://css-tricks.com/ajaxing-svg-sprite/)

-### HTML
-The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media.
-```html
-<div class="plyr">
-	<video poster="/path/to/poster.jpg" controls>
-		<!-- Video files -->
-		<source src="/path/to/video.mp4" type="video/mp4">
-		<source src="/path/to/video.webm" type="video/webm">
-
-		<!-- Text track file -->
-		<track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
-
-		<!-- Fallback for browsers that don't support the <video> element -->
-		<a href="/path/to/movie.mp4">Download</a>
-	</video>
-</div>
-```
-And the same for `<audio>`
-
-```html
-<div class="plyr">
-	<audio controls>
-		<!-- Audio files -->
-		<source src="/path/to/audio.mp3" type="audio/mp3">
-		<source src="/path/to/audio.ogg" type="audio/ogg">
-
-		<!-- Fallback for browsers that don't support the <audio> element -->
-		<a href="/path/to/audio.mp3">Download</a>
-	</audio>
-</div>
-```
-
-For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div>`):
-
-```html
-<div class="plyr">
-	<div data-video-id="bTqVqk7FSmY" data-type="youtube"></div>
-</div>
-```
-```html
-<div class="plyr">
-	<div data-video-id="143418951" data-type="vimeo"></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.
-
-More info on CORS here:
+### Cross Origin (CORS)
+You'll notice the `crossorigin` attribute on the example `<video>` elements. This is because the TextTrack captions are loaded from another domain. If your TextTrack captions are also hosted on another domain, you will need to add this attribute and make sure your host has the correct headers setup. For more info on CORS checkout the MDN docs:
 [https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)

 ### Captions
-WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
-
-Be sure to [validate your caption files](https://quuz.org/webvtt/)
+WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element. Be sure to [validate your caption files](https://quuz.org/webvtt/).

 ### JavaScript

-#### Quick setup
+#### Initialising

-Here's an example of a default setup:
-
-```html
-<script src="https://cdn.plyr.io/1.6.15/plyr.js"></script>
-<script>plyr.setup();</script>
-```
-
-This will look for all elements with the specified container classname (default is `plyr`) and setup plyr on each element found. You can specify other options, including a different selector hook below. The container classname will be added to the specified element(s) if it is not already present (for the CSS).
-
-You can initialize the player a few other ways:
+By default, `setup()` will find all `<video>`, `<audio>` and `[data-type]` elements with the document and initialises on any found. Each target media element found will be wrapped in a `<div>` for styling and setup individually. You can specify a variety of arguments to `setup()` to use, including a different NodeList, HTMLElement, Array of HTMLElements or string selector as below:

 Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
 ```javascript
-plyr.setup(document.querySelectorAll('.js-plyr'), options);
+plyr.setup(document.querySelectorAll('.js-player'), options);
 ```

 Passing a [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement):
 ```javascript
-plyr.setup(document.querySelector('.js-plyr'), options);
+plyr.setup(document.querySelector('.js-player'), options);
+```
+
+Passing an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)s:
+```javascript
+plyr.setup([
+	document.querySelector('.js-player-1'),
+	document.querySelector('.js-player-2')
+], options);
 ```

 Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll):
 ```javascript
-plyr.setup('.js-plyr', options);
+plyr.setup('.js-player', options);
 ```

+The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>` or `[data-type]` (for embeds) element itself or a container element. 
+
 Passing just the options object:
 ```javascript
 plyr.setup(options);
 ```

+`setup()` will return an array of *instances* that can be used with the [API](#api) methods. See the [API](#api) section for more info.
+
 #### RangeTouch
 Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with `<input type="range">` elements whereby touching the track to set the value doesn't work and sliding the thumb can be tricky. To combat this, I've created [RangeTouch](https://rangetouch.com) which I'd recommend including in your solution. It's a tiny script with a nice benefit for users on touch devices. 

 #### Options
+Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements:

-Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
+```html
+<video data-plyr='{ title: "testing" }'></video>
+```
+
+Note the single quotes encapsulating the JSON and double quotes on the object keys.

 <table class="table" width="100%">
  <thead>
@ -280,6 +313,12 @@ Options must be passed as an object to the `setup()` method as above or as JSON
      <td><code>true</code></td>
      <td>Click (or tap) of the video container will toggle pause/play.</td>
    </tr>
+    <tr>
+      <td><code>disableContextMenu</code></td>
+      <td>Boolean</td>
+      <td><code>true</code></td>
+      <td>Disable right click menu on video to <em>help</em> as very primitive obfuscation to prevent downloads of content.</td>
+    </tr>
    <tr>
      <td><code>hideControls</code></td>
      <td>Boolean</td>
@ -292,6 +331,12 @@ Options must be passed as an object to the `setup()` method as above or as JSON
      <td><code>false</code></td>
      <td>This will restore and *reload* HTML5 video once playback is complete. Note: depending on the browser caching, this may result in the video downloading again (or parts of it). Use with caution.</td>
    </tr>
+    <tr>
+      <td><code>keyboardShortcuts</code></td>
+      <td>Object</td>
+      <td><code>{ focused: true, global: false }</code></td>
+      <td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or globally as well (this will only work if there's one player in the document)</td>
+    </tr>
    <tr>
      <td><code>tooltips</code></td>
      <td>Object</td>
@ -388,27 +433,36 @@ Options must be passed as an object to the `setup()` method as above or as JSON

 ## API

-#### Fetching the plyr instance
-A `plyr` object is added to any element that Plyr is initialized on. You can then control the player by accessing methods in the `plyr` object.
+### Instance

-There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-plyr`) like so:
+The easiest way to access the plyr instances is to store the return value from your call to `setup()`:

 ```javascript
-var player = document.querySelector('.js-plyr').plyr;
+var players = plyr.setup('.js-player');
 ```

-Or you can use the returned object from your call to the setup method:
+This will return an array of all instances that were setup. Another way is to use `plyr.get()` to get all instances within a given container, for example:

 ```javascript
-var player = plyr.setup('.js-plyr')[0];
+var players = plyr.get('.js-player');
 ```

-This will return an array of plyr instances setup, so you need to specify the index of the instance you want. This is less useful if you are setting up mutliple instances. You can listen for the `setup` [event](#events) documented below which will return each instance one by one, as they are setup (in the `plyr` key of the event object).
+If no argument is passed, it will find all instances in the current document. This will return an array of all instances that were found in the given selector. 

-Once you have your instance, you can use the API methods below on it. For example to pause it:
+A final option is to access the instance through the event handlers:

 ```javascript
-player.pause();
+instance.on('ready', function(event) {
+  var instance = event.detail.plyr;
+});
+```
+
+### Methods
+
+Once you have your instances, you can use the API methods below on it. For example to pause the first player:
+
+```javascript
+players[0].pause();
 ```

 Here's a list of the methods supported:
@ -422,6 +476,36 @@ Here's a list of the methods supported:
  </tr>
 </thead>
 <tbody>
+  <tr>
+    <td><code>getContainer()</code></td>
+    <td>&mdash;</td>
+    <td>Get the players outer container element that is automatically injected.</td>
+  </tr>
+  <tr>
+    <td><code>getMedia()</code></td>
+    <td>&mdash;</td>
+    <td>Get the media element (<code>&gt;video&lt;</code>, <code>&gt;audio&lt;</code> or <code>&gt;div&lt;</code> for YouTube or Vimeo).</td>
+  </tr>
+  <tr>
+    <td><code>getEmbed()</code></td>
+    <td>&mdash;</td>
+    <td>Get the [embed](#embed) API to access those methods - either YouTube or Vimeo.</td>
+  </tr>
+  <tr>
+    <td><code>getType()</code></td>
+    <td>&mdash;</td>
+    <td>Get the type - 'video', 'audio', 'youtube' or 'vimeo'.</td>
+  </tr>
+  <tr>
+    <td><code>isReady()</code></td>
+    <td>&mdash;</td>
+    <td>Determine if the player is loaded and UI ready.</td>
+  </tr>
+  <tr>
+    <td><code>on()</code></td>
+    <td>String, Function</td>
+    <td>Watch for an event (first argument) and run a callback function (second argument). This saves you doing your own <code>addEventListner</code> code. This is chainable.</td>
+  </tr>
  <tr>
    <td><code>play()</code></td>
    <td>&mdash;</td>
@ -432,6 +516,11 @@ Here's a list of the methods supported:
    <td>&mdash;</td>
    <td>Pauses the media</td>
  </tr>
+  <tr>
+    <td><code>stop()</code></td>
+    <td>&mdash;</td>
+    <td>Stops the media</td>
+  </tr>
  <tr>
    <td><code>restart()</code></td>
    <td>&mdash;</td>
@ -452,6 +541,26 @@ Here's a list of the methods supported:
    <td>Number</td>
    <td>Seeks the media to the provided parameter, time in seconds.</td>
  </tr>
+  <tr>
+    <td><code>getCurrentTime()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float with the current time in seconds.</td>
+  </tr>
+  <tr>
+    <td><code>getDuration()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float with the duration in seconds.</td>
+  </tr>
+  <tr>
+    <td><code>getVolume()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a float between 0 and 1 for the current volume level.</td>
+  </tr>
+  <tr>
+    <td><code>isMuted()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a boolean for whether the media is currently muted.</td>
+  </tr>
  <tr>
    <td><code>setVolume(...)</code></td>
    <td>Number</td>
@ -462,6 +571,11 @@ Here's a list of the methods supported:
    <td>Boolean</td>
    <td>Toggles playback for the player based on either the boolean argument or it's current state.</td>
  </tr>
+  <tr>
+    <td><code>isPaused()</code></td>
+    <td>&mdash;</td>
+    <td>Will return a boolean for whether the media is currently paused.</td>
+  </tr>
  <tr>
    <td><code>toggleMute()</code></td>
    <td>&mdash;</td>
@ -511,18 +625,12 @@ Here's a list of the methods supported:
  <tr>
    <td><code>destroy()</code></td>
    <td>&mdash;</td>
-    <td>Destroys the plyr UI and any media event listeners, effectively restoring to the previous state before <code>setup()</code> was called.</td>
-  </tr>
-  <tr>
-    <td><code>restore()</code></td>
-    <td>&mdash;</td>
-    <td>Reverses the effects of the <code>destroy()</code> method, restoring the UI and listeners.</td>
+    <td>Restores the original element, reversing the effects of <code>setup()</code>.</td>
  </tr>
 </tbody>
 </table>

 #### .source() method
-
 This allows changing the plyr source and type on the fly.

 Video example:
@ -580,6 +688,8 @@ player.source({
 });
 ```

+Note: `src` can be the video ID or URL
+
 Vimeo example

 ```javascript
@ -593,7 +703,9 @@ player.source({
 });
 ```

-Some more details on the object parameters
+Note: `src` can be the video ID or URL
+
+More details on the object parameters

 <table class="table" width="100%">
  <thead>
@ -612,12 +724,12 @@ Some more details on the object parameters
    <tr>
      <td><code>title</code></td>
      <td>String</td>
-      <td>Title of the new media. Used for the aria labelling.</td>
+      <td>Title of the new media. Used for the `aria-label` attribute on the play button, and outer container.</td>
    </tr>
    <tr>
      <td><code>sources</code></td>
      <td>Array</td>
-      <td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
+      <td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, the video ID or URL must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
    </tr>
    <tr>
      <td><code>poster</code></td>
@ -632,10 +744,16 @@ Some more details on the object parameters
  </tbody>
 </table>

-
 ## Events
+You can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video. Using your reference to the instance, you can use the `on()` API method or `addEventListener()`. Access to the API can be obtained this way through the `event.detail.plyr` property. Here's an example:

-You can listen for events on the target element you setup Plyr on (see example under the table). Some events only apply to HTML5 audio and video.
+```javascript
+instance.on('ready', function(event) {
+  var instance = event.detail.plyr;
+});
+```
+
+These events also bubble up the DOM. The event target will be the container element.

 <table class="table" width="100%">
  <thead>
@ -646,6 +764,16 @@ You can listen for events on the target element you setup Plyr on (see example u
    </tr>
  </thead>
  <tbody>
+    <tr>
+      <td><code>setup</code></td>
+      <td></td>
+      <td>When an initial setup has completed</td>
+    </tr>
+    <tr>
+      <td><code>ready</code></td>
+      <td></td>
+      <td>Triggered when the instance is ready for API use and external APIs are ready (in the case of YouTube and Vimeo).</td>
+    </tr>
  	<tr>
  		<td><code>canplay</code></td>
  		<td>✔</td>
@ -664,7 +792,7 @@ You can listen for events on the target element you setup Plyr on (see example u
  	<tr>
  		<td><code>ended</code></td>
  		<td></td>
-		<td>Sent when playback completes.</td>
+  		<td>Sent when playback completes. Note: with Vimeo this does not occur if `loop` is enabled.</td>
  	</tr>
  	<tr>
  		<td><code>error</code></td>
@ -708,12 +836,12 @@ You can listen for events on the target element you setup Plyr on (see example u
  	</tr>
  	<tr>
  		<td><code>seeked</code></td>
-		<td>✔</td>
+  		<td></td>
  		<td>Sent when a seek operation completes.</td>
  	</tr>
  	<tr>
  		<td><code>seeking</code></td>
-		<td>✔</td>
+  		<td></td>
  		<td>Sent when a seek operation begins.</td>
  	</tr>
  	<tr>
@ -757,52 +885,103 @@ You can listen for events on the target element you setup Plyr on (see example u
  		<td>Captions toggled off</td>
  	</tr>
    <tr>
-		<td><code>ready</code></td>
+      <td><code>destroyed</code></td>
      <td></td>
-		<td>Triggered when initial setup is done or a source change has occurred.</td>
+      <td>When an instance is destroyed. The original element that replaced the container will be returned to your handler as the event target.</td>
    </tr>
 	</tbody>
 </table>

 Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)

-Here's an example of binding an event listener:
-
-```javascript
-document.querySelector('.js-plyr').addEventListener('ready', function(event) {
-	var player = event.target.plyr;
-});
-```
-
 ## Embeds
-
 YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.

 Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.

-The native API's can be accessed through the `embed` property of the plyr object. For example:
-
-```javascript
-document.querySelector('.js-plyr').addEventListener('ready', function(event) {
-	var player = event.target.plyr;
-
-	// YouTube
-	console.log(player.embed.getVideoData());
-
-	// Vimeo
-	console.log(player.embed.api('getColor'));
-});
-```
+The embed third party API's can be accessed through the `getEmbed()` API method. 

 More info on the respective API's here:
-[YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
-[Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
+
+- [YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
+- [Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)

 *Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.

-## Fullscreen
+## Shortcuts
+By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input. 

-Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `plyr-fullscreen` class to your container.
+<table class="table" width="100%">
+  <thead>
+    <tr>
+      <th width="25%">Key</th>
+      <th width="25%">Global</th>
+      <th width="50%">Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>0</code> to <code>9</code></td>
+      <td>✔</td>
+      <td>Seek from 0 to 90% respectively</td>
+    </tr> 
+    <tr>
+      <td><code>space</code></td>
+      <td></td>
+      <td>Toggle playback</td>
+    </tr>
+    <tr>
+      <td><code>K</code></td>
+      <td>✔</td>
+      <td>Toggle playback</td>
+    </tr>
+    <tr>
+      <td><code>&larr;</code></td>
+      <td></td>
+      <td>Seek backward by the <code>seekTime</code> option</td>
+    </tr>
+    <tr>
+      <td><code>&rarr;</code></td>
+      <td></td>
+      <td>Seek forward by the <code>seekTime</code> option</td>
+    </tr>
+    <tr>
+      <td><code>&uarr;</code></td>
+      <td></td>
+      <td>Increase volume</td>
+    </tr>
+    <tr>
+      <td><code>&darr;</code></td>
+      <td></td>
+      <td>Decrease volume</td>
+    </tr>
+    <tr>
+      <td><code>M</code></td>
+      <td>✔</td>
+      <td>Toggle mute</td>
+    </tr>
+    <tr>
+      <td><code>F</code></td>
+      <td>✔</td>
+      <td>Toggle fullscreen</td>
+    </tr>
+    <tr>
+      <td><code>C</code></td>
+      <td>✔</td>
+      <td>Toggle captions</td>
+    </tr>
+  </tbody>
+</table>
+
+## Streaming 
+Because Plyr is an extension of the standard HTML5 video and audio elements, third party streaming plugins can be used with Plyr. Massive thanks to Matias Russitto ([@russitto](https://github.com/russitto)) for working on this. Here's a few examples:
+
+- Using [hls.js](https://github.com/dailymotion/hls.js) - [Demo](http://codepen.io/sampotts/pen/JKEMqB)
+- Using [Shaka](https://github.com/google/shaka-player) - [Demo](http://codepen.io/sampotts/pen/zBNpVR)
+- Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN)
+
+## Fullscreen
+Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). 

 ## Browser support

@ -829,7 +1008,7 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
  </tbody>
 </table>

-&sup1; Mobile Safari on the iPhone forces the native player for `<video>` so no useful customisation is possible. `<audio>` elements have volume controls disabled.
+&sup1; Mobile Safari on the iPhone forces the native player for `<video>` so no useful customization is possible. `<audio>` elements have volume controls disabled.

 &sup2; Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)

@ -867,6 +1046,11 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]

 ## Used by
 - [Selz.com](https://selz.com)
+- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
+- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
+- [TomTom.com](http://prioritydriving.tomtom.com/)
+- [DIGBMX](http://digbmx.com/)
+- [Grime Archive](https://grimearchive.com/)
 - [koel - A personal music streaming server that works.](http://koel.phanan.net/)
 - [Oscar Radio](http://oscar-radio.xyz/)

--- a/src/js/plyr.js
+++ b/src/js/plyr.js
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -19,7 +19,8 @@
    position: relative;
    max-width: 100%;
    min-width: 200px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-family: @plyr-font-family;
+    direction: ltr;

    & when (@plyr-border-box = true) {
        // border-box everything
@ -39,6 +40,11 @@
        }
    }

+    // Focus
+    &:focus {
+        outline: 0;
+    }
+
    // Media elements
    video,
    audio {
@ -167,9 +173,6 @@
    position: relative;
    background: #000;
    border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }

 // Container for embeds
@ -177,7 +180,9 @@
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
-    border-radius: inherit;
+
+    // Require z-index to force border-radius
+    z-index: 0;

    iframe {
        position: absolute;
@ -187,6 +192,7 @@
        height: 100%;
        border: 0;
        user-select: none;
+        z-index: 1;
    }

    // Vimeo hack
@ -225,6 +231,8 @@
        border-radius: 2px;
        padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
        background: @plyr-captions-bg;
+        box-decoration-break: clone;
+        line-height: 150%;
    }
    span:empty {
        display: none;
@ -237,25 +245,30 @@
 .plyr--captions-active .plyr__captions {
    display: block;
 }
+.plyr--hide-controls .plyr__captions {
+    transform: translateY(-(@plyr-control-spacing * 1.5));
+}
+// Large captions in full screen on larger screens
+@media (min-width: @plyr-bp-screen-lg) {
    .plyr--fullscreen-active .plyr__captions {
        font-size: @plyr-font-size-captions-large;
    }
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-(@plyr-control-spacing * 1.5));
 }

 // Controls
 // --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
 // Playback controls
 .plyr__controls {
    display: flex;
    align-items: center; 
-
    line-height: 1;
    text-align: center;

-    transition: opacity .3s ease;
-
    // Spacing
    > button,
    .plyr__progress,
@ -280,7 +293,7 @@
        flex-shrink: 0;
        overflow: visible; // IE11
        vertical-align: middle;
-        padding: (@plyr-control-spacing * .7);
+        padding: @plyr-control-padding;
        border: 0;
        background: transparent;
        border-radius: 3px;
@ -289,8 +302,8 @@
        color: inherit;

        svg {
-            width: 18px;
-            height: 18px;
+            width: @plyr-control-icon-size;
+            height: @plyr-control-icon-size;
            display: block;
            fill: currentColor;
        }
@ -319,6 +332,7 @@
 // Hide controls 
 .plyr--hide-controls .plyr__controls {
    opacity: 0;
+    pointer-events: none;
 }

 // Video controls
@ -332,6 +346,7 @@
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    color: @plyr-video-control-color;
+    transition: opacity .3s ease;

    button {
        // Hover and tab focus
@ -349,7 +364,6 @@
    border-radius: inherit;
    background: @plyr-audio-controls-bg;
    border: @plyr-audio-controls-border;
-    box-shadow: @plyr-audio-controls-box-shadow;
    color: @plyr-audio-control-color;

    button {
@ -366,6 +380,7 @@
 .plyr__play-large {
    display: none;
    position: absolute;
+    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
@ -373,7 +388,7 @@
    background: @plyr-video-control-bg-hover;
    border: 4px solid currentColor;
    border-radius: 100%;
-    box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+    box-shadow: 0 1px 1px fade(#000, 15%);
    color: @plyr-video-control-color;
    transition: all .3s ease;

@ -480,6 +495,40 @@
    z-index: 3;
 }

+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus:focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
+
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@ -624,7 +673,6 @@
    display: inline-block;
    vertical-align: middle;
    font-size: @plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@ -673,7 +721,6 @@

 // Fullscreen
 // --------------------------------------------------------------
-.plyr--fullscreen,
 .plyr--fullscreen-active {
    position: fixed;
    top: 0;
@ -684,7 +731,7 @@
    width: 100%;
    z-index: 10000000;
    background: #000;
-    border-radius: 0;
+    border-radius: 0 !important;

    video {
        height: 100%;
--- a/src/less/variables.less
+++ b/src/less/variables.less
@ -11,7 +11,8 @@
 // Colors
@plyr-color-main:                       #3498db;

-// Font sizes
+// Font
+@plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@plyr-font-size-small:                  14px;
@plyr-font-size-base:                   16px;

@ -23,14 +24,15 @@
@plyr-font-size-captions-large:         (@plyr-font-size-base * 2);

 // Controls
+@plyr-control-icon-size:                18px;
@plyr-control-spacing:                  10px;
+@plyr-control-padding:                  (@plyr-control-spacing * .7);
@plyr-video-controls-bg:                #000;
@plyr-video-control-color:              #fff;
@plyr-video-control-color-hover:        #fff;
@plyr-video-control-bg-hover:           @plyr-color-main;
@plyr-audio-controls-bg:                #fff;
@plyr-audio-controls-border:            1px solid #dbe3e8;
-@plyr-audio-controls-box-shadow:        0 1px 1px fade(#000, 5%);
@plyr-audio-control-color:              #565D64;
@plyr-audio-control-color-hover:        #fff;
@plyr-audio-control-bg-hover:           @plyr-color-main;
@ -67,3 +69,4 @@
 // Breakpoints
@plyr-bp-screen-sm:                     480px;
@plyr-bp-screen-md:                     768px;
+@plyr-bp-screen-lg:                     1024px;
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@ -19,7 +19,8 @@
    position: relative;
    max-width: 100%;
    min-width: 200px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-family: $plyr-font-family;
+    direction: ltr;

    @if $plyr-border-box == true {
        // border-box everything
@ -39,6 +40,11 @@
      }
    }

+    // Focus
+    &:focus {
+        outline: 0;
+    }
+
    // Media elements
    video,
    audio {
@ -166,9 +172,6 @@
    position: relative;
    background: #000;
    border-radius: inherit;
-
-    // Cleaner radius, also forces iframe radius
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }

 // Container for embeds
@ -178,6 +181,9 @@
    overflow: hidden;
    border-radius: inherit;

+    // Require z-index to force border-radius
+    z-index: 0;
+
    iframe {
        position: absolute;
        top: 0;
@ -224,6 +230,8 @@
        border-radius: 2px;
        padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
        background: $plyr-captions-bg;
+        box-decoration-break: clone;
+        line-height: 150%;
    }
    span:empty {
        display: none;
@ -236,25 +244,30 @@
 .plyr--captions-active .plyr__captions {
    display: block;
 }
+.plyr--hide-controls .plyr__captions {
+    transform: translateY(-($plyr-control-spacing * 2));
+}
+// Large captions in full screen on larger screens
+@media (min-width: $plyr-bp-screen-lg) {
    .plyr--fullscreen-active .plyr__captions {
        font-size: $plyr-font-size-captions-large;
    }
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 2));
 }

 // Controls
 // --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
 // Playback controls
 .plyr__controls {
    display: flex;
    align-items: center; 
-
    line-height: 1;
    text-align: center;

-    transition: opacity .3s ease;
-
    // Spacing
    > button,
    .plyr__progress,
@ -288,8 +301,8 @@
        color: inherit;

        svg {
-            width: 18px;
-            height: 18px;
+            width: $plyr-control-icon-size;
+            height: $plyr-control-icon-size;
            display: block;
            fill: currentColor;
        }
@ -318,6 +331,7 @@
 // Hide controls 
 .plyr--hide-controls .plyr__controls {
    opacity: 0;
+    pointer-events: none;
 }

 // Video controls
@ -331,6 +345,7 @@
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    color: $plyr-video-control-color;
+    transition: opacity .3s ease;

    button {
        // Hover and tab focus
@ -348,7 +363,6 @@
    border-radius: inherit;
    background: $plyr-audio-controls-bg;
    border: $plyr-audio-controls-border;
-    box-shadow: $plyr-audio-controls-box-shadow;
    color: $plyr-audio-control-color;

    button {
@ -365,6 +379,7 @@
 .plyr__play-large {
    display: none;
    position: absolute;
+    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
@ -372,7 +387,7 @@
    background: $plyr-video-control-bg-hover;
    border: 4px solid currentColor;
    border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85);
+    box-shadow: 0 1px 1px transparentize(#000, .85);
    color: $plyr-video-control-color;
    transition: all .3s ease;

@ -479,6 +494,39 @@
    z-index: 3;
 }

+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus:focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@ -623,7 +671,6 @@
    display: inline-block;
    vertical-align: middle;
    font-size: $plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
@ -672,7 +719,6 @@

 // Fullscreen
 // --------------------------------------------------------------
-.plyr--fullscreen,
 .plyr--fullscreen-active {
    position: fixed;
    top: 0;
@ -683,7 +729,7 @@
    width: 100%;
    z-index: 10000000;
    background: #000;
-    border-radius: 0;
+    border-radius: 0 !important;

    video {
        height: 100%;
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@ -13,6 +13,7 @@ $plyr-sr-only-important:                true !default;
 $plyr-color-main:                       #3498db !default;

 // Font sizes
+$plyr-font-family:                      Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
 $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;

@ -24,14 +25,15 @@ $plyr-font-size-captions-medium:        ceil($plyr-font-size-base * 1.5) !defaul
 $plyr-font-size-captions-large:         ($plyr-font-size-base * 2) !default;

 // Controls
+$plyr-control-icon-size:                18px !default;
 $plyr-control-spacing:                  10px !default;
+$plyr-control-padding:                  ($plyr-control-spacing * .7) !default;
 $plyr-video-controls-bg:                #000 !default;
 $plyr-video-control-color:              #fff !default;
 $plyr-video-control-color-hover:        #fff !default;
 $plyr-video-control-bg-hover:           $plyr-color-main !default;
 $plyr-audio-controls-bg:                #fff !default;
 $plyr-audio-controls-border:            1px solid #dbe3e8 !default;
-$plyr-audio-controls-box-shadow:        0 1px 1px transparentize(#000, .95) !default;
 $plyr-audio-control-color:              #565D64 !default;
 $plyr-audio-control-color-hover:        #fff !default;
 $plyr-audio-control-bg-hover:           $plyr-color-main;
@ -68,3 +70,4 @@ $plyr-range-selected-bg: 				$plyr-color-main !default;
 // Breakpoints
 $plyr-bp-screen-sm:                     480px !default;
 $plyr-bp-screen-md:                     768px !default;
+$plyr-bp-screen-lg:                     1024px !default;
Author	SHA1	Message	Date
Sam Potts	94208dce76	v2.0.10 - Added seek event fixes for Vimeo and YouTube (fixes #409) - Added support for embed URLs rather than ID only (fixes #345)	2016-11-02 18:14:06 +11:00
Sam Potts	efe54fbba4	Added seek event fixes (fixes #409 ), Added support for URLs (fixes #345 )	2016-11-02 18:09:40 +11:00
Sam Potts	10561d6c83	Merge pull request #408 from gurupras/urlparser Added logic to parse youtube video id	2016-11-02 16:59:28 +11:00
Guru Prasad Srinivasa	0ef87f93a6	Added logic to parse youtube video id This commit is targetted at solving issue#345 and adds functionality to parse youtube video IDs from various types of youtube video URLs. Other embed types like vimeo/soundcloud can be extended by following a similar structure as implemented in this commit.	2016-10-30 00:49:17 -04:00
Sam Potts	a3ed309342	v2.0.9 - Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)	2016-10-23 15:18:53 +11:00
Sam Potts	08b4c09b89	Temporary patch for the YouTube API issues with `getDuration()` (relates to #374 )	2016-10-23 15:18:08 +11:00
Sam Potts	a509a5e1bc	v2.0.8 - Added `isPaused()` API method (thanks to @darrena092) - Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357) - Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390) - Fix for Firefox VTT compatibility (thanks to @magourex) - Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392) - Added Issue and PR templates with the aim of reducing duplicate or duff issues	2016-10-23 13:48:05 +11:00
Sam Potts	bec10e7836	Fix for caption size (fixes #390 ), Fix for Firefox Dev (fixes #392 )	2016-10-23 13:35:49 +11:00
Sam Potts	f9a184800b	Add Issue and PR templates	2016-10-23 13:34:44 +11:00
Sam Potts	f428c3ff8b	Manually merged #395	2016-10-23 12:19:39 +11:00
Sam Potts	97eb40a8e3	Merge pull request #389 from darrena092/master Added .isPaused().	2016-10-23 11:51:10 +11:00
Darren Anderson	8211631950	Gulp build done.	2016-10-06 15:43:41 +01:00
Darren Anderson	a17cbb0e8b	Added .isPaused to API	2016-10-06 15:33:49 +01:00
Sam Potts	8098be6f93	Merge pull request #379 from magourex/master Support WebVTT with CRLF or LF Line separator with firefox #378	2016-10-01 22:10:35 +10:00
Thomas LM	1c73c9fbfe	Update plyr.js	2016-09-27 10:57:35 +02:00
Sam Potts	978606edb4	CSS path	2016-09-06 23:54:04 +10:00
Sam	435b5c74bf	Fixed API method, added new methods (fixes #346 , #351 ) - Fixed `getCurrentTime()` method (fixes #351) - Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)	2016-08-29 23:36:43 +10:00
Sam	15fd7041ab	Fixed AMD definition	2016-08-26 21:43:51 +10:00
Sam Potts	1ced6b4d67	Vimeo IE9/10 (Fixes #348 ), HTML5 ready event (Fixes #349 )	2016-08-26 18:15:24 +10:00
Sam	6694c1e6cf	Fix for Firefox full screen (fixes #343 )	2016-08-23 00:34:43 +10:00
Sam Potts	19ca906e50	Update changelog.md	2016-08-22 20:41:49 +10:00
Sam Potts	12e94775d6	Global keyboard shortcut changes	2016-08-22 14:44:18 +10:00
Sam Potts	df7f52d885	Added ‘global’ keyboard shortcut option	2016-08-22 14:15:49 +10:00
Sam Potts	d5b5faafbb	Version bump for NPM	2016-08-22 13:08:19 +10:00
Sam Potts	a318e8588b	Merge branch 'master' of https://github.com/Selz/plyr	2016-08-22 13:07:07 +10:00
Sam Potts	51fb252cd8	Update changelog.md	2016-08-22 13:06:26 +10:00
Sam Potts	86b2f61b56	Bump to v2.0.0	2016-08-22 13:00:47 +10:00
Sam Potts	232a9fe868	Update changelog.md	2016-08-22 12:53:38 +10:00
Sam Potts	e8bfe73b1d	Update readme.md	2016-08-22 08:40:02 +10:00
Sam Potts	ab0d762675	Update readme.md	2016-08-21 22:46:11 +10:00
Sam Potts	a6a314e011	Update readme.md	2016-08-21 21:53:16 +10:00
Sam Potts	514bdff92e	Update readme.md	2016-08-21 21:53:02 +10:00
Sam Potts	745e56a3a3	Update readme.md	2016-08-21 21:40:24 +10:00
Sam Potts	130fb78b4c	Version bump	2016-08-21 19:47:13 +10:00
Sam Potts	3718ec69ba	Use minified	2016-08-21 19:45:45 +10:00
Sam Potts	4610f4a8c9	Firefox and Edge fixes	2016-08-21 19:44:46 +10:00
Sam Potts	a8062354ec	Loading tweaks, Microsoft Edge tweaks	2016-08-21 19:25:21 +10:00
Sam	aac0a5a3a9	Work on docs	2016-08-21 10:30:11 +10:00
Sam	92b9e3400b	Keyboard shortcuts	2016-08-20 23:39:18 +10:00
Sam	bea513f5dd	Jshint tweaks, changelog	2016-08-20 20:11:21 +10:00
Sam Potts	9d109bf02d	Refactoring and bug fixing	2016-08-20 18:02:02 +10:00
Sam Potts	fc45ab48c9	Merge branch 'master' into develop # Conflicts: # src/js/plyr.js	2016-08-20 17:46:05 +10:00
Sam Potts	58e9b02405	Merge	2016-08-06 11:09:55 +10:00
Sam Potts	b578fb4840	Merge branch 'master' of https://github.com/Selz/plyr	2016-08-06 11:08:33 +10:00
Sam Potts	f18d9589eb	Font stack SASS fix (Fixes #328 )	2016-08-06 11:08:28 +10:00
Sam Potts	35c6ec9461	Manually merged #313 PR	2016-08-06 11:08:04 +10:00
Sam Potts	56d9730d0a	Merge pull request #326 from mkaziz/master Updated define to work with AMD imports	2016-08-06 10:15:53 +10:00
Khalid Aziz	6e18bc8b31	Updated define to work with AMD imports	2016-08-04 02:05:12 -05:00
Sam Potts	81756a1af9	Merge pull request #322 from mortonfox/patch-1 Fix the Initialising and Options anchor links	2016-07-30 14:10:34 +10:00
Morton Fox	05e1ab1165	Fix the Initialising and Options anchor links	2016-07-30 00:09:39 -04:00
Sam Potts	a0ddc5e6eb	Merge pull request #321 from electerious/patch-1 Added Array as selector in .setup() to readme	2016-07-25 08:53:29 +10:00
Tobias Reich	dc40b1f93a	Added Array as selector in .setup() to readme Documentation for #319	2016-07-24 20:52:20 +02:00
Sam Potts	d7cc29f2fb	Vimeo keyboard focus fix (Fixes #317 ), Fix for Vimeo on basic support devices	2016-07-23 11:11:17 +10:00
Sam Potts	0505e49038	Vimeo API upgrade, YouTube Bugfix, Array support - Vimeo API upgrade - Fix for YouTube bug introduced in v1.8.9 (Fixes #320) - Added support for passing array to .setup() (Fixes #319)	2016-07-23 10:42:06 +10:00
Sam Potts	6ff1e47341	Merge branch 'master' of https://github.com/Selz/plyr	2016-07-21 21:59:26 +10:00
Sam Potts	e72a91de6e	Fix for seek issues introduced in v1.8.9	2016-07-21 21:59:16 +10:00
Sam Potts	52ec4c012d	Update readme.md	2016-07-21 21:32:56 +10:00
Sam Potts	ae89c92ab6	Update readme.md	2016-07-21 21:31:09 +10:00
Sam Potts	57ad124ce8	v1.8.9	2016-07-21 21:25:27 +10:00
Sam Potts	a85d45d2e5	Fix for fullscreen not being defined (Fixes #295 )	2016-07-21 21:21:10 +10:00
Sam Potts	a6f57fc034	Fix for multiline captions (Fixes #314 )	2016-07-21 21:15:44 +10:00
Sam Potts	04c9653b86	Merge branch 'master' of https://github.com/Selz/plyr	2016-07-21 21:14:29 +10:00
Sam Potts	b8cdc71001	Clean up of type checks and fix for _restart() (Fixes #315 )	2016-07-21 21:14:22 +10:00
Sam Potts	277ebf0fd1	Merge pull request #312 from dpschen/patch-1 Add kirby-plyrtag	2016-07-14 22:03:50 +10:00
Dominik Pschenitschni	7682d998e7	Add kirby-plyrtag Added a Kirby cms kirbytag https://getkirby.com/	2016-07-14 12:52:28 +02:00
Sam Potts	05b9b9a831	Fix for MEDIA_ERR_SRC_NOT_SUPPORTED when calling .source() API method	2016-07-14 17:13:37 +10:00
Sam Potts	eee699cec6	Version bump	2016-07-10 20:59:42 +10:00
Sam Potts	3c9e9862d8	Added getCurrentTime API method (fixes #292 )	2016-07-10 20:58:19 +10:00
Sam Potts	39dc651a9d	Fix for !hideControls on touch devices (fixes #303 )	2016-07-10 20:50:55 +10:00
Sam Potts	4effda125a	Merge branch 'master' of https://github.com/Selz/plyr	2016-07-10 20:45:58 +10:00
Sam Potts	bf9de231d8	Styling minor tweaks	2016-07-10 20:45:54 +10:00
Sam Potts	ef12332505	Update readme.md	2016-06-29 16:23:38 +10:00
Sam Potts	1b735f1727	Update readme.md	2016-06-26 22:21:19 +10:00
Sam Potts	7f7ecf852e	Line height fix	2016-06-26 09:07:42 +10:00
Sam Potts	931672895f	Reverted font size change	2016-06-26 09:04:38 +10:00
Sam Potts	0952bc8239	Built JS	2016-06-26 08:45:06 +10:00
Sam Potts	7e7508ca82	Fixed overflow issues (fixes #286 )	2016-06-26 08:34:36 +10:00
Sam Potts	095d100ba4	Version bump	2016-06-25 23:47:30 +10:00
Sam Potts	c61fad51c1	Fix for z-index on large play button	2016-06-25 23:46:37 +10:00
Sam Potts	7b11c6803d	Merge pull request #283 from arrowthemes/patch-1 Make the player button clickable on small videos	2016-06-25 17:44:07 +04:00
Sam Potts	9b75436380	v1.8.3 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback - Fixed IE11 icon loading (fixes #269) - Updated screenshot (fixes #281) - Added WordPress plugin (fixes #239) - Added Neos plugin - Added HLS, Shaka and dash.js examples (see #235 for more) - Improvements for controls hiding and showing on touch devices	2016-06-25 23:39:00 +10:00
Sam Potts	be19b72719	Merge branch 'master' of https://github.com/Selz/plyr # Conflicts: # dist/plyr.css # src/less/plyr.less # src/scss/plyr.scss	2016-06-25 22:35:04 +10:00
Sam Potts	2fdcc18356	Hide Shadow DOM elements	2016-06-25 22:33:23 +10:00
Sam Potts	6425a33ccd	Merge pull request #284 from Integer64/develop fix name svg	2016-06-22 19:10:48 +01:00
Integer64	12c5dbd290	fix name svg	2016-06-23 01:56:14 +08:00
Joel Mbugua	cb591dac0c	Make the player button clickable on small videos If you set the plyr video to width of 300px, the plyr__controls overlays the play centered play button such that you can't click on the play button. Adding a z-index on the plyr .plyr__play-large fixes that.	2016-06-21 21:59:00 +03:00
Sam Potts	4c1cdea56e	Merge pull request #275 from wilsonmsalberto/master Prevent error when verifying if play buttons exist	2016-06-13 18:49:20 +01:00
Wilson Alberto	80cfabbaf9	Prevent error when verifying if play buttons exist	2016-06-13 17:01:46 +01:00
Sam	c7d28b09c0	Fixed event bubbling	2016-06-09 11:05:07 +01:00
Sam	161dd48312	Fixed log message	2016-06-09 09:57:16 +01:00
Sam	383515c1b7	Merge branch 'master' of https://github.com/Selz/plyr	2016-06-09 09:49:09 +01:00
Sam	98792168e4	Changes to setup return value, SVG bug fix (fixes #269 )	2016-06-09 09:49:01 +01:00
Sam Potts	01437a4a38	Merge pull request #271 from thegrammarnazi/patch-3 correct grammar	2016-06-09 09:46:49 +01:00
Grammar Nazi	03ed86f5c2	correct grammar	2016-06-09 01:39:52 -05:00
Sam	1a745e1eaa	Merge branch 'master' of https://github.com/Selz/plyr	2016-06-07 12:34:40 +01:00
Sam	70646ca907	See changelog (fixes #265 , #253 , #257 )	2016-06-07 12:34:36 +01:00
Sam Potts	af774b6f02	Merge pull request #260 from cytec/fix-control-icon-size use $plyr-control-icon-size in sass file	2016-06-02 10:41:36 +01:00
cytec	7a9eac093a	use $plyr-control-icon-size in sass file	2016-06-02 11:40:09 +02:00
Sam	4afd311ef6	Version bump	2016-06-02 10:19:35 +01:00
Sam	7eec6c6739	Fix for multiple sprites being requested (fixes #259 )	2016-06-02 10:18:33 +01:00
Sam	521431e093	Fix for scroll direction on volume (fixes #258 )	2016-06-01 09:38:29 +01:00
Sam Potts	24bc415faf	Merge pull request #256 from MrSnowflake/develop In specific cases Plyr fails to initiate YT: YT.Player is not a constructor	2016-05-31 08:26:53 +01:00
Sam	552f448ccd	Seek rounding from 1 to 4 decimal places (fixes #242 )	2016-05-30 07:41:17 +01:00
MrSnowflake	152e94f229	Improved YT initialized check. Added an extra check to see wether YT API has been initialized. The current check is inadequate as YT can be an object while the API still isn't completely initialized.	2016-05-30 00:35:07 +02:00
Sam Potts	cb318dd6ad	Update readme.md	2016-05-27 08:42:11 +01:00
Sam	9ee0d00a35	Merge branch 'master' of https://github.com/Selz/plyr	2016-05-26 22:32:23 +01:00
Sam	c0909095e3	Added `disableContextMenu` option to hide the right click context menu (fixes #248 and #225 )	2016-05-26 22:32:18 +01:00
Sam Potts	1e732694eb	Merge pull request #246 from zvizvi/master FIx Plyr to work with RTL systems	2016-05-26 08:03:40 +01:00
Tzvi	30922246e9	FIx Plyr to work with RTL systems	2016-05-26 03:35:08 +03:00
Tzvi	edf5a14171	FIx Plyr to work with RTL systems (less)	2016-05-26 03:33:05 +03:00
Tzvi	1c9f7901bc	FIx Plyr to work with RTL systems (scss)	2016-05-26 03:32:22 +03:00
Sam Potts	1bd6ffc84d	Merge pull request #237 from itaditya/master Update readme.md	2016-05-25 19:13:13 +01:00
Sam Potts	845ed000fc	Merge pull request #244 from thijstriemstra/patch-1 reference unminified js script	2016-05-25 19:12:05 +01:00
Thijs Triemstra	c7b2347ccd	reference unminified js script Reading the minified js script is impossible so reference the source version instead.	2016-05-25 19:41:12 +02:00
Sam Potts	a2f18c4e31	Merge pull request #241 from rabbitears/patch-1 Fix typo	2016-05-24 21:52:26 +01:00
louise louise	37c8948d2c	Fix typo	2016-05-24 14:08:15 -04:00
Sam	351e1540c5	Version bump	2016-05-23 22:33:16 +01:00
Sam	b3299b4641	Fix for Tooltips overflowing (fixes #230 )	2016-05-23 22:29:20 +01:00
Sam	be2e7d4c99	Always hide standard controls (Fixes #225 )	2016-05-23 21:19:53 +01:00
Aditya Agarwal	341fd59cf6	Update readme.md	2016-05-23 21:34:57 +05:30
Aditya Agarwal	a6c8b7e506	Update readme.md thang was a less common word , keeping it simple by using 'thing' is I think good , also there were SASS support so why not add that too.	2016-05-22 16:36:30 +05:30
				`@ -0,0 +1 @@`
				"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim\|\|function(){return this.replace(/^\s+\|\s+$/g,"")},r=Array[i].indexOf\|\|function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")\|\|""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]\|\|null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0\|\|t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i\|\|t!==r)&&(r.length\|\|t!==n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]\|\|function(){(e[o].q=e[o].q\|\|[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
				`@ -1 +0,0 @@`
				"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim\|\|function(){return this.replace(/^\s+\|\s+$/g,"")},r=Array[i].indexOf\|\|function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")\|\|""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]\|\|null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0\|\|t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),plyr.setup(".js-media-player",{debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}}),plyr.loadSprite("dist/docs.svg"),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,n){if(t in s&&(n\|\|t!=o)&&(o.length\|\|t!=s.video)){var r=document.querySelector(".js-media-player").plyr;switch(t){case s.video:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case s.audio:r.source({type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case s.youtube:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case s.vimeo:r.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}o=t;for(var a=i.length-1;a>=0;a--)e(i[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}for(var i=document.querySelectorAll("[data-source]"),s={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},o=window.location.hash.replace("#",""),n=window.history&&window.history.pushState,r=i.length-1;r>=0;r--)i[r].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),n&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var a=!o.length;a&&(o=s.video),o in s&&history.replaceState({type:o},"",a?"":"#"+o),o!==s.video&&t(o,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]\|\|function(){(e[o].q=e[o].q\|\|[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));