Merge branch 'develop' into master

1 files changed, 2847 insertions, 1536 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 7d57a10c..92c5175d 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,22 +1,24 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.12
+// plyr.js v2.0.10
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
 // Credits: http://paypal.github.io/accessible-html5-video-player/
 // ==========================================================================
 
-;(function(root, factory) {
+(function(root, factory) {
     'use strict';
-    /*global define,module*/
+    /* global define,module */
 
     if (typeof module === 'object' && typeof module.exports === 'object') {
         // Node, CommonJS-like
         module.exports = factory(root, document);
     } else if (typeof define === 'function' && define.amd) {
         // AMD
-        define([], function () { return factory(root, document); });
+        define([], function() {
+            return factory(root, document);
+        });
     } else {
         // Browser globals (root is window)
         root.plyr = factory(root, document);
@@ -25,176 +27,299 @@
     'use strict';
 
     // Globals
-    var fullscreen,
-    scroll = { x: 0, y: 0 },
+    var scroll = {
+        x: 0,
+        y: 0
+    };
 
     // Default config
-    defaults = {
-        enabled:                true,
-        debug:                  false,
-        autoplay:               false,
-        loop:                   false,
-        seekTime:               10,
-        volume:                 10,
-        volumeMin:              0,
-        volumeMax:              10,
-        volumeStep:             1,
-        duration:               null,
-        displayDuration:        true,
-        loadSprite:             true,
-        iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.12/plyr.svg',
-        blankUrl:               'https://cdn.selz.com/plyr/blank.mp4',
-        clickToPlay:            true,
-        hideControls:           true,
-        showPosterOnEnd:        false,
-        disableContextMenu:     true,
-        keyboardShorcuts:       {
-            focused:            true,
-            global:             false
+    var defaults = {
+        enabled: true,
+        debug: false,
+        autoplay: false,
+        loop: {
+            active: false,
+            start: 0,
+            end: null,
+            indicator: {
+                start: 0,
+                end: 0
+            }
+        },
+        seekTime: 10,
+        volume: 10,
+        defaultSpeed: 1.0,
+        currentSpeed: 1,
+        speeds: [0.5, 1.0, 1.5, 2.0],
+        duration: null,
+        displayDuration: true,
+        loadSprite: true,
+        iconPrefix: 'plyr',
+        iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg',
+        clickToPlay: true,
+        hideControls: true,
+        showPosterOnEnd: false,
+        disableContextMenu: true,
+        quality: {
+            options: false
+        },
+        keyboardShortcuts: {
+            focused: true,
+            global: false
         },
         tooltips: {
-            controls:           false,
-            seek:               true
+            controls: false,
+            seek: true
         },
+        tracks: [],
         selectors: {
-            html5:              'video, audio',
-            embed:              '[data-type]',
-            editable:           'input, textarea, select, [contenteditable]',
-            container:          '.plyr',
+            html5: 'video, audio',
+            embed: '[data-type]',
+            editable: 'input, textarea, select, [contenteditable]',
+            container: '.plyr',
             controls: {
-                container:      null,
-                wrapper:        '.plyr__controls'
+                container: null,
+                wrapper: '.plyr__controls'
             },
-            labels:             '[data-plyr]',
+            labels: '[data-plyr]',
             buttons: {
-                seek:           '[data-plyr="seek"]',
-                play:           '[data-plyr="play"]',
-                pause:          '[data-plyr="pause"]',
-                restart:        '[data-plyr="restart"]',
-                rewind:         '[data-plyr="rewind"]',
-                forward:        '[data-plyr="fast-forward"]',
-                mute:           '[data-plyr="mute"]',
-                captions:       '[data-plyr="captions"]',
-                fullscreen:     '[data-plyr="fullscreen"]'
+                play: '[data-plyr="play"]',
+                pause: '[data-plyr="pause"]',
+                restart: '[data-plyr="restart"]',
+                rewind: '[data-plyr="rewind"]',
+                forward: '[data-plyr="fast-forward"]',
+                mute: '[data-plyr="mute"]',
+                captions: '[data-plyr="captions"]',
+                fullscreen: '[data-plyr="fullscreen"]',
+                pip: '[data-plyr="pip"]',
+                airplay: '[data-plyr="airplay"]',
+                settings: '[data-plyr="settings"]',
+                speed: '[data-plyr="speed"]',
+                loop: '[data-plyr="loop"]',
+                language: '[data-plyr="language"]',
+                quality: '[data-plyr="quality"]'
             },
-            volume: {
-                input:          '[data-plyr="volume"]',
-                display:        '.plyr__volume--display'
+            inputs: {
+                seek: '[data-plyr="seek"]',
+                volume: '[data-plyr="volume"]'
             },
-            progress: {
-                container:      '.plyr__progress',
-                buffer:         '.plyr__progress--buffer',
-                played:         '.plyr__progress--played'
+            display: {
+                currentTime: '.plyr__time--current',
+                duration: '.plyr__time--duration',
+                buffer: '.plyr__progress--buffer',
+                played: '.plyr__progress--played',
+                loop: '.plyr__progress--loop',
+                volume: '.plyr__volume--display',
             },
-            captions:           '.plyr__captions',
-            currentTime:        '.plyr__time--current',
-            duration:           '.plyr__time--duration'
+            progress: '.plyr__progress',
+            captions: '.plyr__captions',
+            menu: {
+                quality: '.js-plyr__menu__list--quality'
+            }
         },
         classes: {
-            setup:              'plyr--setup',
-            ready:              'plyr--ready',
-            videoWrapper:       'plyr__video-wrapper',
-            embedWrapper:       'plyr__video-embed',
-            type:               'plyr--{0}',
-            stopped:            'plyr--stopped',
-            playing:            'plyr--playing',
-            muted:              'plyr--muted',
-            loading:            'plyr--loading',
-            hover:              'plyr--hover',
-            tooltip:            'plyr__tooltip',
-            hidden:             'plyr__sr-only',
-            hideControls:       'plyr--hide-controls',
-            isIos:              'plyr--is-ios',
-            isTouch:            'plyr--is-touch',
+            setup: 'plyr--setup',
+            ready: 'plyr--ready',
+            videoWrapper: 'plyr__video-wrapper',
+            embedWrapper: 'plyr__video-embed',
+            control: 'plyr__control',
+            type: 'plyr--{0}',
+            stopped: 'plyr--stopped',
+            playing: 'plyr--playing',
+            muted: 'plyr--muted',
+            loading: 'plyr--loading',
+            hover: 'plyr--hover',
+            tooltip: 'plyr__tooltip',
+            hidden: 'plyr__sr-only',
+            hideControls: 'plyr--hide-controls',
+            isIos: 'plyr--is-ios',
+            isTouch: 'plyr--is-touch',
+            menu: {
+                value: 'plyr__menu__value',
+                badge: 'plyr__badge'
+            },
             captions: {
-                enabled:        'plyr--captions-enabled',
-                active:         'plyr--captions-active'
+                enabled: 'plyr--captions-enabled',
+                active: 'plyr--captions-active'
             },
             fullscreen: {
-                enabled:        'plyr--fullscreen-enabled',
-                active:         'plyr--fullscreen-active'
+                enabled: 'plyr--fullscreen-enabled',
+                active: 'plyr--fullscreen-active'
+            },
+            pip: {
+                enabled: 'plyr--pip-enabled',
+                active: 'plyr--pip-active'
+            },
+            airplay: {
+                enabled: 'plyr--airplay-enabled',
+                active: 'plyr--airplay-active'
             },
-            tabFocus:           'tab-focus'
+            tabFocus: 'tab-focus'
         },
         captions: {
-            defaultActive:      false
+            defaultActive: false,
+            selectedIndex: 0
         },
         fullscreen: {
-            enabled:            true,
-            fallback:           true,
-            allowAudio:         false
+            enabled: true,
+            fallback: true,
+            allowAudio: false
         },
         storage: {
-            enabled:            true,
-            key:                'plyr'
+            enabled: true,
+            key: 'plyr'
         },
-        controls:               ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'fullscreen'],
+        controls: [
+            'play-large',
+            'play',
+            'progress',
+            'current-time',
+            'mute',
+            'volume',
+            'captions',
+            'settings',
+            'pip',
+            'airplay',
+            'fullscreen'
+        ],
         i18n: {
-            restart:            'Restart',
-            rewind:             'Rewind {seektime} secs',
-            play:               'Play',
-            pause:              'Pause',
-            forward:            'Forward {seektime} secs',
-            played:             'played',
-            buffered:           'buffered',
-            currentTime:        'Current time',
-            duration:           'Duration',
-            volume:             'Volume',
-            toggleMute:         'Toggle Mute',
-            toggleCaptions:     'Toggle Captions',
-            toggleFullscreen:   'Toggle Fullscreen',
-            frameTitle:         'Player for {title}'
+            restart: 'Restart',
+            rewind: 'Rewind {seektime} secs',
+            play: 'Play',
+            pause: 'Pause',
+            forward: 'Forward {seektime} secs',
+            seek: 'Seek',
+            played: 'Played',
+            buffered: 'Buffered',
+            currentTime: 'Current time',
+            duration: 'Duration',
+            volume: 'Volume',
+            toggleMute: 'Toggle Mute',
+            toggleCaptions: 'Toggle Captions',
+            toggleFullscreen: 'Toggle Fullscreen',
+            frameTitle: 'Player for {title}',
+            captions: 'Captions',
+            settings: 'Settings',
+            speed: 'Speed',
+            quality: 'Quality',
+            loop: 'Loop',
+            start: 'Start',
+            end: 'End',
+            all: 'All',
+            reset: 'Reset',
         },
         types: {
-            embed:              ['youtube', 'vimeo', 'soundcloud'],
-            html5:              ['video', 'audio']
+            embed: ['youtube', 'vimeo', 'soundcloud'],
+            html5: ['video', 'audio']
         },
         // URLs
         urls: {
             vimeo: {
-                api:            'https://player.vimeo.com/api/player.js',
+                api: 'https://player.vimeo.com/api/player.js',
             },
             youtube: {
-                api:            'https://www.youtube.com/iframe_api'
+                api: 'https://www.youtube.com/iframe_api'
             },
             soundcloud: {
-                api:            'https://w.soundcloud.com/player/api.js'
+                api: 'https://w.soundcloud.com/player/api.js'
             }
         },
         // Custom control listeners
         listeners: {
-            seek:               null,
-            play:               null,
-            pause:              null,
-            restart:            null,
-            rewind:             null,
-            forward:            null,
-            mute:               null,
-            volume:             null,
-            captions:           null,
-            fullscreen:         null
+            seek: null,
+            play: null,
+            pause: null,
+            restart: null,
+            rewind: null,
+            forward: null,
+            mute: null,
+            volume: null,
+            captions: null,
+            fullscreen: null,
+            pip: null,
+            airplay: null,
+            speed: null,
+            quality: null,
+            loop: null,
+            language: null
         },
         // Events to watch on HTML5 media elements
-        events:                 ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
+        events: [
+            'ready',
+            'ended',
+            'progress',
+            'stalled',
+            'playing',
+            'waiting',
+            'canplay',
+            'canplaythrough',
+            'loadstart',
+            'loadeddata',
+            'loadedmetadata',
+            'timeupdate',
+            'volumechange',
+            'play',
+            'pause',
+            'error',
+            'seeking',
+            'seeked',
+            'emptied'
+        ],
         // Logging
-        logPrefix:              '[Plyr]'
+        logPrefix: ''
+    };
+
+    // Check variable types
+    var is = {
+        object: function(input) {
+            return input !== null && typeof(input) === 'object' && input.constructor === Object;
+        },
+        array: function(input) {
+            return input !== null && typeof(input) === 'object' && input.constructor === Array;
+        },
+        number: function(input) {
+            return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
+        },
+        string: function(input) {
+            return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
+        },
+        boolean: function(input) {
+            return input !== null && typeof input === 'boolean';
+        },
+        nodeList: function(input) {
+            return input !== null && input instanceof NodeList;
+        },
+        htmlElement: function(input) {
+            return input !== null && input instanceof HTMLElement;
+        },
+        function: function(input) {
+            return input !== null && typeof input === 'function';
+        },
+        event: function(input) {
+            return input !== null && input instanceof Event;
+        },
+        undefined: function(input) {
+            return input !== null && typeof input === 'undefined';
+        },
+        empty: function(input) {
+            return input === null || this.undefined(input) || ((this.string(input) || this.array(input) || this.nodeList(input)) && input.length === 0) || (this.object(input) && Object.keys(input).length === 0);
+        }
     };
 
     // Credits: http://paypal.github.io/accessible-html5-video-player/
     // Unfortunately, due to mixed support, UA sniffing is required
-    function _browserSniff() {
-        var ua = navigator.userAgent,
-            name = navigator.appName,
-            fullVersion = '' + parseFloat(navigator.appVersion),
-            majorVersion = parseInt(navigator.appVersion, 10),
-            nameOffset,
-            verOffset,
-            ix,
-            isIE = false,
-            isFirefox = false,
-            isChrome = false,
-            isSafari = false;
+    function getBrowser() {
+        var ua = navigator.userAgent;
+        var name = navigator.appName;
+        var fullVersion = '' + parseFloat(navigator.appVersion);
+        var majorVersion = parseInt(navigator.appVersion, 10);
+        var nameOffset;
+        var verOffset;
+        var ix;
+        var isIE = false;
+        var isFirefox = false;
+        var isChrome = false;
+        var isSafari = false;
 
         if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
             // MSIE 11
@@ -216,6 +341,7 @@
             isSafari = true;
             name = 'Safari';
             fullVersion = ua.substring(verOffset + 7);
+
             if ((verOffset = ua.indexOf('Version')) !== -1) {
                 fullVersion = ua.substring(verOffset + 8);
             }
@@ -226,7 +352,7 @@
             fullVersion = ua.substring(verOffset + 8);
         } else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
             // In most other browsers, 'name/version' is at the end of userAgent
-            name = ua.substring(nameOffset,verOffset);
+            name = ua.substring(nameOffset, verOffset);
             fullVersion = ua.substring(verOffset + 1);
 
             if (name.toLowerCase() === name.toUpperCase()) {
@@ -251,68 +377,51 @@
 
         // Return data
         return {
-            name:       name,
-            version:    majorVersion,
-            isIE:       isIE,
-            isFirefox:  isFirefox,
-            isChrome:   isChrome,
-            isSafari:   isSafari,
-            isIos:      /(iPad|iPhone|iPod)/g.test(navigator.platform),
-            isIphone:   /(iPhone|iPod)/g.test(navigator.userAgent),
-            isTouch:    'ontouchstart' in document.documentElement
+            name: name,
+            version: majorVersion,
+            isIE: isIE,
+            isFirefox: isFirefox,
+            isChrome: isChrome,
+            isSafari: isSafari,
+            isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
+            isTouch: 'ontouchstart' in document.documentElement
         };
     }
 
-    // Check for mime type support against a player instance
-    // Credits: http://diveintohtml5.info/everything.html
-    // Related: http://www.leanbackplyr.com/test/h5mt.html
-    function _supportMime(plyr, mimeType) {
-        var media = plyr.media;
-
-        if (plyr.type === 'video') {
-            // Check type
-            switch (mimeType) {
-                case 'video/webm':   return !!(media.canPlayType && media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
-                case 'video/mp4':    return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
-                case 'video/ogg':    return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
-            }
-        } else if (plyr.type === 'audio') {
-            // Check type
-            switch (mimeType) {
-                case 'audio/mpeg':   return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, ''));
-                case 'audio/ogg':    return !!(media.canPlayType && media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''));
-                case 'audio/wav':    return !!(media.canPlayType && media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''));
-            }
-        }
-
-        // If we got this far, we're stuffed
-        return false;
-    }
-
     // Inject a script
-    function _injectScript(source) {
+    function injectScript(source) {
         if (document.querySelectorAll('script[src="' + source + '"]').length) {
             return;
         }
 
         var tag = document.createElement('script');
         tag.src = source;
+
         var firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     }
 
+    // Determine if we're in an iframe
+    function inFrame() {
+        try {
+            return window.self !== window.top;
+        } catch (e) {
+            return true;
+        }
+    }
+
     // Element exists in an array
-    function _inArray(haystack, needle) {
+    function inArray(haystack, needle) {
         return Array.prototype.indexOf && (haystack.indexOf(needle) !== -1);
     }
 
     // Replace all
-    function _replaceAll(string, find, replace) {
+    function replaceAll(string, find, replace) {
         return string.replace(new RegExp(find.replace(/([.*+?\^=!:${}()|\[\]\/\\])/g, '\\$1'), 'g'), replace);
     }
 
     // Wrap an element
-    function _wrap(elements, wrapper) {
+    function wrap(elements, wrapper) {
         // Convert `elements` to an array, if necessary.
         if (!elements.length) {
             elements = [elements];
@@ -321,11 +430,11 @@
         // Loops backwards to prevent having to clone the wrapper on the
         // first element (see `child` below).
         for (var i = elements.length - 1; i >= 0; i--) {
-            var child   = (i > 0) ? wrapper.cloneNode(true) : wrapper;
+            var child = (i > 0) ? wrapper.cloneNode(true) : wrapper;
             var element = elements[i];
 
             // Cache the current parent and sibling.
-            var parent  = element.parentNode;
+            var parent = element.parentNode;
             var sibling = element.nextSibling;
 
             // Wrap the element (is automatically removed from its current
@@ -345,23 +454,8 @@
         }
     }
 
-    // Unwrap an element
-    // http://plainjs.com/javascript/manipulation/unwrap-a-dom-element-35/
-    /*function _unwrap(wrapper) {
-        // Get the element's parent node
-        var parent = wrapper.parentNode;
-
-        // Move all children out of the element
-        while (wrapper.firstChild) {
-            parent.insertBefore(wrapper.firstChild, wrapper);
-        }
-
-        // Remove the empty element
-        parent.removeChild(wrapper);
-    }*/
-
     // Remove an element
-    function _remove(element) {
+    function remove(element) {
         if (!element) {
             return;
         }
@@ -369,36 +463,119 @@
     }
 
     // Prepend child
-    function _prependChild(parent, element) {
+    function prependChild(parent, element) {
         parent.insertBefore(element, parent.firstChild);
     }
 
     // Set attributes
-    function _setAttributes(element, attributes) {
+    function setAttributes(element, attributes) {
         for (var key in attributes) {
-            element.setAttribute(key, (_is.boolean(attributes[key]) && attributes[key]) ? '' : attributes[key]);
+            element.setAttribute(key, attributes[key]);
+        }
+    }
+
+    // Get an attribute object from a string selector
+    function getAttributesFromSelector(selector, existingAttributes) {
+        // For example:
+        // '.test' to { class: 'test' }
+        // '#test' to { id: 'test' }
+        // '[data-test="test"]' to { 'data-test': 'test' }
+
+        if (!is.string(selector) || is.empty(selector)) {
+            return {};
         }
+
+        var attributes = {};
+
+        selector.split(',').forEach(function(selector) {
+            // Remove whitespace
+            selector = selector.trim();
+
+            // Get the first character
+            var start = selector.charAt(0);
+
+            switch (start) {
+                case '.':
+                    // Classname selector
+                    var className = selector.replace('.', '');
+
+                    // Add to existing classname
+                    if (is.object(existingAttributes) && is.string(existingAttributes.class)) {
+                        existingAttributes.class += ' ' + className;
+                    }
+
+                    attributes.class = className;
+                    break;
+
+                case '#':
+                    // ID selector
+                    attributes.id = selector.replace('#', '');
+                    break;
+
+                case '[':
+                    // Strip the []
+                    selector = selector.replace(/[\[\]]/g, '');
+
+                    // Get the parts if
+                    var parts = selector.split('=');
+                    var key = parts[0];
+
+                    // Get the value if provided
+                    var value = parts.length > 1 ? parts[1].replace(/[\"\']/g, '') : '';
+
+                    // Attribute selector
+                    attributes[key] = value;
+
+                    break;
+            }
+        });
+
+        return attributes;
     }
 
-    // Insert a HTML element
-    function _insertElement(type, parent, attributes) {
+    // Create a DocumentFragment
+    function createElement(type, attributes, text) {
         // Create a new <element>
         var element = document.createElement(type);
 
         // Set all passed attributes
-        _setAttributes(element, attributes);
+        if (is.object(attributes)) {
+            setAttributes(element, attributes);
+        }
+
+        // Add text node
+        if (is.string(text)) {
+            element.textContent = text;
+        }
+
+        // Return built element
+        return element;
+    }
+
+    // Insert a DocumentFragment
+    function insertElement(type, parent, attributes, text) {
+        // Create a new <element>
+        var element = createElement(type, attributes, text);
 
         // Inject the new element
-        _prependChild(parent, element);
+        prependChild(parent, element);
+    }
+
+    // Remove all child elements
+    function emptyElement(element) {
+        var length = element.childNodes.length;
+        while (length--) {
+            element.removeChild(element.lastChild);
+        }
     }
 
     // Get a classname from selector
-    function _getClassname(selector) {
+    function getClassname(selector) {
         return selector.replace('.', '');
     }
 
     // Toggle class on an element
-    function _toggleClass(element, className, state) {
+    function toggleClass(element, className, state) {
         if (element) {
             if (element.classList) {
                 element.classList[state ? 'add' : 'remove'](className);
@@ -410,7 +587,7 @@
     }
 
     // Has class name
-    function _hasClass(element, className) {
+    function hasClass(element, className) {
         if (element) {
             if (element.classList) {
                 return element.classList.contains(className);
@@ -422,41 +599,58 @@
     }
 
     // Element matches selector
-    function _matches(element, selector) {
-        var p = Element.prototype;
+    function matches(element, selector) {
+        var prototype = Element.prototype;
+
+        var matches = prototype.matches ||
+            prototype.webkitMatchesSelector ||
+            prototype.mozMatchesSelector ||
+            prototype.msMatchesSelector ||
+            function(s) {
+                return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
+            };
 
-        var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
-            return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
-        };
+        return matches.call(element, selector);
+    }
+
+    // Get the focused element
+    function getFocusElement() {
+        var focused = document.activeElement;
 
-        return f.call(element, selector);
+        if (!focused || focused === document.body) {
+            focused = null;
+        } else {
+            focused = document.querySelector(':focus');
+        }
+
+        return focused;
     }
 
     // Bind along with custom handler
-    function _proxyListener(element, eventName, userListener, defaultListener, useCapture) {
-        _on(element, eventName, function(event) {
-            if (userListener) {
-                userListener.apply(element, [event]);
+    function proxy(element, eventName, customListener, defaultListener, useCapture) {
+        on(element, eventName, function(event) {
+            if (customListener) {
+                customListener.apply(element, [event]);
             }
             defaultListener.apply(element, [event]);
         }, useCapture);
     }
 
     // Toggle event listener
-    function _toggleListener(element, events, callback, toggle, useCapture) {
+    function toggleListener(elements, events, callback, toggle, useCapture) {
         var eventList = events.split(' ');
 
         // Whether the listener is a capturing listener or not
         // Default to false
-        if (!_is.boolean(useCapture)) {
+        if (!is.boolean(useCapture)) {
             useCapture = false;
         }
 
         // If a nodelist is passed, call itself on each node
-        if (element instanceof NodeList) {
-            for (var x = 0; x < element.length; x++) {
-                if (element[x] instanceof Node) {
-                    _toggleListener(element[x], arguments[1], arguments[2], arguments[3]);
+        if (elements instanceof NodeList) {
+            for (var x = 0; x < elements.length; x++) {
+                if (elements[x] instanceof Node) {
+                    toggleListener(elements[x], arguments[1], arguments[2], arguments[3]);
                 }
             }
             return;
@@ -464,40 +658,40 @@
 
         // If a single node is passed, bind the event listener
         for (var i = 0; i < eventList.length; i++) {
-            element[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
+            elements[toggle ? 'addEventListener' : 'removeEventListener'](eventList[i], callback, useCapture);
         }
     }
 
-    // Bind event
-    function _on(element, events, callback, useCapture) {
-        if (element) {
-            _toggleListener(element, events, callback, true, useCapture);
+    // Bind event handler
+    function on(element, events, callback, useCapture) {
+        if (!is.undefined(element)) {
+            toggleListener(element, events, callback, true, useCapture);
         }
     }
 
-    // Unbind event
-    /*function _off(element, events, callback, useCapture) {
-        if (element) {
-            _toggleListener(element, events, callback, false, useCapture);
+    // Unbind event handler
+    function off(element, events, callback, useCapture) {
+        if (!is.undefined(element)) {
+            toggleListener(element, events, callback, false, useCapture);
         }
-    }*/
+    }
 
     // Trigger event
-    function _event(element, type, bubbles, properties) {
+    function event(element, type, bubbles, properties) {
         // Bail if no element
         if (!element || !type) {
             return;
         }
 
         // Default bubbles to false
-        if (!_is.boolean(bubbles)) {
+        if (!is.boolean(bubbles)) {
             bubbles = false;
         }
 
         // Create and dispatch the event
         var event = new CustomEvent(type, {
-            bubbles:    bubbles,
-            detail:     properties
+            bubbles: bubbles,
+            detail: properties
         });
 
         // Dispatch the event
@@ -506,14 +700,14 @@
 
     // Toggle aria-pressed state on a toggle button
     // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
-    function _toggleState(target, state) {
+    function toggleState(target, state) {
         // Bail if no target
         if (!target) {
             return;
         }
 
         // Get state
-        state = (_is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
+        state = (is.boolean(state) ? state : !target.getAttribute('aria-pressed'));
 
         // Set the attribute on target
         target.setAttribute('aria-pressed', state);
@@ -522,7 +716,7 @@
     }
 
     // Get percentage
-    function _getPercentage(current, max) {
+    function getPercentage(current, max) {
         if (current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
             return 0;
         }
@@ -532,7 +726,7 @@
     // Deep extend/merge destination object with N more objects
     // http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
     // Removed call to arguments.callee (used explicit function name instead)
-    function _extend() {
+    function extend() {
         // Get arguments
         var objects = arguments;
 
@@ -547,17 +741,25 @@
         }
 
         // First object is the destination
-        var destination = Array.prototype.shift.call(objects),
-            length      = objects.length;
+        var destination = Array.prototype.shift.call(objects);
+        if (!is.object(destination)) {
+            destination = {};
+        }
+
+        var length = objects.length;
 
         // Loop through all objects to merge
         for (var i = 0; i < length; i++) {
             var source = objects[i];
 
+            if (!is.object(source)) {
+                source = {};
+            }
+
             for (var property in source) {
                 if (source[property] && source[property].constructor && source[property].constructor === Object) {
                     destination[property] = destination[property] || {};
-                    _extend(destination[property], source[property]);
+                    extend(destination[property], source[property]);
                 } else {
                     destination[property] = source[property];
                 }
@@ -567,84 +769,49 @@
         return destination;
     }
 
-    // Check variable types
-    var _is = {
-        object: function(input) {
-            return input !== null && typeof(input) === 'object';
-        },
-        array: function(input) {
-            return input !== null && (typeof(input) === 'object' && input.constructor === Array);
-        },
-        number: function(input) {
-            return input !== null && (typeof(input) === 'number' && !isNaN(input - 0) || (typeof input === 'object' && input.constructor === Number));
-        },
-        string: function(input) {
-            return input !== null && (typeof input === 'string' || (typeof input === 'object' && input.constructor === String));
-        },
-        boolean: function(input) {
-            return input !== null && typeof input === 'boolean';
-        },
-        nodeList: function(input) {
-            return input !== null && input instanceof NodeList;
-        },
-        htmlElement: function(input) {
-            return input !== null && input instanceof HTMLElement;
-        },
-        function: function(input) {
-            return input !== null && typeof input === 'function';
-        },
-        undefined: function(input) {
-            return input !== null && typeof input === 'undefined';
-        }
-    };
-
     // Parse YouTube ID from url
-    function _parseYouTubeId(url) {
+    function parseYouTubeId(url) {
         var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
         return (url.match(regex)) ? RegExp.$2 : url;
     }
 
     // Fullscreen API
-    function _fullscreen() {
-        var fullscreen = {
-                supportsFullScreen: false,
-                isFullScreen: function() { return false; },
-                requestFullScreen: function() {},
-                cancelFullScreen: function() {},
-                fullScreenEventName: '',
-                element: null,
-                prefix: ''
-            },
-            browserPrefixes = 'webkit o moz ms khtml'.split(' ');
+    var fullscreen = (function() {
+        // Determine the prefix
+        var prefix = (function() {
+            var value = false;
 
-        // Check for native support
-        if (!_is.undefined(document.cancelFullScreen)) {
-            fullscreen.supportsFullScreen = true;
-        } else {
-            // Check for fullscreen support by vendor prefix
-            for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
-                fullscreen.prefix = browserPrefixes[i];
-
-                if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) {
-                    fullscreen.supportsFullScreen = true;
-                    break;
-                } else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
-                    // Special case for MS (when isn't it?)
-                    fullscreen.prefix = 'ms';
-                    fullscreen.supportsFullScreen = true;
-                    break;
-                }
+            if (is.function(document.cancelFullScreen)) {
+                value = '';
+            } else {
+                // Check for fullscreen support by vendor prefix
+                ['webkit', 'o', 'moz', 'ms', 'khtml'].some(function(prefix) {
+                    if (is.function(document[prefix + 'CancelFullScreen'])) {
+                        value = prefix;
+                        return true;
+                    } else if (is.function(document.msExitFullscreen) && document.msFullscreenEnabled) {
+                        // Special case for MS (when isn't it?)
+                        value = 'ms';
+                        return true;
+                    }
+                });
             }
-        }
 
-        // Update methods to do something useful
-        if (fullscreen.supportsFullScreen) {
+            return value;
+        })();
+
+        return {
+            prefix: prefix,
             // Yet again Microsoft awesomeness,
             // Sometimes the prefix is 'ms', sometimes 'MS' to keep you on your toes
-            fullscreen.fullScreenEventName = (fullscreen.prefix === 'ms' ? 'MSFullscreenChange' : fullscreen.prefix + 'fullscreenchange');
+            eventType: (prefix === 'ms' ? 'MSFullscreenChange' : prefix + 'fullscreenchange'),
 
-            fullscreen.isFullScreen = function(element) {
-                if (_is.undefined(element)) {
+            // Is an element fullscreen
+            isFullScreen: function(element) {
+                if (!support.fullscreen) {
+                    return false;
+                }
+                if (is.undefined(element)) {
                     element = document.body;
                 }
                 switch (this.prefix) {
@@ -653,29 +820,43 @@
                     case 'moz':
                         return document.mozFullScreenElement === element;
                     default:
-                        return document[this.prefix + 'FullscreenElement'] === element;
+                        return document[prefix + 'FullscreenElement'] === element;
                 }
-            };
-            fullscreen.requestFullScreen = function(element) {
-                if (_is.undefined(element)) {
+            },
+            requestFullScreen: function(element) {
+                if (!support.fullscreen) {
+                    return false;
+                }
+                if (!is.htmlElement(element)) {
                     element = document.body;
                 }
-                return (this.prefix === '') ? element.requestFullScreen() : element[this.prefix + (this.prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
-            };
-            fullscreen.cancelFullScreen = function() {
-                return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + (this.prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
-            };
-            fullscreen.element = function() {
-                return (this.prefix === '') ? document.fullscreenElement : document[this.prefix + 'FullscreenElement'];
-            };
-        }
 
-        return fullscreen;
-    }
+                console.log(prefix);
+
+                return (prefix === '') ? element.requestFullScreen() : element[prefix + (prefix === 'ms' ? 'RequestFullscreen' : 'RequestFullScreen')]();
+            },
+            cancelFullScreen: function() {
+                if (!support.fullscreen) {
+                    return false;
+                }
+                return (prefix === '') ? document.cancelFullScreen() : document[prefix + (prefix === 'ms' ? 'ExitFullscreen' : 'CancelFullScreen')]();
+            },
+            element: function() {
+                if (!support.fullscreen) {
+                    return null;
+                }
+                return (prefix === '') ? document.fullscreenElement : document[prefix + 'FullscreenElement'];
+            }
+        };
+    })();
 
-    // Local storage
-    var _storage = {
-        supported: (function() {
+    // Check for support
+    var support = {
+        // Fullscreen support and set prefix
+        fullscreen: fullscreen.prefix !== false,
+        // Local storage mode
+        // We can't assume if local storage is present that we can use it
+        storage: (function() {
             if (!('localStorage' in window)) {
                 return false;
             }
@@ -694,334 +875,1087 @@
 
                 // Check if value matches
                 return (result === 'OK');
+            } catch (e) {
+                return false;
             }
-            catch (e) {
+
+            return false;
+        })(),
+        // Picture-in-picture support
+        // Safari only currently
+        pip: (function() {
+            return is.function(createElement('video').webkitSetPresentationMode);
+        })(),
+        // Airplay support
+        // Safari only currently
+        airplay: (function() {
+            return is.function(window.WebKitPlaybackTargetAvailabilityEvent);
+        })(),
+        // Check for mime type support against a player instance
+        // Credits: http://diveintohtml5.info/everything.html
+        // Related: http://www.leanbackplayer.com/test/h5mt.html
+        mime: function(player, type) {
+            var media = player.media;
+
+            try {
+                // Bail if no checking function
+                if (!is.function(media.canPlayType)) {
+                    return false;
+                }
+
+                // Type specific checks
+                if (player.type === 'video') {
+                    switch (type) {
+                        case 'video/webm':
+                            return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, '');
+                        case 'video/mp4':
+                            return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, '');
+                        case 'video/ogg':
+                            return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, '');
+                    }
+                } else if (player.type === 'audio') {
+                    switch (type) {
+                        case 'audio/mpeg':
+                            return media.canPlayType('audio/mpeg;').replace(/no/, '');
+                        case 'audio/ogg':
+                            return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '');
+                        case 'audio/wav':
+                            return media.canPlayType('audio/wav; codecs="1"').replace(/no/, '');
+                    }
+                }
+            } catch (e) {
                 return false;
             }
 
+            // If we got this far, we're stuffed
             return false;
-        })()
+        }
     };
 
     // Player instance
     function Plyr(media, config) {
-        var plyr = this,
-        timers = {},
-        api;
+        var player = this;
+        var timers = {};
+        var api;
+
+        player.fullscreen = {
+            active: false
+        };
+
+        // Elements cache
+        player.elements = {
+            buttons: {},
+            display: {},
+            progress: {},
+            inputs: {},
+            settings: {
+                menu: null,
+                panes: {},
+                tabs: {}
+            },
+            media: media
+        };
+
+        // Captions
+        player.captions = {
+            enabled: false,
+            textTracks: false,
+            captions: []
+        };
 
         // Set media
-        plyr.media = media;
         var original = media.cloneNode(true);
 
-        // Trigger events, with plyr instance passed
-        function _triggerEvent(element, type, bubbles, properties) {
-            _event(element, type, bubbles, _extend({}, properties, {
-                plyr: api
-            }));
-        }
-
         // Debugging
-        function _console(type, args) {
+        function logger(type, args) {
             if (config.debug && window.console) {
                 args = Array.prototype.slice.call(args);
 
-                if (_is.string(config.logPrefix) && config.logPrefix.length) {
+                if (is.string(config.logPrefix) && config.logPrefix.length) {
                     args.unshift(config.logPrefix);
                 }
 
-                console[type].apply(console, args);
+                window.console[type].apply(window.console, args);
+            }
+        }
+        var log = function() {
+            logger('log', arguments);
+        };
+        var warn = function() {
+            logger('warn', arguments);
+        };
+        // Log config options and support
+        log('Config', config);
+        log('Support', support);
+
+        // Trigger events, with plyr instance passed
+        function trigger(element, type, bubbles, properties) {
+            event(element, type, bubbles, extend({}, properties, {
+                plyr: api
+            }));
+        }
+
+        // Find all elements
+        function getElements(selector) {
+            return player.elements.container.querySelectorAll(selector);
+        }
+
+        // Find a single element
+        function getElement(selector) {
+            return getElements(selector)[0];
+        }
+
+        // Trap focus inside container
+        function focusTrap() {
+            var tabbables = getElements('input:not([disabled]), button:not([disabled])');
+            var first = tabbables[0];
+            var last = tabbables[tabbables.length - 1];
+
+            function checkFocus(event) {
+                // If it is TAB
+                if (event.which === 9 && player.fullscreen.active) {
+                    if (event.target === last && !event.shiftKey) {
+                        // Move focus to first element that can be tabbed if Shift isn't used
+                        event.preventDefault();
+                        first.focus();
+                    } else if (event.target === first && event.shiftKey) {
+                        // Move focus to last element that can be tabbed if Shift is used
+                        event.preventDefault();
+                        last.focus();
+                    }
+                }
             }
+
+            // Bind the handler
+            on(player.elements.container, 'keydown', checkFocus);
         }
-        var _log = function() { _console('log', arguments) },
-            _warn = function() { _console('warn', arguments) };
 
-        // Log config options
-        _log('Config', config);
+        // Add elements to HTML5 media (source, tracks, etc)
+        function insertElements(type, attributes) {
+            if (is.string(attributes)) {
+                insertElement(type, player.elements.media, {
+                    src: attributes
+                });
+            } else if (is.array(attributes)) {
+                attributes.forEach(function(attribute) {
+                    insertElement(type, player.elements.media, attribute);
+                });
+            }
+        }
 
         // Get icon URL
-        function _getIconUrl() {
+        function getIconUrl() {
             return {
-                url:        config.iconUrl,
-                absolute:   (config.iconUrl.indexOf("http") === 0) || plyr.browser.isIE
+                url: config.iconUrl,
+                absolute: (config.iconUrl.indexOf("http") === 0) || player.browser.isIE
             };
         }
 
-        // Build the default HTML
-        function _buildControls() {
-            // Create html array
-            var html        = [],
-                iconUrl     = _getIconUrl(),
-                iconPath    = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
+        // Create <svg> icon
+        function createIcon(type, attributes) {
+            var namespace = 'http://www.w3.org/2000/svg';
+            var iconUrl = getIconUrl();
+            var iconPath = (!iconUrl.absolute ? iconUrl.url : '') + '#' + config.iconPrefix;
 
-            // Larger overlaid play button
-            if (_inArray(config.controls, 'play-large')) {
-                html.push(
-                    '<button type="button" data-plyr="play" class="plyr__play-large">',
-                        '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
-                    '</button>'
-                );
+            // Create <svg>
+            var icon = document.createElementNS(namespace, 'svg');
+            setAttributes(icon, extend(attributes, {
+                role: 'presentation'
+            }));
+
+            // Create the <use> to reference sprite
+            var use = document.createElementNS(namespace, 'use');
+            use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconPath + '-' + type);
+
+            // Add <use> to <svg>
+            icon.appendChild(use);
+
+            return icon;
+        }
+
+        // Create hidden text label
+        function createLabel(type) {
+            var text = config.i18n[type];
+
+            switch (type) {
+                case 'pip':
+                    text = 'PIP';
+                    break;
+
+                case 'airplay':
+                    text = 'AirPlay';
+                    break;
+            }
+
+            return createElement('span', {
+                class: config.classes.hidden
+            }, text);
+        }
+
+        // Create a badge
+        function createBadge(text) {
+            var badge = createElement('span', {
+                class: config.classes.menu.value
+            });
+
+            badge.appendChild(createElement('span', {
+                class: config.classes.menu.badge
+            }, text));
+
+            return badge;
+        }
+
+        // Create a <button>
+        function createButton(type, attributes) {
+            var button = createElement('button');
+            var iconDefault;
+            var iconToggled;
+            var labelKey;
+
+            if (!is.object(attributes)) {
+                attributes = {};
+            }
+
+            if ('class' in attributes) {
+                if (attributes.class.indexOf(config.classes.control) === -1) {
+                    attributes.class += ' ' + config.classes.control;
+                }
+            } else {
+                attributes.class = config.classes.control;
+            }
+
+            // Large play button
+            switch (type) {
+                case 'mute':
+                    labelKey = 'toggleMute';
+                    iconDefault = 'volume';
+                    iconToggled = 'muted';
+                    break;
+
+                case 'captions':
+                    labelKey = 'toggleCaptions';
+                    iconDefault = 'captions-off';
+                    iconToggled = 'captions-on';
+                    break;
+
+                case 'fullscreen':
+                    labelKey = 'toggleFullscreen';
+                    iconDefault = 'enter-fullscreen';
+                    iconToggled = 'exit-fullscreen';
+                    break;
+
+                case 'play-large':
+                    attributes.class = 'plyr__play-large';
+                    type = 'play';
+                    labelKey = 'play';
+                    iconDefault = 'play';
+                    break;
+
+                default:
+                    labelKey = type;
+                    iconDefault = type;
+            }
+
+            // Merge attributes
+            extend(attributes, getAttributesFromSelector(config.selectors.buttons[type], attributes));
+
+            // Add toggle icon if needed
+            if (is.string(iconToggled)) {
+                button.appendChild(createIcon(iconToggled, {
+                    class: 'icon--' + iconToggled
+                }));
             }
 
-            html.push('<div class="plyr__controls">');
+            // Add the icon
+            button.appendChild(createIcon(iconDefault));
+
+            // Add the label
+            button.appendChild(createLabel(labelKey));
+
+            // Set element attributes
+            setAttributes(button, attributes);
+
+            player.elements.buttons[type] = button;
+
+            return button;
+        }
+
+        // Create an <input type='range'>
+        function createRange(type, attributes) {
+            // Seek label
+            var label = createElement('label', {
+                for: attributes.id,
+                class: config.classes.hidden
+            }, config.i18n[type]);
+
+            // Seek input
+            var input = createElement('input', extend(getAttributesFromSelector(config.selectors.inputs[type]), {
+                type: 'range',
+                min: 0,
+                max: 100,
+                step: 0.1,
+                value: 0
+            }, attributes));
+
+            player.elements.inputs[type] = input;
+
+            return {
+                label: label,
+                input: input
+            }
+        }
+
+        // Create a <progress>
+        function createProgress(type, attributes) {
+            var progress = createElement('progress', extend(getAttributesFromSelector(config.selectors.display[type]), {
+                min: 0,
+                max: 100,
+                value: 0
+            }, attributes));
+
+            // Create the label inside
+            if (type !== 'volume') {
+                progress.appendChild(createElement('span', null, '0'));
+
+                var suffix = '';
+                switch (type) {
+                    case 'played':
+                        suffix = config.i18n.played;
+                        break;
+
+                    case 'buffer':
+                        suffix = config.i18n.buffered;
+                        break;
+                }
+
+                progress.textContent = '% ' + suffix.toLowerCase();
+            }
+
+            player.elements.display[type] = progress;
+
+            return progress;
+        }
+
+        // Create time display
+        function createTime(type) {
+            var container = createElement('span', {
+                class: 'plyr__time'
+            });
+
+            container.appendChild(createElement('span', {
+                class: config.classes.hidden
+            }, config.i18n[type]));
+
+            container.appendChild(createElement('span', getAttributesFromSelector(config.selectors.display[type]), '00:00'));
+
+            player.elements.display[type] = container;
+
+            return container;
+        }
+
+        // Build the default HTML
+        function createControls(data) {
+            // Create the container
+            var controls = createElement('div', getAttributesFromSelector(config.selectors.controls.wrapper));
 
             // Restart button
-            if (_inArray(config.controls, 'restart')) {
-                html.push(
-                    '<button type="button" data-plyr="restart">',
-                        '<svg><use xlink:href="' + iconPath + '-restart" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.restart + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'restart')) {
+                controls.appendChild(createButton('restart'));
             }
 
             // Rewind button
-            if (_inArray(config.controls, 'rewind')) {
-                html.push(
-                    '<button type="button" data-plyr="rewind">',
-                        '<svg><use xlink:href="' + iconPath + '-rewind" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.rewind + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'rewind')) {
+                controls.appendChild(createButton('rewind'));
             }
 
             // Play Pause button
             // TODO: This should be a toggle button really?
-            if (_inArray(config.controls, 'play')) {
-                html.push(
-                    '<button type="button" data-plyr="play">',
-                        '<svg><use xlink:href="' + iconPath + '-play" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.play + '</span>',
-                    '</button>',
-                    '<button type="button" data-plyr="pause">',
-                        '<svg><use xlink:href="' + iconPath + '-pause" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.pause + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'play')) {
+                controls.appendChild(createButton('play'));
+                controls.appendChild(createButton('pause'));
             }
 
             // Fast forward button
-            if (_inArray(config.controls, 'fast-forward')) {
-                html.push(
-                    '<button type="button" data-plyr="fast-forward">',
-                        '<svg><use xlink:href="' + iconPath + '-fast-forward" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.forward + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'fast-forward')) {
+                controls.appendChild(createButton('fast-forward'));
             }
 
             // Progress
-            if (_inArray(config.controls, 'progress')) {
-                // Create progress
-                html.push('<span class="plyr__progress">',
-                    '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
-                    '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
-                    '<progress class="plyr__progress--played" max="100" value="0" role="presentation"></progress>',
-                    '<progress class="plyr__progress--buffer" max="100" value="0">',
-                        '<span>0</span>% ' + config.i18n.buffered,
-                    '</progress>');
+            if (inArray(config.controls, 'progress')) {
+                var container = createElement('span', getAttributesFromSelector(config.selectors.progress));
+
+                // Seek range slider
+                var seek = createRange('seek', {
+                    id: 'plyr-seek-' + data.id
+                });
+                container.appendChild(seek.label);
+                container.appendChild(seek.input);
+
+                // TODO: Add loop display indicator
+
+                // Played progress
+                container.appendChild(createProgress('played'));
+
+                // Buffer progress
+                container.appendChild(createProgress('buffer'));
 
                 // Seek tooltip
                 if (config.tooltips.seek) {
-                    html.push('<span class="plyr__tooltip">00:00</span>');
+                    var tooltip = createElement('span', {
+                        role: 'tooltip',
+                        class: config.classes.tooltip
+                    }, '00:00');
+
+                    container.appendChild(tooltip);
+                    player.elements.display.seekTooltip = tooltip;
                 }
 
-                // Close
-                html.push('</span>');
+                player.elements.progress = container;
+                controls.appendChild(player.elements.progress);
             }
 
             // Media current time display
-            if (_inArray(config.controls, 'current-time')) {
-                html.push(
-                    '<span class="plyr__time">',
-                        '<span class="plyr__sr-only">' + config.i18n.currentTime + '</span>',
-                        '<span class="plyr__time--current">00:00</span>',
-                    '</span>'
-                );
+            if (inArray(config.controls, 'current-time')) {
+                controls.appendChild(createTime('currentTime'));
             }
 
             // Media duration display
-            if (_inArray(config.controls, 'duration')) {
-                html.push(
-                    '<span class="plyr__time">',
-                        '<span class="plyr__sr-only">' + config.i18n.duration + '</span>',
-                        '<span class="plyr__time--duration">00:00</span>',
-                    '</span>'
-                );
+            if (inArray(config.controls, 'duration')) {
+                controls.appendChild(createTime('duration'));
             }
 
             // Toggle mute button
-            if (_inArray(config.controls, 'mute')) {
-                html.push(
-                    '<button type="button" data-plyr="mute">',
-                        '<svg class="icon--muted"><use xlink:href="' + iconPath + '-muted" /></svg>',
-                        '<svg><use xlink:href="' + iconPath + '-volume" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.toggleMute + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'mute')) {
+                controls.appendChild(createButton('mute'));
             }
 
             // Volume range control
-            if (_inArray(config.controls, 'volume')) {
-                html.push(
-                    '<span class="plyr__volume">',
-                        '<label for="volume{id}" class="plyr__sr-only">' + config.i18n.volume + '</label>',
-                        '<input id="volume{id}" class="plyr__volume--input" type="range" min="' + config.volumeMin + '" max="' + config.volumeMax + '" value="' + config.volume + '" data-plyr="volume">',
-                        '<progress class="plyr__volume--display" max="' + config.volumeMax + '" value="' + config.volumeMin + '" role="presentation"></progress>',
-                    '</span>'
-                );
+            if (inArray(config.controls, 'volume')) {
+                var volume = createElement('span', {
+                    class: 'plyr__volume'
+                });
+
+                // Set the attributes
+                var attributes = {
+                    max: 10,
+                    value: config.volume
+                };
+
+                // Create the volume range slider
+                var range = createRange('volume', extend(attributes, {
+                    id: 'plyr-volume-' + data.id
+                }));
+                volume.appendChild(range.label);
+                volume.appendChild(range.input);
+
+                // Create the display progress
+                var progress = createProgress('volume', attributes);
+                volume.appendChild(progress);
+
+                controls.appendChild(volume);
             }
 
             // Toggle captions button
-            if (_inArray(config.controls, 'captions')) {
-                html.push(
-                    '<button type="button" data-plyr="captions">',
-                        '<svg class="icon--captions-on"><use xlink:href="' + iconPath + '-captions-on" /></svg>',
-                        '<svg><use xlink:href="' + iconPath+ '-captions-off" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.toggleCaptions + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'captions')) {
+                controls.appendChild(createButton('captions'));
+            }
+
+            // Settings button / menu
+            if (inArray(config.controls, 'settings')) {
+                var menu = createElement('span', extend(getAttributesFromSelector(config.selectors.buttons.settings), {
+                    class: 'plyr__menu'
+                }));
+
+                menu.appendChild(createButton('settings', {
+                    id: 'plyr-settings-toggle-' + data.id,
+                    'aria-haspopup': true,
+                    'aria-controls': 'plyr-settings-' + data.id,
+                    'aria-expanded': false
+                }));
+
+                var form = createElement('form', {
+                    class: 'plyr__menu__container',
+                    id: 'plyr-settings-' + data.id,
+                    'aria-hidden': true,
+                    'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
+                    role: 'tablist',
+                    tabindex: -1
+                });
+
+                var inner = createElement('div');
+
+                var home = createElement('div', {
+                    id: 'plyr-settings-' + data.id + '-home',
+                    'aria-hidden': false,
+                    'aria-labelled-by': 'plyr-settings-toggle-' + data.id,
+                    role: 'tabpanel',
+                    tabindex: -1
+                });
+
+                var tabs = createElement('ul', {
+                    role: 'tablist'
+                });
+
+                ['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
+                    var tab = createElement('li', {
+                        role: 'tab'
+                    });
+
+                    var button = createElement('button', extend(getAttributesFromSelector(config.selectors.buttons.settings), {
+                        type: 'button',
+                        class: config.classes.control + ' ' + config.classes.control + '--forward',
+                        id: 'plyr-settings-' + data.id + '-' + type + '-tab',
+                        'aria-haspopup': true,
+                        'aria-controls': 'plyr-settings-' + data.id + '-' + type,
+                        'aria-expanded': false
+                    }), config.i18n[type]);
+
+                    var value = createElement('span', {
+                        class: config.classes.menu.value
+                    });
+
+                    // Speed contains HTML entities
+                    value.innerHTML = data[type];
+
+                    button.appendChild(value);
+
+                    tab.appendChild(button);
+
+                    tabs.appendChild(tab);
+
+                    player.elements.settings.tabs[type] = tab;
+                });
+
+                home.appendChild(tabs);
+
+                inner.appendChild(home);
+
+                ['captions', 'quality', 'speed', 'loop'].forEach(function(type) {
+                    var pane = createElement('div', {
+                        id: 'plyr-settings-' + data.id + '-' + type,
+                        'aria-hidden': true,
+                        'aria-labelled-by': 'plyr-settings-tab-' + data.id,
+                        role: 'tabpanel',
+                        tabindex: -1
+                    });
+
+                    var back = createElement('button', {
+                        type: 'button',
+                        class: config.classes.control + ' ' + config.classes.control + '--back',
+                        'aria-haspopup': true,
+                        'aria-controls': 'plyr-settings-' + data.id + '-home',
+                        'aria-expanded': false
+                    }, config.i18n[type]);
+
+                    pane.appendChild(back);
+
+                    var options = createElement('ul');
+
+                    /*switch (type) {
+                        case 'captions':
+                            if (is.array(config.tracks)) {
+                                config.tracks.forEach(function(track, index) {
+                                    if (is.function(track)) {
+                                        return;
+                                    }
+
+                                    var option = createElement('li');
+
+                                    var button = createButton('language', {
+                                        'data-language': track.srclang,
+                                        'data-index': index
+                                    }, track.label);
+
+                                    option.appendChild(button);
+
+                                    options.appendChild(options);
+                                });
+                            }
+                            break;
+                    }*/
+
+                    pane.appendChild(options);
+
+                    inner.appendChild(pane);
+
+                    player.elements.settings.panes[type] = pane;
+                });
+
+                form.appendChild(inner);
+
+                menu.appendChild(form);
+
+                controls.appendChild(menu);
+
+                player.elements.settings.menu = menu;
+
+                /*html.push(
+                    '<div class="plyr__menu" data-plyr="settings">',
+                        '<button type="button" id="plyr-settings-toggle-{id}" class="plyr__control" aria-haspopup="true" aria-controls="plyr-settings-{id}" aria-expanded="false">',
+                            '<svg><use xlink:href="' + iconPath + '-settings" /></svg>',
+                            '<span class="plyr__sr-only">' + config.i18n.settings + '</span>',
+                        '</button>',
+                        '<form class="plyr__menu__container" id="plyr-settings-{id}" aria-hidden="true" aria-labelled-by="plyr-settings-toggle-{id}" role="tablist" tabindex="-1">',
+                            '<div>',
+                                '<div id="plyr-settings-{id}-primary" aria-hidden="false" aria-labelled-by="plyr-settings-toggle-{id}" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        captionsMenuItem,
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-speed-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-speed" aria-expanded="false">',
+                                                config.i18n.speed +
+                                                '<span class="plyr__menu__value" data-menu="speed">{speed}</span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li role="tab">',
+
+                                            //showQuality,
+
+                                            '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-quality-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-quality" aria-expanded="false">',
+                                                config.i18n.quality,
+                                                '<span class="plyr__menu__value">{quality}</span>',
+                                            '</button>',
+
+                                        '</li>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--forward" id="plyr-settings-{id}-loop-toggle" aria-haspopup="true" aria-controls="plyr-settings-{id}-loop" aria-expanded="false">',
+                                                config.i18n.loop +
+                                                '<span class="plyr__menu__value" data-menu="loop">{loop}</span>',
+                                            '</button>',
+                                        '</li>',
+                                    '</ul>',
+                                '</div>',
+                                '<div id="plyr-settings-{id}-captions" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-captions-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.captions,
+                                            '</button>',
+                                        '</li>',
+                                        '<li data-captions="langs">',
+                                            buildCaptionsMenu(),
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button" class="plyr__control" data-plyr="captions_menu">Off</button>',
+                                        '</li>',
+                                    '</ul>',
+                                '</div>',
+                                '<div id="plyr-settings-{id}-speed" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-speed-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.speed,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="speed" data-plyr="speed" value="2.0" '+ (config.currentSpeed === 2 ? 'checked' : '') +'>',
+                                                '2.0&times;',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="speed" data-plyr="speed"  value="1.5" '+ (config.currentSpeed === 1.5 ? 'checked' : '') +'>',
+                                                '1.5&times;',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="speed" data-plyr="speed"  value="1.0" '+ (config.currentSpeed === 1 ? 'checked' : '') +'>',
+                                                '1.0&times;',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="speed" data-plyr="speed"  value="0.5" '+ (config.currentSpeed === 0.5 ? 'checked' : '') +'>',
+                                                '0.5&times;',
+                                            '</label>',
+                                        '</li>',
+                                    '</ul>',
+                                '</div>',
+                                '<div id="plyr-settings-{id}-quality" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-quality-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.quality,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '2160P',
+                                                '<span class="plyr__menu__value">',
+                                                    '<span class="plyr__badge">4K</span>',
+                                                '</span>',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '1440P',
+                                                '<span class="plyr__menu__value">',
+                                                    '<span class="plyr__badge">WQHD</span>',
+                                                '</span>',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '1080P',
+                                                '<span class="plyr__menu__value">',
+                                                    '<span class="plyr__badge">HD</span>',
+                                                '</span>',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '720P',
+                                                '<span class="plyr__menu__value">',
+                                                    '<span class="plyr__badge">HD</span>',
+                                                '</span>',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '480P',
+                                            '</label>',
+                                        '</li>',
+                                        '<li>',
+                                            '<label class="plyr__control">',
+                                                '<input type="radio" name="quality">',
+                                                '360P',
+                                            '</label>',
+                                        '</li>',
+                                    '</ul>',
+                                '</div>',
+                                '<div id="plyr-settings-{id}-loop" aria-hidden="true" aria-labelled-by="plyr-settings-{id}-loop-toggle" role="tabpanel" tabindex="-1">',
+                                    '<ul>',
+                                        '<li role="tab">',
+                                            '<button type="button" class="plyr__control plyr__control--back" aria-haspopup="true" aria-controls="plyr-settings-{id}-primary" aria-expanded="false">',
+                                                config.i18n.loop,
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="all">',
+                                                config.i18n.loopAll,
+                                                '<span></span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="start">',
+                                                config.i18n.loopStart,
+                                                '<span></span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="end">',
+                                                config.i18n.loopEnd,
+                                                '<span></span>',
+                                            '</button>',
+                                        '</li>',
+                                        '<li>',
+                                            '<button type="button" class="plyr__control" data-plyr="loop" data-plyr-loop="none">',
+                                                config.i18n.loopNone,
+                                            '</button>',
+                                        '</li>',
+                                    '</ul>',
+                                '</div>',
+                            '</div>',
+                        '</form>',
+                    '</div>'
+                ); */
+            }
+
+            // Picture in picture button
+            if (inArray(config.controls, 'pip') && support.pip) {
+                controls.appendChild(createButton('pip'));
+            }
+
+            // Airplay button
+            if (inArray(config.controls, 'airplay') && support.airplay) {
+                controls.appendChild(createButton('airplay'));
             }
 
             // Toggle fullscreen button
-            if (_inArray(config.controls, 'fullscreen')) {
-                html.push(
-                    '<button type="button" data-plyr="fullscreen">',
-                        '<svg class="icon--exit-fullscreen"><use xlink:href="' + iconPath + '-exit-fullscreen" /></svg>',
-                        '<svg><use xlink:href="' + iconPath + '-enter-fullscreen" /></svg>',
-                        '<span class="plyr__sr-only">' + config.i18n.toggleFullscreen + '</span>',
-                    '</button>'
-                );
+            if (inArray(config.controls, 'fullscreen')) {
+                controls.appendChild(createButton('fullscreen'));
+            }
+
+            player.elements.controls = controls;
+
+            setLoopMenu();
+
+            return controls;
+        }
+
+        // Set the YouTube quality menu
+        // TODO: Support for HTML5
+        // YouTube: "hd2160", "hd1440", "hd1080", "hd720", "large", "medium", "small", "tiny", "auto"
+        function setQualityMenu(available, current) {
+            if (is.object(player.quality)) {
+                return;
+            }
+
+            player.quality = {
+                available: available,
+                current: current
+            };
+
+            // Get the badge HTML for HD, 4K etc
+            function getBadge(quality) {
+                var label = "";
+
+                switch (quality) {
+                    case 'hd2160':
+                        label = '4K';
+                        break;
+                    case 'hd1440':
+                        label = 'WQHD';
+                        break;
+                    case 'hd1080':
+                        label = 'HD';
+                        break;
+                    case 'hd720':
+                        label = 'HD';
+                        break;
+                }
+
+                if (!label.length) {
+                    return null;
+                }
+
+                return createBadge(label);
+            }
+
+            // Translate the quality key into a nice label
+            function getLabel(quality) {
+                switch (quality) {
+                    case 'hd2160':
+                        return '2160P';
+                    case 'hd1440':
+                        return '1440P';
+                    case 'hd1080':
+                        return '1080P';
+                    case 'hd720':
+                        return '720P';
+                    case 'large':
+                        return '480P';
+                    case 'medium':
+                        return '360P';
+                    case 'small':
+                        return '240P';
+                    default:
+                        return 'Auto';
+                }
+            }
+
+            if (is.array(available) && available.length) {
+                // Remove any unwanted quality levels
+                var filtered = available.filter(function(quality) {
+                    return ['tiny', 'small'].indexOf(quality) === -1;
+                });
+
+                var list = player.elements.settings.panes.quality.querySelector('ul');
+
+                filtered.forEach(function(quality) {
+                    var item = createElement('li');
+
+                    var label = createElement('label', {
+                        class: config.classes.control
+                    });
+
+                    var radio = createElement('input', {
+                        type: 'radio',
+                        name: 'quality',
+                        value: quality,
+                    });
+
+                    if (quality === player.quality.current) {
+                        radio.setAttribute('checked', '');
+                    }
+
+                    label.appendChild(radio);
+                    label.appendChild(document.createTextNode(getLabel(quality)));
+
+                    var badge = getBadge(quality);
+                    if (is.htmlElement(badge)) {
+                        label.appendChild(badge);
+                    }
+
+                    item.appendChild(label);
+
+                    list.appendChild(item);
+                });
             }
+        }
+
+        // Set the looping options
+        function setLoopMenu() {
+            var options = ['start', 'end', 'all', 'reset'];
+            var list = player.elements.settings.panes.loop.querySelector('ul');
 
-            // Close everything
-            html.push('</div>');
+            options.forEach(function(option) {
+                var item = createElement('li');
+
+                var button = createElement('button', {
+                    type: 'button',
+                    class: config.classes.control,
+                    'data-plyr': 'loop',
+                    'data-plyr-loop-action': option
+                }, config.i18n[option]);
+
+                if (inArray(['start', 'end'], option)) {
+                    var badge = createBadge('0:00');
+                    button.appendChild(badge);
+                }
 
-            return html.join('');
+                item.appendChild(button);
+
+                list.appendChild(item);
+            });
         }
 
         // Setup fullscreen
-        function _setupFullscreen() {
-            if (!plyr.supported.full) {
+        function setupFullscreen() {
+            if (!player.supported.full) {
                 return;
             }
 
-            if ((plyr.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
+            if ((player.type !== 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
                 // Check for native support
-                var nativeSupport = fullscreen.supportsFullScreen;
+                var nativeSupport = support.fullscreen;
 
-                if (nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
-                    _log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
+                if (nativeSupport || (config.fullscreen.fallback && !inFrame())) {
+                    log((nativeSupport ? 'Native' : 'Fallback') + ' fullscreen enabled');
 
                     // Add styling hook
-                    _toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
+                    toggleClass(player.elements.container, config.classes.fullscreen.enabled, true);
                 } else {
-                    _log('Fullscreen not supported and fallback disabled');
+                    log('Fullscreen not supported and fallback disabled');
                 }
 
                 // Toggle state
-                if (plyr.buttons && plyr.buttons.fullscreen) {
-                    _toggleState(plyr.buttons.fullscreen, false);
+                if (player.elements.buttons && player.elements.buttons.fullscreen) {
+                    toggleState(player.elements.buttons.fullscreen, false);
                 }
 
                 // Setup focus trap
-                _focusTrap();
+                focusTrap();
+            }
+        }
+
+        // Display active caption if it contains text
+        function setActiveCue(track) {
+            // Get the track from the event if needed
+            if (is.event(track)) {
+                track = track.target;
+            }
+
+            // Display a cue, if there is one
+            if (track.activeCues[0] && 'text' in track.activeCues[0]) {
+                setCaption(track.activeCues[0].getCueAsHTML());
+            } else {
+                setCaption();
             }
         }
 
         // Setup captions
-        function _setupCaptions() {
+        function setupCaptions() {
             // Bail if not HTML5 video
-            if (plyr.type !== 'video') {
+            if (player.type !== 'video') {
                 return;
             }
 
             // Inject the container
-            if (!_getElement(config.selectors.captions)) {
-                plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"></div>');
+            if (!getElement(config.selectors.captions)) {
+                player.elements.wrapper.insertAdjacentHTML('afterbegin', '<div class="' + getClassname(config.selectors.captions) + '"></div>');
             }
 
             // Determine if HTML5 textTracks is supported
-            plyr.usingTextTracks = false;
-            if (plyr.media.textTracks) {
-                plyr.usingTextTracks = true;
+            player.captions.textTracks = false;
+            if (player.elements.media.textTracks) {
+                player.captions.textTracks = true;
             }
 
             // Get URL of caption file if exists
-            var captionSrc = '',
-                kind,
-                children = plyr.media.childNodes;
-
-            for (var i = 0; i < children.length; i++) {
-                if (children[i].nodeName.toLowerCase() === 'track') {
-                    kind = children[i].kind;
-                    if (kind === 'captions' || kind === 'subtitles') {
-                        captionSrc = children[i].getAttribute('src');
+            var captionSources = [];
+            var captionSrc = '';
+
+            player.elements.media.childNodes.forEach(function(child) {
+                if (child.nodeName.toLowerCase() === 'track') {
+                    if (child.kind === 'captions' || child.kind === 'subtitles') {
+                        captionSources.push(child.getAttribute('src'));
                     }
                 }
-            }
+            });
 
             // Record if caption file exists or not
-            plyr.captionExists = true;
-            if (captionSrc === '') {
-                plyr.captionExists = false;
-                _log('No caption track found');
+            player.captions.exist = true;
+            if (captionSources.length === 0) {
+                player.captions.exist = false;
+                log('No caption track found');
+            } else if ((Number(config.captions.selectedIndex) + 1) > captionSources.length) {
+                player.captions.exist = false;
+                log('Caption index out of bound');
             } else {
-                _log('Caption track found; URI: ' + captionSrc);
+                captionSrc = captionSources[config.captions.selectedIndex];
+                log('Caption track found; URI: ' + captionSrc);
             }
 
             // If no caption file exists, hide container for caption text
-            if (!plyr.captionExists) {
-                _toggleClass(plyr.container, config.classes.captions.enabled);
+            if (!player.captions.exist) {
+                toggleClass(player.elements.container, config.classes.captions.enabled);
             } else {
+                var tracks = player.elements.media.textTracks;
+
                 // Turn off native caption rendering to avoid double captions
                 // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
-                var tracks = plyr.media.textTracks;
-                for (var x = 0; x < tracks.length; x++) {
-                    tracks[x].mode = 'hidden';
-                }
+                [].forEach.call(tracks, function(track) {
+                    // Remove the listener to prevent event overlapping
+                    off(track, 'cuechange', setActiveCue);
+
+                    // Hide captions
+                    track.mode = 'hidden';
+                });
 
                 // Enable UI
-                _showCaptions(plyr);
+                showCaptions(player);
 
                 // Disable unsupported browsers than report false positive
                 // Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144
-                if ((plyr.browser.isIE && plyr.browser.version >= 10) ||
-                    (plyr.browser.isFirefox && plyr.browser.version >= 31)) {
+                if ((player.browser.isIE && player.browser.version >= 10) ||
+                    (player.browser.isFirefox && player.browser.version >= 31)) {
 
                     // Debugging
-                    _log('Detected browser with known TextTrack issues - using manual fallback');
+                    log('Detected browser with known TextTrack issues - using manual fallback');
 
                     // Set to false so skips to 'manual' captioning
-                    plyr.usingTextTracks = false;
+                    player.captions.textTracks = false;
                 }
 
                 // Rendering caption tracks
                 // Native support required - http://caniuse.com/webvtt
-                if (plyr.usingTextTracks) {
-                    _log('TextTracks supported');
+                if (player.captions.textTracks) {
+                    log('TextTracks supported');
 
-                    for (var y = 0; y < tracks.length; y++) {
-                        var track = tracks[y];
+                    var track = tracks[config.captions.selectedIndex];
 
-                        if (track.kind === 'captions' || track.kind === 'subtitles') {
-                            _on(track, 'cuechange', function() {
-                                // Display a cue, if there is one
-                                if (this.activeCues[0] && 'text' in this.activeCues[0]) {
-                                    _setCaption(this.activeCues[0].getCueAsHTML());
-                                } else {
-                                    _setCaption();
-                                }
-                            });
+                    if (track.kind === 'captions' || track.kind === 'subtitles') {
+                        on(track, 'cuechange', setActiveCue);
+
+                        // If we change the active track while a cue is already displayed we need to update it
+                        if (track.activeCues && track.activeCues.length > 0) {
+                            setActiveCue(track);
                         }
                     }
                 } else {
                     // Caption tracks not natively supported
-                    _log('TextTracks not supported so rendering captions manually');
+                    log('TextTracks not supported so rendering captions manually');
 
                     // Render captions from array at appropriate time
-                    plyr.currentCaption = '';
-                    plyr.captions = [];
+                    player.captions.current = '';
+                    player.captions.captions = [];
 
                     if (captionSrc !== '') {
                         // Create XMLHttpRequest Object
@@ -1030,45 +1964,38 @@
                         xhr.onreadystatechange = function() {
                             if (xhr.readyState === 4) {
                                 if (xhr.status === 200) {
-                                    var captions = [],
-                                        caption,
-                                        req = xhr.responseText;
+                                    var response = xhr.responseText;
 
-                                    //According to webvtt spec, line terminator consists of one of the following
+                                    // According to webvtt spec, line terminator consists of one of the following
                                     // CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
                                     var lineSeparator = '\r\n';
-                                    if(req.indexOf(lineSeparator+lineSeparator) === -1) {
-                                        if(req.indexOf('\r\r') !== -1){
+                                    if (response.indexOf(lineSeparator + lineSeparator) === -1) {
+                                        if (response.indexOf('\r\r') !== -1) {
                                             lineSeparator = '\r';
                                         } else {
                                             lineSeparator = '\n';
                                         }
                                     }
 
-                                    captions = req.split(lineSeparator+lineSeparator);
-
-                                    for (var r = 0; r < captions.length; r++) {
-                                        caption = captions[r];
-                                        plyr.captions[r] = [];
+                                    var captions = response.split(lineSeparator + lineSeparator);
 
-                                        // Get the parts of the captions
-                                        var parts = caption.split(lineSeparator),
-                                            index = 0;
+                                    player.captions.captions = captions.map(function(caption) {
+                                        var parts = caption.split(lineSeparator);
+                                        var index = 0;
 
                                         // Incase caption numbers are added
-                                        if (parts[index].indexOf(":") === -1) {
+                                        if (parts[index].indexOf(":") !== -1) {
                                             index = 1;
                                         }
 
-                                        plyr.captions[r] = [parts[index], parts[index + 1]];
-                                    }
+                                        return [parts[index], parts[index + 1]];
+                                    });
 
-                                    // Remove first element ('VTT')
-                                    plyr.captions.shift();
+                                    player.captions.captions.shift();
 
-                                    _log('Successfully loaded the caption file via AJAX');
+                                    log('Successfully loaded the caption file via AJAX');
                                 } else {
-                                    _warn(config.logPrefix + 'There was a problem loading the caption file via AJAX');
+                                    warn(config.logPrefix + 'There was a problem loading the caption file via AJAX');
                                 }
                             }
                         };
@@ -1081,350 +2008,377 @@
             }
         }
 
-        // Set the current caption
-        function _setCaption(caption) {
-            /* jshint unused:false */
-            var container = _getElement(config.selectors.captions),
-                content = document.createElement('span');
+        // Select active caption
+        function setCaptionIndex(index) {
+            // Save active caption
+            config.captions.selectedIndex = index || config.captions.selectedIndex;
+
+            // Clear caption
+            setCaption();
 
-            // Empty the container
-            container.innerHTML = '';
+            // Re-run setup
+            setupCaptions();
 
-            // Default to empty
-            if (_is.undefined(caption)) {
-                caption = '';
+            //getElement('[data-captions="settings"]').innerHTML = getSelectedLanguage();
+        }
+
+        // Get current selected caption language
+        function getSelectedLanguage() {
+            if (config.tracks.length === 0) {
+                return 'No Subs';
             }
 
-            // Set the span content
-            if (_is.string(caption)) {
-                content.innerHTML = caption.trim();
+            if (player.captions.enabled || !is.boolean(player.captions.enabled) && player.storage.captions) {
+                return config.tracks[config.captions.selectedIndex].label;
             } else {
-                content.appendChild(caption);
+                return 'Disabled';
             }
+        }
+
+        // Set the current caption
+        function setCaption(caption) {
+            var captions = getElement(config.selectors.captions);
 
-            // Set new caption text
-            container.appendChild(content);
+            if (is.htmlElement(captions)) {
+                var content = createElement('span');
 
-            // Force redraw (for Safari)
-            var redraw = container.offsetHeight;
+                // Empty the container
+                emptyElement(captions);
+
+                // Default to empty
+                if (is.undefined(caption)) {
+                    caption = '';
+                }
+
+                // Set the span content
+                if (is.string(caption)) {
+                    content.innerHTML = caption.trim();
+                } else {
+                    content.appendChild(caption);
+                }
+
+                // Set new caption text
+                captions.appendChild(content);
+
+                // Force redraw (for Safari)
+                // var redraw = captions.offsetHeight;
+            }
         }
 
         // Captions functions
         // Seek the manual caption time and update UI
-        function _seekManualCaptions(time) {
+        function seekManualCaptions(time) {
             // Utilities for caption time codes
-            function _timecodeCommon(tc, pos) {
-                var tcpair = [];
-                tcpair = tc.split(' --> ');
-                for(var i = 0; i < tcpair.length; i++) {
+            function timecodeCommon(timecode, pos) {
+                var parts = [];
+                parts = timecode.split(' --> ');
+                for (var i = 0; i < parts.length; i++) {
                     // WebVTT allows for extra meta data after the timestamp line
                     // So get rid of this if it exists
-                    tcpair[i] = tcpair[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1");
+                    parts[i] = parts[i].replace(/(\d+:\d+:\d+\.\d+).*/, "$1");
                 }
-                return _subTcSecs(tcpair[pos]);
+                return subTcSecs(parts[pos]);
             }
-            function _timecodeMin(tc) {
-                return _timecodeCommon(tc, 0);
+
+            function timecodeMin(timecode) {
+                return timecodeCommon(timecode, 0);
             }
-            function _timecodeMax(tc) {
-                return _timecodeCommon(tc, 1);
+
+            function timecodeMax(timecode) {
+                return timecodeCommon(timecode, 1);
             }
-            function _subTcSecs(tc) {
-                if (tc === null || tc === undefined) {
+
+            function subTcSecs(timecode) {
+                if (is.undefined(timecode)) {
                     return 0;
                 } else {
-                    var tc1 = [],
-                        tc2 = [],
-                        seconds;
-                    tc1 = tc.split(',');
+                    var tc1 = [];
+                    var tc2 = [];
+                    var seconds = 0;
+                    tc1 = timecode.split(',');
                     tc2 = tc1[0].split(':');
-                    seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
+
+                    for (var i = 0, len = tc2.length; i < len; i++) {
+                        seconds += Math.floor(tc2[i] * (Math.pow(60, len - (i + 1))));
+                    }
+
                     return seconds;
                 }
             }
 
             // If it's not video, or we're using textTracks, bail.
-            if (plyr.usingTextTracks || plyr.type !== 'video' || !plyr.supported.full) {
+            if (player.captions.textTracks || player.type !== 'video' || !player.supported.full) {
                 return;
             }
 
             // Reset subcount
-            plyr.subcount = 0;
+            player.captions.count = 0;
 
             // Check time is a number, if not use currentTime
             // IE has a bug where currentTime doesn't go to 0
             // https://twitter.com/Sam_Potts/status/573715746506731521
-            time = _is.number(time) ? time : plyr.media.currentTime;
+            time = is.number(time) ? time : player.elements.media.currentTime;
 
             // If there's no subs available, bail
-            if (!plyr.captions[plyr.subcount]) {
+            if (!player.captions.captions[player.captions.count]) {
                 return;
             }
 
-            while (_timecodeMax(plyr.captions[plyr.subcount][0]) < time.toFixed(1)) {
-                plyr.subcount++;
-                if (plyr.subcount > plyr.captions.length - 1) {
-                    plyr.subcount = plyr.captions.length - 1;
+            while (timecodeMax(player.captions.captions[player.captions.count][0]) < time.toFixed(1)) {
+                player.captions.count++;
+
+                if (player.captions.count > player.captions.captions.length - 1) {
+                    player.captions.count = player.captions.captions.length - 1;
                     break;
                 }
             }
 
             // Check if the next caption is in the current time range
-            if (plyr.media.currentTime.toFixed(1) >= _timecodeMin(plyr.captions[plyr.subcount][0]) &&
-                plyr.media.currentTime.toFixed(1) <= _timecodeMax(plyr.captions[plyr.subcount][0])) {
-                    plyr.currentCaption = plyr.captions[plyr.subcount][1];
+            if (player.elements.media.currentTime.toFixed(1) >= timecodeMin(player.captions[player.subcount][0]) &&
+                player.elements.media.currentTime.toFixed(1) <= timecodeMax(player.captions[player.subcount][0])) {
+                player.captions.current = player.captions.captions[player.captions.count][1];
 
                 // Render the caption
-                _setCaption(plyr.currentCaption);
+                setCaption(player.captions.current);
             } else {
-                _setCaption();
+                setCaption();
             }
         }
 
         // Display captions container and button (for initialization)
-        function _showCaptions() {
+        function showCaptions() {
             // If there's no caption toggle, bail
-            if (!plyr.buttons.captions) {
+            if (!player.elements.buttons.captions) {
                 return;
             }
 
-            _toggleClass(plyr.container, config.classes.captions.enabled, true);
+            toggleClass(player.elements.container, config.classes.captions.enabled, true);
 
             // Try to load the value from storage
-            var active = plyr.storage.captionsEnabled;
+            var active = player.storage.captions;
 
             // Otherwise fall back to the default config
-            if (!_is.boolean(active)) {
+            if (!is.boolean(active)) {
                 active = config.captions.defaultActive;
             }
 
             if (active) {
-                _toggleClass(plyr.container, config.classes.captions.active, true);
-                _toggleState(plyr.buttons.captions, true);
+                toggleClass(player.elements.container, config.classes.captions.active, true);
+                toggleState(player.elements.buttons.captions, true);
             }
         }
 
-        // Find all elements
-        function _getElements(selector) {
-            return plyr.container.querySelectorAll(selector);
-        }
-
-        // Find a single element
-        function _getElement(selector) {
-            return _getElements(selector)[0];
-        }
-
-        // Determine if we're in an iframe
-        function _inFrame() {
-            try {
-                return window.self !== window.top;
+        // Toggle captions
+        function toggleCaptions(show) {
+            // If there's no full support, or there's no caption toggle
+            if (!player.supported.full || !player.elements.buttons.captions) {
+                return;
             }
-            catch (e) {
-                return true;
+
+            // If the method is called without parameter, toggle based on current value
+            if (!is.boolean(show)) {
+                show = (player.elements.container.className.indexOf(config.classes.captions.active) === -1);
             }
-        }
 
-        // Trap focus inside container
-        function _focusTrap() {
-            var tabbables   = _getElements('input:not([disabled]), button:not([disabled])'),
-                first       = tabbables[0],
-                last        = tabbables[tabbables.length - 1];
+            // Set global
+            player.captions.enabled = show;
+            //player.elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
+            //TODO: display lang getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
 
-            function _checkFocus(event) {
-                // If it is TAB
-                if (event.which === 9 && plyr.isFullscreen) {
-                    if (event.target === last && !event.shiftKey) {
-                        // Move focus to first element that can be tabbed if Shift isn't used
-                        event.preventDefault();
-                        first.focus();
-                    } else if (event.target === first && event.shiftKey) {
-                        // Move focus to last element that can be tabbed if Shift is used
-                        event.preventDefault();
-                        last.focus();
-                    }
-                }
-            }
+            // Set current language etc
+            //elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
+            //getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
 
-            // Bind the handler
-            _on(plyr.container, 'keydown', _checkFocus);
-        }
+            // Toggle state
+            toggleState(player.elements.buttons.captions, player.captions.enabled);
 
-        // Add elements to HTML5 media (source, tracks, etc)
-        function _insertChildElements(type, attributes) {
-            if (_is.string(attributes)) {
-               _insertElement(type, plyr.media, { src: attributes });
-            } else if (attributes.constructor === Array) {
-                for (var i = attributes.length - 1; i >= 0; i--) {
-                    _insertElement(type, plyr.media, attributes[i]);
-                }
-            }
+            // Add class hook
+            toggleClass(player.elements.container, config.classes.captions.active, player.captions.enabled);
+
+            // Trigger an event
+            trigger(player.elements.container, player.captions.enabled ? 'captionsenabled' : 'captionsdisabled', true);
+
+            // Save captions state to localStorage
+            updateStorage({
+                captions: player.captions.enabled
+            });
         }
 
         // Insert controls
-        function _injectControls() {
+        function injectControls() {
             // Sprite
             if (config.loadSprite) {
-                var iconUrl = _getIconUrl();
+                var iconUrl = getIconUrl();
 
                 // Only load external sprite using AJAX
                 if (iconUrl.absolute) {
-                    _log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
+                    log('AJAX loading absolute SVG sprite' + (player.browser.isIE ? ' (due to IE)' : ''));
                     loadSprite(iconUrl.url, "sprite-plyr");
                 } else {
-                    _log('Sprite will be used as external resource directly');
+                    log('Sprite will be used as external resource directly');
                 }
             }
 
-            // Make a copy of the html
-            var html = config.html;
-
-            // Insert custom video controls
-            _log('Injecting custom controls');
-
-            // If no controls are specified, create default
-            if (!html) {
-                html = _buildControls();
-            }
-
-            // Replace seek time instances
-            html = _replaceAll(html, '{seektime}', config.seekTime);
-
-            // Replace all id references with random numbers
-            html = _replaceAll(html, '{id}', Math.floor(Math.random() * (10000)));
+            // Larger overlaid play button
+            if (inArray(config.controls, 'play-large')) {
+                player.elements.buttons.playLarge = createButton('play-large');
+                player.elements.container.appendChild(player.elements.buttons.playLarge);
+            }
+
+            // Create a unique ID
+            player.id = Math.floor(Math.random() * 10000);
+
+            // Create controls
+            var controls = createControls({
+                id: player.id,
+                seektime: config.seekTime,
+                speed: getSpeedDisplayValue(),
+                // TODO: Get current quality
+                quality: 'HD',
+                // TODO: Set language automatically based on UA?
+                captions: 'English',
+                // TODO: Get loop
+                loop: 'None'
+            });
 
             // Controls container
             var target;
 
             // Inject to custom location
-            if (_is.string(config.selectors.controls.container)) {
+            if (is.string(config.selectors.controls.container)) {
                 target = document.querySelector(config.selectors.controls.container);
             }
 
             // Inject into the container by default
-            if (!_is.htmlElement(target)) {
-                target = plyr.container
+            if (!is.htmlElement(target)) {
+                target = player.elements.container
             }
 
             // Inject controls HTML
-            target.insertAdjacentHTML('beforeend', html);
+            // target.insertAdjacentHTML('beforeend', html);
+            target.appendChild(controls);
 
             // Setup tooltips
             if (config.tooltips.controls) {
-                var labels = _getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
+                var labels = getElements([config.selectors.controls.wrapper, ' ', config.selectors.labels, ' .', config.classes.hidden].join(''));
 
                 for (var i = labels.length - 1; i >= 0; i--) {
                     var label = labels[i];
 
-                    _toggleClass(label, config.classes.hidden, false);
-                    _toggleClass(label, config.classes.tooltip, true);
+                    toggleClass(label, config.classes.hidden, false);
+                    toggleClass(label, config.classes.tooltip, true);
                 }
             }
         }
 
         // Find the UI controls and store references
-        function _findElements() {
+        // TODO: Restore when re-enabling custom HTML
+        /*function findElements() {
             try {
-                plyr.controls                 = _getElement(config.selectors.controls.wrapper);
+                player.elements.controls = getElement(config.selectors.controls.wrapper);
 
                 // Buttons
-                plyr.buttons = {};
-                plyr.buttons.seek             = _getElement(config.selectors.buttons.seek);
-                plyr.buttons.play             = _getElements(config.selectors.buttons.play);
-                plyr.buttons.pause            = _getElement(config.selectors.buttons.pause);
-                plyr.buttons.restart          = _getElement(config.selectors.buttons.restart);
-                plyr.buttons.rewind           = _getElement(config.selectors.buttons.rewind);
-                plyr.buttons.forward          = _getElement(config.selectors.buttons.forward);
-                plyr.buttons.fullscreen       = _getElement(config.selectors.buttons.fullscreen);
-
-                // Inputs
-                plyr.buttons.mute             = _getElement(config.selectors.buttons.mute);
-                plyr.buttons.captions         = _getElement(config.selectors.buttons.captions);
+                player.elements.buttons = {
+                    play: getElements(config.selectors.buttons.play),
+                    pause: getElement(config.selectors.buttons.pause),
+                    restart: getElement(config.selectors.buttons.restart),
+                    rewind: getElement(config.selectors.buttons.rewind),
+                    forward: getElement(config.selectors.buttons.forward),
+                    fullscreen: getElement(config.selectors.buttons.fullscreen),
+                    settings: getElement(config.selectors.buttons.settings),
+                    pip: getElement(config.selectors.buttons.pip),
+                    //lang: getElement(config.selectors.buttons.captions_lang),
+                    speed: getElement(config.selectors.buttons.speed),
+                    loop: getElement(config.selectors.buttons.loop),
+                    mute: getElement(config.selectors.buttons.mute),
+                    captions: getElement(config.selectors.buttons.captions)
+                };
 
                 // Progress
-                plyr.progress = {};
-                plyr.progress.container       = _getElement(config.selectors.progress.container);
+                player.elements.progress = getElement(config.selectors.progress);
 
-                // Progress - Buffering
-                plyr.progress.buffer          = {};
-                plyr.progress.buffer.bar      = _getElement(config.selectors.progress.buffer);
-                plyr.progress.buffer.text     = plyr.progress.buffer.bar && plyr.progress.buffer.bar.getElementsByTagName('span')[0];
+                // Inputs
+                player.elements.inputs = {
+                    seek: getElement(config.selectors.inputs.seek),
+                    volume: getElement(config.selectors.inputs.volume)
+                };
 
-                // Progress - Played
-                plyr.progress.played          = _getElement(config.selectors.progress.played);
+                // Display
+                player.elements.display = {
+                    buffer: getElement(config.selectors.display.buffer),
+                    played: getElement(config.selectors.display.played),
+                    volume: getElement(config.selectors.display.volume),
+                    duration: getElement(config.selectors.display.duration),
+                    currentTime: getElement(config.selectors.display.currentTime),
+                };
 
                 // Seek tooltip
-                plyr.progress.tooltip         = plyr.progress.container && plyr.progress.container.querySelector('.' + config.classes.tooltip);
-
-                // Volume
-                plyr.volume                   = {};
-                plyr.volume.input             = _getElement(config.selectors.volume.input);
-                plyr.volume.display           = _getElement(config.selectors.volume.display);
-
-                // Timing
-                plyr.duration                 = _getElement(config.selectors.duration);
-                plyr.currentTime              = _getElement(config.selectors.currentTime);
-                plyr.seekTime                 = _getElements(config.selectors.seekTime);
+                if (is.htmlElement(player.elements.progress)) {
+                    player.elements.display.seekTooltip = player.elements.progress.querySelector('.' + config.classes.tooltip);
+                }
 
                 return true;
-            }
-            catch(e) {
-                _warn('It looks like there is a problem with your controls HTML');
+            } catch (error) {
+                warn('It looks like there is a problem with your custom controls HTML', error);
 
                 // Restore native video controls
-                _toggleNativeControls(true);
+                toggleNativeControls(true);
 
                 return false;
             }
-        }
+        }*/
 
         // Toggle style hook
-        function _toggleStyleHook() {
-            _toggleClass(plyr.container, config.selectors.container.replace('.', ''), plyr.supported.full);
+        function toggleStyleHook() {
+            toggleClass(player.elements.container, config.selectors.container.replace('.', ''), player.supported.full);
         }
 
         // Toggle native controls
-        function _toggleNativeControls(toggle) {
-            if (toggle && _inArray(config.types.html5, plyr.type)) {
-                plyr.media.setAttribute('controls', '');
+        function toggleNativeControls(toggle) {
+            if (toggle && inArray(config.types.html5, player.type)) {
+                player.elements.media.setAttribute('controls', '');
             } else {
-                plyr.media.removeAttribute('controls');
+                player.elements.media.removeAttribute('controls');
             }
         }
 
         // Setup aria attribute for play and iframe title
-        function _setTitle(iframe) {
+        function setTitle(iframe) {
             // Find the current text
             var label = config.i18n.play;
 
             // If there's a media title set, use that for the label
-            if (_is.string(config.title) && config.title.length) {
+            if (is.string(config.title) && config.title.length) {
                 label += ', ' + config.title;
 
                 // Set container label
-                plyr.container.setAttribute('aria-label', config.title);
+                player.elements.container.setAttribute('aria-label', config.title);
             }
 
             // If there's a play button, set label
-            if (plyr.supported.full && plyr.buttons.play) {
-                for (var i = plyr.buttons.play.length - 1; i >= 0; i--) {
-                    plyr.buttons.play[i].setAttribute('aria-label', label);
+            if (player.supported.full) {
+                if (is.htmlElement(player.elements.buttons.play)) {
+                    player.elements.buttons.play.setAttribute('aria-label', label);
+                }
+                if (is.htmlElement(player.elements.buttons.playLarge)) {
+                    player.elements.buttons.playLarge.setAttribute('aria-label', label);
                 }
             }
 
             // Set iframe title
             // https://github.com/Selz/plyr/issues/124
-            if (_is.htmlElement(iframe)) {
+            if (is.htmlElement(iframe)) {
                 iframe.setAttribute('title', config.i18n.frameTitle.replace('{title}', config.title));
             }
         }
 
         // Setup localStorage
-        function _setupStorage() {
+        function setupStorage() {
             var value = null;
-            plyr.storage = {};
+            player.storage = {};
 
             // Bail if we don't have localStorage support or it's disabled
-            if (!_storage.supported || !config.storage.enabled) {
+            if (!support.storage || !config.storage.enabled) {
                 return;
             }
 
@@ -1440,260 +2394,290 @@
                 return;
             } else if (/^\d+(\.\d+)?$/.test(value)) {
                 // If value is a number, it's probably volume from an older
-                // version of plyr. See: https://github.com/Selz/plyr/pull/313
+                // version of player. See: https://github.com/Selz/plyr/pull/313
                 // Update the key to be JSON
-                _updateStorage({volume: parseFloat(value)});
+                updateStorage({
+                    volume: parseFloat(value)
+                });
             } else {
                 // Assume it's JSON from this or a later version of plyr
-                plyr.storage = JSON.parse(value);
+                player.storage = JSON.parse(value);
             }
         }
 
         // Save a value back to local storage
-        function _updateStorage(value) {
+        function updateStorage(value) {
             // Bail if we don't have localStorage support or it's disabled
-            if (!_storage.supported || !config.storage.enabled) {
+            if (!support.storage || !config.storage.enabled) {
                 return;
             }
 
             // Update the working copy of the values
-            _extend(plyr.storage, value);
+            extend(player.storage, value);
 
             // Update storage
-            window.localStorage.setItem(config.storage.key, JSON.stringify(plyr.storage));
+            window.localStorage.setItem(config.storage.key, JSON.stringify(player.storage));
         }
 
         // Setup media
-        function _setupMedia() {
+        function setupMedia() {
             // If there's no media, bail
-            if (!plyr.media) {
-                _warn('No media element found!');
+            if (!player.elements.media) {
+                warn('No media element found!');
                 return;
             }
 
-            if (plyr.supported.full) {
+            if (player.supported.full) {
                 // Add type class
-                _toggleClass(plyr.container, config.classes.type.replace('{0}', plyr.type), true);
+                toggleClass(player.elements.container, config.classes.type.replace('{0}', player.type), true);
 
                 // Add video class for embeds
                 // This will require changes if audio embeds are added
-                if (_inArray(config.types.embed, plyr.type)) {
-                    _toggleClass(plyr.container, config.classes.type.replace('{0}', 'video'), true);
+                if (inArray(config.types.embed, player.type)) {
+                    toggleClass(player.elements.container, config.classes.type.replace('{0}', 'video'), true);
                 }
 
+                // Check for picture-in-picture support
+                toggleClass(player.elements.container, config.classes.pip.enabled, support.pip && player.type === 'video');
+
+                // Check for airplay support
+                toggleClass(player.elements.container, config.classes.airplay.enabled, support.airplay && inArray(config.types.html5, player.type));
+
                 // If there's no autoplay attribute, assume the video is stopped and add state class
-                _toggleClass(plyr.container, config.classes.stopped, config.autoplay);
+                toggleClass(player.elements.container, config.classes.stopped, config.autoplay);
 
                 // Add iOS class
-                _toggleClass(plyr.container, config.classes.isIos, plyr.browser.isIos);
+                toggleClass(player.elements.container, config.classes.isIos, player.browser.isIos);
 
                 // Add touch class
-                _toggleClass(plyr.container, config.classes.isTouch, plyr.browser.isTouch);
+                toggleClass(player.elements.container, config.classes.isTouch, player.browser.isTouch);
 
                 // Inject the player wrapper
-                if (plyr.type === 'video') {
+                if (player.type === 'video') {
                     // Create the wrapper div
-                    var wrapper = document.createElement('div');
+                    var wrapper = createElement('div');
                     wrapper.setAttribute('class', config.classes.videoWrapper);
 
                     // Wrap the video in a container
-                    _wrap(plyr.media, wrapper);
+                    wrap(player.elements.media, wrapper);
 
                     // Cache the container
-                    plyr.videoContainer = wrapper;
+                    player.elements.wrapper = wrapper;
                 }
             }
 
             // Embeds
-            if (_inArray(config.types.embed, plyr.type)) {
-                _setupEmbed();
+            if (inArray(config.types.embed, player.type)) {
+                setupEmbed();
             }
         }
 
         // Setup YouTube/Vimeo
-        function _setupEmbed() {
-            var container = document.createElement('div'),
-                mediaId,
-                id = plyr.type + '-' + Math.floor(Math.random() * (10000));
+        function setupEmbed() {
+            var container = createElement('div');
+            var mediaId;
+            var id = player.type + '-' + Math.floor(Math.random() * (10000));
 
             // Parse IDs from URLs if supplied
-            switch (plyr.type) {
+            switch (player.type) {
                 case 'youtube':
-                    mediaId = _parseYouTubeId(plyr.embedId);
+                    mediaId = parseYouTubeId(player.embedId);
                     break;
 
                 default:
-                    mediaId = plyr.embedId;
+                    mediaId = player.embedId;
             }
 
             // Remove old containers
-            var containers = _getElements('[id^="' + plyr.type + '-"]');
+            var containers = getElements('[id^="' + player.type + '-"]');
             for (var i = containers.length - 1; i >= 0; i--) {
-                _remove(containers[i]);
+                remove(containers[i]);
             }
 
             // Add embed class for responsive
-            _toggleClass(plyr.media, config.classes.videoWrapper, true);
-            _toggleClass(plyr.media, config.classes.embedWrapper, true);
+            toggleClass(player.elements.media, config.classes.videoWrapper, true);
+            toggleClass(player.elements.media, config.classes.embedWrapper, true);
 
-            if (plyr.type === 'youtube') {
+            if (player.type === 'youtube') {
                 // Create the YouTube container
-                plyr.media.appendChild(container);
+                player.elements.media.appendChild(container);
 
                 // Set ID
                 container.setAttribute('id', id);
 
                 // Setup API
-                if (_is.object(window.YT)) {
-                    _youTubeReady(mediaId, container);
+                if (is.object(window.YT)) {
+                    youTubeReady(mediaId, container);
                 } else {
                     // Load the API
-                    _injectScript(config.urls.youtube.api);
+                    injectScript(config.urls.youtube.api);
 
                     // Setup callback for the API
                     window.onYouTubeReadyCallbacks = window.onYouTubeReadyCallbacks || [];
 
                     // Add to queue
-                    window.onYouTubeReadyCallbacks.push(function() { _youTubeReady(mediaId, container); });
+                    window.onYouTubeReadyCallbacks.push(function() {
+                        youTubeReady(mediaId, container);
+                    });
 
                     // Set callback to process queue
-                    window.onYouTubeIframeAPIReady = function () {
-                        window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
+                    window.onYouTubeIframeAPIReady = function() {
+                        window.onYouTubeReadyCallbacks.forEach(function(callback) {
+                            callback();
+                        });
                     };
                 }
-            } else if (plyr.type === 'vimeo') {
+            } else if (player.type === 'vimeo') {
                 // Vimeo needs an extra div to hide controls on desktop (which has full support)
-                if (plyr.supported.full) {
-                    plyr.media.appendChild(container);
+                if (player.supported.full) {
+                    player.elements.media.appendChild(container);
                 } else {
-                    container = plyr.media;
+                    container = player.elements.media;
                 }
 
                 // Set ID
                 container.setAttribute('id', id);
 
                 // Load the API if not already
-                if (!_is.object(window.Vimeo)) {
-                    _injectScript(config.urls.vimeo.api);
+                if (!is.object(window.Vimeo)) {
+                    injectScript(config.urls.vimeo.api);
 
                     // Wait for fragaloop load
                     var vimeoTimer = window.setInterval(function() {
-                        if (_is.object(window.Vimeo)) {
+                        if (is.object(window.Vimeo)) {
                             window.clearInterval(vimeoTimer);
-                            _vimeoReady(mediaId, container);
+                            vimeoReady(mediaId, container);
                         }
                     }, 50);
                 } else {
-                    _vimeoReady(mediaId, container);
+                    vimeoReady(mediaId, container);
                 }
-            } else if (plyr.type === 'soundcloud') {
+            } else if (player.type === 'soundcloud') {
                 // TODO: Currently unsupported and undocumented
                 // Inject the iframe
-                var soundCloud = document.createElement('iframe');
+                var soundCloud = createElement('iframe');
 
                 // Watch for iframe load
                 soundCloud.loaded = false;
-                _on(soundCloud, 'load', function() { soundCloud.loaded = true; });
+                on(soundCloud, 'load', function() {
+                    soundCloud.loaded = true;
+                });
 
-                _setAttributes(soundCloud, {
-                    'src':  'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
-                    'id':   id
+                setAttributes(soundCloud, {
+                    'src': 'https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/' + mediaId,
+                    'id': id
                 });
 
                 container.appendChild(soundCloud);
-                plyr.media.appendChild(container);
+                player.elements.media.appendChild(container);
 
                 // Load the API if not already
                 if (!window.SC) {
-                    _injectScript(config.urls.soundcloud.api);
+                    injectScript(config.urls.soundcloud.api);
                 }
 
                 // Wait for SC load
                 var soundCloudTimer = window.setInterval(function() {
                     if (window.SC && soundCloud.loaded) {
                         window.clearInterval(soundCloudTimer);
-                        _soundcloudReady.call(soundCloud);
+                        soundcloudReady.call(soundCloud);
                     }
                 }, 50);
             }
         }
 
         // When embeds are ready
-        function _embedReady() {
+        function embedReady() {
             // Setup the UI and call ready if full support
-            if (plyr.supported.full) {
-                _setupInterface();
-                _ready();
+            if (player.supported.full) {
+                setupInterface();
+                ready();
             }
 
             // Set title
-            _setTitle(_getElement('iframe'));
+            setTitle(getElement('iframe'));
         }
 
         // Handle YouTube API ready
-        function _youTubeReady(videoId, container) {
+        function youTubeReady(videoId, container) {
             // Setup instance
             // https://developers.google.com/youtube/iframe_api_reference
-            plyr.embed = new window.YT.Player(container.id, {
+            player.embed = new window.YT.Player(container.id, {
                 videoId: videoId,
                 playerVars: {
-                    autoplay:       (config.autoplay ? 1 : 0),
-                    controls:       (plyr.supported.full ? 0 : 1),
-                    rel:            0,
-                    showinfo:       0,
+                    autoplay: (config.autoplay ? 1 : 0),
+                    controls: (player.supported.full ? 0 : 1),
+                    rel: 0,
+                    showinfo: 0,
                     iv_load_policy: 3,
                     cc_load_policy: (config.captions.defaultActive ? 1 : 0),
-                    cc_lang_pref:   'en',
-                    wmode:          'transparent',
+                    cc_lang_pref: 'en',
+                    wmode: 'transparent',
                     modestbranding: 1,
-                    disablekb:      1,
-                    origin:         '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
+                    disablekb: 1,
+                    origin: '*' // https://code.google.com/p/gdata-issues/issues/detail?id=5788#c45
                 },
                 events: {
                     'onError': function(event) {
-                        _triggerEvent(plyr.container, 'error', true, {
-                            code:   event.data,
-                            embed:  event.target
+                        trigger(player.elements.container, 'error', true, {
+                            code: event.data,
+                            embed: event.target
                         });
                     },
+                    'onPlaybackQualityChange': function(event) {
+                        // Get the instance
+                        var instance = event.target;
+
+                        // Get current quality
+                        var quality = instance.getPlaybackQuality();
+
+                        // var set = player.setPlaybackQuality();
+                        console.warn(quality);
+                    },
                     'onReady': function(event) {
                         // Get the instance
                         var instance = event.target;
 
                         // Create a faux HTML5 API using the YouTube API
-                        plyr.media.play = function() {
+                        player.elements.media.play = function() {
                             instance.playVideo();
-                            plyr.media.paused = false;
+                            player.elements.media.paused = false;
                         };
-                        plyr.media.pause = function() {
+                        player.elements.media.pause = function() {
                             instance.pauseVideo();
-                            plyr.media.paused = true;
+                            player.elements.media.paused = true;
                         };
-                        plyr.media.stop = function() {
+                        player.elements.media.stop = function() {
                             instance.stopVideo();
-                            plyr.media.paused = true;
+                            player.elements.media.paused = true;
                         };
-                        plyr.media.duration = instance.getDuration();
-                        plyr.media.paused = true;
-                        plyr.media.currentTime = 0;
-                        plyr.media.muted = instance.isMuted();
+                        player.elements.media.duration = instance.getDuration();
+                        player.elements.media.paused = true;
+                        player.elements.media.currentTime = 0;
+                        player.elements.media.muted = instance.isMuted();
+
+                        // Get available speeds
+                        var speed = instance.getPlaybackRate();
+                        var speedOptions = instance.getAvailablePlaybackRates();
+                        //var set = instance.setPlaybackRate();
+                        console.warn(speed, speedOptions);
 
                         // Set title
                         config.title = instance.getVideoData().title;
 
                         // Set the tabindex
-                        if (plyr.supported.full) {
-                            plyr.media.querySelector('iframe').setAttribute('tabindex', '-1');
+                        if (player.supported.full) {
+                            player.elements.media.querySelector('iframe').setAttribute('tabindex', '-1');
                         }
 
                         // Update UI
-                        _embedReady();
+                        embedReady();
 
                         // Trigger timeupdate
-                        _triggerEvent(plyr.media, 'timeupdate');
+                        trigger(player.elements.media, 'timeupdate');
 
                         // Trigger timeupdate
-                        _triggerEvent(plyr.media, 'durationchange');
+                        trigger(player.elements.media, 'durationchange');
 
                         // Reset timer
                         window.clearInterval(timers.buffering);
@@ -1701,22 +2685,22 @@
                         // Setup buffering
                         timers.buffering = window.setInterval(function() {
                             // Get loaded % from YouTube
-                            plyr.media.buffered = instance.getVideoLoadedFraction();
+                            player.elements.media.buffered = instance.getVideoLoadedFraction();
 
                             // Trigger progress only when we actually buffer something
-                            if (plyr.media.lastBuffered === null || plyr.media.lastBuffered < plyr.media.buffered) {
-                                _triggerEvent(plyr.media, 'progress');
+                            if (player.elements.media.lastBuffered === null || player.elements.media.lastBuffered < player.elements.media.buffered) {
+                                trigger(player.elements.media, 'progress');
                             }
 
                             // Set last buffer point
-                            plyr.media.lastBuffered = plyr.media.buffered;
+                            player.elements.media.lastBuffered = player.elements.media.buffered;
 
                             // Bail if we're at 100%
-                            if (plyr.media.buffered === 1) {
+                            if (player.elements.media.buffered === 1) {
                                 window.clearInterval(timers.buffering);
 
                                 // Trigger event
-                                _triggerEvent(plyr.media, 'canplaythrough');
+                                trigger(player.elements.media, 'canplaythrough');
                             }
                         }, 200);
                     },
@@ -1736,48 +2720,53 @@
                         // 5    Video cued
                         switch (event.data) {
                             case 0:
-                                plyr.media.paused = true;
-                                _triggerEvent(plyr.media, 'ended');
+                                player.elements.media.paused = true;
+                                trigger(player.elements.media, 'ended');
                                 break;
 
                             case 1:
-                                plyr.media.paused = false;
+                                player.elements.media.paused = false;
 
                                 // If we were seeking, fire seeked event
-                                if (plyr.media.seeking) {
-                                    _triggerEvent(plyr.media, 'seeked');
+                                if (player.elements.media.seeking) {
+                                    trigger(player.elements.media, 'seeked');
                                 }
 
-                                plyr.media.seeking = false;
-                                _triggerEvent(plyr.media, 'play');
-                                _triggerEvent(plyr.media, 'playing');
+                                player.elements.media.seeking = false;
+                                trigger(player.elements.media, 'play');
+                                trigger(player.elements.media, 'playing');
 
                                 // Poll to get playback progress
                                 timers.playing = window.setInterval(function() {
                                     // Set the current time
-                                    plyr.media.currentTime = instance.getCurrentTime();
+                                    player.elements.media.currentTime = instance.getCurrentTime();
 
                                     // Trigger timeupdate
-                                    _triggerEvent(plyr.media, 'timeupdate');
+                                    trigger(player.elements.media, 'timeupdate');
                                 }, 100);
 
                                 // Check duration again due to YouTube bug
                                 // https://github.com/Selz/plyr/issues/374
                                 // https://code.google.com/p/gdata-issues/issues/detail?id=8690
-                                if (plyr.media.duration !== instance.getDuration()) {
-                                    plyr.media.duration = instance.getDuration();
-                                    _triggerEvent(plyr.media, 'durationchange');
+                                if (player.elements.media.duration !== instance.getDuration()) {
+                                    player.elements.media.duration = instance.getDuration();
+                                    trigger(player.elements.media, 'durationchange');
                                 }
 
+                                // Get quality
+                                var qualityOptions = instance.getAvailableQualityLevels();
+                                var quality = instance.getPlaybackQuality();
+                                setQualityMenu(qualityOptions, quality);
+
                                 break;
 
                             case 2:
-                                plyr.media.paused = true;
-                                _triggerEvent(plyr.media, 'pause');
+                                player.elements.media.paused = true;
+                                trigger(player.elements.media, 'pause');
                                 break;
                         }
 
-                        _triggerEvent(plyr.container, 'statechange', false, {
+                        trigger(player.elements.container, 'statechange', false, {
                             code: event.data
                         });
                     }
@@ -1786,7 +2775,7 @@
         }
 
         // Vimeo ready
-        function _vimeoReady(mediaId, container) {
+        function vimeoReady(mediaId, container) {
             // Setup instance
             // https://github.com/vimeo/player.js
             plyr.embed = new window.Vimeo.Player(container, {
@@ -1799,222 +2788,347 @@
             });
 
             // Create a faux HTML5 API using the Vimeo API
-            plyr.media.play = function() {
-                plyr.embed.play();
-                plyr.media.paused = false;
+            player.elements.media.play = function() {
+                player.embed.play();
+                player.elements.media.paused = false;
             };
-            plyr.media.pause = function() {
-                plyr.embed.pause();
-                plyr.media.paused = true;
+            player.elements.media.pause = function() {
+                player.embed.pause();
+                player.elements.media.paused = true;
             };
-            plyr.media.stop = function() {
-                plyr.embed.stop();
-                plyr.media.paused = true;
+            player.elements.media.stop = function() {
+                player.embed.stop();
+                player.elements.media.paused = true;
             };
 
-            plyr.media.paused = true;
-            plyr.media.currentTime = 0;
+            player.elements.media.paused = true;
+            player.elements.media.currentTime = 0;
 
             // Update UI
-            _embedReady();
+            embedReady();
 
-            plyr.embed.getCurrentTime().then(function(value) {
-                plyr.media.currentTime = value;
+            player.embed.getCurrentTime().then(function(value) {
+                player.elements.media.currentTime = value;
 
                 // Trigger timeupdate
-                _triggerEvent(plyr.media, 'timeupdate');
+                trigger(player.elements.media, 'timeupdate');
             });
 
-            plyr.embed.getDuration().then(function(value) {
-                plyr.media.duration = value;
+            player.embed.getDuration().then(function(value) {
+                player.elements.media.duration = value;
 
                 // Trigger timeupdate
-                _triggerEvent(plyr.media, 'durationchange');
+                trigger(player.elements.media, 'durationchange');
             });
 
             // TODO: Captions
             /*if (config.captions.defaultActive) {
-                plyr.embed.enableTextTrack('en');
+                player.embed.enableTextTrack('en');
             }*/
 
-            plyr.embed.on('loaded', function() {
+            player.embed.on('loaded', function() {
                 // Fix keyboard focus issues
                 // https://github.com/Selz/plyr/issues/317
-                if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) {
-                    plyr.embed.element.setAttribute('tabindex', '-1');
+                if (is.htmlElement(player.embed.element) && player.supported.full) {
+                    player.embed.element.setAttribute('tabindex', '-1');
                 }
             });
 
-            plyr.embed.on('play', function() {
-                plyr.media.paused = false;
-                _triggerEvent(plyr.media, 'play');
-                _triggerEvent(plyr.media, 'playing');
+            player.embed.on('play', function() {
+                player.elements.media.paused = false;
+                trigger(player.elements.media, 'play');
+                trigger(player.elements.media, 'playing');
             });
 
-            plyr.embed.on('pause', function() {
-                plyr.media.paused = true;
-                _triggerEvent(plyr.media, 'pause');
+            player.embed.on('pause', function() {
+                player.elements.media.paused = true;
+                trigger(player.elements.media, 'pause');
             });
 
-            plyr.embed.on('timeupdate', function(data) {
-                plyr.media.seeking = false;
-                plyr.media.currentTime = data.seconds;
-                _triggerEvent(plyr.media, 'timeupdate');
+            player.embed.on('timeupdate', function(data) {
+                player.elements.media.seeking = false;
+                player.elements.media.currentTime = data.seconds;
+                trigger(player.elements.media, 'timeupdate');
             });
 
-            plyr.embed.on('progress', function(data) {
-                plyr.media.buffered = data.percent;
-                _triggerEvent(plyr.media, 'progress');
+            player.embed.on('progress', function(data) {
+                player.elements.media.buffered = data.percent;
+                trigger(player.elements.media, 'progress');
 
                 if (parseInt(data.percent) === 1) {
                     // Trigger event
-                    _triggerEvent(plyr.media, 'canplaythrough');
+                    trigger(player.elements.media, 'canplaythrough');
                 }
             });
 
-            plyr.embed.on('seeked', function() {
-                plyr.media.seeking = false;
-                _triggerEvent(plyr.media, 'seeked');
-                _triggerEvent(plyr.media, 'play');
+            player.embed.on('seeked', function() {
+                player.elements.media.seeking = false;
+                trigger(player.elements.media, 'seeked');
+                trigger(player.elements.media, 'play');
             });
 
-            plyr.embed.on('ended', function() {
-                plyr.media.paused = true;
-                _triggerEvent(plyr.media, 'ended');
+            player.embed.on('ended', function() {
+                player.elements.media.paused = true;
+                trigger(player.elements.media, 'ended');
             });
         }
 
         // Soundcloud ready
-        function _soundcloudReady() {
+        function soundcloudReady() {
             /* jshint validthis: true */
-            plyr.embed = window.SC.Widget(this);
+            player.embed = window.SC.Widget(this);
 
             // Setup on ready
-            plyr.embed.bind(window.SC.Widget.Events.READY, function() {
+            player.embed.bind(window.SC.Widget.Events.READY, function() {
                 // Create a faux HTML5 API using the Soundcloud API
-                plyr.media.play = function() {
-                    plyr.embed.play();
-                    plyr.media.paused = false;
+                player.elements.media.play = function() {
+                    player.embed.play();
+                    player.elements.media.paused = false;
                 };
-                plyr.media.pause = function() {
-                    plyr.embed.pause();
-                    plyr.media.paused = true;
+                player.elements.media.pause = function() {
+                    player.embed.pause();
+                    player.elements.media.paused = true;
                 };
-                plyr.media.stop = function() {
-                    plyr.embed.seekTo(0);
-                    plyr.embed.pause();
-                    plyr.media.paused = true;
+                player.elements.media.stop = function() {
+                    player.embed.seekTo(0);
+                    player.embed.pause();
+                    player.elements.media.paused = true;
                 };
 
-                plyr.media.paused = true;
-                plyr.media.currentTime = 0;
+                player.elements.media.paused = true;
+                player.elements.media.currentTime = 0;
 
-                plyr.embed.getDuration(function(value) {
-                    plyr.media.duration = value/1000;
+                player.embed.getDuration(function(value) {
+                    player.elements.media.duration = value / 1000;
 
                     // Update UI
-                    _embedReady();
+                    embedReady();
                 });
 
-                plyr.embed.getPosition(function(value) {
-                    plyr.media.currentTime = value;
+                player.embed.getPosition(function(value) {
+                    player.elements.media.currentTime = value;
 
                     // Trigger timeupdate
-                    _triggerEvent(plyr.media, 'timeupdate');
+                    trigger(player.elements.media, 'timeupdate');
                 });
 
-                plyr.embed.bind(window.SC.Widget.Events.PLAY, function() {
-                    plyr.media.paused = false;
-                    _triggerEvent(plyr.media, 'play');
-                    _triggerEvent(plyr.media, 'playing');
+                player.embed.bind(window.SC.Widget.Events.PLAY, function() {
+                    player.elements.media.paused = false;
+                    trigger(player.elements.media, 'play');
+                    trigger(player.elements.media, 'playing');
                 });
 
-                plyr.embed.bind(window.SC.Widget.Events.PAUSE, function() {
-                    plyr.media.paused = true;
-                    _triggerEvent(plyr.media, 'pause');
+                player.embed.bind(window.SC.Widget.Events.PAUSE, function() {
+                    player.elements.media.paused = true;
+                    trigger(player.elements.media, 'pause');
                 });
 
-                plyr.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
-                    plyr.media.seeking = false;
-                    plyr.media.currentTime = data.currentPosition/1000;
-                    _triggerEvent(plyr.media, 'timeupdate');
+                player.embed.bind(window.SC.Widget.Events.PLAY_PROGRESS, function(data) {
+                    player.elements.media.seeking = false;
+                    player.elements.media.currentTime = data.currentPosition / 1000;
+                    trigger(player.elements.media, 'timeupdate');
                 });
 
-                plyr.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
-                    plyr.media.buffered = data.loadProgress;
-                    _triggerEvent(plyr.media, 'progress');
+                player.embed.bind(window.SC.Widget.Events.LOAD_PROGRESS, function(data) {
+                    player.elements.media.buffered = data.loadProgress;
+                    trigger(player.elements.media, 'progress');
 
                     if (parseInt(data.loadProgress) === 1) {
                         // Trigger event
-                        _triggerEvent(plyr.media, 'canplaythrough');
+                        trigger(player.elements.media, 'canplaythrough');
                     }
                 });
 
-                plyr.embed.bind(window.SC.Widget.Events.FINISH, function() {
-                    plyr.media.paused = true;
-                    _triggerEvent(plyr.media, 'ended');
+                player.embed.bind(window.SC.Widget.Events.FINISH, function() {
+                    player.elements.media.paused = true;
+                    trigger(player.elements.media, 'ended');
                 });
             });
         }
 
         // Play media
-        function _play() {
-            if ('play' in plyr.media) {
-                plyr.media.play();
+        function play() {
+            if ('play' in player.elements.media) {
+                player.elements.media.play();
             }
         }
 
         // Pause media
-        function _pause() {
-            if ('pause' in plyr.media) {
-                plyr.media.pause();
+        function pause() {
+            if ('pause' in player.elements.media) {
+                player.elements.media.pause();
             }
         }
 
         // Toggle playback
-        function _togglePlay(toggle) {
+        function togglePlay(toggle) {
             // True toggle
-            if (!_is.boolean(toggle)) {
-                toggle = plyr.media.paused;
+            if (!is.boolean(toggle)) {
+                toggle = player.elements.media.paused;
             }
 
             if (toggle) {
-                _play();
+                play();
             } else {
-                _pause();
+                pause();
             }
 
             return toggle;
         }
 
+        // Toggle loop
+        // TODO: Set the indicator on load as user may pass loop as config
+        function toggleLoop(type) {
+            // Set default to be a true toggle
+            if (!inArray(['start', 'end', 'all', 'none', 'toggle'], type)) {
+                type = 'toggle';
+            }
+
+            var currentTime = Number(player.elements.media.currentTime);
+
+            switch (type) {
+                case 'start':
+                    if (config.loop.end && config.loop.end <= currentTime) {
+                        config.loop.end = null;
+                    }
+                    config.loop.start = currentTime;
+                    config.loop.indicator.start = player.elements.display.played.value;
+                    break;
+
+                case 'end':
+                    if (config.loop.start >= currentTime) {
+                        return;
+                    }
+                    config.loop.end = currentTime;
+                    config.loop.indicator.end = player.elements.display.played.value;
+                    break;
+
+                case 'all':
+                    config.loop.start = 0;
+                    config.loop.end = player.elements.media.duration - 2;
+                    config.loop.indicator.start = 0;
+                    config.loop.indicator.end = 100;
+                    break;
+
+                case 'toggle':
+                    if (config.loop.active) {
+                        config.loop.start = 0;
+                        config.loop.end = null;
+                    } else {
+                        config.loop.start = 0;
+                        config.loop.end = player.elements.media.duration - 2;
+                    }
+                    break;
+
+                default:
+                    config.loop.start = 0;
+                    config.loop.end = null;
+                    break;
+            }
+
+            // Check if can loop
+            config.loop.active = is.number(config.loop.start) && is.number(config.loop.end);
+            var start = updateTimeDisplay(config.loop.start, getElement('[data-plyr-loop="start"]'));
+            var end = null;
+
+            if (is.number(config.loop.end)) {
+                // Find the <span> inside button
+                end = updateTimeDisplay(config.loop.end, document.querySelector('[data-loop__value="loopout"]'));
+            } else {
+                // Find the <span> inside button
+                //end = document.querySelector('[data-loop__value="loopout"]').innerHTML = '';
+            }
+
+            if (config.loop.active) {
+                // TODO: Improve the design of the loop indicator and put styling in CSS where it's meant to be
+                //getElement('[data-menu="loop"]').innerHTML = start + ' - ' + end;
+                //getElement(config.selectors.progress.looped).style.position = 'absolute';
+                //getElement(config.selectors.progress.looped).style.left = config.loopinPositionPercentage + '%';
+                //getElement(config.selectors.progress.looped).style.width = (config.loopoutPositionPercentage - config.loopinPositionPercentage) + '%';
+                //getElement(config.selectors.progress.looped).style.background = '#ffbb00';
+                //getElement(config.selectors.progress.looped).style.height = '3px';
+                //getElement(config.selectors.progress.looped).style.top = '3px';
+                //getElement(config.selectors.progress.looped).style['border-radius'] = '100px';
+            } else {
+                //getElement('[data-menu="loop"]').innerHTML = config.i18n.loopNone;
+                //getElement(config.selectors.progress.looped).style.width = '0px';
+            }
+        }
+
+        // Set playback speed
+        function setSpeed(speed) {
+            // Load speed from storage or default value
+            if (is.undefined(speed)) {
+                speed = player.storage.speed || config.defaultSpeed;
+            }
+
+            if (!is.array(config.speeds)) {
+                warn('Invalid speeds format');
+                return;
+            }
+
+            if (!is.number(speed)) {
+                var index = config.speeds.indexOf(config.currentSpeed);
+
+                if (index !== -1) {
+                    var nextIndex = index + 1;
+                    if (nextIndex >= config.speeds.length) {
+                        nextIndex = 0;
+                    }
+                    speed = config.speeds[nextIndex];
+                } else {
+                    speed = config.defaultSpeed;
+                }
+            }
+
+            // Store current speed
+            config.currentSpeed = speed;
+
+            // Set HTML5 speed
+            player.elements.media.playbackRate = speed;
+
+            // Save speed to localStorage
+            updateStorage({
+                speed: speed
+            });
+
+            // Update current value of menu
+            // document.querySelector('[data-menu="speed"]').innerHTML = getSpeedDisplayValue();
+        }
+
+        // Get the current speed value
+        function getSpeedDisplayValue() {
+            return config.currentSpeed.toFixed(1).toString().replace('.0', '') + '&times;'
+        }
+
         // Rewind
-        function _rewind(seekTime) {
+        function rewind(seekTime) {
             // Use default if needed
-            if (!_is.number(seekTime)) {
+            if (!is.number(seekTime)) {
                 seekTime = config.seekTime;
             }
-            _seek(plyr.media.currentTime - seekTime);
+            seek(player.elements.media.currentTime - seekTime);
         }
 
         // Fast forward
-        function _forward(seekTime) {
+        function forward(seekTime) {
             // Use default if needed
-            if (!_is.number(seekTime)) {
+            if (!is.number(seekTime)) {
                 seekTime = config.seekTime;
             }
-            _seek(plyr.media.currentTime + seekTime);
+            seek(player.elements.media.currentTime + seekTime);
         }
 
         // Seek to time
         // The input parameter can be an event or a number
-        function _seek(input) {
-            var targetTime  = 0,
-                paused      = plyr.media.paused,
-                duration    = _getDuration();
+        function seek(input) {
+            var targetTime = 0;
+            var paused = player.elements.media.paused;
+            var duration = getDuration();
 
-            if (_is.number(input)) {
+            if (is.number(input)) {
                 targetTime = input;
-            } else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
+            } else if (is.event(input) && inArray(['input', 'change'], input.type)) {
                 // It's the seek slider
                 // Seek to the selected time
                 targetTime = ((input.target.value / input.target.max) * duration);
@@ -2028,64 +3142,63 @@
             }
 
             // Update seek range and progress
-            _updateSeekDisplay(targetTime);
+            updateSeekDisplay(targetTime);
 
             // Set the current time
             // Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
             try {
-                plyr.media.currentTime = targetTime.toFixed(4);
-            }
-            catch(e) {}
+                player.elements.media.currentTime = targetTime.toFixed(4);
+            } catch (e) {}
 
             // Embeds
-            if (_inArray(config.types.embed, plyr.type)) {
-                switch(plyr.type) {
+            if (inArray(config.types.embed, player.type)) {
+                switch (player.type) {
                     case 'youtube':
-                        plyr.embed.seekTo(targetTime);
+                        player.embed.seekTo(targetTime);
                         break;
 
                     case 'vimeo':
                         // Round to nearest second for vimeo
-                        plyr.embed.setCurrentTime(targetTime.toFixed(0));
+                        player.embed.setCurrentTime(targetTime.toFixed(0));
                         break;
 
                     case 'soundcloud':
-                        plyr.embed.seekTo(targetTime * 1000);
+                        player.embed.seekTo(targetTime * 1000);
                         break;
                 }
 
                 if (paused) {
-                    _pause();
+                    pause();
                 }
 
                 // Trigger timeupdate
-                _triggerEvent(plyr.media, 'timeupdate');
+                trigger(player.elements.media, 'timeupdate');
 
                 // Set seeking flag
-                plyr.media.seeking = true;
+                player.elements.media.seeking = true;
 
                 // Trigger seeking
-                _triggerEvent(plyr.media, 'seeking');
+                trigger(player.elements.media, 'seeking');
             }
 
             // Logging
-            _log('Seeking to ' + plyr.media.currentTime + ' seconds');
+            log('Seeking to ' + player.elements.media.currentTime + ' seconds');
 
             // Special handling for 'manual' captions
-            _seekManualCaptions(targetTime);
+            seekManualCaptions(targetTime);
         }
 
         // Get the duration (or custom if set)
-        function _getDuration() {
+        function getDuration() {
             // It should be a number, but parse it just incase
-            var duration = parseInt(config.duration),
+            var duration = parseInt(config.duration);
 
             // True duration
-            mediaDuration = 0;
+            var mediaDuration = 0;
 
             // Only if duration available
-            if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
-                mediaDuration = plyr.media.duration;
+            if (player.elements.media.duration !== null && !isNaN(player.elements.media.duration)) {
+                mediaDuration = player.elements.media.duration;
             }
 
             // If custom duration is funky, use regular duration
@@ -2093,16 +3206,16 @@
         }
 
         // Check playing state
-        function _checkPlaying() {
-            _toggleClass(plyr.container, config.classes.playing, !plyr.media.paused);
+        function checkPlaying() {
+            toggleClass(player.elements.container, config.classes.playing, !player.elements.media.paused);
 
-            _toggleClass(plyr.container, config.classes.stopped, plyr.media.paused);
+            toggleClass(player.elements.container, config.classes.stopped, player.elements.media.paused);
 
-            _toggleControls(plyr.media.paused);
+            toggleControls(player.elements.media.paused);
         }
 
         // Save scroll position
-        function _saveScrollPosition() {
+        function saveScrollPosition() {
             scroll = {
                 x: window.pageXOffset || 0,
                 y: window.pageYOffset || 0
@@ -2110,110 +3223,175 @@
         }
 
         // Restore scroll position
-        function _restoreScrollPosition() {
+        function restoreScrollPosition() {
             window.scrollTo(scroll.x, scroll.y);
         }
 
         // Toggle fullscreen
-        function _toggleFullscreen(event) {
+        function toggleFullscreen(event) {
             // Check for native support
-            var nativeSupport = fullscreen.supportsFullScreen;
+            var nativeSupport = support.fullscreen;
 
             if (nativeSupport) {
                 // If it's a fullscreen change event, update the UI
-                if (event && event.type === fullscreen.fullScreenEventName) {
-                    plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
+                if (event && event.type === fullscreen.eventType) {
+                    player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
                 } else {
                     // Else it's a user request to enter or exit
-                    if (!fullscreen.isFullScreen(plyr.container)) {
+                    if (!fullscreen.isFullScreen(player.elements.container)) {
                         // Save scroll position
-                        _saveScrollPosition();
+                        saveScrollPosition();
 
                         // Request full screen
-                        fullscreen.requestFullScreen(plyr.container);
+                        fullscreen.requestFullScreen(player.elements.container);
                     } else {
                         // Bail from fullscreen
                         fullscreen.cancelFullScreen();
                     }
 
                     // Check if we're actually full screen (it could fail)
-                    plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
+                    player.fullscreen.active = fullscreen.isFullScreen(player.elements.container);
 
                     return;
                 }
             } else {
                 // Otherwise, it's a simple toggle
-                plyr.isFullscreen = !plyr.isFullscreen;
+                player.fullscreen.active = !player.fullscreen.active;
 
                 // Bind/unbind escape key
-                document.body.style.overflow = plyr.isFullscreen ? 'hidden' : '';
+                document.body.style.overflow = player.fullscreen.active ? 'hidden' : '';
             }
 
             // Set class hook
-            _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
+            toggleClass(player.elements.container, config.classes.fullscreen.active, player.fullscreen.active);
 
             // Trap focus
-            _focusTrap(plyr.isFullscreen);
+            focusTrap(player.fullscreen.active);
 
             // Set button state
-            if (plyr.buttons && plyr.buttons.fullscreen) {
-                _toggleState(plyr.buttons.fullscreen, plyr.isFullscreen);
+            if (player.elements.buttons && player.elements.buttons.fullscreen) {
+                toggleState(player.elements.buttons.fullscreen, player.fullscreen.active);
             }
 
             // Trigger an event
-            _triggerEvent(plyr.container, plyr.isFullscreen ? 'enterfullscreen' : 'exitfullscreen', true);
+            trigger(player.elements.container, player.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen', true);
 
             // Restore scroll position
-            if (!plyr.isFullscreen && nativeSupport) {
-                _restoreScrollPosition();
+            if (!player.fullscreen.active && nativeSupport) {
+                restoreScrollPosition();
+            }
+        }
+
+        // Toggle Menu
+        function toggleMenu(event) {
+            var menu = player.elements.settings.menu.parentNode;
+            var toggle = event.target;
+            var target = document.getElementById(toggle.getAttribute('aria-controls'));
+            var show = (toggle.getAttribute('aria-expanded') === 'false');
+
+            // Nothing to show, bail
+            if (!is.htmlElement(target)) {
+                return;
+            }
+
+            // Are we targetting a tab?
+            var isTab = target.getAttribute('role') === 'tabpanel';
+            var targetWidth;
+            var targetHeight;
+            var container;
+
+            // Hide all other tabs
+            if (isTab) {
+                // Get other tabs
+                var current = menu.querySelector('[role="tabpanel"][aria-hidden="false"]');
+                container = current.parentNode;
+
+                [].forEach.call(menu.querySelectorAll('[aria-controls="' + current.getAttribute('id') + '"]'), function(toggle) {
+                    toggle.setAttribute('aria-expanded', false);
+                });
+
+                container.style.width = current.scrollWidth + 'px';
+                container.style.height = current.scrollHeight + 'px';
+
+                current.setAttribute('aria-hidden', true);
+                current.setAttribute('tabindex', -1);
+
+                // Get the natural element size
+                var clone = target.cloneNode(true);
+                clone.style.position = "absolute";
+                clone.style.opacity = 0;
+                clone.setAttribute('aria-hidden', false);
+                container.appendChild(clone);
+                targetWidth = clone.scrollWidth;
+                targetHeight = clone.scrollHeight;
+                remove(clone);
+            }
+
+            target.setAttribute('aria-hidden', !show);
+            toggle.setAttribute('aria-expanded', show);
+            target.setAttribute('tabindex', 0);
+
+            if (isTab) {
+                container.style.width = targetWidth + 'px';
+                container.style.height = targetHeight + 'px';
+
+                window.setTimeout(function() {
+                    container.style.width = '';
+                    container.style.height = '';
+                }, 300);
             }
         }
 
         // Mute
-        function _toggleMute(muted) {
+        function toggleMute(muted) {
             // If the method is called without parameter, toggle based on current value
-            if (!_is.boolean(muted)) {
-                muted = !plyr.media.muted;
+            if (!is.boolean(muted)) {
+                muted = !player.elements.media.muted;
             }
 
             // Set button state
-            _toggleState(plyr.buttons.mute, muted);
+            toggleState(player.elements.buttons.mute, muted);
 
             // Set mute on the player
-            plyr.media.muted = muted;
+            player.elements.media.muted = muted;
 
             // If volume is 0 after unmuting, set to default
-            if (plyr.media.volume === 0) {
-                _setVolume(config.volume);
+            if (player.elements.media.volume === 0) {
+                setVolume(config.volume);
             }
 
             // Embeds
-            if (_inArray(config.types.embed, plyr.type)) {
+            if (inArray(config.types.embed, player.type)) {
                 // YouTube
-                switch(plyr.type) {
+                switch (player.type) {
                     case 'youtube':
-                        plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+                        player.embed[player.elements.media.muted ? 'mute' : 'unMute']();
                         break;
 
                     case 'vimeo':
                     case 'soundcloud':
-                        plyr.embed.setVolume(plyr.media.muted ? 0 : parseFloat(config.volume / config.volumeMax));
+                        player.embed.setVolume(player.elements.media.muted ? 0 : parseFloat(config.volume / 10));
                         break;
                 }
 
                 // Trigger volumechange for embeds
-                _triggerEvent(plyr.media, 'volumechange');
+                trigger(player.elements.media, 'volumechange');
             }
         }
 
         // Set volume
-        function _setVolume(volume) {
-            var max = config.volumeMax,
-                min = config.volumeMin;
+        function setVolume(volume) {
+            var max = 10;
+            var min = 0;
+
+            // If volume is event, get from input
+            if (is.event(volume)) {
+                volume = volume.target.value;
+            }
 
             // Load volume from storage if no value specified
-            if (_is.undefined(volume)) {
-                volume = plyr.storage.volume;
+            if (is.undefined(volume)) {
+                volume = player.storage.volume;
             }
 
             // Use config if all else fails
@@ -2231,117 +3409,91 @@
             }
 
             // Set the player volume
-            plyr.media.volume = parseFloat(volume / max);
+            player.elements.media.volume = parseFloat(volume / max);
 
             // Set the display
-            if (plyr.volume.display) {
-                plyr.volume.display.value = volume;
+            if (player.elements.display.volume) {
+                player.elements.display.volume.value = volume;
             }
 
             // Embeds
-            if (_inArray(config.types.embed, plyr.type)) {
-                switch(plyr.type) {
+            if (inArray(config.types.embed, player.type)) {
+                switch (player.type) {
                     case 'youtube':
-                        plyr.embed.setVolume(plyr.media.volume * 100);
+                        player.embed.setVolume(player.elements.media.volume * 100);
                         break;
 
                     case 'vimeo':
                     case 'soundcloud':
-                        plyr.embed.setVolume(plyr.media.volume);
+                        player.embed.setVolume(player.elements.media.volume);
                         break;
                 }
 
                 // Trigger volumechange for embeds
-                _triggerEvent(plyr.media, 'volumechange');
+                trigger(player.elements.media, 'volumechange');
             }
 
             // Toggle muted state
             if (volume === 0) {
-                plyr.media.muted = true;
-            } else if (plyr.media.muted && volume > 0) {
-                _toggleMute();
+                player.elements.media.muted = true;
+            } else if (player.elements.media.muted && volume > 0) {
+                toggleMute();
             }
         }
 
         // Increase volume
-        function _increaseVolume(step) {
-            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+        function increaseVolume(step) {
+            var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
 
-            if (!_is.number(step)) {
-                step = config.volumeStep;
+            if (!is.number(step)) {
+                step = 1;
             }
 
-            _setVolume(volume + step);
+            setVolume(volume + step);
         }
 
         // Decrease volume
-        function _decreaseVolume(step) {
-            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+        function decreaseVolume(step) {
+            var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
 
-            if (!_is.number(step)) {
-                step = config.volumeStep;
+            if (!is.number(step)) {
+                step = 1;
             }
 
-            _setVolume(volume - step);
+            setVolume(volume - step);
         }
 
         // Update volume UI and storage
-        function _updateVolume() {
+        function updateVolume() {
             // Get the current volume
-            var volume = plyr.media.muted ? 0 : (plyr.media.volume * config.volumeMax);
+            var volume = player.elements.media.muted ? 0 : (player.elements.media.volume * 10);
 
             // Update the <input type="range"> if present
-            if (plyr.supported.full) {
-                if (plyr.volume.input) {
-                    plyr.volume.input.value = volume;
+            if (player.supported.full) {
+                if (player.elements.inputs.volume) {
+                    player.elements.inputs.volume.value = volume;
                 }
-                if (plyr.volume.display) {
-                    plyr.volume.display.value = volume;
+                if (player.elements.display.volume) {
+                    player.elements.display.volume.value = volume;
                 }
             }
 
             // Update the volume in storage
-            _updateStorage({volume: volume});
+            updateStorage({
+                volume: volume
+            });
 
             // Toggle class if muted
-            _toggleClass(plyr.container, config.classes.muted, (volume === 0));
+            toggleClass(player.elements.container, config.classes.muted, (volume === 0));
 
             // Update checkbox for mute state
-            if (plyr.supported.full && plyr.buttons.mute) {
-                _toggleState(plyr.buttons.mute, (volume === 0));
-            }
-        }
-
-        // Toggle captions
-        function _toggleCaptions(show) {
-            // If there's no full support, or there's no caption toggle
-            if (!plyr.supported.full || !plyr.buttons.captions) {
-                return;
+            if (player.supported.full && player.elements.buttons.mute) {
+                toggleState(player.elements.buttons.mute, (volume === 0));
             }
-
-            // If the method is called without parameter, toggle based on current value
-            if (!_is.boolean(show)) {
-                show = (plyr.container.className.indexOf(config.classes.captions.active) === -1);
-            }
-
-            // Set global
-            plyr.captionsEnabled = show;
-
-            // Toggle state
-            _toggleState(plyr.buttons.captions, plyr.captionsEnabled);
-
-            // Add class hook
-            _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
-
-            // Trigger an event
-            _triggerEvent(plyr.container, plyr.captionsEnabled ? 'captionsenabled' : 'captionsdisabled', true);
-
-            // Save captions state to localStorage
-            _updateStorage({captionsEnabled: plyr.captionsEnabled});
         }
 
         // Check if media is loading
-        function _checkLoading(event) {
+        function checkLoading(event) {
             var loading = (event.type === 'waiting');
 
             // Clear timer
@@ -2350,52 +3502,52 @@
             // Timer to prevent flicker when seeking
             timers.loading = setTimeout(function() {
                 // Toggle container class hook
-                _toggleClass(plyr.container, config.classes.loading, loading);
+                toggleClass(player.elements.container, config.classes.loading, loading);
 
                 // Show controls if loading, hide if done
-                _toggleControls(loading);
+                toggleControls(loading);
             }, (loading ? 250 : 0));
         }
 
         // Update <progress> elements
-        function _updateProgress(event) {
-            if (!plyr.supported.full) {
+        function updateProgress(event) {
+            if (!player.supported.full) {
                 return;
             }
 
-            var progress    = plyr.progress.played,
-                value       = 0,
-                duration    = _getDuration();
+            var progress = player.elements.display.played,
+                value = 0,
+                duration = getDuration();
 
             if (event) {
                 switch (event.type) {
                     // Video playing
                     case 'timeupdate':
                     case 'seeking':
-                        if (plyr.controls.pressed) {
+                        if (player.elements.controls.pressed) {
                             return;
                         }
 
-                        value = _getPercentage(plyr.media.currentTime, duration);
+                        value = getPercentage(player.elements.media.currentTime, duration);
 
                         // Set seek range value only if it's a 'natural' time event
-                        if (event.type === 'timeupdate' && plyr.buttons.seek) {
-                            plyr.buttons.seek.value = value;
+                        if (event.type === 'timeupdate' && player.elements.inputs.seek) {
+                            player.elements.inputs.seek.value = value;
                         }
 
                         break;
 
-                    // Check buffer status
+                        // Check buffer status
                     case 'playing':
                     case 'progress':
-                        progress    = plyr.progress.buffer;
-                        value       = (function() {
-                            var buffered = plyr.media.buffered;
+                        progress = player.elements.display.buffer;
+                        value = (function() {
+                            var buffered = player.elements.media.buffered;
 
                             if (buffered && buffered.length) {
                                 // HTML5
-                                return _getPercentage(buffered.end(0), duration);
-                            } else if (_is.number(buffered)) {
+                                return getPercentage(buffered.end(0), duration);
+                            } else if (is.number(buffered)) {
                                 // YouTube returns between 0 and 1
                                 return (buffered * 100);
                             }
@@ -2407,45 +3559,46 @@
                 }
             }
 
-            // Set values
-            _setProgress(progress, value);
+            if (is.number(config.loop.start) && is.number(config.loop.end) && player.elements.media.currentTime >= config.loop.end) {
+                seek(config.loop.start);
+            }
+
+            setProgress(progress, value);
         }
 
         // Set <progress> value
-        function _setProgress(progress, value) {
-            if (!plyr.supported.full) {
+        function setProgress(progress, value) {
+            if (!player.supported.full) {
                 return;
             }
 
             // Default to 0
-            if (_is.undefined(value)) {
+            if (is.undefined(value)) {
                 value = 0;
             }
             // Default to buffer or bail
-            if (_is.undefined(progress)) {
-                if (plyr.progress && plyr.progress.buffer) {
-                    progress = plyr.progress.buffer;
+            if (is.undefined(progress)) {
+                if (is.htmlElement(player.elements.display.buffer)) {
+                    progress = player.elements.display.buffer;
                 } else {
                     return;
                 }
             }
 
-            // One progress element passed
-            if (_is.htmlElement(progress)) {
+            // Update value and label
+            if (is.htmlElement(progress)) {
                 progress.value = value;
-            } else if (progress) {
-                // Object of progress + text element
-                if (progress.bar) {
-                    progress.bar.value = value;
-                }
-                if (progress.text) {
-                    progress.text.innerHTML = value;
+
+                // Update text label inside
+                var label = progress.getElementsByTagName('span')[0];
+                if (is.htmlElement(label)) {
+                    label.childNodes[0].nodeValue = value;
                 }
             }
         }
 
         // Update the displayed time
-        function _updateTimeDisplay(time, element) {
+        function updateTimeDisplay(time, element) {
             // Bail if there's no duration display
             if (!element) {
                 return;
@@ -2456,102 +3609,108 @@
                 time = 0;
             }
 
-            plyr.secs = parseInt(time % 60);
-            plyr.mins = parseInt((time / 60) % 60);
-            plyr.hours = parseInt(((time / 60) / 60) % 60);
+            var secs = parseInt(time % 60);
+            var mins = parseInt((time / 60) % 60);
+            var hours = parseInt(((time / 60) / 60) % 60);
 
             // Do we need to display hours?
-            var displayHours = (parseInt(((_getDuration() / 60) / 60) % 60) > 0);
+            var displayHours = (parseInt(((getDuration() / 60) / 60) % 60) > 0);
 
             // Ensure it's two digits. For example, 03 rather than 3.
-            plyr.secs = ('0' + plyr.secs).slice(-2);
-            plyr.mins = ('0' + plyr.mins).slice(-2);
+            secs = ('0' + secs).slice(-2);
+            mins = ('0' + mins).slice(-2);
+
+            // Generate display
+            var display = (displayHours ? hours + ':' : '') + mins + ':' + secs;
 
             // Render
-            element.innerHTML = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+            element.textContent = display;
+
+            // Return for looping
+            return display;
         }
 
         // Show the duration on metadataloaded
-        function _displayDuration() {
-            if (!plyr.supported.full) {
+        function displayDuration() {
+            if (!player.supported.full) {
                 return;
             }
 
             // Determine duration
-            var duration = _getDuration() || 0;
+            var duration = getDuration() || 0;
 
             // If there's only one time display, display duration there
-            if (!plyr.duration && config.displayDuration && plyr.media.paused) {
-                _updateTimeDisplay(duration, plyr.currentTime);
+            if (!player.elements.display.duration && config.displayDuration && player.elements.media.paused) {
+                updateTimeDisplay(duration, player.elements.display.currentTime);
             }
 
             // If there's a duration element, update content
-            if (plyr.duration) {
-                _updateTimeDisplay(duration, plyr.duration);
+            if (player.elements.display.duration) {
+                updateTimeDisplay(duration, player.elements.display.duration);
             }
 
             // Update the tooltip (if visible)
-            _updateSeekTooltip();
+            updateSeekTooltip();
         }
 
         // Handle time change event
-        function _timeUpdate(event) {
+        function timeUpdate(event) {
             // Duration
-            _updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
+            updateTimeDisplay(player.elements.media.currentTime, player.elements.display.currentTime);
 
             // Ignore updates while seeking
-            if (event && event.type === 'timeupdate' && plyr.media.seeking) {
+            if (event && event.type === 'timeupdate' && player.elements.media.seeking) {
                 return;
             }
 
             // Playing progress
-            _updateProgress(event);
+            updateProgress(event);
         }
 
         // Update seek range and progress
-        function _updateSeekDisplay(time) {
+        function updateSeekDisplay(time) {
             // Default to 0
-            if (!_is.number(time)) {
+            if (!is.number(time)) {
                 time = 0;
             }
 
-            var duration    = _getDuration(),
-                value       = _getPercentage(time, duration);
+            var duration = getDuration(),
+                value = getPercentage(time, duration);
 
             // Update progress
-            if (plyr.progress && plyr.progress.played) {
-                plyr.progress.played.value = value;
+            if (player.elements.progress && player.elements.display.played) {
+                player.elements.display.played.value = value;
             }
 
             // Update seek range input
-            if (plyr.buttons && plyr.buttons.seek) {
-                plyr.buttons.seek.value = value;
+            if (player.elements.buttons && player.elements.inputs.seek) {
+                player.elements.inputs.seek.value = value;
             }
         }
 
         // Update hover tooltip for seeking
-        function _updateSeekTooltip(event) {
-            var duration = _getDuration();
+        function updateSeekTooltip(event) {
+            var duration = getDuration();
 
             // Bail if setting not true
-            if (!config.tooltips.seek || !plyr.progress.container || duration === 0) {
+            if (!config.tooltips.seek || !is.htmlElement(player.elements.inputs.seek) || !is.htmlElement(player.elements.display.seekTooltip) || duration === 0) {
                 return;
             }
 
             // Calculate percentage
-            var clientRect  = plyr.progress.container.getBoundingClientRect(),
-                percent     = 0,
-                visible     = config.classes.tooltip + '--visible';
+            var clientRect = player.elements.inputs.seek.getBoundingClientRect();
+            var percent = 0;
+            var visible = config.classes.tooltip + '--visible';
 
             // Determine percentage, if already visible
-            if (!event) {
-                if (_hasClass(plyr.progress.tooltip, visible)) {
-                    percent = plyr.progress.tooltip.style.left.replace('%', '');
+            if (is.event(event)) {
+                percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
+            } else {
+                if (hasClass(player.elements.display.seekTooltip, visible)) {
+                    percent = player.elements.display.seekTooltip.style.left.replace('%', '');
                 } else {
                     return;
                 }
-            } else {
-                percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
             }
 
             // Set bounds
@@ -2562,41 +3721,41 @@
             }
 
             // Display the time a click would seek to
-            _updateTimeDisplay(((duration / 100) * percent), plyr.progress.tooltip);
+            updateTimeDisplay(((duration / 100) * percent), player.elements.display.seekTooltip);
 
             // Set position
-            plyr.progress.tooltip.style.left = percent + "%";
+            player.elements.display.seekTooltip.style.left = percent + "%";
 
             // Show/hide the tooltip
             // If the event is a moues in/out and percentage is inside bounds
-            if (event && _inArray(['mouseenter', 'mouseleave'], event.type)) {
-                _toggleClass(plyr.progress.tooltip, visible, (event.type === 'mouseenter'));
+            if (is.event(event) && inArray(['mouseenter', 'mouseleave'], event.type)) {
+                toggleClass(player.elements.display.seekTooltip, visible, (event.type === 'mouseenter'));
             }
         }
 
         // Show the player controls in fullscreen mode
-        function _toggleControls(toggle) {
+        function toggleControls(toggle) {
             // Don't hide if config says not to, it's audio, or not ready or loading
-            if (!config.hideControls || plyr.type === 'audio') {
+            if (!config.hideControls || player.type === 'audio') {
                 return;
             }
 
-            var delay = 0,
-                isEnterFullscreen = false,
-                show = toggle,
-                loading = _hasClass(plyr.container, config.classes.loading);
+            var delay = 0;
+            var isEnterFullscreen = false;
+            var show = toggle;
+            var loading = hasClass(player.elements.container, config.classes.loading);
 
             // Default to false if no boolean
-            if (!_is.boolean(toggle)) {
+            if (!is.boolean(toggle)) {
                 if (toggle && toggle.type) {
                     // Is the enter fullscreen event
                     isEnterFullscreen = (toggle.type === 'enterfullscreen');
 
                     // Whether to show controls
-                    show = _inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
+                    show = inArray(['mousemove', 'touchstart', 'mouseenter', 'focus'], toggle.type);
 
                     // Delay hiding on move events
-                    if (_inArray(['mousemove', 'touchmove'], toggle.type)) {
+                    if (inArray(['mousemove', 'touchmove'], toggle.type)) {
                         delay = 2000;
                     }
 
@@ -2605,7 +3764,7 @@
                         delay = 3000;
                     }
                 } else {
-                    show = _hasClass(plyr.container, config.classes.hideControls);
+                    show = hasClass(player.elements.container, config.classes.hideControls);
                 }
             }
 
@@ -2613,63 +3772,63 @@
             window.clearTimeout(timers.hover);
 
             // If the mouse is not over the controls, set a timeout to hide them
-            if (show || plyr.media.paused || loading) {
-                _toggleClass(plyr.container, config.classes.hideControls, false);
+            if (show || player.elements.media.paused || loading) {
+                toggleClass(player.elements.container, config.classes.hideControls, false);
 
                 // Always show controls when paused or if touch
-                if (plyr.media.paused || loading) {
+                if (player.elements.media.paused || loading) {
                     return;
                 }
 
                 // Delay for hiding on touch
-                if (plyr.browser.isTouch) {
+                if (player.browser.isTouch) {
                     delay = 3000;
                 }
             }
 
             // If toggle is false or if we're playing (regardless of toggle),
             // then set the timer to hide the controls
-            if (!show || !plyr.media.paused) {
+            if (!show || !player.elements.media.paused) {
                 timers.hover = window.setTimeout(function() {
                     // If the mouse is over the controls (and not entering fullscreen), bail
-                    if ((plyr.controls.pressed || plyr.controls.hover) && !isEnterFullscreen) {
+                    if ((player.elements.controls.pressed || player.elements.controls.hover) && !isEnterFullscreen) {
                         return;
                     }
 
-                    _toggleClass(plyr.container, config.classes.hideControls, true);
+                    toggleClass(player.elements.container, config.classes.hideControls, true);
                 }, delay);
             }
         }
 
         // Add common function to retrieve media source
-        function _source(source) {
+        function source(source) {
             // If not null or undefined, parse it
-            if (!_is.undefined(source)) {
-                _updateSource(source);
+            if (!is.undefined(source)) {
+                updateSource(source);
                 return;
             }
 
             // Return the current source
             var url;
-            switch(plyr.type) {
+            switch (player.type) {
                 case 'youtube':
-                    url = plyr.embed.getVideoUrl();
+                    url = player.embed.getVideoUrl();
                     break;
 
                 case 'vimeo':
-                    plyr.embed.getVideoUrl.then(function (value) {
+                    player.embed.getVideoUrl.then(function(value) {
                         url = value;
                     });
                     break;
 
                 case 'soundcloud':
-                    plyr.embed.getCurrentSound(function(object) {
+                    player.embed.getCurrentSound(function(object) {
                         url = object.permalink_url;
                     });
                     break;
 
                 default:
-                    url = plyr.media.currentSrc;
+                    url = player.elements.media.currentSrc;
                     break;
             }
 
@@ -2678,202 +3837,182 @@
 
         // Update source
         // Sources are not checked for support so be careful
-        function _updateSource(source) {
-            if (!_is.object(source) || !('sources' in source) || !source.sources.length) {
-                _warn('Invalid source format');
+        function updateSource(source) {
+            if (!is.object(source) || !('sources' in source) || !source.sources.length) {
+                warn('Invalid source format');
                 return;
             }
 
             // Remove ready class hook
-            _toggleClass(plyr.container, config.classes.ready, false);
+            toggleClass(player.elements.container, config.classes.ready, false);
 
             // Pause playback
-            _pause();
+            pause();
 
             // Update seek range and progress
-            _updateSeekDisplay();
+            updateSeekDisplay();
 
             // Reset buffer progress
-            _setProgress();
+            setProgress();
 
             // Cancel current network requests
-            _cancelRequests();
+            cancelRequests();
 
             // Setup new source
             function setup() {
                 // Remove embed object
-                plyr.embed = null;
+                player.embed = null;
 
                 // Remove the old media
-                _remove(plyr.media);
+                remove(player.elements.media);
 
                 // Remove video container
-                if (plyr.type === 'video' && plyr.videoContainer) {
-                    _remove(plyr.videoContainer);
+                if (player.type === 'video' && player.elements.wrapper) {
+                    remove(player.elements.wrapper);
                 }
 
                 // Reset class name
-                if (plyr.container) {
-                    plyr.container.removeAttribute('class');
+                if (player.elements.container) {
+                    player.elements.container.removeAttribute('class');
                 }
 
                 // Set the type
                 if ('type' in source) {
-                    plyr.type = source.type;
+                    player.type = source.type;
 
                     // Get child type for video (it might be an embed)
-                    if (plyr.type === 'video') {
+                    if (player.type === 'video') {
                         var firstSource = source.sources[0];
 
-                        if ('type' in firstSource && _inArray(config.types.embed, firstSource.type)) {
-                            plyr.type = firstSource.type;
+                        if ('type' in firstSource && inArray(config.types.embed, firstSource.type)) {
+                            player.type = firstSource.type;
                         }
                     }
                 }
 
                 // Check for support
-                plyr.supported = supported(plyr.type);
+                player.supported = checkSupport(player.type);
 
                 // Create new markup
-                switch(plyr.type) {
+                switch (player.type) {
                     case 'video':
-                        plyr.media = document.createElement('video');
+                        player.elements.media = createElement('video');
                         break;
 
                     case 'audio':
-                        plyr.media = document.createElement('audio');
+                        player.elements.media = createElement('audio');
                         break;
 
                     case 'youtube':
                     case 'vimeo':
                     case 'soundcloud':
-                        plyr.media = document.createElement('div');
-                        plyr.embedId = source.sources[0].src;
+                        player.elements.media = createElement('div');
+                        player.embedId = source.sources[0].src;
                         break;
                 }
 
                 // Inject the new element
-                _prependChild(plyr.container, plyr.media);
+                prependChild(player.elements.container, player.elements.media);
 
                 // Autoplay the new source?
-                if (_is.boolean(source.autoplay)) {
+                if (is.boolean(source.autoplay)) {
                     config.autoplay = source.autoplay;
                 }
 
                 // Set attributes for audio and video
-                if (_inArray(config.types.html5, plyr.type)) {
+                if (inArray(config.types.html5, player.type)) {
                     if (config.crossorigin) {
-                        plyr.media.setAttribute('crossorigin', '');
+                        player.elements.media.setAttribute('crossorigin', '');
                     }
                     if (config.autoplay) {
-                        plyr.media.setAttribute('autoplay', '');
+                        player.elements.media.setAttribute('autoplay', '');
                     }
                     if ('poster' in source) {
-                        plyr.media.setAttribute('poster', source.poster);
+                        player.elements.media.setAttribute('poster', source.poster);
                     }
-                    if (config.loop) {
-                        plyr.media.setAttribute('loop', '');
+                    if (config.loop.active) {
+                        player.elements.media.setAttribute('loop', '');
                     }
                 }
 
                 // Restore class hooks
-                _toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
-                _toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
-                _toggleStyleHook();
+                toggleClass(player.elements.container, config.classes.fullscreen.active, player.fullscreen.active);
+                toggleClass(player.elements.container, config.classes.captions.active, player.captions.enabled);
+                toggleStyleHook();
 
                 // Set new sources for html5
-                if (_inArray(config.types.html5, plyr.type)) {
-                    _insertChildElements('source', source.sources);
+                if (inArray(config.types.html5, player.type)) {
+                    insertElements('source', source.sources);
                 }
 
                 // Set up from scratch
-                _setupMedia();
+                setupMedia();
 
                 // HTML5 stuff
-                if (_inArray(config.types.html5, plyr.type)) {
+                if (inArray(config.types.html5, player.type)) {
                     // Setup captions
                     if ('tracks' in source) {
-                        _insertChildElements('track', source.tracks);
+                        insertElements('track', source.tracks);
                     }
 
                     // Load HTML5 sources
-                    plyr.media.load();
+                    player.elements.media.load();
                 }
 
                 // If HTML5 or embed but not fully supported, setupInterface and call ready now
-                if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
+                if (inArray(config.types.html5, player.type) || (inArray(config.types.embed, player.type) && !player.supported.full)) {
                     // Setup interface
-                    _setupInterface();
+                    setupInterface();
 
                     // Call ready
-                    _ready();
+                    ready();
                 }
 
                 // Set aria title and iframe title
                 config.title = source.title;
-                _setTitle();
+                setTitle();
             }
 
             // Destroy instance adn wait for callback
             // Vimeo throws a wobbly if you don't wait
-            _destroy(setup, false);
+            destroy(setup, false);
         }
 
         // Update poster
-        function _updatePoster(source) {
-            if (plyr.type === 'video') {
-                plyr.media.setAttribute('poster', source);
+        function updatePoster(source) {
+            if (player.type === 'video') {
+                player.elements.media.setAttribute('poster', source);
             }
         }
 
         // Listen for control events
-        function _controlListeners() {
+        function controlListeners() {
             // IE doesn't support input event, so we fallback to change
-            var inputEvent = (plyr.browser.isIE ? 'change' : 'input');
+            var inputEvent = (player.browser.isIE ? 'change' : 'input');
 
             // Click play/pause helper
-            function togglePlay() {
-                var play = _togglePlay();
+            function _togglePlay() {
+                var play = togglePlay();
 
                 // Determine which buttons
-                var trigger = plyr.buttons[play ? 'play' : 'pause'],
-                    target = plyr.buttons[play ? 'pause' : 'play'];
-
-                // Get the last play button to account for the large play button
-                if (target && target.length > 1) {
-                    target = target[target.length - 1];
-                } else {
-                    target = target[0];
-                }
+                var trigger = player.elements.buttons[play ? 'play' : 'pause'];
+                var target = player.elements.buttons[play ? 'pause' : 'play'];
 
                 // Setup focus and tab focus
                 if (target) {
-                    var hadTabFocus = _hasClass(trigger, config.classes.tabFocus);
+                    var hadTabFocus = hasClass(trigger, config.classes.tabFocus);
 
                     setTimeout(function() {
                         target.focus();
 
                         if (hadTabFocus) {
-                            _toggleClass(trigger, config.classes.tabFocus, false);
-                            _toggleClass(target, config.classes.tabFocus, true);
+                            toggleClass(trigger, config.classes.tabFocus, false);
+                            toggleClass(target, config.classes.tabFocus, true);
                         }
                     }, 100);
                 }
             }
 
-            // Get the focused element
-            function getFocusElement() {
-                var focused = document.activeElement;
-
-                if (!focused || focused === document.body) {
-                    focused = null;
-                } else {
-                    focused = document.querySelector(':focus');
-                }
-
-                return focused;
-            }
-
             // Get the key code for an event
             function getKeyCode(event) {
                 return event.keyCode ? event.keyCode : event.which;
@@ -2881,84 +4020,92 @@
 
             // Detect tab focus
             function checkTabFocus(focused) {
-                for (var button in plyr.buttons) {
-                    var element = plyr.buttons[button];
+                for (var button in player.elements.buttons) {
+                    var element = player.elements.buttons[button];
 
-                    if (_is.nodeList(element)) {
+                    if (is.nodeList(element)) {
                         for (var i = 0; i < element.length; i++) {
-                            _toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
+                            toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
                         }
                     } else {
-                        _toggleClass(element, config.classes.tabFocus, (element === focused));
+                        toggleClass(element, config.classes.tabFocus, (element === focused));
                     }
                 }
             }
 
             // Keyboard shortcuts
-            if (config.keyboardShorcuts.focused) {
+            if (config.keyboardShortcuts.focused) {
                 var last = null;
 
                 // Handle global presses
-                if (config.keyboardShorcuts.global) {
-                    _on(window, 'keydown keyup', function(event) {
-                        var code = getKeyCode(event),
-                        focused = getFocusElement(),
-                        allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67],
-                        count   = get().length;
+                if (config.keyboardShortcuts.global) {
+                    on(window, 'keydown keyup', function(event) {
+                        var code = getKeyCode(event);
+                        var focused = getFocusElement();
+                        var allowed = [48, 49, 50, 51, 52, 53, 54, 56, 57, 75, 77, 70, 67, 73, 76, 79];
+                        var count = get().length;
 
                         // Only handle global key press if there's only one player
                         // and the key is in the allowed keys
                         // and if the focused element is not editable (e.g. text input)
                         // and any that accept key input http://webaim.org/techniques/keyboard/
-                        if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
+                        if (count === 1 && inArray(allowed, code) && (!is.htmlElement(focused) || !matches(focused, config.selectors.editable))) {
                             handleKey(event);
                         }
                     });
                 }
 
                 // Handle presses on focused
-                _on(plyr.container, 'keydown keyup', handleKey);
+                on(player.elements.container, 'keydown keyup', handleKey);
             }
 
             function handleKey(event) {
-                var code = getKeyCode(event),
-                    pressed = event.type === 'keydown',
-                    held = pressed && code === last;
+                var code = getKeyCode(event);
+                var pressed = event.type === 'keydown';
+                var held = pressed && code === last;
 
                 // If the event is bubbled from the media element
                 // Firefox doesn't get the keycode for whatever reason
-                if (!_is.number(code)) {
+                if (!is.number(code)) {
                     return;
                 }
 
                 // Seek by the number keys
                 function seekByKey() {
                     // Get current duration
-                    var duration = plyr.media.duration;
+                    var duration = player.elements.media.duration;
 
                     // Bail if we have no duration set
-                    if (!_is.number(duration)) {
+                    if (!is.number(duration)) {
                         return;
                     }
 
                     // Divide the max duration into 10th's and times by the number value
-                    _seek((duration / 10) * (code - 48));
+                    seek((duration / 10) * (code - 48));
                 }
 
                 // Handle the key on keydown
                 // Reset on keyup
                 if (pressed) {
                     // Which keycodes should we prevent default
-                    var preventDefault = [48,49,50,51,52,53,54,56,57,32,75,38,40,77,39,37,70,67];
+                    var preventDefault = [48, 49, 50, 51, 52, 53, 54, 56, 57, 32, 75, 38, 40, 77, 39, 37, 70, 67, 73, 76, 79];
+                    var checkFocus = [38, 40];
+
+                    if (inArray(checkFocus, code)) {
+                        var focused = getFocusElement();
+
+                        if (is.htmlElement(focused) && getFocusElement().type === "radio") {
+                            return;
+                        }
+                    }
 
                     // If the code is found prevent default (e.g. prevent scrolling for arrows)
-                    if (_inArray(preventDefault, code)) {
+                    if (inArray(preventDefault, code)) {
                         event.preventDefault();
                         event.stopPropagation();
                     }
 
-                    switch(code) {
-                        // 0-9
+                    switch (code) {
                         case 48:
                         case 49:
                         case 50:
@@ -2968,30 +4115,77 @@
                         case 54:
                         case 55:
                         case 56:
-                        case 57: if (!held) { seekByKey(); } break;
-                        // Space and K key
+                        case 57:
+                            // 0-9
+                            if (!held) {
+                                seekByKey();
+                            }
+                            break;
+
                         case 32:
-                        case 75: if (!held) { _togglePlay(); } break;
-                        // Arrow up
-                        case 38: _increaseVolume(); break;
-                        // Arrow down
-                        case 40: _decreaseVolume(); break;
-                        // M key
-                        case 77: if (!held) { _toggleMute() } break;
-                        // Arrow forward
-                        case 39: _forward(); break;
-                        // Arrow back
-                        case 37: _rewind(); break;
-                        // F key
-                        case 70: _toggleFullscreen(); break;
-                        // C key
-                        case 67: if (!held) { _toggleCaptions(); } break;
+                        case 75:
+                            // Space and K key
+                            if (!held) {
+                                _togglePlay();
+                            }
+                            break;
+
+                        case 38:
+                            // Arrow up
+                            increaseVolume();
+                            break;
+
+                        case 40:
+                            // Arrow down
+                            decreaseVolume();
+                            break;
+
+                        case 77:
+                            // M key
+                            if (!held) {
+                                toggleMute();
+                            }
+                            break;
+
+                        case 39:
+                            // Arrow forward
+                            forward();
+                            break;
+
+                        case 37:
+                            // Arrow back
+                            rewind();
+                            break;
+
+                        case 70:
+                            // F key
+                            toggleFullscreen();
+                            break;
+
+                        case 67:
+                            // C key
+                            if (!held) {
+                                toggleCaptions();
+                            }
+                            break;
+
+                        case 73:
+                            toggleLoop('start');
+                            break;
+
+                        case 76:
+                            toggleLoop();
+                            break;
+
+                        case 79:
+                            toggleLoop('end');
+                            break;
                     }
 
                     // Escape is handle natively when in full screen
                     // So we only need to worry about non native
-                    if (!fullscreen.supportsFullScreen && plyr.isFullscreen && code === 27) {
-                        _toggleFullscreen();
+                    if (!support.fullscreen && player.fullscreen.active && code === 27) {
+                        toggleFullscreen();
                     }
 
                     // Store last code for next cycle
@@ -3002,157 +4196,247 @@
             }
 
             // Focus/tab management
-            _on(window, 'keyup', function(event) {
-                var code = getKeyCode(event),
-                    focused = getFocusElement();
+            on(window, 'keyup', function(event) {
+                var code = getKeyCode(event);
+                var focused = getFocusElement();
 
                 if (code === 9) {
                     checkTabFocus(focused);
                 }
             });
-            _on(document.body, 'click', function() {
-                _toggleClass(_getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
+            on(document.body, 'click', function() {
+                toggleClass(getElement('.' + config.classes.tabFocus), config.classes.tabFocus, false);
             });
-            for (var button in plyr.buttons) {
-                var element = plyr.buttons[button];
+            for (var button in player.elements.buttons) {
+                var element = player.elements.buttons[button];
 
-                _on(element, 'blur', function() {
-                    _toggleClass(element, 'tab-focus', false);
+                on(element, 'blur', function() {
+                    toggleClass(element, 'tab-focus', false);
                 });
             }
 
+            // Trigger custom and default handlers
+            var handlerProxy = function(event, customHandler, defaultHandler) {
+                if (is.function(customHandler)) {
+                    customHandler.call(this, event);
+                }
+                if (is.function(defaultHandler)) {
+                    defaultHandler.call(this, event);
+                }
+            }
+
             // Play
-            _proxyListener(plyr.buttons.play, 'click', config.listeners.play, togglePlay);
+            proxy(player.elements.buttons.play, 'click', config.listeners.play, _togglePlay);
+            proxy(player.elements.buttons.playLarge, 'click', config.listeners.play, _togglePlay);
 
             // Pause
-            _proxyListener(plyr.buttons.pause, 'click', config.listeners.pause, togglePlay);
+            proxy(player.elements.buttons.pause, 'click', config.listeners.pause, _togglePlay);
 
-            // Restart
-            _proxyListener(plyr.buttons.restart, 'click', config.listeners.restart, _seek);
+            // Pause
+            proxy(player.elements.buttons.restart, 'click', config.listeners.restart, seek);
 
             // Rewind
-            _proxyListener(plyr.buttons.rewind, 'click', config.listeners.rewind, _rewind);
+            proxy(player.elements.buttons.rewind, 'click', config.listeners.rewind, rewind);
 
-            // Fast forward
-            _proxyListener(plyr.buttons.forward, 'click', config.listeners.forward, _forward);
+            // Rewind
+            proxy(player.elements.buttons.forward, 'click', config.listeners.forward, forward);
 
-            // Seek
-            _proxyListener(plyr.buttons.seek, inputEvent, config.listeners.seek, _seek);
+            // Mute
+            proxy(player.elements.buttons.mute, 'click', config.listeners.mute, toggleMute);
 
-            // Set volume
-            _proxyListener(plyr.volume.input, inputEvent, config.listeners.volume, function() {
-                _setVolume(plyr.volume.input.value);
+            // Captions
+            proxy(player.elements.buttons.captions, 'click', config.listeners.captions, toggleCaptions);
+
+            // Fullscreen
+            proxy(player.elements.buttons.fullscreen, 'click', config.listeners.fullscreen, toggleFullscreen);
+
+            // Picture-in-Picture
+            proxy(player.elements.buttons.pip, 'click', config.listeners.pip, function(event) {
+                if (!support.pip) {
+                    return;
+                }
+                player.elements.media.webkitSetPresentationMode(player.elements.media.webkitPresentationMode === 'picture-in-picture' ? 'inline' : 'picture-in-picture');
             });
 
-            // Mute
-            _proxyListener(plyr.buttons.mute, 'click', config.listeners.mute, _toggleMute);
+            // Airplay
+            proxy(player.elements.buttons.airplay, 'click', config.listeners.airplay, function(event) {
+                if (!support.airplay) {
+                    return;
+                }
+                player.elements.media.webkitShowPlaybackTargetPicker();
+            });
 
-            // Fullscreen
-            _proxyListener(plyr.buttons.fullscreen, 'click', config.listeners.fullscreen, _toggleFullscreen);
+            // Settings menu
+            on(player.elements.settings.menu, 'click', toggleMenu);
 
-            // Handle user exiting fullscreen by escaping etc
-            if (fullscreen.supportsFullScreen) {
-                _on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
-            }
+            // Click anywhere closes menu
+            on(document.body, 'click', function(event) {
+                var menu = player.elements.settings.menu;
+                var form = menu.querySelector('form');
 
-            // Captions
-            _proxyListener(plyr.buttons.captions, 'click', config.listeners.captions, _toggleCaptions);
+                if (form.getAttribute('aria-hidden') === 'true' || menu.contains(event.target)) {
+                    return;
+                }
+
+                // TODO: This should call some sort of menuToggle function?
+                form.setAttribute('aria-hidden', true);
+            });
+
+            // Settings menu items - use event delegation as items are added/removed
+            on(player.elements.settings.menu, 'click', function(event) {
+                // Settings - Speed
+                if (matches(event.target, config.selectors.buttons.speed)) {
+                    handlerProxy.call(this, event, config.listeners.speed, function() {
+                        //var speedValue = document.querySelector('[data-plyr="speed"]:checked').value;
+                        //setSpeed(Number(speedValue));
+                        console.warn("Set speed");
+                    });
+                }
+
+                // Settings - Quality
+                else if (matches(event.target, config.selectors.buttons.quality)) {
+                    handlerProxy.call(this, event, config.listeners.quality, function() {
+                        console.warn("Set quality");
+                    });
+                }
+
+                // Settings - Looping
+                else if (matches(event.target, config.selectors.buttons.loop)) {
+                    handlerProxy.call(this, event, config.listeners.loop, function() {
+                        // TODO: This should be done in the method itself I think
+                        var value = event.target.getAttribute('data-loop__value') || event.target.getAttribute('data-loop__type');
+
+                        if (inArray(['start', 'end', 'all', 'none'], value)) {
+                            toggleLoop(value);
+                        }
+                    });
+                }
+
+                // Settings - Language
+                else if (matches(event.target, config.selectors.buttons.language)) {
+                    handlerProxy.call(this, event, config.listeners.language, function(event) {
+                        // TODO: This should be done in the method itself I think
+                        var index = event.target.attributes.getNamedItem("data-index").value;
+                        setCaptionIndex(index);
+                    });
+                }
+            });
+
+            // Seek
+            proxy(player.elements.inputs.seek, inputEvent, config.listeners.seek, seek);
+
+            // Seek
+            proxy(player.elements.inputs.volume, inputEvent, config.listeners.volume, setVolume);
 
             // Seek tooltip
-            _on(plyr.progress.container, 'mouseenter mouseleave mousemove', _updateSeekTooltip);
+            on(player.elements.progress, 'mouseenter mouseleave mousemove', updateSeekTooltip);
 
             // Toggle controls visibility based on mouse movement
             if (config.hideControls) {
                 // Toggle controls on mouse events and entering fullscreen
-                _on(plyr.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', _toggleControls);
+                on(player.elements.container, 'mouseenter mouseleave mousemove touchstart touchend touchcancel touchmove enterfullscreen', toggleControls);
 
                 // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mouseenter mouseleave', function(event) {
-                    plyr.controls.hover = event.type === 'mouseenter';
+                on(player.elements.controls, 'mouseenter mouseleave', function(event) {
+                    player.elements.controls.hover = event.type === 'mouseenter';
                 });
 
-                 // Watch for cursor over controls so they don't hide when trying to interact
-                _on(plyr.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
-                    plyr.controls.pressed = _inArray(['mousedown', 'touchstart'], event.type);
+                // Watch for cursor over controls so they don't hide when trying to interact
+                on(player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', function(event) {
+                    player.elements.controls.pressed = inArray(['mousedown', 'touchstart'], event.type);
                 });
 
                 // Focus in/out on controls
-                _on(plyr.controls, 'focus blur', _toggleControls, true);
+                on(player.elements.controls, 'focus blur', toggleControls, true);
             }
 
-            // Adjust volume on scroll
-            _on(plyr.volume.input, 'wheel', function(event) {
-                event.preventDefault();
-
+            // Mouse wheel for volume
+            proxy(player.elements.inputs.volume, 'wheel', config.listeners.volume, function(event) {
                 // Detect "natural" scroll - suppored on OS X Safari only
                 // Other browsers on OS X will be inverted until support improves
-                var inverted = event.webkitDirectionInvertedFromDevice,
-                    step = (config.volumeStep / 5);
+                var inverted = event.webkitDirectionInvertedFromDevice;
+                var step = (1 / 5);
+                var direction = 0;
 
                 // Scroll down (or up on natural) to decrease
                 if (event.deltaY < 0 || event.deltaX > 0) {
                     if (inverted) {
-                        _decreaseVolume(step);
+                        decreaseVolume(step);
+                        direction = -1;
                     } else {
-                        _increaseVolume(step);
+                        increaseVolume(step);
+                        direction = 1;
                     }
                 }
 
                 // Scroll up (or down on natural) to increase
                 if (event.deltaY > 0 || event.deltaX < 0) {
                     if (inverted) {
-                        _increaseVolume(step);
+                        increaseVolume(step);
+                        direction = 1;
                     } else {
-                        _decreaseVolume(step);
+                        decreaseVolume(step);
+                        direction = -1;
                     }
                 }
+
+                // Don't break page scrolling at max and min
+                if ((direction === 1 && player.elements.media.volume < 1) ||
+                    (direction === -1 && player.elements.media.volume > 0)) {
+                    event.preventDefault();
+                }
             });
+
+            // Handle user exiting fullscreen by escaping etc
+            if (support.fullscreen) {
+                on(document, fullscreen.eventType, toggleFullscreen);
+            }
         }
 
         // Listen for media events
-        function _mediaListeners() {
+        function mediaListeners() {
             // Time change on media
-            _on(plyr.media, 'timeupdate seeking', _timeUpdate);
+            on(player.elements.media, 'timeupdate seeking', timeUpdate);
 
             // Update manual captions
-            _on(plyr.media, 'timeupdate', _seekManualCaptions);
+            on(player.elements.media, 'timeupdate', seekManualCaptions);
 
             // Display duration
-            _on(plyr.media, 'durationchange loadedmetadata', _displayDuration);
+            on(player.elements.media, 'durationchange loadedmetadata', displayDuration);
 
             // Handle the media finishing
-            _on(plyr.media, 'ended', function() {
+            on(player.elements.media, 'ended', function() {
                 // Show poster on end
-                if (plyr.type === 'video' && config.showPosterOnEnd) {
+                if (player.type === 'video' && config.showPosterOnEnd) {
                     // Clear
-                    if (plyr.type === 'video') {
-                        _setCaption();
+                    if (player.type === 'video') {
+                        setCaption();
                     }
 
                     // Restart
-                    _seek();
+                    seek();
 
                     // Re-load media
-                    plyr.media.load();
+                    player.elements.media.load();
                 }
             });
 
             // Check for buffer progress
-            _on(plyr.media, 'progress playing', _updateProgress);
+            on(player.elements.media, 'progress playing', updateProgress);
 
             // Handle native mute
-            _on(plyr.media, 'volumechange', _updateVolume);
+            on(player.elements.media, 'volumechange', updateVolume);
 
             // Handle native play/pause
-            _on(plyr.media, 'play pause ended', _checkPlaying);
+            on(player.elements.media, 'play pause ended', checkPlaying);
 
             // Loading
-            _on(plyr.media, 'waiting canplay seeked', _checkLoading);
+            on(player.elements.media, 'waiting canplay seeked', checkLoading);
 
             // Click video
-            if (config.clickToPlay && plyr.type !== 'audio') {
+            if (config.clickToPlay && player.type !== 'audio') {
                 // Re-fetch the wrapper
-                var wrapper = _getElement('.' + config.classes.videoWrapper);
+                var wrapper = getElement('.' + config.classes.videoWrapper);
 
                 // Bail if there's no wrapper (this should never happen)
                 if (!wrapper) {
@@ -3163,80 +4447,82 @@
                 wrapper.style.cursor = "pointer";
 
                 // On click play, pause ore restart
-                _on(wrapper, 'click', function() {
+                on(wrapper, 'click', function() {
                     // Touch devices will just show controls (if we're hiding controls)
-                    if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
+                    if (config.hideControls && player.browser.isTouch && !player.elements.media.paused) {
                         return;
                     }
 
-                    if (plyr.media.paused) {
-                        _play();
-                    } else if (plyr.media.ended) {
-                        _seek();
-                        _play();
+                    if (player.elements.media.paused) {
+                        play();
+                    } else if (player.elements.media.ended) {
+                        seek();
+                        play();
                     } else {
-                        _pause();
+                        pause();
                     }
                 });
             }
 
             // Disable right click
             if (config.disableContextMenu) {
-                _on(plyr.media, 'contextmenu', function(event) { event.preventDefault(); });
+                on(player.elements.media, 'contextmenu', function(event) {
+                    event.preventDefault();
+                });
             }
 
             // Proxy events to container
             // Bubble up key events for Edge
-            _on(plyr.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
-                _triggerEvent(plyr.container, event.type, true);
+            on(player.elements.media, config.events.concat(['keyup', 'keydown']).join(' '), function(event) {
+                trigger(player.elements.container, event.type, true);
             });
         }
 
         // Cancel current network requests
         // See https://github.com/Selz/plyr/issues/174
-        function _cancelRequests() {
-            if (!_inArray(config.types.html5, plyr.type)) {
+        function cancelRequests() {
+            if (!inArray(config.types.html5, player.type)) {
                 return;
             }
 
             // Remove child sources
-            var sources = plyr.media.querySelectorAll('source');
+            var sources = player.elements.media.querySelectorAll('source');
             for (var i = 0; i < sources.length; i++) {
-                _remove(sources[i]);
+                remove(sources[i]);
             }
 
             // Set blank video src attribute
             // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
             // Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
-            plyr.media.setAttribute('src', config.blankUrl);
+            player.elements.media.setAttribute('src', 'https://cdn.selz.com/plyr/blank.mp4');
 
             // Load the new empty source
             // This will cancel existing requests
             // See https://github.com/Selz/plyr/issues/174
-            plyr.media.load();
+            player.elements.media.load();
 
             // Debugging
-            _log('Cancelled network requests');
+            log('Cancelled network requests');
         }
 
         // Destroy an instance
         // Event listeners are removed when elements are removed
         // http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
-        function _destroy(callback, restore) {
+        function destroy(callback, restore) {
             // Bail if the element is not initialized
-            if (!plyr.init) {
+            if (!player.init) {
                 return null;
             }
 
             // Type specific stuff
-            switch (plyr.type) {
+            switch (player.type) {
                 case 'youtube':
                     // Clear timers
                     window.clearInterval(timers.buffering);
                     window.clearInterval(timers.playing);
 
                     // Destroy YouTube API
-                    plyr.embed.destroy();
+                    player.embed.destroy();
 
                     // Clean up
                     cleanUp();
@@ -3246,17 +4532,17 @@
                 case 'vimeo':
                     // Destroy Vimeo API
                     // then clean up (wait, to prevent postmessage errors)
-                    plyr.embed.unload().then(cleanUp);
+                    player.embed.unload().then(cleanUp);
 
                     // Vimeo does not always return
-                    timers.cleanUp = window.setTimeout(cleanUp, 200);
+                    window.setTimeout(cleanUp, 200);
 
                     break;
 
                 case 'video':
                 case 'audio':
                     // Restore native video controls
-                    _toggleNativeControls(true);
+                    toggleNativeControls(true);
 
                     // Clean up
                     cleanUp();
@@ -3265,15 +4551,13 @@
             }
 
             function cleanUp() {
-                clearTimeout(timers.cleanUp);
-
                 // Default to restore original element
-                if (!_is.boolean(restore)) {
+                if (!is.boolean(restore)) {
                     restore = true;
                 }
 
                 // Callback
-                if (_is.function(callback)) {
+                if (is.function(callback)) {
                     callback.call(original);
                 }
 
@@ -3283,217 +4567,255 @@
                 }
 
                 // Remove init flag
-                plyr.init = false;
+                player.init = false;
 
                 // Replace the container with the original element provided
-                plyr.container.parentNode.replaceChild(original, plyr.container);
+                player.elements.container.parentNode.replaceChild(original, player.elements.container);
 
-                // Allow overflow (set on fullscreen)
+                // unbind escape key
                 document.body.style.overflow = '';
 
                 // Event
-                _triggerEvent(original, 'destroyed', true);
+                trigger(original, 'destroyed', true);
             }
         }
 
         // Setup a player
-        function _init() {
+        function init() {
             // Bail if the element is initialized
-            if (plyr.init) {
+            if (player.init) {
                 return null;
             }
 
-            // Setup the fullscreen api
-            fullscreen = _fullscreen();
-
             // Sniff out the browser
-            plyr.browser = _browserSniff();
+            player.browser = getBrowser();
 
             // Bail if nothing to setup
-            if (!_is.htmlElement(plyr.media)) {
+            if (!is.htmlElement(player.elements.media)) {
                 return;
             }
 
             // Load saved settings from localStorage
-            _setupStorage();
+            setupStorage();
 
             // Set media type based on tag or data attribute
             // Supported: video, audio, vimeo, youtube
             var tagName = media.tagName.toLowerCase();
             if (tagName === 'div') {
-                plyr.type     = media.getAttribute('data-type');
-                plyr.embedId  = media.getAttribute('data-video-id');
+                player.type = media.getAttribute('data-type');
+                player.embedId = media.getAttribute('data-video-id');
 
                 // Clean up
                 media.removeAttribute('data-type');
                 media.removeAttribute('data-video-id');
             } else {
-                plyr.type           = tagName;
-                config.crossorigin  = (media.getAttribute('crossorigin') !== null);
-                config.autoplay     = (config.autoplay || (media.getAttribute('autoplay') !== null));
-                config.loop         = (config.loop || (media.getAttribute('loop') !== null));
+                player.type = tagName;
+                config.crossorigin = (media.getAttribute('crossorigin') !== null);
+                config.autoplay = (config.autoplay || (media.getAttribute('autoplay') !== null));
+                config.loop = (config.loop || (media.getAttribute('loop') !== null));
             }
 
             // Check for support
-            plyr.supported = supported(plyr.type);
+            player.supported = checkSupport(player.type);
 
             // If no native support, bail
-            if (!plyr.supported.basic) {
+            if (!player.supported.basic) {
                 return;
             }
 
             // Wrap media
-            plyr.container = _wrap(media, document.createElement('div'));
+            player.elements.container = wrap(media, createElement('div'));
 
             // Allow focus to be captured
-            plyr.container.setAttribute('tabindex', 0);
+            player.elements.container.setAttribute('tabindex', 0);
 
             // Add style hook
-            _toggleStyleHook();
+            toggleStyleHook();
 
             // Debug info
-            _log('' + plyr.browser.name + ' ' + plyr.browser.version);
+            log('' + player.browser.name + ' ' + player.browser.version);
 
             // Setup media
-            _setupMedia();
+            setupMedia();
 
             // Setup interface
             // If embed but not fully supported, setupInterface (to avoid flash of controls) and call ready now
-            if (_inArray(config.types.html5, plyr.type) || (_inArray(config.types.embed, plyr.type) && !plyr.supported.full)) {
+            if (inArray(config.types.html5, player.type) || (inArray(config.types.embed, player.type) && !player.supported.full)) {
                 // Setup UI
-                _setupInterface();
+                setupInterface();
 
                 // Call ready
-                _ready();
+                ready();
 
                 // Set title on button and frame
-                _setTitle();
+                setTitle();
             }
 
             // Successful setup
-            plyr.init = true;
+            player.init = true;
         }
 
         // Setup the UI
-        function _setupInterface() {
+        function setupInterface() {
             // Don't setup interface if no support
-            if (!plyr.supported.full) {
-                _warn('Basic support only', plyr.type);
+            if (!player.supported.full) {
+                warn('Basic support only', player.type);
 
                 // Remove controls
-                _remove(_getElement(config.selectors.controls.wrapper));
+                remove(getElement(config.selectors.controls.wrapper));
 
                 // Remove large play
-                _remove(_getElement(config.selectors.buttons.play));
+                remove(getElement(config.selectors.buttons.play));
 
                 // Restore native controls
-                _toggleNativeControls(true);
+                toggleNativeControls(true);
 
                 // Bail
                 return;
             }
 
             // Inject custom controls if not present
-            var controlsMissing = !_getElements(config.selectors.controls.wrapper).length;
-            if (controlsMissing) {
+            if (!is.htmlElement(getElement(config.selectors.controls.wrapper))) {
                 // Inject custom controls
-                _injectControls();
+                injectControls();
+                controlListeners();
             }
 
             // Find the elements
-            if (!_findElements()) {
+            // TODO: re-enable when custom HTML is restored
+            /*if (!findElements()) {
                 return;
-            }
-
-            // If the controls are injected, re-bind listeners for controls
-            if (controlsMissing) {
-                _controlListeners();
-            }
+            }*/
 
             // Media element listeners
-            _mediaListeners();
+            mediaListeners();
 
             // Remove native controls
-            _toggleNativeControls();
+            toggleNativeControls();
 
             // Setup fullscreen
-            _setupFullscreen();
+            setupFullscreen();
 
             // Captions
-            _setupCaptions();
+            setupCaptions();
+            setCaptionIndex();
 
             // Set volume
-            _setVolume();
-            _updateVolume();
+            setVolume();
+            updateVolume();
+
+            // Set playback speed
+            setSpeed();
+
+            // Set loop
+            toggleLoop();
 
             // Reset time display
-            _timeUpdate();
+            timeUpdate();
 
             // Update the UI
-            _checkPlaying();
+            checkPlaying();
         }
 
         api = {
-            getOriginal:        function() { return original; },
-            getContainer:       function() { return plyr.container },
-            getEmbed:           function() { return plyr.embed; },
-            getMedia:           function() { return plyr.media; },
-            getType:            function() { return plyr.type; },
-            getDuration:        _getDuration,
-            getCurrentTime:     function() { return plyr.media.currentTime; },
-            getVolume:          function() { return plyr.media.volume; },
-            isMuted:            function() { return plyr.media.muted; },
-            isReady:            function() { return _hasClass(plyr.container, config.classes.ready); },
-            isLoading:          function() { return _hasClass(plyr.container, config.classes.loading); },
-            isPaused:           function() { return plyr.media.paused; },
-            on:                 function(event, callback) { _on(plyr.container, event, callback); return this; },
-            play:               _play,
-            pause:              _pause,
-            stop:               function() { _pause(); _seek(); },
-            restart:            _seek,
-            rewind:             _rewind,
-            forward:            _forward,
-            seek:               _seek,
-            source:             _source,
-            poster:             _updatePoster,
-            setVolume:          _setVolume,
-            togglePlay:         _togglePlay,
-            toggleMute:         _toggleMute,
-            toggleCaptions:     _toggleCaptions,
-            toggleFullscreen:   _toggleFullscreen,
-            toggleControls:     _toggleControls,
-            isFullscreen:       function() { return plyr.isFullscreen || false; },
-            support:            function(mimeType) { return _supportMime(plyr, mimeType); },
-            destroy:            _destroy
+            getOriginal: function() {
+                return original;
+            },
+            getContainer: function() {
+                return player.elements.container
+            },
+            getEmbed: function() {
+                return player.embed;
+            },
+            getMedia: function() {
+                return player.elements.media;
+            },
+            getType: function() {
+                return player.type;
+            },
+            getDuration: getDuration,
+            getCurrentTime: function() {
+                return player.elements.media.currentTime;
+            },
+            getVolume: function() {
+                return player.elements.media.volume;
+            },
+            isMuted: function() {
+                return player.elements.media.muted;
+            },
+            isReady: function() {
+                return hasClass(player.elements.container, config.classes.ready);
+            },
+            isLoading: function() {
+                return hasClass(player.elements.container, config.classes.loading);
+            },
+            isPaused: function() {
+                return player.elements.media.paused;
+            },
+            isLooping: function() {
+                return config.loop.active;
+            },
+            on: function(event, callback) {
+                on(player.elements.container, event, callback);
+                return this;
+            },
+            play: play,
+            pause: pause,
+            loop: toggleLoop,
+            stop: function() {
+                pause();
+                seek();
+            },
+            restart: seek,
+            rewind: rewind,
+            forward: forward,
+            seek: seek,
+            source: source,
+            poster: updatePoster,
+            setVolume: setVolume,
+            setSpeed: setSpeed,
+            togglePlay: togglePlay,
+            toggleMute: toggleMute,
+            toggleCaptions: toggleCaptions,
+            toggleFullscreen: toggleFullscreen,
+            toggleControls: toggleControls,
+            setCaptionIndex: setCaptionIndex,
+            isFullscreen: function() {
+                return player.fullscreen.active || false;
+            },
+            support: function(mimeType) {
+                return support.mime(player, mimeType);
+            },
+            destroy: destroy
         };
 
         // Everything done
-        function _ready() {
+        function ready() {
             // Ready event at end of execution stack
             window.setTimeout(function() {
-                _triggerEvent(plyr.media, 'ready');
+                trigger(player.elements.media, 'ready');
             }, 0);
 
             // Set class hook on media element
-            _toggleClass(plyr.media, defaults.classes.setup, true);
+            toggleClass(player.elements.media, defaults.classes.setup, true);
 
             // Set container class for ready
-            _toggleClass(plyr.container, config.classes.ready, true);
+            toggleClass(player.elements.container, config.classes.ready, true);
 
             // Store a refernce to instance
-            plyr.media.plyr = api;
+            player.elements.media.plyr = api;
 
             // Autoplay
             if (config.autoplay) {
-                _play();
+                play();
             }
         }
 
         // Initialize instance
-        _init();
+        init();
 
         // If init failed, return null
-        if (!plyr.init) {
+        if (!player.init) {
             return null;
         }
 
@@ -3505,14 +4827,14 @@
         var x = new XMLHttpRequest();
 
         // If the id is set and sprite exists, bail
-        if (_is.string(id) && _is.htmlElement(document.querySelector('#' + id))) {
+        if (is.string(id) && is.htmlElement(document.querySelector('#' + id))) {
             return;
         }
 
         // Create placeholder (to prevent loading twice)
-        var container = document.createElement('div');
+        var container = createElement('div');
         container.setAttribute('hidden', '');
-        if (_is.string(id)) {
+        if (is.string(id)) {
             container.setAttribute('id', id);
         }
         document.body.insertBefore(container, document.body.childNodes[0]);
@@ -3533,79 +4855,63 @@
     }
 
     // Check for support
-    function supported(type) {
-        var browser     = _browserSniff(),
-            isOldIE     = (browser.isIE && browser.version <= 9),
-            isIos       = browser.isIos,
-            isIphone    = browser.isIphone,
-            audioSupport = !!document.createElement('audio').canPlayType,
-            videoSupport = !!document.createElement('video').canPlayType,
-            basic       = false,
-            full        = false;
+    function checkSupport(type) {
+        var browser = getBrowser();
+        var isOldIE = (browser.isIE && browser.version <= 9);
+        var isIos = browser.isIos;
+        var isIphone = /iPhone|iPod/i.test(navigator.userAgent);
+        var audio = !!createElement('audio').canPlayType;
+        var video = !!createElement('video').canPlayType;
+        var basic;
+        var full;
 
         switch (type) {
             case 'video':
-                basic = videoSupport;
-                full  = (basic && (!isOldIE && !isIphone));
+                basic = video;
+                full = (basic && (!isOldIE && !isIphone));
                 break;
 
             case 'audio':
-                basic = audioSupport;
-                full  = (basic && !isOldIE);
+                basic = audio;
+                full = (basic && !isOldIE);
                 break;
 
-            // Vimeo does not seem to be supported on iOS via API
-            // Issue raised https://github.com/vimeo/player.js/issues/87
             case 'vimeo':
-                basic = true;
-                full = (!isOldIE && !isIos);
-                break;
-
             case 'youtube':
-                basic = true;
-                full = (!isOldIE && !isIos);
-
-                // YouTube seems to work on iOS 10+ on iPad
-                if (isIos && !isIphone && browser.version >= 10) {
-                    full = true;
-                }
-
-                break;
-
             case 'soundcloud':
                 basic = true;
-                full  = (!isOldIE && !isIphone);
+                full = (!isOldIE && !isIos);
                 break;
 
             default:
-                basic = (audioSupport && videoSupport);
-                full  = (basic && !isOldIE);
+                basic = (audio && video);
+                full = (basic && !isOldIE);
         }
 
         return {
-            basic:  basic,
-            full:   full
+            basic: basic,
+            full: full
         };
     }
 
     // Setup function
     function setup(targets, options) {
         // Get the players
-        var players     = [],
-            instances   = [],
-            selector    = [defaults.selectors.html5, defaults.selectors.embed].join(',');
+        var players = [];
+        var instances = [];
+        var selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
 
         // Select the elements
-        if (_is.string(targets)) {
+        if (is.string(targets)) {
             // String selector passed
             targets = document.querySelectorAll(targets);
-        }  else if (_is.htmlElement(targets)) {
+        } else if (is.htmlElement(targets)) {
             // Single HTMLElement passed
             targets = [targets];
-        }  else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets))  {
+        } else if (!is.nodeList(targets) && !is.array(targets) && !is.string(targets)) {
             // No selector passed, possibly options as first argument
             // If options are the first argument
-            if (_is.undefined(options) && _is.object(targets)) {
+            if (is.undefined(options) && is.object(targets)) {
                 options = targets;
             }
 
@@ -3614,26 +4920,26 @@
         }
 
         // Convert NodeList to array
-        if (_is.nodeList(targets)) {
+        if (is.nodeList(targets)) {
             targets = Array.prototype.slice.call(targets);
         }
 
         // Bail if disabled or no basic support
         // You may want to disable certain UAs etc
-        if (!supported().basic || !targets.length) {
+        if (!checkSupport().basic || !targets.length) {
             return false;
         }
 
         // Add to container list
         function add(target, media) {
-            if (!_hasClass(media, defaults.classes.hook)) {
+            if (!hasClass(media, defaults.classes.hook)) {
                 players.push({
                     // Always wrap in a <div> for styling
-                    //container:  _wrap(media, document.createElement('div')),
+                    // container: wrap(media, document.createElement('div')),
                     // Could be a container or the media itself
-                    target:     target,
+                    target: target,
                     // This should be the <video>, <audio> or <div> (YouTube/Vimeo)
-                    media:      media
+                    media: media
                 });
             }
         }
@@ -3650,7 +4956,7 @@
                 for (var x = 0; x < children.length; x++) {
                     add(target, children[x]);
                 }
-            } else if (_matches(target, selector)) {
+            } else if (matches(target, selector)) {
                 // Target is media element
                 add(target, target);
             }
@@ -3658,9 +4964,9 @@
 
         // Create a player instance for each element
         players.forEach(function(player) {
-            var element     = player.target,
-                media       = player.media,
-                match       = false;
+            var element = player.target;
+            var media = player.media;
+            var match = false;
 
             // The target element can also be the media element
             if (media === element) {
@@ -3672,10 +4978,11 @@
             var data = {};
 
             // Try parsing data attribute config
-            try { data = JSON.parse(element.getAttribute('data-plyr')); }
-            catch(e) { }
+            try {
+                data = JSON.parse(element.getAttribute('data-plyr'));
+            } catch (e) {}
 
-            var config = _extend({}, defaults, options, data);
+            var config = extend({}, defaults, options, data);
 
             // Bail if not enabled
             if (!config.enabled) {
@@ -3686,7 +4993,7 @@
             var instance = new Plyr(media, config);
 
             // Go to next if setup failed
-            if (!_is.object(instance)) {
+            if (!is.object(instance)) {
                 return;
             }
 
@@ -3694,13 +5001,13 @@
             if (config.debug) {
                 var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
 
-                _on(instance.getContainer(), events.join(' '), function(event) {
+                on(instance.getContainer(), events.join(' '), function(event) {
                     console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
                 });
             }
 
             // Callback
-            _event(instance.getContainer(), 'setup', true, {
+            event(instance.getContainer(), 'setup', true, {
                 plyr: instance
             });
 
@@ -3713,21 +5020,21 @@
 
     // Get all instances within a provided container
     function get(container) {
-        if (_is.string(container)) {
+        if (is.string(container)) {
             // Get selector if string passed
             container = document.querySelector(container);
-        } else if (_is.undefined(container)) {
+        } else if (is.undefined(container)) {
             // Use body by default to get all on page
             container = document.body;
         }
 
         // If we have a HTML element
-        if (_is.htmlElement(container)) {
+        if (is.htmlElement(container)) {
             var elements = container.querySelectorAll('.' + defaults.classes.setup),
                 instances = [];
 
             Array.prototype.slice.call(elements).forEach(function(element) {
-                if (_is.object(element.plyr)) {
+                if (is.object(element.plyr)) {
                     instances.push(element.plyr);
                 }
             });
@@ -3739,22 +5046,26 @@
     }
 
     return {
-        setup:      setup,
-        supported:  supported,
+        setup: setup,
+        supported: checkSupport,
         loadSprite: loadSprite,
-        get:        get
+        get: get
     };
 }));
 
 // Custom event polyfill
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-(function () {
+(function() {
     if (typeof window.CustomEvent === 'function') {
         return;
     }
 
     function CustomEvent(event, params) {
-        params = params || { bubbles: false, cancelable: false, detail: undefined };
+        params = params || {
+            bubbles: false,
+            cancelable: false,
+            detail: undefined
+        };
         var evt = document.createEvent('CustomEvent');
         evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
         return evt;