YouTube playback, docs update

11 files changed, 497 insertions, 322 deletions

diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 072a9236..df205260 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -14,6 +14,10 @@ plyr.setup({
 		defaultActive: true
 	},
 	onSetup: function() {
+		if(!("media" in this)) {
+			return;
+		}
+
 		var player 	= this,
 			type 	= player.media.tagName.toLowerCase(),
 			toggle 	= document.querySelector("[data-toggle='fullscreen']");
@@ -26,116 +30,145 @@ plyr.setup({
 	}
 });
 
-// Popup
-function popup(event) {
-	// Prevent the link opening
-	if(event.target.nodeName.toLowerCase() == "a") {
-		if(event.preventDefault) { 
-			event.preventDefault();
+// General functions
+(function() { 
+	// Popup
+	function popup(event) {
+		// Prevent the link opening
+		if(event.target.nodeName.toLowerCase() == "a") {
+			if(event.preventDefault) { 
+				event.preventDefault();
+			}
+			else {
+				event.returnValue = false;
+			}
+		}
+
+		var link 	= event.target,
+			url		= link.href,
+			width 	= link.getAttribute("data-window-width") || 600,
+			height 	= link.getAttribute("data-window-height") || 600,
+			name 	= link.getAttribute("data-window-name") || "popup";
+
+		// If window exists, just focus it
+		if(window["window-"+name] && !window["window-"+name].closed) {
+			window["window-"+name].focus();
 		}
 		else {
-			event.returnValue = false;
+			// Get position
+			var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
+			var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+
+			// Open in the centre of the screen
+			var x = (screen.width / 2) - (width / 2) + left,
+				y = (screen.height / 2) - (height / 2) + top;
+
+			// Open that window
+			window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+
+			// Focus new window
+			window["window-"+name].focus();
 		}
 	}
 
-	var link 	= event.target,
-		url		= link.href,
-		width 	= link.getAttribute("data-window-width") || 600,
-		height 	= link.getAttribute("data-window-height") || 600,
-		name 	= link.getAttribute("data-window-name") || "popup";
+	// Trigger popups
+	document.querySelector(".js-popup").addEventListener("click", popup);
+
+	// Get JSONP
+	function getJSONP(url, callback) {
+	    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
+
+	    // Cleanup to prevent memory leaks and hit original callback
+	    window[name] = function(data) {
+	        delete window[name];
+	        document.body.removeChild(script);
+	        callback(data);
+	    };
+
+	    // Create a faux script
+	    var script = document.createElement("script");
+	    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
+
+	    // Inject to the body
+	    document.body.appendChild(script);
+	}
+
+	// Get star count
+	var storageSupported = ("sessionStorage" in window),
+		selectors = {
+			github: 	".js-stargazers-count",
+			twitter: 	".js-tweet-count"
+		};
 
-	// If window exists, just focus it
-	if(window["window-"+name] && !window["window-"+name].closed) {
-		window["window-"+name].focus();
+	// Display the count next to the button
+	function displayCount(selector, count) {
+		document.querySelector(selector).innerHTML = count;
+	}
+
+	// Add star
+	function formatGitHubCount(count) {
+		return "★ " + count;
+	}
+
+	// Check if it's in session storage first
+	if(storageSupported && "github_stargazers" in window.sessionStorage) {
+		displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
 	}
 	else {
-		// Get position
-		var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
-		var top = window.screenTop !== undefined ? window.screenTop : screen.top;
+		getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
+			if (json && typeof json.data.stargazers_count !== "undefined") {
+				// Update UI 
+				displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
+
+				// Store in session storage
+				window.sessionStorage.github_stargazers = json.data.stargazers_count;
+			}
+		});
+	}
 
-		// Open in the centre of the screen
-		var x = (screen.width / 2) - (width / 2) + left,
-			y = (screen.height / 2) - (height / 2) + top;
+	// Get tweet count
+	if(storageSupported && "tweets" in window.sessionStorage) {
+		displayCount(selectors.twitter, window.sessionStorage.tweets);
+	}
+	else {
+		getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
+			if (json && typeof json.count !== "undefined") {
+				// Update UI 
+				displayCount(selectors.twitter, json.count);
+
+				// Store in session storage
+				window.sessionStorage.tweets = json.count;
+			}
+		});
+	}
 
-		// Open that window
-		window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
+	// Tabs
+	var tabs = document.querySelectorAll(".nav-panel a"),
+		panels = document.querySelectorAll(".panels > .panel"),
+		activeClass = "active";
 
-		// Focus new window
-		window["window-"+name].focus();
+	for (var i = tabs.length - 1; i >= 0; i--) {
+		tabs[i].addEventListener("click", togglePanel);
 	}
-}
-
-// Trigger popups
-document.querySelector(".js-popup").addEventListener("click", popup);
-
-// Get JSONP
-function getJSONP(url, callback) {
-    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
-
-    // Cleanup to prevent memory leaks and hit original callback
-    window[name] = function(data) {
-        delete window[name];
-        document.body.removeChild(script);
-        callback(data);
-    };
-
-    // Create a faux script
-    var script = document.createElement("script");
-    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
-
-    // Inject to the body
-    document.body.appendChild(script);
-}
-
-// Get star count
-var storageSupported = ("sessionStorage" in window),
-	selectors = {
-		github: 	".js-stargazers-count",
-		twitter: 	".js-tweet-count"
-	};
-
-// Display the count next to the button
-function displayCount(selector, count) {
-	document.querySelector(selector).innerHTML = count;
-}
-
-// Add star
-function formatGitHubCount(count) {
-	return "★ " + count;
-}
-
-// Check if it's in session storage first
-if(storageSupported && "github_stargazers" in window.sessionStorage) {
-	displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
-}
-else {
-	getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
-		if (json && typeof json.data.stargazers_count !== "undefined") {
-			// Update UI 
-			displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
-
-			// Store in session storage
-			window.sessionStorage.github_stargazers = json.data.stargazers_count;
+
+	function togglePanel(event) {
+		event.preventDefault();
+
+		var tab = event.target,
+			panel = document.querySelector(tab.getAttribute("href"));
+
+		for (var i = panels.length - 1; i >= 0; i--) {
+			panels[i].classList.remove(activeClass);
 		}
-	});
-}
-
-// Get tweet count
-if(storageSupported && "tweets" in window.sessionStorage) {
-	displayCount(selectors.twitter, window.sessionStorage.tweets);
-}
-else {
-	getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
-		if (json && typeof json.count !== "undefined") {
-			// Update UI 
-			displayCount(selectors.twitter, json.count);
-
-			// Store in session storage
-			window.sessionStorage.tweets = json.count;
+
+		for (var x = tabs.length - 1; x >= 0; x--) {
+			tabs[x].classList.remove(activeClass);
 		}
-	});
-}
 
+		panel.classList.add(activeClass);
+		event.target.classList.add(activeClass);
+	}
+})();
 
 // Google analytics 
 // For demo site (http://[www.]plyr.io) only
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
new file mode 100644
index 00000000..81a68058
--- /dev/null
+++ b/docs/src/less/components/base.less
@@ -0,0 +1,45 @@
+// ==========================================================================
+// Base layout
+// ==========================================================================
+
+// BORDER-BOX ALL THE THINGS! 
+// http://paulirish.com/2012/box-sizing-border-box-ftw/
+*, *::after, *::before {  
+    box-sizing: border-box; 
+}
+
+// Base
+html {
+    font-size: 100%;
+}
+body {
+    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background: @body-background;
+    line-height: 1.5;
+    text-align: center;
+    color: @gray;
+    .font-smoothing(on);
+}
+
+// Header
+header {
+    padding: @padding-base;
+    margin-bottom: @padding-base;
+
+    p {
+        .font-size(18);
+    }
+    @media (min-width: @screen-sm) {
+        padding-top: (@padding-base * 3);
+        padding-bottom: (@padding-base * 3);
+    }
+}
+
+// Sections
+section {
+    padding-bottom: @padding-base;
+
+    @media (min-width: @screen-sm) {
+        padding-bottom: (@padding-base * 2);
+    }
+}
\ No newline at end of file
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
new file mode 100644
index 00000000..749cd11f
--- /dev/null
+++ b/docs/src/less/components/buttons.less
@@ -0,0 +1,144 @@
+// ==========================================================================
+// Buttons
+// ==========================================================================
+
+nav {
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		font-size: 0;
+	}
+	li {
+		display: inline-block;
+		margin-top: (@padding-base / 2);
+		.font-size();
+		white-space: nowrap;
+	}
+	li + li {
+		margin-left: @padding-base;
+	}
+}
+
+// Tabs
+.btn-bar {
+	position: relative;
+	margin: 0 auto @padding-base;
+	max-width: @example-width-video;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 1px;
+		background: @gray-lighter;
+	}
+
+	ul {
+		position: relative;
+		z-index: 1;
+		display: inline-block;
+		user-select: none;
+	}
+	li {
+		margin: 0;
+
+		&:first-child .btn {
+			border-radius: 4px 0 0 4px;
+		}
+		&:last-child .btn {
+			border-radius: 0 4px 4px 0;
+		}
+		& + li .btn {
+			margin-left: -1px;
+		}
+	}
+	.btn {
+		display: block;
+		border-radius: 0;
+	}
+	.active {
+		&:extend(.btn-primary);
+	}
+	.btn.active {
+		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (min-width: 560px) {
+		margin-bottom: (@padding-base * 2);
+	}
+}
+
+// Shared 
+.btn,
+.btn-count {
+	display: inline-block;
+	vertical-align: middle;
+	border-radius: @border-radius-base;
+	font-weight: 600;
+	user-select: none;
+}
+
+// Buttons 
+.btn {
+	padding: (@padding-base / 2) @padding-base;
+	background: @body-background;
+	border: 1px solid @gray-light;
+	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
+	text-shadow: 0 1px 1px #fff;
+	color: @gray;
+
+	&:hover,
+	&:focus {
+		background-color: #fff;
+		border-color: darken(@gray-light, 5%);
+		color: @link-color;
+		outline: 0;
+	}
+}
+.btn-primary {
+	background: linear-gradient(@link-color, darken(@link-color, 3%));
+	border-color: darken(@link-color, 10%);
+	box-shadow: 0 1px 1px rgba(0,0,0, .15);
+	text-shadow: 0 1px 1px rgba(0,0,0, .1);
+	color: #fff;
+	
+	&:hover,
+	&:focus {
+		color: #fff;
+		border-color: darken(@link-color, 20%);
+	}
+}
+.btn-small {
+	padding-top: ceil(@padding-base / 3);
+	padding-bottom: ceil(@padding-base / 3);
+}
+
+// Count bubble
+.btn-count {
+	position: relative;
+	margin-left: 6px;
+	padding: ((@padding-base / 2) - 1px);
+	background: @body-background;
+	border: 1px solid @gray-light;
+
+	&::before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: @arrow-size;
+		height: @arrow-size;
+		left: 1px;
+		top: 50%;
+		margin-top: -(@arrow-size / 2);
+
+		background: inherit;
+		border: inherit;
+		border-width: 1px 0 0 1px;
+		transform: rotate(-45deg) translate(-50%, -50%);
+	}
+}
\ No newline at end of file
diff --git a/docs/src/less/components/error.less b/docs/src/less/components/error.less
new file mode 100644
index 00000000..b1427173
--- /dev/null
+++ b/docs/src/less/components/error.less
@@ -0,0 +1,19 @@
+// ==========================================================================
+// Errors (AWS pages)
+// ==========================================================================
+
+// Error page
+html.error,
+.error body {
+    height: 100%;
+}
+.error body {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+}
+.error main {
+    display: table-cell;
+    width: 100%;
+    vertical-align: middle;
+}
\ No newline at end of file
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
new file mode 100644
index 00000000..9c145847
--- /dev/null
+++ b/docs/src/less/components/examples.less
@@ -0,0 +1,39 @@
+// ==========================================================================
+// Examples
+// ==========================================================================
+
+// Example players
+.example-audio .player,
+.example-video .player {
+    margin: 0 auto @padding-base;
+
+    &-controls {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
+}
+.example-audio .player {
+    max-width: @example-width-audio;
+
+    &-controls {
+        border-radius: @border-radius-base;
+    }
+    &-progress {
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        overflow: hidden;
+    }
+}
+.example-video .player {
+    max-width: @example-width-video;
+
+    video,
+    iframe {
+        border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
+    &-fullscreen,
+    &.fullscreen-active {
+        max-width: none;
+    }
+}
\ No newline at end of file
diff --git a/docs/src/less/components/panels.less b/docs/src/less/components/panels.less
new file mode 100644
index 00000000..290e5dfc
--- /dev/null
+++ b/docs/src/less/components/panels.less
@@ -0,0 +1,13 @@
+// ==========================================================================
+// Panels
+// ==========================================================================
+
+// Panels
+.panel {
+    display: none;
+
+    &.active {
+        display: block;
+        animation: fade-in .3s ease;
+    }
+}
\ No newline at end of file
diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less
new file mode 100644
index 00000000..97652342
--- /dev/null
+++ b/docs/src/less/components/type.less
@@ -0,0 +1,47 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+// Headings
+h1,
+h2 {
+    letter-spacing: -.025em;
+    color: #2E3C44;
+    margin: 0 0 (@padding-base / 2);
+    line-height: 1.2;
+    .font-smoothing();
+}
+h1 {
+    .font-size(64);
+    color: #3498DB;
+}
+
+// Paragraph and small
+p,
+small {
+    margin: 0 0 @padding-base;
+}
+small {
+    display: block;
+    padding: 0 (@padding-base / 2);
+    .font-size(14);
+}
+
+// Links
+a {
+    text-decoration: none;
+    color: @link-color;
+    border-bottom: 1px solid currentColor;
+    transition: background .3s ease, color .3s ease;
+
+    &:hover,
+    &:focus {
+        color: @gray-dark;
+    }
+    &:focus {
+        .tab-focus();
+    }
+    &.logo {
+        border: 0;
+    }
+}
\ No newline at end of file
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index 12b0674a..cea3a2af 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -2,239 +2,33 @@
 // HTML5 Video Player Demo Page
 // ==========================================================================
 
-// Reset
+// CSS Reset
 @import "lib/normalize.less";
+
 // Mixins
 @import "lib/mixins.less";
-// Fonts - docs only!
-@import "lib/fontface.less";
 
 // Variables
-// ---------------------------------------
-// Colors
-@blue:                      #3498db;
-@gray-dark:                 #343f4a;
-@gray:                      #565d64;
-@gray-light:                #cbd0d3;
-@off-white:                 #f2f5f7;
-
-// Elements
-@link-color:                @blue;
-@padding-base:              20px;
-@arrow-size:                8px;
-
-// Breakpoints
-@screen-md:                 768px;
-
-// BORDER-BOX ALL THE THINGS! 
-// http://paulirish.com/2012/box-sizing-border-box-ftw/
-*, *::after, *::before {  
-    box-sizing: border-box; 
-}
+@import "variables.less";
 
-// Base
-html {
-    font-size: 100%;
-}
-body {
-    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: @off-white;
-    line-height: 1.5;
-    text-align: center;
-    color: @gray;
-    .font-smoothing(on);
-}
+// Animation
+@import "lib/animation.less";
 
-// Error page
-html.error,
-.error body {
-    height: 100%;
-}
-.error body {
-    width: 100%;
-    display: table;
-    table-layout: fixed;
-}
-.error main {
-    display: table-cell;
-    width: 100%;
-    vertical-align: middle;
-}
+// Base layout
+@import "components/base.less";
 
 // Type
-h1,
-h2 {
-    letter-spacing: -.025em;
-    color: #2E3C44;
-    margin: 0 0 (@padding-base / 2);
-    line-height: 1.2;
-    .font-smoothing();
-}
-h1 {
-    .font-size(64);
-    color: #3498DB;
-}
-p,
-small {
-    margin: 0 0 @padding-base;
-}
-small {
-    display: block;
-    padding: 0 (@padding-base / 2);
-    .font-size(14);
-}
-
-// Header
-header {
-    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
-.actions {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    font-size: 0;
-
-    li {
-        display: inline-block;
-        margin-top: (@padding-base / 2);
-        .font-size();
-        white-space: nowrap;
-    }
-    li + li {
-        margin-left: @padding-base;
-    }
-}
-a {
-    text-decoration: none;
-    color: @link-color;
-    border-bottom: 1px solid currentColor;
-    transition: all .3s ease;
-
-    &:hover,
-    &:focus {
-        color: #000;
-    }
-    &:focus {
-        .tab-focus();
-    }
-    &.logo {
-        border: 0;
-    }
-}
-.btn,
-.btn-count {
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: 3px;
-    font-weight: 600;
-    user-select: none;
-}
-.btn {
-    padding: (@padding-base / 2) @padding-base;
-    background: @link-color;
-    border: 0;
-    color: #fff;
-    
-    &:hover,
-    &:focus {
-        color: #fff;
-        background: darken(@link-color, 5%);
-    }
-
-    &-twitter {
-        background: #8799A2;
-
-        &:hover,
-        &:focus {
-            background: darken(#8799A2, 5%);
-        }
-    }
-}
-.btn-count {
-    position: relative;
-    margin-left: 6px;
-    padding: ((@padding-base / 2) - 1px);
-    background: #fff;
-    border: 1px solid @gray-light;
-
-    &::before {
-        content: "";
-        position: absolute;
-        display: block;
-        width: @arrow-size;
-        height: @arrow-size;
-        left: 1px;
-        top: 50%;
-        margin-top: -(@arrow-size / 2);
-
-        background: inherit;
-        border: inherit;
-        border-width: 1px 0 0 1px;
-        transform: rotate(-45deg) translate(-50%, -50%);
-    }
-}
-
-// Example players
-.example-audio .player,
-.example-video .player {
-    margin: 0 auto @padding-base;
-
-    &-controls {
-        border-radius: 0 0 4px 4px;
-    }
-}
-.example-audio .player {
-    max-width: 520px;
+@import "lib/fontface.less";
+@import "components/type.less";
 
-    &-controls {
-        border-radius: 4px;
-    }
-    &-progress {
-        border-radius: 4px 4px 0 0;
-        overflow: hidden;
-    }
-}
-.example-video .player {
-    max-width: 1200px;
+// Buttons
+@import "components/buttons.less";
 
-    video,
-    iframe {
-        border-radius: 4px 4px 0 0;
-    }
-    iframe {
-        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-    }
-    &-fullscreen,
-    &.fullscreen-active {
-        max-width: none;
-    }
-}
+// Panels
+@import "components/panels.less";
 
-// Footer
-footer {
-    margin-bottom: @padding-base;
+// Error
+@import "components/error.less";
 
-    p {
-        margin-bottom: (@padding-base / 2);
-    }
-}
\ No newline at end of file
+// Examples
+@import "components/examples.less";
\ No newline at end of file
diff --git a/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less
new file mode 100644
index 00000000..386c6613
--- /dev/null
+++ b/docs/src/less/lib/animation.less
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Animations
+// ==========================================================================
+
+// Fade
+@keyframes fade-in {
+	0% 		{ opacity: 0 }
+	100% 	{ opacity: 1 }
+}
\ No newline at end of file
diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less
index 479f7fa4..9442f17d 100644
--- a/docs/src/less/lib/fontface.less
+++ b/docs/src/less/lib/fontface.less
@@ -1,16 +1,18 @@
+// ==========================================================================
+// Fonts
+// ==========================================================================
+
 @font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"), 
-            url("//cdn.plyr.io/fonts/avenir-medium.ttf")  format("truetype");
+            url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff");
     font-style:   normal;
     font-weight:  400;
 }
 @font-face {
     font-family: "Avenir";
     src:    url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), 
-            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"), 
-            url("//cdn.plyr.io/fonts/avenir-bold.ttf")  format("truetype");
+            url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff");
     font-style:   normal;
     font-weight:  600;
 }
\ No newline at end of file
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
new file mode 100644
index 00000000..4ea34d84
--- /dev/null
+++ b/docs/src/less/variables.less
@@ -0,0 +1,30 @@
+// ==========================================================================
+// Variables
+// ==========================================================================
+
+// Colors
+@blue:                      #3498db;
+@gray-dark:                 #343f4a;
+@gray:                      #55646b;
+@gray-light:                #cbd0d3;
+@gray-lighter:              #dbe3e8;
+@off-white:                 #f2f5f7;
+
+// Base
+@body-background: 			@off-white;
+
+// Elements
+@link-color:                @blue;
+@padding-base:              20px;
+@arrow-size:                8px;
+
+// Breakpoints
+@screen-sm:                 480px;
+@screen-md:                 768px;
+
+// Radii
+@border-radius-base: 		4px;
+
+// Examples
+@example-width-audio: 		520px;
+@example-width-video: 		1200px;
\ No newline at end of file