Merge branch 'master' into develop

# Conflicts:
#	dist/plyr.css
#	dist/plyr.js
#	docs/dist/docs.css
#	docs/src/less/components/examples.less
#	src/js/plyr.js

3 files changed, 21 insertions, 11 deletions

diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less
index 81a68058..b4e5ddf1 100644
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@@ -8,17 +8,24 @@
     box-sizing: border-box; 
 }
 
+// Hidden
+[hidden] {
+    display: none;
+}
+
 // Base
 html {
+    height: 100%;
     font-size: 100%;
+    background: linear-gradient(#fff, @body-background) fixed;
 }
 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);
+    padding: 0 (@padding-base / 2);
 }
 
 // Header
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 749cd11f..68c1f5d3 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -25,6 +25,7 @@ nav {
 	position: relative;
 	margin: 0 auto @padding-base;
 	max-width: @example-width-video;
+	white-space: nowrap;
 
 	&::before {
 		content: "";
@@ -101,7 +102,8 @@ nav {
 	}
 }
 .btn-primary {
-	background: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
+	background-color: @link-color;
 	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);
@@ -123,7 +125,7 @@ nav {
 	position: relative;
 	margin-left: 6px;
 	padding: ((@padding-base / 2) - 1px);
-	background: @body-background;
+	background: #fff;
 	border: 1px solid @gray-light;
 
 	&::before {
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index d91bf727..97087b02 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -6,7 +6,6 @@
 .example-audio .player,
 .example-video .player {
     margin: 0 auto @padding-base;
-    box-shadow: 0 1px 1px rgba(0,0,0, .1);
 
     &-controls {
         border-radius: 0 0 @border-radius-base @border-radius-base;
@@ -31,29 +30,31 @@
     iframe {
         border-radius: @border-radius-base;
     }
+    iframe {
+        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+    }
 }
 
 // Style full supported player
 .example-video .player-video,
-.example-video .player-youtube,
-.example-video .player-vimeo {
+.example-video .player-youtube {
     video,
-    .player-video-wrapper {
+    iframe {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
-    .player-video-wrapper {
+    iframe {
         -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
     }
     &-fullscreen,
     &.fullscreen-active {
         max-width: none;
 
-        video,
         .player-controls,
-        .player-video-wrapper {
+        video,
+        iframe {
             border-radius: 0;
         }
-        .player-video-wrapper {
+        iframe {
             -webkit-mask-image: none;
         }
     }