5 files changed, 19 insertions, 12 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index a1fb7f4c..7284250a 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -65,6 +65,9 @@ document.addEventListener('DOMContentLoaded', () => {
             'pip',
             'airplay',
         ],
+        keys: {
+            google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+        },
     });
 
     // Expose for testing
@@ -102,24 +105,24 @@ document.addEventListener('DOMContentLoaded', () => {
                     title: 'View From A Blue Moon',
                     sources: [
                         {
-                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
+                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',
                             type: 'video/mp4',
                         },
                     ],
-                    poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+                    poster: 'hmedia/View_From_A_Blue_Moon_Trailer-HD.jpg',
                     tracks: [
                         {
                             kind: 'captions',
                             label: 'English',
                             srclang: 'en',
-                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
                             default: true,
                         },
                         {
                             kind: 'captions',
                             label: 'French',
                             srclang: 'fr',
-                            src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+                            src: 'media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
                         },
                     ],
                 };
diff --git a/demo/src/less/components/players.less b/demo/src/less/components/players.less
index f932ae5b..c7cc0839 100644
--- a/demo/src/less/components/players.less
+++ b/demo/src/less/components/players.less
@@ -10,7 +10,7 @@ video {
 
 // Example players
 .plyr {
-    margin: 0 auto;
+    margin: @spacing-base auto;
     border-radius: @border-radius-base;
     box-shadow: 0 2px 5px fade(#000, 20%);
 }
diff --git a/demo/src/less/layout/core.less b/demo/src/less/layout/core.less
index a17a54a7..08352e3d 100644
--- a/demo/src/less/layout/core.less
+++ b/demo/src/less/layout/core.less
@@ -27,15 +27,18 @@ body {
     flex-direction: column;
 }
 
-main {
-    text-align: center;
-}
-
 .grid {
     flex: 1;
+    overflow: auto;
+}
+
+main {
+    margin: auto;
+    text-align: center;
 }
 
 aside {
+    position: relative;
     display: flex;
     flex-shrink: 0;
     align-items: center;
diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less
index c6720210..2ae6e8f4 100644
--- a/demo/src/less/lib/fontface.less
+++ b/demo/src/less/lib/fontface.less
@@ -4,7 +4,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
+    src: local('Avenir-Medium'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-base;
@@ -13,7 +13,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
+    src: local('Avenir-Heavy'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff');
     font-style: normal;
     font-weight: @font-weight-bold;
@@ -22,7 +22,7 @@
 
 @font-face {
     font-family: 'Avenir';
-    src: url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
+    src: local('Avenir-Black'), url('https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3') format('woff2'),
         url('https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3') format('woff');
     font-style: normal;
     font-weight: @font-weight-heavy;
diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less
index fbf36546..821d2b3e 100644
--- a/demo/src/less/lib/mixins.less
+++ b/demo/src/less/lib/mixins.less
@@ -33,6 +33,7 @@
 // ---------------------------------------
 .font-size(@font-size: 16) {
     @rem: round((@font-size / 16), 3);
+
     font-size: (@font-size * 1px);
     font-size: ~'@{rem}rem';
 }