Fix for Bootstrap compatibility

Fixes #6
Minor tweaks
2015-02-28 10:43:42 +11:00 · 2015-02-28 01:17:56 +11:00 · 2015-02-28 00:45:56 +11:00 · 2015-02-28 00:40:36 +11:00 · 2015-02-28 00:36:28 +11:00 · 2015-02-27 14:52:57 +11:00
41 changed files with 1447 additions and 1185 deletions
--- a/assets/js/plyr.js
+++ b/assets/js/plyr.js
@ -1,982 +0,0 @@
-// ==========================================================================
-// Plyr
-// plyr.js v1.0.0
-// https://github.com/sampotts/plyr
-// ==========================================================================
-// Credits: http://paypal.github.io/accessible-html5-video-player/
-// ==========================================================================
-
-/*global ActiveXObject*/
-
-(function (api) {
-	"use strict";
-
-	// Globals
-	var fullscreen, config;
-
-	// Default config
-	var defaults = {
-		enabled: 				true, 
-		debug: 					false,
-		seekInterval: 			10,
-		volume: 				5,
-		click: 					true,
-		selectors: {
-			container: 			".player",
-			controls: 			".player-controls",
-			buttons: {
-				play: 			"[data-player='play']",
-				pause: 			"[data-player='pause']",
-				restart: 		"[data-player='restart']",
-				rewind: 		"[data-player='rewind']",
-				forward: 		"[data-player='fast-forward']",
-				mute: 			"[data-player='mute']",
-				volume: 		"[data-player='volume']",
-				captions: 		"[data-player='captions']",
-				fullscreen: 	"[data-player='fullscreen']"
-			},
-			progress: 			".player-progress",
-			captions: 			".player-captions",
-			duration: 			".player-duration",
-			seekTime: 			".player-seek-time"
-		},
-		classes: {
-			video:				"player-video",
-			videoWrapper: 		"player-video-wrapper",
-			audio:				"player-audio",
-			stopped: 			"stopped",
-			playing: 			"playing",
-			muted: 				"muted",
-			captions: {
-				active: 		"captions-active",
-				enabled: 		"captions-enabled"
-			},
-			fullscreen: {
-				enabled: 		"fullscreen-enabled"
-			}
-		},
-		captions: {
-			defaultActive: 		false
-		},
-		fullscreen: {
-			enabled: 			true
-		}
-	};
-
-	// Credits: http://paypal.github.io/accessible-html5-video-player/
-	// Unfortunately, due to scattered support, browser sniffing is required
-	function _browserSniff() {
-		var nAgt = navigator.userAgent,
-			browserName = navigator.appName,
-			fullVersion = ""+parseFloat(navigator.appVersion),
-			majorVersion = parseInt(navigator.appVersion,10),
-			nameOffset,
-			verOffset,
-			ix;
-
-		// MSIE 11
-		if ((navigator.appVersion.indexOf("Windows NT") !== -1) && (navigator.appVersion.indexOf("rv:11") !== -1)) {
-			browserName = "IE";
-			fullVersion = "11;";
-		}
-		// MSIE
-		else if ((verOffset=nAgt.indexOf("MSIE")) !== -1) {
-			browserName = "IE";
-			fullVersion = nAgt.substring(verOffset+5);
-		}
-		// Chrome
-		else if ((verOffset=nAgt.indexOf("Chrome")) !== -1) {
-			browserName = "Chrome";
-			fullVersion = nAgt.substring(verOffset+7);
-		}
-		// Safari
-		else if ((verOffset=nAgt.indexOf("Safari")) !== -1) {
-			browserName = "Safari";
-			fullVersion = nAgt.substring(verOffset+7);
-			if ((verOffset=nAgt.indexOf("Version")) !== -1) {
-				fullVersion = nAgt.substring(verOffset+8);
-			}
-		}
-		// Firefox
-		else if ((verOffset=nAgt.indexOf("Firefox")) !== -1) {
-			browserName = "Firefox";
-			fullVersion = nAgt.substring(verOffset+8);
-		}
-		// In most other browsers, "name/version" is at the end of userAgent 
-		else if ( (nameOffset=nAgt.lastIndexOf(" ")+1) < (verOffset=nAgt.lastIndexOf("/")) ) {
-			browserName = nAgt.substring(nameOffset,verOffset);
-			fullVersion = nAgt.substring(verOffset+1);
-			if (browserName.toLowerCase()==browserName.toUpperCase()) {
-				browserName = navigator.appName;
-			}
-		}
-		// Trim the fullVersion string at semicolon/space if present
-		if ((ix=fullVersion.indexOf(";")) !== -1) {
-			fullVersion=fullVersion.substring(0,ix);
-		}
-		if ((ix=fullVersion.indexOf(" ")) !== -1) {
-			fullVersion=fullVersion.substring(0,ix);
-		}
-		// Get major version
-		majorVersion = parseInt(""+fullVersion,10);
-		if (isNaN(majorVersion)) {
-			fullVersion = ""+parseFloat(navigator.appVersion); 
-			majorVersion = parseInt(navigator.appVersion,10);
-		}
-		// Return data
-		return [browserName, majorVersion];
-	}
-	
-	// Replace all
-	function _replaceAll(string, find, replace) {
-		return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
-	}
-
-	// Wrap an element
-	function _wrap(elements, wrapper) {
-	    // Convert `elms` to an array, if necessary.
-	    if (!elements.length) {
-	    	elements = [elements];
-	    } 
-	    
-	    // 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 el    = elements[i];
-	        
-	        // Cache the current parent and sibling.
-	        var parent  = el.parentNode;
-	        var sibling = el.nextSibling;
-	        
-	        // Wrap the element (is automatically removed from its current
-	        // parent).
-	        child.appendChild(el);
-	        
-	        // If the element had a sibling, insert the wrapper before
-	        // the sibling to maintain the HTML structure; otherwise, just
-	        // append it to the parent.
-	        if (sibling) {
-	            parent.insertBefore(child, sibling);
-	        } else {
-	            parent.appendChild(child);
-	        }
-	    }
-	}
-
-	// Toggle class on an element
-	function _toggleClass(element, name, state) {
-		if(element){
-			if(element.classList) {
-				element.classList[state ? "add" : "remove"](name);
-			}
-			else {
-				var className = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + name + " ", "");
-				element.className = className + (state ? " " + name : "");
-			}
-		}
-	}
-
-	// Bind event
-	function _on(element, event, callback) {
-		element.addEventListener(event, callback, false);
-	}
-
-	// Get click position relative to parent
-	// http://www.kirupa.com/html5/getting_mouse_click_position.htm
-	function _getClickPosition(event) {
-		var parentPosition = _fullscreen().isFullScreen() ? { x: 0, y: 0 } : _getPosition(event.currentTarget);
-
-		return {
-			x: event.clientX - parentPosition.x,
-			y: event.clientY - parentPosition.y
-		};
-	}
-	// Get element position
-	function _getPosition(element) {
-		var xPosition = 0;
-		var yPosition = 0;
-
-		while (element) {
-			xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
-			yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
-			element = element.offsetParent;
-		}
-		
-		return { 
-			x: xPosition, 
-			y: yPosition 
-		};
-	}
-
-	// Deep extend/merge two Objects
-	// http://andrewdupont.net/2009/08/28/deep-extending-objects-in-javascript/
-	// Removed call to arguments.callee (used explicit function name instead)
-    function _extend(destination, 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]);
-			} 
-			else {
-				destination[property] = source[property];
-			}
-		}
-		return destination;
-	}
-
-	// Fullscreen API
-	function _fullscreen() {
-		var fullscreen = {
-				supportsFullScreen: false,
-				isFullScreen: function() { return false; },
-				requestFullScreen: function() {},
-				cancelFullScreen: function() {},
-				fullScreenEventName: "",
-				element: null,
-				prefix: ""
-			},
-			browserPrefixes = "webkit moz o ms khtml".split(" ");
-
-		// check for native support
-		if (typeof document.cancelFullScreen != "undefined") {
-			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 (typeof document[fullscreen.prefix + "CancelFullScreen"] != "undefined") {
-					fullscreen.supportsFullScreen = true;
-					break;
-				}
-				// Special case for MS (when isn't it?)
-				else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) {
-					fullscreen.prefix = "ms";
-					fullscreen.supportsFullScreen = true;
-					break;
-				}
-			}
-		}
-
-		// Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported
-		// https://bugs.webkit.org/show_bug.cgi?id=121496
-		if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
-			 fullscreen.supportsFullScreen = false;
-		}
-
-		// Update methods to do something useful
-		if (fullscreen.supportsFullScreen) {
-			fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
-
-			fullscreen.isFullScreen = function() {
-				switch (this.prefix) {
-					case "":
-						return document.fullScreen;
-					case "webkit":
-						return document.webkitIsFullScreen;
-					case "ms":
-						// Docs say document.msFullScreenElement returns undefined
-						// if no element is full screem but it returns null, cheers
-						// https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx
-						return (document.msFullscreenElement !== null);
-					default:
-						return document[this.prefix + "FullScreen"];
-				}
-			};
-			fullscreen.requestFullScreen = function(element) {
-				return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
-			};
-			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;
-	}
-
-	// Player instance
-	function Plyr(container) {
-		var player = this;
-		player.container = container;
-
-		// Captions functions
-		// Credits: http://paypal.github.io/accessible-html5-video-player/
-
-		// For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.)
-		function _adjustManualCaptions() {
-			player.subcount = 0;
-			while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
-				player.subcount++;
-				if (player.subcount > player.captions.length-1) {
-					player.subcount = player.captions.length-1;
-					break;
-				}
-			}
-		}
-		// Display captions container and button (for initialization)
-		function _showCaptions() {
-			_toggleClass(player.container, config.classes.captions.enabled, true);
-
-			if (config.captions.defaultActive) {
-				_toggleClass(player.container, config.classes.captions.active, true);
-				player.buttons.captions.setAttribute("checked", "checked");
-			}
-		}
-		// Utilities for caption time codes
-		function _timecodeMin(tc) {
-			var tcpair = [];
-			tcpair = tc.split(" --> ");
-			return _subTcSecs(tcpair[0]);
-		}
-		function _timecodeMax(tc) {
-			var tcpair = [];
-			tcpair = tc.split(" --> ");
-			return _subTcSecs(tcpair[1]);
-		}
-		function _subTcSecs(tc) {
-			if (tc === null || tc === undefined) {
-				return 0;
-			}
-			else {
-				var tc1 = [],
-					tc2 = [],
-					seconds;
-				tc1 = tc.split(",");
-				tc2 = tc1[0].split(":");
-				seconds = Math.floor(tc2[0]*60*60) + Math.floor(tc2[1]*60) + Math.floor(tc2[2]);
-				return seconds;
-			}
-		}
-
-		// Find all elements
-		function _getElements(selector) {
-			return player.container.querySelectorAll(selector);
-		}
-
-		// Find a single element
-		function _getElement(selector) {
-			return _getElements(selector)[0];
-		}
-
-		// Insert controls
-		function _injectControls() {
-			// Insert custom video controls
-			if (config.debug) {
-				console.log("Injecting custom controls");
-			}
-
-			// Use specified html 
-			// Need to do a default?
-			var html = config.html;
-
-			// Replace aria label instances
-			html = _replaceAll(html, "{aria-label}", config.playAriaLabel);
-
-			// Replace all id references
-			html = _replaceAll(html, "{id}", player.random);
-
-			// Inject into the container
-			player.container.insertAdjacentHTML("beforeend", html);
-		}
-
-		// Find the UI controls and store references
-		function _findElements() {
-			player.controls 			= _getElement(config.selectors.controls);
-
-			// Buttons
-			player.buttons = {};
-			player.buttons.play 		= _getElement(config.selectors.buttons.play);
-			player.buttons.pause 		= _getElement(config.selectors.buttons.pause);
-			player.buttons.restart 		= _getElement(config.selectors.buttons.restart);
-			player.buttons.rewind 		= _getElement(config.selectors.buttons.rewind);
-			player.buttons.forward 		= _getElement(config.selectors.buttons.forward);
-			player.buttons.mute 		= _getElement(config.selectors.buttons.mute);
-			player.buttons.captions		= _getElement(config.selectors.buttons.captions);
-			player.buttons.fullscreen 	= _getElement(config.selectors.buttons.fullscreen);
-
-			// Progress
-			player.progress = {};
-			player.progress.bar			= _getElement(config.selectors.progress);
-			player.progress.text 		= player.progress.bar.getElementsByTagName("span")[0];
-
-			// Volume
-			player.volume 				= _getElement(config.selectors.buttons.volume);
-
-			// Timing
-			player.duration 			= _getElement(config.selectors.duration);
-			player.seekTime 			= _getElements(config.selectors.seekTime);
-		}
-
-		// Setup media
-		function _setupMedia() {
-			player.media = player.container.querySelectorAll("audio, video")[0];
-
-			// If there's no media, bail
-			if(!player.media) {
-				console.error("No audio or video element found!");
-				return false;
-			}
-
-			// Remove native video controls
-			player.media.removeAttribute("controls");
-
-			// Set media type
-			player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
-
-			// Add type class
-			_toggleClass(player.container, config.classes[player.type], true);
-
-			// If there's no autoplay attribute, assume the video is stopped and add state class
-			_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
-
-			// Inject the player wrapper
-			if(player.type === "video") {
-				// Create the wrapper div
-				var wrapper = document.createElement("div");
-				wrapper.setAttribute("class", config.classes.videoWrapper);
-
-				// Wrap the video in a container
-				_wrap(player.media, wrapper);
-
-				// Cache the container
-				player.videoContainer = wrapper;
-			}
-		}
-
-		// Setup captions
-		function _setupCaptions() {
-			if(player.type === "video") {
-				// Inject the container
-				player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'></div>");
-
-				// Cache selector
-				player.captionsContainer = _getElement(config.selectors.captions);
-
-				// Determine if HTML5 textTracks is supported
-				player.isTextTracks = false;
-				if (player.media.textTracks) {
-					player.isTextTracks = true;
-				}
-
-				// Get URL of caption file if exists
-				var captionSrc = "",
-					kind,
-					children = player.media.childNodes;
-
-				for (var i = 0; i < children.length; i++) {
-					if (children[i].nodeName.toLowerCase() === "track") {
-						kind = children[i].getAttribute("kind");
-						if (kind === "captions") {
-							captionSrc = children[i].getAttribute("src");
-						}
-					}
-				}
-
-				// Record if caption file exists or not
-				player.captionExists = true;
-				if (captionSrc === "") {
-					player.captionExists = false;
-					if (config.debug) {
-						console.log("No caption track found.");
-					}
-				}
-				else {
-					if (config.debug) {
-						console.log("Caption track found; URI: " + captionSrc);
-					}
-				}
-
-				// If no caption file exists, hide container for caption text
-				if (!player.captionExists) {
-					_toggleClass(player.container, config.classes.captions.enabled);
-				}
-				// If caption file exists, process captions
-				else {
-					var track = {}, tracks, j;
-
-					// If IE 10/11 or Firefox 31+ or Safari 7+, don"t use native captioning (still doesn"t work although they claim it"s now supported)
-					if ((player.browserName === "IE" && player.browserMajorVersion === 10) || 
-							(player.browserName === "IE" && player.browserMajorVersion === 11) || 
-							(player.browserName === "Firefox" && player.browserMajorVersion >= 31) || 
-							(player.browserName === "Safari" && player.browserMajorVersion >= 7)) {
-						if (config.debug) {
-							console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+");
-						}
-						// set to false so skips to "manual" captioning
-						player.isTextTracks = false;
-						
-						// turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below]
-						track = {};
-						tracks = player.media.textTracks;
-						for (j=0; j < tracks.length; j++) {
-							track = player.media.textTracks[j];
-							track.mode = "hidden";
-						}
-					}
-
-					// Rendering caption tracks - native support required - http://caniuse.com/webvtt
-					if (player.isTextTracks) {
-						if (config.debug) {
-							console.log("textTracks supported");
-						}
-						_showCaptions(player);
-
-						track = {};
-						tracks = player.media.textTracks;
-						for (j=0; j < tracks.length; j++) {
-							track = player.media.textTracks[j];
-							track.mode = "hidden";
-							if (track.kind === "captions") {
-								_on(track, "cuechange",function() {
-									if (this.activeCues[0]) {
-										if (this.activeCues[0].hasOwnProperty("text")) {
-											player.captionsContainer.innerHTML = this.activeCues[0].text;
-										}
-									}
-								});
-							}
-						}
-					}
-					// Caption tracks not natively supported
-					else {
-						if (config.debug) {
-							console.log("textTracks not supported so rendering captions manually");
-						}
-						_showCaptions(player);
-
-						// Render captions from array at appropriate time
-						player.currentCaption = "";
-						player.subcount = 0;
-						player.captions = [];
-
-						_on(player.media, "timeupdate", function() {
-							// Check if the next caption is in the current time range
-							if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) && 
-								player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) {
-									player.currentCaption = player.captions[player.subcount][1];
-							}
-							// Is there a next timecode?
-							if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) && 
-								player.subcount < (player.captions.length-1)) {
-									player.subcount++;
-							}
-							// Render the caption
-							player.captionsContainer.innerHTML = player.currentCaption;
-						});
-
-						if (captionSrc !== "") {
-							// Create XMLHttpRequest Object
-							var xhr = new XMLHttpRequest();
-
-							xhr.onreadystatechange = function() {
-								if (xhr.readyState === 4) {
-									if (xhr.status === 200) {
-										player.captions = [];
-										var records = [], 
-											record,
-											req = xhr.responseText;
-
-										records = req.split("\n\n");
-										for (var r=0; r < records.length; r++) {
-											record = records[r];
-											player.captions[r] = [];
-											player.captions[r] = record.split("\n");
-										}
-
-										// Remove first element ("VTT")
-										player.captions.shift();
-
-										if (config.debug) {
-											console.log("Successfully loaded the caption file via ajax.");
-										}
-									} 
-									else if (config.debug) {
-										console.error("There was a problem loading the caption file via ajax.");
-									}
-								}
-							}
-							
-							xhr.open("get", captionSrc, true);
-
-							xhr.send();
-						}
-					}
-
-					// If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
-					if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
-						if (config.debug) {
-							console.log("Safari 7 detected; removing track from DOM");
-						}
-						tracks = player.media.getElementsByTagName("track");
-						player.media.removeChild(tracks[0]);
-					}
-				}
-			}
-		}
-
-		// Setup seeking
-		function _setupSeeking() {
-			// Update number of seconds in rewind and fast forward buttons
-			player.seekTime[0].innerHTML = config.seekInterval;
-			player.seekTime[1].innerHTML = config.seekInterval;
-		}
-
-		// Setup fullscreen
-		function _setupFullscreen() {
-			if(player.type === "video" && config.fullscreen.enabled) {
-				if(fullscreen.supportsFullScreen) {
-					if(config.debug) {
-						console.log("Fullscreen enabled");
-					}
-
-					_toggleClass(player.container, config.classes.fullscreen.enabled, true);
-				}
-				else if(config.debug) {
-					console.warn("Fullscreen not supported");
-				}
-			}	
-		}
-
-		// Play media
-		function _play() {
-			player.media.play();
-
-			_toggleClass(player.container, config.classes.stopped);
-			_toggleClass(player.container, config.classes.playing, true);
-		}
-
-		// Pause media
-		function _pause() {
-			player.media.pause(); 
-
-			_toggleClass(player.container, config.classes.playing);
-			_toggleClass(player.container, config.classes.stopped, true);
-		}
-
-		// Restart playback
-		function _restart() {
-			// Move to beginning
-			player.media.currentTime = 0;
-
-			// Special handling for "manual" captions
-			if (!player.isTextTracks) {
-				player.subcount = 0;
-			}
-
-			// Play and ensure the play button is in correct state
-			_play();
-		}
-
-		// Rewind
-		function _rewind(seekInterval) {
-			// Use default if needed
-			if(typeof seekInterval === "undefined") {
-				seekInterval = config.seekInterval;
-			}
-
-			var targetTime = player.media.currentTime - seekInterval;
-
-			if (targetTime < 0) {
-				player.media.currentTime = 0;
-			}
-			else {
-				player.media.currentTime = targetTime;
-			}
-			// Special handling for "manual" captions
-			if (!player.isTextTracks && player.type === "video") {
-				_adjustManualCaptions(player);
-			}
-		}
-
-		// Fast forward
-		function _forward(seekInterval) {
-			// Use default if needed
-			if(typeof seekInterval === "undefined") {
-				seekInterval = config.seekInterval;
-			}
-
-			var targetTime = player.media.currentTime + seekInterval;
-
-			if (targetTime > player.media.duration) {
-				player.media.currentTime = player.media.duration;
-			}
-			else {
-				player.media.currentTime = targetTime;
-			}
-			// Special handling for "manual" captions
-			if (!player.isTextTracks && player.type === "video") {
-				_adjustManualCaptions(player);
-			}
-		}
-
-		// Toggle fullscreen
-		function _toggleFullscreen() {
-			if(!fullscreen.isFullScreen()) {
-				fullscreen.requestFullScreen(player.container);
-			}
-			else {
-				fullscreen.cancelFullScreen();
-			}
-		}
-
-		// Set volume
-		function _setVolume(volume) {
-			// Use default if needed
-			if(typeof volume === "undefined") {
-				volume = config.volume;
-			}
-			// Maximum is 10
-			if(volume > 10) {
-				volume = 10;
-			}
-
-			player.volume.value = volume;
-			player.media.volume = parseFloat(volume / 10);
-			_checkMute();
-		}
-
-		// Mute
-		function _toggleMute(muted) {
-			// If the method is called without parameter, toggle based on current value
-			if(typeof active === "undefined") {
-				muted = !player.media.muted;
-				player.buttons.mute.checked = muted;
-			}
-
-			player.media.muted = muted;
-			_checkMute();
-		}
-
-		// Toggle captions
-		function _toggleCaptions(active) { 
-			// If the method is called without parameter, toggle based on current value
-			if(typeof active === "undefined") {
-				active = (player.container.className.indexOf(config.classes.captions.active) === -1);
-				player.buttons.captions.checked = active;
-			}
-
-			if (active) {
-				_toggleClass(player.container, config.classes.captions.active, true);
-			} 
-			else {
-				_toggleClass(player.container, config.classes.captions.active);
-			}
-		}
-
-		// Check mute state
-		function _checkMute() {
-			_toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
-		}
-
-		// Listen for events
-		function _listeners() {
-			// Fullscreen
-			_on(player.buttons.fullscreen, "click", _toggleFullscreen);
-
-			// Click video
-			if(player.type === "video" && config.click) {
-				_on(player.videoContainer, "click", function() {
-					if(player.media.paused) {
-						_play();
-					}
-					else if(player.media.ended) {
-						_restart();
-					}
-					else {
-						_pause();
-					}
-				});
-			}
-
-			// Play
-			_on(player.buttons.play, "click", function() { 
-				_play(); 
-				player.buttons.pause.focus(); 
-			});
-
-			// Pause
-			_on(player.buttons.pause, "click", function() { 
-				_pause(); 
-				player.buttons.play.focus(); 
-			});
-
-			// Restart
-			_on(player.buttons.restart, "click", _restart);
-
-			// Rewind
-			_on(player.buttons.rewind, "click", function() {
-				_rewind(config.seekInterval);
-			});
-
-			// Fast forward
-			_on(player.buttons.forward, "click", function() {
-				_forward(config.seekInterval);
-			});
-
-			// Get the HTML5 range input element and append audio volume adjustment on change
-			_on(player.volume, "change", function() {
-				_setVolume(this.value);
-			});
-
-			// Mute
-			_on(player.buttons.mute, "change", function() {
-				_toggleMute(this.checked);
-			});
-			
-			// Duration
-			_on(player.media, "timeupdate", function() {
-				player.secs = parseInt(player.media.currentTime % 60);
-				player.mins = parseInt((player.media.currentTime / 60) % 60);
-				
-				// Ensure it"s two digits. For example, 03 rather than 3.
-				player.secs = ("0" + player.secs).slice(-2);
-				player.mins = ("0" + player.mins).slice(-2);
-
-				// Render
-				player.duration.innerHTML = player.mins + ":" + player.secs;
-			});
-
-			// Progress bar
-			_on(player.media, "timeupdate", function() {
-				player.percent = (100 / player.media.duration) * player.media.currentTime;
-
-				if (player.percent > 0) {
-					player.progress.bar.value = player.percent;
-					player.progress.text.innerHTML = player.percent;
-				}
-			});
-
-			// Skip when clicking progress bar
-			_on(player.progress.bar, "click", function(event) {
-				player.pos = _getClickPosition(event).x / this.offsetWidth;
-				player.media.currentTime = player.pos * player.media.duration;
-				
-				// Special handling for "manual" captions
-				if (!player.isTextTracks && player.type === "video") {
-					_adjustManualCaptions(player);
-				}
-			});
-
-			// Captions
-			_on(player.buttons.captions, "click", function() { 
-				_toggleCaptions(this.checked);
-			});
-
-			// Clear captions at end of video
-			_on(player.media, "ended", function() {
-				if(player.type === "video") {
-					player.captionsContainer.innerHTML = "";
-				}
-				_toggleClass(player.container, config.classes.stopped, true);
-				_toggleClass(player.container, config.classes.playing);
-			});
-		}
-
-		function _init() {
-			// Setup the fullscreen api 
-			fullscreen = _fullscreen();
-
-			// Sniff 
-			player.browserInfo = _browserSniff();
-			player.browserName = player.browserInfo[0];
-			player.browserMajorVersion = player.browserInfo[1];
-
-			// Debug info
-			if(config.debug) {
-				console.log(player.browserName + " " + player.browserMajorVersion);
-			}
-
-			// If IE8, stop customization (use fallback)
-			// If IE9, stop customization (use native controls)
-			if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
-				if(config.debug) {
-					console.error("Browser not suppported.");
-				}
-				return false;
-			}
-
-			// Set up aria-label for Play button with the title option
-			if (typeof(config.title) === "undefined" || !config.title.length) {
-				config.playAriaLabel = "Play";
-			}
-			else {
-				config.playAriaLabel = "Play " + config.title;
-			}
-
-			// Setup media
-			_setupMedia();
-
-			// Generate random number for id/for attribute values for controls
-			player.random = Math.floor(Math.random() * (10000));
-
-			// Inject custom controls
-			_injectControls();
-
-			// Find the elements
-			_findElements();
-
-			// Set volume
-			_setVolume(config.volume);
-
-			// Setup fullscreen
-			_setupFullscreen();
-
-			// Captions
-			_setupCaptions();
-
-			// Seeking
-			_setupSeeking();
-
-			// Listeners
-			_listeners();
-		}
-
-		_init();
-
-		return {
-			media: 				player.media,
-			play: 				_play,
-			pause: 				_pause,
-			restart: 			_restart,
-			rewind: 			_rewind,
-			forward: 			_forward,
-			setVolume: 			_setVolume,
-			toggleMute: 		_toggleMute,
-			toggleCaptions: 	_toggleCaptions
-		}
-	}
-
-	// Expose setup function
-	api.setup = function(options){
-		// Extend the default options with user specified
-		config = _extend(defaults, options);
-
-		// If enabled carry on
-		// You may want to disable certain UAs etc
-		if(!config.enabled) {
-			return false;
-		}
-
-		// Get the players 
-		var elements = document.querySelectorAll(config.selectors.container), players = [];
-
-		// Create a player instance for each element
-		for (var i = elements.length - 1; i >= 0; i--) {
-			// Get the current element
-			var element = elements[i];
-			
-			// Setup a player instance and add to the element
-			element.plyr = new Plyr(element);
-
-			// Add to return array
-			players.push(element.plyr);
-		}
-
-		return players;
-	}
-}(this.plyr = this.plyr || {}));
--- a/assets/less/docs/fontface.less
+++ b/assets/less/docs/fontface.less
@ -1,16 +0,0 @@
-@font-face {
-	font-family: "Avenir";
-	src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
-			url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
-			url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  400;
-}
-@font-face {
-	font-family: "Avenir";
-	src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
-			url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
-	font-style:   normal;
-	font-weight:  600;
-}
--- a/bower.json
+++ b/bower.json
@ -1,5 +1,6 @@
 {
  "name": "plyr",
+  "version": "1.0.14",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "keywords": [
@ -14,7 +15,10 @@
  "dependencies": {},
  "main": [
    "dist/css/plyr.css",
-    "dist/js/plyr.js"
+    "dist/js/plyr.js",
+    "dist/sprite.svg",
+    "src/less/plyr.less",
+    "src/js/plyr.js"
  ],
  "ignore": [
    "node_modules",
--- a/bundles.json
+++ b/bundles.json
@ -1,14 +1,14 @@
 {
 	"less": {
-		"plyr.css": 	["assets/less/plyr.less"],
-		"docs.css": 	["assets/less/docs.less"]
+		"plyr.css": 	["src/less/plyr.less"],
+		"docs.css": 	["src/less/docs.less"]
 	},
 	"js": {
-		"plyr.js": 		["assets/js/plyr.js"],
+		"plyr.js": 		["src/js/plyr.js"],
 		"docs.js": 		[
-			"assets/js/lib/hogan-3.0.2.mustache.js",
+			"src/js/lib/hogan-3.0.2.mustache.js",
 			"dist/js/templates.js",
-			"assets/js/docs.js"
+			"src/js/docs.js"
 		]
 	}
 }
--- a/changelog.md
+++ b/changelog.md
@ -0,0 +1,52 @@
+# Changelog
+
+## v1.0.14
+- Minor change for bootstrap compatibility
+
+## v1.0.13
+- Minor tweaks
+
+## v1.0.12
+- Handle native events (Issue #34)
+
+## v1.0.11
+- Bug fixes for fullscreen mode
+
+## v1.0.10
+- Bower includes src files now
+- Folder re-arrangement
+
+## v1.0.9
+- Added buffer progress bar
+- Fixed Safari 8 caption track (it needs to be removed from the DOM like in Safari 7)
+- Added validation (it works or it doesn't basically) of the `html` option passed
+
+## v1.0.8
+- Bug fix
+
+## v1.0.7
+- Storing user selected volume in local storage
+
+## v1.0.6
+- Fullscreen fallback for older browsers to use "full window"
+
+## v1.0.5
+- More minor bug fixes and improvements
+
+## v1.0.4
+- Fixed caption legibility issues
+
+## v1.0.3
+- Minor bug fixes
+
+## v1.0.2
+- Added OGG to <audio> example for Firefox
+- Fixed IE11 fullscreen issues
+
+## v1.0.1
+- Bug fixes for IE (as per usual)
+- Added CSS hooks for media type
+- Return instances of Plyr to the element
+
+## v1.0.0
+- Initial release
--- a/dist/css/docs.css
+++ b/dist/css/docs.css
@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 25px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}
--- a/dist/css/plyr.css
+++ b/dist/css/plyr.css
--- a/dist/js/docs.js
+++ b/dist/js/docs.js
--- a/dist/js/plyr.js
+++ b/dist/js/plyr.js
--- a/dist/js/templates.js
+++ b/dist/js/templates.js
@ -1,2 +1,2 @@
    var templates = {};
-    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("	<progress class=\"player-progress\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("		<span>0</span>% played");t.b("\n" + i);t.b("	</progress>");t.b("\n" + i);t.b("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Rewind <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<span class=\"player-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("		</span>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("	<span class=\"player-controls-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b("		<input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("			<svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
+    templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b("	<div class=\"player-progress\">");t.b("\n" + i);t.b("		<progress class=\"player-progress-played\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% played");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("		<progress class=\"player-progress-buffer\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b("			<span>0</span>% buffered");t.b("\n" + i);t.b("		</progress>");t.b("\n" + i);t.b("	</div>");t.b("\n" + i);t.b("	<span class=\"player-controls-playback\">");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"restart\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"rewind\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Rewind <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"pause\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fast-forward\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("		<span class=\"player-time\">");t.b("\n" + i);t.b("			<span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b("			<span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b("		</span>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("	<span class=\"player-controls-sound\">");t.b("\n" + i);t.b("		<input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b("		<label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b("			<svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b("		<input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b("		<input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b("		<label for=\"captions{id}\">");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b("		</label>");t.b("\n");t.b("\n" + i);t.b("		<button type=\"button\" data-player=\"fullscreen\">");t.b("\n" + i);t.b("			<svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b("			<svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b("			<span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b("		</button>");t.b("\n" + i);t.b("	</span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: {  }});
--- a/dist/svg/sprite.svg
+++ b/dist/svg/sprite.svg
--- a/gulpfile.js
+++ b/gulpfile.js
@ -17,23 +17,21 @@ var fs 			= require("fs"),
 	svgmin 		= require("gulp-svgmin"),
 	hogan 		= require("gulp-hogan-compile");

-var projectPath = __dirname;
-var paths = {
-    project: 		projectPath,
-
+var root = __dirname,
+	paths = {
    // Watch paths
-    watchless: 		path.join(projectPath, "assets/less/**/*"),
-    watchjs: 		path.join(projectPath, "assets/js/**/*"),
-    watchicons: 	path.join(projectPath, "assets/icons/**/*"),
-    watchtemplates: path.join(projectPath, "assets/templates/**/*"),
-
-    // SVG Icons
-   	svg: 			path.join(projectPath, "assets/icons/*.svg"),
-
+    watch: {
+    	less: 		path.join(root, "src/less/**/*"),
+	    js: 		path.join(root, "src/js/**/*"),
+	    sprite: 	path.join(root, "src/sprite/*.svg"),
+	    templates: 	path.join(root, "src/templates/*.html"),
+    },    
    // Output paths
-    js:  			path.join(projectPath, "dist/js/"),
-    css:  			path.join(projectPath, "dist/css/"),
-    icons:  		path.join(projectPath, "dist/svg/")
+    output: {
+		js:  		path.join(root, "dist/js/"),
+		css:  		path.join(root, "dist/css/"),
+		sprite:  	path.join(root, "dist/")
+    }
 },

 // Task names
@ -41,7 +39,7 @@ taskNames = {
 	jsAll: 		"js-all",
    lessBuild: 	"less-",
    jsBuild: 	"js-",
-    iconBuild: 	"icon-build",
+    sprite: 	"sprite-build",
    templates: 	"templates"
 },
 // Task arrays
@ -49,7 +47,7 @@ lessBuildTasks 	= [],
 jsBuildTasks 	= [],

 // Fetch bundles from JSON
-bundles = loadJSON(path.join(paths.project, "bundles.json"));
+bundles = loadJSON(path.join(root, "bundles.json"));

 // Load json
 function loadJSON(path) {
@ -59,14 +57,14 @@ function loadJSON(path) {
 // Build templates
 gulp.task(taskNames.templates, function () {
    return gulp
-    	.src(paths.watchtemplates)
+    	.src(paths.watch.templates)
        .pipe(hogan("templates.js", {
            wrapper: false,
            templateName: function (file) {
                return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
            }
        }))
-        .pipe(gulp.dest(paths.js));
+        .pipe(gulp.dest(paths.output.js));
 });

 // Process JS 
@ -80,7 +78,7 @@ for (var key in bundles.js) {
 	        	.src(bundles.js[key])
 				.pipe(concat(key))
 	            .pipe(uglify())
-	            .pipe(gulp.dest(paths.js));
+	            .pipe(gulp.dest(paths.output.js));
 	    });
 	})(key);
 }
@ -97,32 +95,29 @@ for (var key in bundles.less) {
 				.pipe(less())
 				.on("error", gutil.log)
 				.pipe(concat(key))
-				.pipe(prefix(["last 2 versions", "> 1%", "ie 9"], { cascade: true }))
+				.pipe(prefix(["last 2 versions"], { cascade: true }))
 				.pipe(minifyCss())
-				.pipe(gulp.dest(paths.css));
+				.pipe(gulp.dest(paths.output.css));
 		});
 	})(key);
 }

 // Process Icons
-gulp.task(taskNames.iconBuild, function () {
+gulp.task(taskNames.sprite, function () {
 	return gulp
-		.src(paths.svg)
+		.src(paths.watch.sprite)
 		.pipe(svgmin({
 			plugins: [{
 				removeDesc: true
 			}]
 		}))
-        .pipe(svgstore({ 
-        	prefix: 	"icon-",
-        	fileName: 	"sprite.svg"
-        }))
-	    .pipe(gulp.dest(paths.icons));
+        .pipe(svgstore())
+	    .pipe(gulp.dest(paths.output.sprite));
 });

 // Default gulp task
 gulp.task("default", function(){
-	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.iconBuild, "watch"));
+	runSequence(taskNames.jsAll, lessBuildTasks.concat(taskNames.sprite, "watch"));
 });

 // Build all JS (inc. templates)
@ -132,8 +127,8 @@ gulp.task(taskNames.jsAll, function(){

 // Watch for file changes
 gulp.task("watch", function () {
-	//gulp.watch(paths.watchtemplates, [taskNames.jsAll]);
-    //gulp.watch(paths.watchjs, [taskNames.jsAll]);
-    gulp.watch(paths.watchless, lessBuildTasks);
-    gulp.watch(paths.watchicons, [taskNames.iconBuild]);
+	//gulp.watch(paths.watch.templates, [taskNames.jsAll]);
+    //gulp.watch(paths.watch.js, [taskNames.jsAll]);
+    gulp.watch(paths.watch.less, lessBuildTasks);
+    gulp.watch(paths.watch.sprite, [taskNames.iconBuild]);
 });
--- a/index.html
+++ b/index.html
@ -20,17 +20,17 @@

 		<section class="example-video">
 			<div class="player">
-				<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
+				<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
 					<!-- Video files -->
-					<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-					<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
+					<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+					<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 					
 					<!-- Text track file -->
-					<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions.vtt" srclang="en" default>
+					<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
 					
 					<!-- Fallback for browsers that don't support the <video> element -->
 					<div>
-						<a href="//cdn.sampotts.me/plyr/movie.mp4">Download</a>
+						<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 					</div>
 				</video>
 			</div>
@ -41,32 +41,28 @@
 			<div class="player">
 				<audio controls>
 					<!-- Audio files -->
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.ogg" type="application/ogg">
+					<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+					<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
 					
 					<!-- Fallback for browsers that don't support the <audio> element -->
 					<div>
-						<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
+						<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
 					</div>
 				</audio>
 			</div>
 			<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
 		</section>

+		<footer>
+			<p>Used by &hellip;</p>
+			<a href="https://selz.com" target="_blank" class="logo">
+				<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
+			</a>
+		</footer>
+
 		<!-- Load SVG defs -->
 		<script>
-		(function(d,p){
-			var a=new XMLHttpRequest(),
-				b=d.body;
-			a.open("GET",p,!0);
-			a.send();
-			a.onload=function(){
-				var c=d.createElement("div");
-				c.style.display="none";
-				c.innerHTML=a.responseText;
-				b.insertBefore(c,b.childNodes[0])
-			}
-		})(document,"dist/svg/sprite.svg");
+		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"dist/sprite.svg");
 		</script>

 		<!-- Core player -->
--- a/license.md
+++ b/license.md
@ -1,27 +1,12 @@
-Copyright (c) 2014, Selz.com
+Copyright (c) 2015, Selz.com
 All rights reserved.

-Redistribution and use in source and binary forms, with or without modification,
-are permitted provided that the following conditions are met:
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.

-* Redistributions in binary form must reproduce the above copyright notice, this
-  list of conditions and the following disclaimer in the documentation and/or
-  other materials provided with the distribution.
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

-* Neither the name of the eBay nor the names of its
-  subsidiaries or affiliates may be used to endorse or promote products derived from
-  this software without specific prior written permission.
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
-ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
-WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
-ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
-ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
-SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.0.0",
+  "version": "1.0.14",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
@ -13,7 +13,7 @@
    "gulp-less": "~1.3.1",
    "gulp-minify-css": "~0.3.6",
    "gulp-svgmin": "^1.0.0",
-    "gulp-svgstore": "^4.0.1",
+    "gulp-svgstore": "^5.0.0",
    "gulp-uglify": "~0.3.1",
    "gulp-util": "~2.2.20",
    "run-sequence": "^0.3.6"
--- a/readme.md
+++ b/readme.md
@ -8,7 +8,7 @@ We wanted a lightweight, accessible and customisable media player that just supp

 ## Features
 - **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 4KB minified and gzipped.
+- **Lightweight** - just 4.8KB minified and gzipped.
 - **Customisable** - make the player look how you want with the markup you want.
 - **Semantic** - uses HTML5 form inputs for volume (range) and progress element for playback progress.
 - **No dependencies** - written in native JS.
@ -16,9 +16,15 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **Fallback** - if there's no support, the native players are used.
 - **Fullscreen** - options to run the player full browser or the user can toggle fullscreen.

+## Changelog
+Check out [the changelog](changelog.md)
+
 ## Planned development
 - Accept a string selector, a node, or a nodelist for the `container` property of `selectors`.
 - Accept a selector for the `html` template property.
+- Multiple language captions (with selection)
+
+If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or of course, forking and sending a pull request.

 ## Implementation

@ -64,19 +70,17 @@ and the AJAX technique here:
 The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media.
 ```html
 <div class="player">
-	<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
+	<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
 		<!-- Video files -->
-		<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-		<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
+		<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+		<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 		
 		<!-- Text track file -->
-		<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions_en.vtt" srclang="en" default>
+		<track kind="captions" label="English captions" src="//cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
 		
 		<!-- Fallback for browsers that don't support the <video> element -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/movie.mp4">
-				<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
-			</a>
+			<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 		</div>
 	</video>
 </div>
@ -87,11 +91,12 @@ And the same for `<audio>`
 <div class="player">
 	<audio controls>
 		<!-- Audio files -->
-		<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
+		<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+    <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
 		
 		<!-- Fallback for browsers that don't support the <audio> element -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
+			<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
 		</div>
 	</audio>
 </div>
@ -289,15 +294,15 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
 Any unsupported browsers will display links to download the media if the correct html is used.

 ## Issues
-If you find anything weird with the library, please let us know using the Github issues tracker.
+If you find anything weird with Plyr, please let us know using the Github issues tracker.

 ## Author
-This was created by Sam Potts ([@sam_potts](https://twitter.com/sam_potts))
-
+Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))

 ## Useful links and credits
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
 - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
+- The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made

 Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
--- a/assets/fonts/AvenirLTStd-Heavy.ttf
+++ b/assets/fonts/AvenirLTStd-Heavy.ttf
--- a/assets/fonts/AvenirLTStd-Heavy.woff
+++ b/assets/fonts/AvenirLTStd-Heavy.woff
--- a/assets/fonts/AvenirLTStd-Heavy.woff2
+++ b/assets/fonts/AvenirLTStd-Heavy.woff2
--- a/assets/fonts/AvenirLTStd-Medium.ttf
+++ b/assets/fonts/AvenirLTStd-Medium.ttf
--- a/assets/fonts/AvenirLTStd-Medium.woff
+++ b/assets/fonts/AvenirLTStd-Medium.woff
--- a/assets/fonts/AvenirLTStd-Medium.woff2
+++ b/assets/fonts/AvenirLTStd-Medium.woff2
--- a/assets/js/docs.js
+++ b/assets/js/docs.js
--- a/assets/js/lib/hogan-3.0.2.mustache.js
+++ b/assets/js/lib/hogan-3.0.2.mustache.js
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@ -6,8 +6,6 @@
@import "docs/normalize.less";
 // Mixins
@import "docs/mixins.less";
-// Fonts
-@import "docs/fontface.less";

 // Variables
 // ---------------------------------------
@ -19,28 +17,35 @@

 // Elements
@link-color: 				@blue;
+@padding-base: 				20px;
+
+// Breakpoints
+@screen-md: 				768px;

 // BORDER-BOX ALL THE THINGS! 
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
 *, *::after, *::before {  
 	box-sizing: border-box; 
 }
+
+// Base
 html {
-	font-size: 62.5%;
+	//font-size: 62.5%;
 }
 body {
 	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	background: #fff;
-	.font-size(16);
 	line-height: 1.5;
 	text-align: center;
 	color: #6D797F;
 }
+
+// Type
 h1,
 h2 {
 	letter-spacing: -.025em;
 	color: #2E3C44;
-	margin: 0 0 10px;
+	margin: 0 0 (@padding-base / 2);
 	line-height: 1.2;
 	.font-smoothing();
 }
@ -50,20 +55,38 @@ h1 {
 }
 p,
 small {
-	margin: 0 0 20px;
+	margin: 0 0 @padding-base;
 }
 small {
 	display: block;
+	padding: 0 (@padding-base / 2);
 	.font-size(14);
 }
+
+// Header
 header {
-	padding: 60px 0;
-	margin-bottom: 20px;
+	padding: @padding-base;
+	margin-bottom: @padding-base;

 	p {
 		.font-size(18);
 	}
+	@media (min-width: 560px) {
+		padding-top: (@padding-base * 3);
+		padding-bottom: (@padding-base * 3);
+	}
 }
+
+// Sections
+section {
+	padding-bottom: @padding-base;
+
+	@media (min-width: 560px) {
+		padding-bottom: (@padding-base * 2);
+	}
+}
+
+// Links & Buttons
 a {
 	text-decoration: none;
 	color: @link-color;
@ -77,16 +100,20 @@ a {
 	&:focus {
 		.tab-focus();
 	}
+	&.logo {
+		border: 0;
+	}
 }
 .btn {
 	display: inline-block;
-	padding: 10px 25px;
+	padding: (@padding-base / 2) (@padding-base * 1.5);
 	background: @link-color;
 	border: 0;
 	color: #fff;
 	.font-smoothing(on);
 	font-weight: 600;
 	border-radius: 3px;
+	user-select: none;
 	
 	&:hover,
 	&:focus {
@ -95,10 +122,6 @@ a {
 	}
 }

-section {
-	padding-bottom: 80px;
-}
-
 // Players
 .example-audio .player {
 	max-width: 480px;
@ -108,10 +131,23 @@ section {
 }
 .example-audio .player,
 .example-video .player {
-	margin: 0 auto 20px;
+	margin: 0 auto @padding-base;

-	&:fullscreen,
-	&-fullscreen {
+	&-fullscreen,
+	&.fullscreen-active {
 		max-width: none;
 	}
-}
+}
+
+// Footer
+footer {
+	margin-bottom: @padding-base;
+
+	p {
+		margin-bottom: (@padding-base / 2);
+	}
+}
+
+// Fonts
+// Last to not block rendering
+@import "docs/fontface.less";
--- a/src/less/docs/fontface.less
+++ b/src/less/docs/fontface.less
@ -0,0 +1,16 @@
+@font-face {
+	font-family: "Avenir";
+	src: 	url("../../src/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+			url("../../src/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+			url("../../src/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  400;
+}
+@font-face {
+	font-family: "Avenir";
+	src: 	url("../../src/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
+			url("../../src/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
+			url("../../src/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  600;
+}
--- a/assets/less/docs/mixins.less
+++ b/assets/less/docs/mixins.less
@ -22,10 +22,11 @@
 }

 // Use rems for font sizing
+// Leave <body> at 100%/16px
 // ---------------------------------------
 .font-size(@font-size: 16){
-	@rem: (@font-size / 10);
-	font-size: @font-size * 1px;
+	@rem: round((@font-size / 16), 1);
+	font-size: (@font-size * 1px);
 	font-size: ~"@{rem}rem";
 }

--- a/assets/less/docs/normalize.less
+++ b/assets/less/docs/normalize.less
--- a/assets/less/plyr.less
+++ b/assets/less/plyr.less
@ -10,23 +10,36 @@
@gray: 						#565d64;
@gray-light: 				#cbd0d3;

+// Font sizes
+@font-size-small: 			14px;
+@font-size-base: 			16px;
+@font-size-large:           ceil((@font-size-base * 1.5)); 
+
 // Controls
-@controls-bg: 				@gray-dark;
-@control-color: 			@gray-light;
-@control-color-active: 		@blue;
-@control-color-inactive: 	@gray;
@control-spacing: 			10px;
+@controls-bg: 				@gray-dark;
+@control-bg-hover: 			@blue;
+@control-color: 			@gray-light;
+@control-color-inactive: 	@gray;
+@control-color-focus: 		#fff;
+@control-color-hover: 		#fff;

 // Progress
-@progress-bg: 				@gray;
-@progress-value-bg: 		@blue;
+@progress-bg: 				lighten(@gray, 10%);
+@progress-playing-bg: 		@blue;
+@progress-buffered-bg: 		@gray;

 // Range
@range-track-height: 		6px;
+@range-track-bg: 			@gray;
@range-thumb-height: 		(@range-track-height * 2);
@range-thumb-width: 		(@range-track-height * 2);
@range-thumb-bg: 			@control-color;
-@range-thumb-bg-focus: 		@control-color-active;
+@range-thumb-bg-focus: 		@control-bg-hover;
+
+// Breakpoints
+@bp-control-split: 			560px; // When controls split into left/right
+@bp-captions-large: 		768px; // When captions jump to the larger font size

 // Utility classes & mixins
 // -------------------------------
@ -67,7 +80,7 @@
 }
 .range-track() {
 	height: @range-track-height;
-	background: @gray;
+	background: @range-track-bg;
 	border: 0;
 	border-radius: (@range-track-height / 2);
 }
@ -91,9 +104,8 @@
 	max-width: 100%;
 	min-width: 290px;
 	overflow: hidden; // For the controls
-	background: #000;

-	// BORDER-BOX ALL THE THINGS! 
+	// border-box everything
 	// http://paulirish.com/2012/box-sizing-border-box-ftw/
 	&,
 	*,
@ -122,13 +134,18 @@
 		padding: 20px;
 		min-height: 2.5em;
 		color: #fff;
-		font-size: 16px;
-		text-shadow: 0 1px 1px rgba(0,0,0, .75);
+		font-size: @font-size-base;
+		font-weight: 600;
+		text-shadow: 
+		-1px -1px 0 @gray, 
+		1px -1px 0 @gray, 
+		-1px 1px 0 @gray, 
+		1px 1px 0 @gray;
 		text-align: center;
 		.font-smoothing();

-		@media (min-width: 560px) {
-			font-size: 24px;
+		@media (min-width: @bp-captions-large) {
+			font-size: @font-size-large;
 		}
 	}
 	&.captions-active &-captions {
@ -143,13 +160,14 @@
 		padding: (@control-spacing * 2) @control-spacing @control-spacing;
 		background: @controls-bg;
 		line-height: 1;
+		text-align: center;

 		// Layout
 		&-sound {
 			display: block;
 			margin: @control-spacing auto 0;
 		}
-		@media (min-width: 560px) {
+		@media (min-width: @bp-control-split) {
 			&-playback {
 				float: left;
 			}
@ -192,21 +210,15 @@
 			background: transparent;
 			overflow: hidden;
 		}
-		button:hover,
-		label:hover {
-			background: @control-color-active;
-
-			svg {
-				fill: #fff;
-			}
-		}
 		input:focus + label,
 		button:focus {
 			.tab-focus();
-
-			svg {
-				fill: #fff;
-			}
+			color: @control-color-focus;
+		}
+		button:hover,
+		input + label:hover {
+			background: @control-bg-hover;
+			color: @control-color-hover;
 		}
 		.icon-exit-fullscreen,
 		.icon-muted {
@ -216,9 +228,9 @@
 			display: inline-block;
 			vertical-align: middle;
 			margin-left: @control-spacing;
-			color: #fff;
+			color: @control-color;
 			font-weight: 600;
-			font-size: 14px;
+			font-size: @font-size-small;
 			.font-smoothing();
 		}
 	}
@ -232,27 +244,45 @@
 		right: 0;
 		width: 100%;
 		height: @control-spacing;
-		margin: 0;
-		vertical-align: top;
-		
-		&[value] {
-			-webkit-appearance: none;
-			border: none;
-			background: @progress-bg;
+		background: @progress-bg;
+
+		&-buffer,
+		&-played {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			vertical-align: top;
+			
+			&[value] {
+				-webkit-appearance: none;
+				border: none;
+				background: transparent;
+
+				&::-webkit-progress-bar {
+					background: transparent;
+				}
+
+				// Inherit from currentColor;
+				&::-webkit-progress-value {
+					background: currentColor;
+				}
+				&::-moz-progress-bar {
+					background: currentColor;
+				}
+			}
+		}
+		&-played {
+			z-index: 2;
+		}
+		&-played[value] {
 			cursor: pointer;
-			color: @progress-value-bg;
-
-			&::-webkit-progress-bar {
-				background: @progress-bg;
-			}
-
-			// Inherit from currentColor;
-			&::-webkit-progress-value {
-				background: currentColor;
-			}
-			&::-moz-progress-bar {
-				background: currentColor;
-			}
+			color: @progress-playing-bg;
+		}
+		&-buffer[value] {
+			color: @progress-buffered-bg;
 		}
 	}

@ -276,11 +306,12 @@

 	// Volume control
 	// <input[type='range']> element
-	&-volume {
+	// Specificty is for bootstrap compatibility
+	&-volume[type=range] {
+		display: inline-block;
 		vertical-align: middle;
 		-webkit-appearance: none;
 		-moz-appearance: none;
-		//height: 6px;
 		width: 100px;
 		margin: 0 @control-spacing 0 0;
 		padding: 0;		
@ -338,15 +369,16 @@

 	// Full screen mode
 	&-fullscreen,
-	&:fullscreen {
-		position: absolute;
+	&.fullscreen-active {
+		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		height: 100%;
 		width: 100%;
-		z-index: 999999;
+		z-index: 10000000;
+		background: #000;

 		.player-video-wrapper {
 			height: 100%;
@ -359,29 +391,28 @@
 				top: auto;
 				bottom: 90px;

-				@media (min-width: 560px) and (max-width: 767px) {
+				@media (min-width: @bp-control-split) and (max-width: (@bp-captions-large - 1)) {
 					bottom: 60px;
 				}
-
-				@media (min-width: 768px) {
+				@media (min-width: @bp-captions-large) {
 					bottom: 80px;
 				}
 			}
-
 		}
 		.player-controls {
 			position: absolute;
 			bottom: 0;
 			left: 0;
 			right: 0;
+		}
+	}

-			.icon-exit-fullscreen {
-				display: block;
+	// When true full screen, show exit fullscreen icon
+	&.fullscreen-active .icon-exit-fullscreen {
+		display: block;

-				& + svg {
-					display: none;
-				}
-			}
+		& + svg {
+			display: none;
 		}
 	}

--- a/src/sprite/icon-bubble.svg
+++ b/src/sprite/icon-bubble.svg
--- a/src/sprite/icon-collapse.svg
+++ b/src/sprite/icon-collapse.svg
--- a/src/sprite/icon-expand.svg
+++ b/src/sprite/icon-expand.svg
--- a/src/sprite/icon-fast-forward.svg
+++ b/src/sprite/icon-fast-forward.svg
--- a/src/sprite/icon-muted.svg
+++ b/src/sprite/icon-muted.svg
--- a/src/sprite/icon-pause.svg
+++ b/src/sprite/icon-pause.svg
--- a/src/sprite/icon-play.svg
+++ b/src/sprite/icon-play.svg
--- a/src/sprite/icon-refresh.svg
+++ b/src/sprite/icon-refresh.svg
--- a/src/sprite/icon-rewind.svg
+++ b/src/sprite/icon-rewind.svg
--- a/src/sprite/icon-sound.svg
+++ b/src/sprite/icon-sound.svg
--- a/assets/templates/controls.html
+++ b/assets/templates/controls.html
@ -1,7 +1,12 @@
 <div class="player-controls">
-	<progress class="player-progress" max="100" value="0">
-		<span>0</span>% played
-	</progress>
+	<div class="player-progress">
+		<progress class="player-progress-played" max="100" value="0">
+			<span>0</span>% played
+		</progress>
+		<progress class="player-progress-buffer" max="100" value="0">
+			<span>0</span>% buffered
+		</progress>
+	</div>
 	<span class="player-controls-playback">
 		<button type="button" data-player="restart">
 			<svg><use xlink:href="#icon-refresh"></use></svg>
Author	SHA1	Message	Date
Sam Potts	f8b4622093	Fix for Bootstrap compatibility Fixes #6	2015-02-28 10:43:42 +11:00
Sam Potts	1216968c60	Minor tweaks	2015-02-28 01:17:56 +11:00
Sam Potts	1d2bd227f1	Small tweak to play(), pause()	2015-02-28 00:45:56 +11:00
Sam Potts	6cec6b2e16	Docs for 1.0.12	2015-02-28 00:40:36 +11:00
Sam Potts	98bc9b0c4b	Handle native events Fixes #34	2015-02-28 00:36:28 +11:00
Sam Potts	a637949e84	Added link to Selz	2015-02-27 14:52:57 +11:00
Sam Potts	d784669699	Updated docs/examples to use new CDN	2015-02-27 12:19:41 +11:00
Sam Potts	ba340172ee	Readme updates, code formatted using spaces	2015-02-26 14:32:18 +11:00
Sam Potts	55b085c4d0	Bug fixes for fullscreen mode	2015-02-24 15:44:56 +11:00
Sam Potts	dd72a973d6	Docs fix	2015-02-24 12:39:22 +11:00
Sam Potts	1b8b5d6ee4	Tidying up, bower changes - Folder tidy up - Bower updated to include source files - Upgraded to svgstore 5.0.0	2015-02-24 12:37:23 +11:00
Sam Potts	c105063ad9	Update license.md	2015-02-22 22:08:03 +11:00
Sam Potts	ff43701e97	Readme update	2015-02-22 10:34:20 +11:00
Sam Potts	f477fdf9e2	Minor changes	2015-02-22 10:19:47 +11:00
Sam Potts	49038e3ca9	Progress for buffer, Safari 8 fix, validating 'html' option	2015-02-22 10:17:39 +11:00
Sam Potts	5f96172dbd	Bumping version	2015-02-19 23:18:39 +11:00
Sam Potts	2bd6a8390c	Fix for empty local storage	2015-02-19 23:16:51 +11:00
Sam Potts	3e68cec6ea	Bumping version	2015-02-19 22:38:15 +11:00
Sam Potts	b24d763d40	Storing volume in local storage	2015-02-19 22:37:41 +11:00
Sam Potts	d690560fc2	Fullscreen fallback for older browsers	2015-02-19 21:46:45 +11:00
Sam Potts	d46d40fa17	Font size fix for examples, tidied up variables	2015-02-19 12:21:37 +11:00
Sam Potts	18001e7799	Fix for control alignment	2015-02-18 17:10:41 +11:00
Sam Potts	aa39aa8a58	Prevent multiple instances on one element	2015-02-18 16:17:27 +11:00
Sam Potts	c7c48bbe3c	Improved caption legibility on white backgrounds	2015-02-18 00:56:07 +11:00
Sam Potts	484617e2d7	Tidy up	2015-02-18 00:18:35 +11:00
Sam Potts	841cc957c9	Improve docs layout on small screens	2015-02-18 00:01:35 +11:00