@mmcc added a new default skin, switched to SASS, modified the html closes #1999

- removed old less style. no going back now. - switched back to video-js.scss naming and added a base-style injection class - cleaned up and simplified big play btn - Flexbox straight flexin. - move to using variables for text and icon font families - use table layout for IE 8 and 9 - moved to using extend for icons - Switched to SASS, added a new default theme, updated the html - added horizontal classes - added connect-watch grunt task - show all the things in the control bar so everything is available by default (and hidden via css - reignore dist for now - removing trailing comma to get the tests passing - Switched to using libsass and removed incompatible "black magic" - updating to es6 syntax - removed old separator, added grunt task for dev, and updated example - singular time-control and live-control. remove playing class on pause - updated separator control styles - Show full control bar when a player goes to fullscreen. Also added a grunt task specifically for skin development (only watches sass file changes and runs sass) - allow poster image to toggle playback - This allows the poster image to toggle play / pause on audio-only sources - fixed issue with scrollbars in Chrome on Linux - make the control bar not-quite-black - added back some focus highlights until we decide on another path
2024-12-25 02:42:10 +02:00 · 2015-04-28 09:44:47 -07:00 · 2015-04-28 09:44:47 -07:00 · 4ac762cf48
commit 4ac762cf48
parent c62aa10637
52 changed files with 1197 additions and 1315 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 .DS_Store
-dist/*
 build/files/*
 build/temp/*
 docs/api/*
@ -26,3 +25,6 @@ sandbox/*

 test/coverage/*
 .coveralls.yml
+.sass-cache
+
+dist/*
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -12,6 +12,7 @@ CHANGELOG
 * @heff converted all classes to use ES6 classes ([view](https://github.com/videojs/video.js/pull/1993))
 * @mmcc added ES6 default args and template strings ([view](https://github.com/videojs/video.js/pull/2015))
 * @dconnolly replaced JSON.parse with a safe non-eval JSON parse ([view](https://github.com/videojs/video.js/pull/2077))
+* @mmcc added a new default skin, switched to SASS, modified the html ([view](https://github.com/videojs/video.js/pull/1999))

 --------------------

--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -53,15 +53,27 @@ module.exports = function(grunt) {
    },
    dist: {},
    watch: {
-      files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ],
-      tasks: 'dev'
+      default: {
+        files: [ 'src/**/*', 'test/unit/**/*.js', 'Gruntfile.js' ],
+        tasks: 'dev'
+      },
+      skin: {
+        files: ['src/css/**/*'],
+        tasks: 'sass'
+      }
    },
    connect: {
-      dev: {
+      preview: {
        options: {
          port: 9999,
          keepalive: true
        }
+      },
+      dev: {
+        options: {
+          port: 9999,
+          livereload: true
+        }
      }
    },
    copy: {
@ -143,10 +155,10 @@ module.exports = function(grunt) {
        ext: '.min.css'
      }
    },
-    less: {
-      dev: {
+    sass: {
+      dist: {
        files: {
-          'build/temp/video-js.css': 'src/css/video-js.less'
+          'build/temp/video-js.css': 'src/css/video-js.scss'
        }
      }
    },
@ -308,7 +320,7 @@ module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
-  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-karma');
  grunt.loadNpmTasks('videojs-doc-generator');
  grunt.loadNpmTasks('grunt-zip');
@ -333,7 +345,7 @@ module.exports = function(grunt) {
    'concat:vtt',
    'exorcise',
    'uglify',
-    'less',
+    'sass',
    'version:css',
    'cssmin',
    'copy:fonts',
@ -362,7 +374,10 @@ module.exports = function(grunt) {
  grunt.registerTask('default', ['build', 'test']);

  // Development watch task. Doing the minimum required.
-  grunt.registerTask('dev', ['jshint', 'less', 'browserify', 'karma:chrome']);
+  grunt.registerTask('dev', ['connect:dev', 'jshint', 'sass', 'browserify', 'karma:chrome']);
+
+  // Skin development watch task.
+  grunt.registerTask('skin-dev', ['connect:dev', 'watch:skin']);

  // Tests.
  // We want to run things a little differently if it's coming from Travis vs local
--- a/docs/guides/skins.md
+++ b/docs/guides/skins.md
@ -1,28 +1,29 @@
 Skins
 =====

-The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
+The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding
+the styles you'd like to change.
+
+If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles
+enabled, you'll need to manually include them.

 ## Icons

-New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
-
-All of the icons are available as variables in the [LESS](https://github.com/videojs/video.js/blob/master/src/css/video-js.less#L87-L99) source, making it easy to replace icons (such as the loading spinner). The easiest way to try this out is by using the [player skin designer](http://designer.videojs.com/).
-
-![available icons](https://i.cloudup.com/wb51GGDDnJ.png)
+You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory.

 ## Customization

-When you create a new skin, you can either override styles in the default skin:
+When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the
+name of your theme, then just start overriding!

 ```css
-.vjs-default-skin .vjs-play-progress { background: #900; }
+.vjs-skin-hotdog-stand { color: #FF0000; }
+.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; }
+.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; }
 ```

-Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
-
-```html
-<video class="video-js my-custom-skin" ...>
-```
+This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), but you can skin any other aspect.
+Our suggestion is to use a browser such as Firefox and Chrome, and use the developer tools to inspect the different elements and see what you'd like to change and what classes
+to target when you do so.

 More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
--- a/package.json
+++ b/package.json
@ -52,6 +52,7 @@
    "grunt-fastly": "^0.1.3",
    "grunt-github-releaser": "^0.1.17",
    "grunt-karma": "^0.8.3",
+    "grunt-sass": "^0.18.1",
    "grunt-version": "~0.3.0",
    "grunt-videojs-languages": "0.0.4",
    "grunt-zip": "0.10.2",
--- a/sandbox/icons.html.example
+++ b/sandbox/icons.html.example
@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Icons Sandbox</title>
+
+  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">
+
+  <style>
+  .icon-list li span { font-size: 150% }
+  </style>
+</head>
+<body>
+  <h1>Video.js Icons</h1>
+  <p>This is a list of all of the icons available in the Video.js base stylesheet. The appropriate class is to the right of each icon.</p>
+
+  <ul class="icon-list">
+    <li><span class="vjs-icon-play"></span> <code>.vjs-icon-play</code></li>
+    <li><span class="vjs-icon-pause"></span> <code>.vjs-icon-pause</code></li>
+    <li><span class="vjs-icon-volume-mute"></span> <code>.vjs-icon-volume-mute</code></li>
+    <li><span class="vjs-icon-volume-low"></span> <code>.vjs-icon-volume-low</code></li>
+    <li><span class="vjs-icon-volume-mid"></span> <code>.vjs-icon-volume-mid</code></li>
+    <li><span class="vjs-icon-volume-high"></span> <code>.vjs-icon-volume-high</code></li>
+    <li><span class="vjs-icon-fullscreen-enter"></span> <code>.vjs-icon-fullscreen-enter</code></li>
+    <li><span class="vjs-icon-fullscreen-exit"></span> <code>.vjs-icon-fullscreen-exit</code></li>
+    <li><span class="vjs-icon-square"></span> <code>.vjs-icon-square</code></li>
+    <li><span class="vjs-icon-spinner"></span> <code>.vjs-icon-spinner</code></li>
+    <li><span class="vjs-icon-subtitles"></span> <code>.vjs-icon-subtitles</code></li>
+    <li><span class="vjs-icon-captions"></span> <code>.vjs-icon-captions</code></li>
+    <li><span class="vjs-icon-chapters"></span> <code>.vjs-icon-chapters</code></li>
+    <li><span class="vjs-icon-share"></span> <code>.vjs-icon-share</code></li>
+    <li><span class="vjs-icon-cog"></span> <code>.vjs-icon-cog</code></li>
+    <li><span class="vjs-icon-circle"></span> <code>.vjs-icon-circle</code></li>
+    <li><span class="vjs-icon-circle-outline"></span> <code>.vjs-icon-circle-outline</code></li>
+    <li><span class="vjs-icon-circle-inner-circle"></span> <code>.vjs-icon-circle-inner-circle</code></li>
+  </ul>
+</body>
+</html>
--- a/sandbox/index.html.example
+++ b/sandbox/index.html.example
@ -6,12 +6,11 @@

  <link href="../build/temp/video-js.css" rel="stylesheet" type="text/css">

-  <!-- LOAD VIDEO.JS SOURCE FILES IN ORDER -->
  <script src="../build/temp/video.js"></script>

  <!-- Set the location of the flash SWF -->
  <script>
-    vjs.options.flash.swf = '../build/temp/video-js.swf'
+    videojs.options.flash.swf = '../build/temp/video-js.swf';
  </script>

 </head>
--- a/src/css/_utilities.scss
+++ b/src/css/_utilities.scss
@ -0,0 +1,95 @@
+@mixin background-color-with-alpha($color, $alpha) {
+  background-color: $color;
+  background-color: rgba($color, $alpha);
+}
+
+@mixin transition($string: $transition--default) {
+  -webkit-transition: $string;
+  -moz-transition: $string;
+  -o-transition: $string;
+  transition: $string;
+}
+
+@mixin hide-visually {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin animation($string: spin 1s infinite linear) {
+  -webkit-animation: $string;
+  -moz-animation: $string;
+  -o-animation: $string;
+  animation: $string;
+}
+
+@mixin display-flex($alignment: '', $justification: '') {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+
+  @if $alignment != '' {
+    -webkit-box-align: $alignment;
+    -webkit-align-items: $alignment;
+    -ms-flex-align: $alignment;
+    align-items: $alignment;
+  }
+
+  @if $justification != '' {
+    -webkit-box-pack: $justification;
+    -webkit-justify-content: $justification;
+    -ms-flex-pack: $justification;
+    justify-content: $justification;
+  }
+}
+
+@mixin flex($value) {
+  // @include context('.video-js', '.video-js.vjs-no-flex') {
+  //   display: table-cell;
+  //   vertical-align: middle;
+  //   @if ($value == 'auto') {
+  //     width: auto;
+  //   }
+  // }
+
+  -webkit-box-flex: $value;
+  -moz-box-flex: $value;
+  -webkit-flex: $value;
+  -ms-flex: $value;
+  flex: $value;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
+@mixin user-select($string: none) {
+  -webkit-user-select: $string;
+  -moz-user-select: $string;
+  -ms-user-select: $string;
+  user-select: $string
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+@mixin box-shadow ($string: 0 0 1em rgba(0, 0, 0, 0.25)) {
+  -webkit-box-shadow: $string;
+  -moz-box-shadow: $string;
+  box-shadow: $string;
+}
+
+@mixin order($value) {
+  -webkit-box-ordinal-group: $value;
+  -moz-box-ordinal-group: $value;
+  -ms-flex-order: $value;
+  -webkit-order: $value;
+  order: $value;
+}
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@ -0,0 +1,12 @@
+$primary-text: #fff;
+$secondary-text: #F4A460; // currently just used for visited links in errors and such.
+
+$primary-bg: #000;
+$secondary-bg: lighten($primary-bg, 35%);
+
+$icon-font-family: 'VideoJS';
+$text-font-family: Arial, sans-serif;
+$base-font-size: 10px;
+
+$control-bar-bg: #2B333F;
+$control-bar-transparency: 0.5;
--- a/src/css/components/_adaptive.scss
+++ b/src/css/components/_adaptive.scss
@ -0,0 +1,37 @@
+// When the player is absurdly tiny, display nothing but:
+// - Play button
+// - Fullscreen Button
+.video-js.vjs-layout-tiny:not(.vjs-fullscreen) {
+  .vjs-custom-control-spacer { @include flex(auto); }
+  &.vjs-no-flex .vjs-custom-control-spacer { width: auto; }
+
+  .vjs-current-time, .vjs-captions-button, .vjs-time-divider,
+  .vjs-progress-control, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate,
+  .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, .vjs-captions-button,
+  .vjs-subtitles-button, .vjs-volume-menu-button { display: none; }
+}
+
+// When the player is x-small, display nothing but:
+// - Play button
+// - Progress bar
+// - Fullscreen Button
+.video-js.vjs-layout-x-small:not(.vjs-fullscreen) {
+  .vjs-current-time, .vjs-captions-button, .vjs-time-divider,
+  .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-captions-button,
+  .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button,
+  .vjs-subtitles-button, .vjs-volume-button, .vjs-fullscreen-control { display: none; }
+}
+
+
+// When the player is small, display nothing but:
+// - Play button
+// - Progress bar
+// - Volume menu button
+// - Captions Button
+// - Fullscreen button
+.video-js.vjs-layout-small:not(.vjs-fullscreen) {
+  .vjs-current-time, .vjs-captions-button, .vjs-time-divider,
+  .vjs-duration, .vjs-remaining-time, .vjs-playback-rate,
+  .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button,
+  .vjs-subtitles-button { display: none; }
+}
--- a/src/css/components/_big-play.scss
+++ b/src/css/components/_big-play.scss
@ -0,0 +1,40 @@
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  line-height: 1em;
+  display: block;
+  z-index: 2;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 0.2em 1em;
+  cursor: pointer;
+  opacity: 1;
+  border: 2px solid $primary-text;
+
+  /* Need a slightly gray bg so it can be seen on black backgrounds *///
+  @include background-color-with-alpha($primary-bg, 0.8);
+  @include border-radius(0.3em);
+  @include transition(all 0.4s);
+
+  @extend .vjs-icon-play;
+}
+
+/* Hide if controls are disabled, the video is playing, or native controls are used. */
+.video-js.vjs-controls-disabled .vjs-big-play-button,
+.video-js.vjs-has-started .vjs-big-play-button,
+.video-js.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  outline: 0;
+  border-color: $primary-text;
+
+  @include background-color-with-alpha($secondary-bg, 0.75);
+  @include transition(all 0s);
+}
+
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
--- a/src/css/components/_captions.scss
+++ b/src/css/components/_captions.scss
@ -0,0 +1,3 @@
+.video-js .vjs-captions-button {
+  @extend .vjs-icon-captions;
+}
--- a/src/css/components/_chapters.scss
+++ b/src/css/components/_chapters.scss
@ -0,0 +1,12 @@
+.video-js .vjs-chapters-button {
+  @extend .vjs-icon-chapters;
+}
+
+.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu {
+  left: 2em;
+}
+
+.video-js .vjs-chapters-button.vjs-menu-button .vjs-menu .vjs-menu-content {
+  width: 24em;
+  left: -12em;
+}
--- a/src/css/components/_control-bar.scss
+++ b/src/css/components/_control-bar.scss
@ -0,0 +1,57 @@
+.video-js .vjs-control-bar {
+  display: none;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3.0em;
+
+  @include background-color-with-alpha($control-bar-bg, $control-bar-transparency);
+}
+
+// Video has started playing
+.video-js.vjs-has-started .vjs-control-bar {
+  @include display-flex;
+  visibility: visible;
+  opacity: 1;
+
+  $trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
+  @include transition($trans);
+}
+
+// Video has started playing AND user is inactive
+.video-js.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  visibility: hidden;
+  opacity: 0;
+
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+
+.video-js.vjs-controls-disabled .vjs-control-bar,
+.video-js.vjs-using-native-controls .vjs-control-bar,
+.video-js.vjs-error .vjs-control-bar {
+  display: none;
+}
+
+// Don't hide the control bar if it's audio
+.video-js.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* IE8 is flakey with fonts, and you have to change the actual content to force
+fonts to show/hide properly.
+- "\9" IE8 hack didn't work for this
+- Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
+*/
+$ie8screen: "\0screen";
+.video-js.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
+  @media #{$ie8screen} { content: ""; }
+}
+
+/* IE 8 + 9 Support */
+.video-js.vjs-has-started.vjs-no-flex .vjs-control-bar {
+  display: table;
+}
--- a/src/css/components/_control.scss
+++ b/src/css/components/_control.scss
@ -0,0 +1,39 @@
+.video-js .vjs-control {
+  outline: none;
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 4em;
+  @include flex(none);
+}
+
+.video-js .vjs-control:before {
+  font-size: 1.8em;
+  line-height: 1.67;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+/* Replacement for focus outline */
+.video-js .vjs-control:focus:before,
+.video-js .vjs-control:hover:before,
+.video-js .vjs-control:focus {
+  text-shadow: 0em 0em 1em rgba($primary-text, 1);
+}
+
+/* Hide control text visually, but have it available for screenreaders */
+.video-js .vjs-control-text {
+  @include hide-visually;
+}
+
+/* IE 8 + 9 Support */
+.vjs-no-flex .vjs-control {
+  display: table-cell;
+  vertical-align: middle;
+}
--- a/src/css/components/_error.scss
+++ b/src/css/components/_error.scss
@ -0,0 +1,47 @@
+.vjs-error-display {
+  display: none;
+}
+
+.vjs-error .vjs-error-display {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-error .vjs-error-display:before {
+  content: 'X';
+  font-family: $text-font-family;
+  font-size: 4em;
+  color: $secondary-bg;
+  /* In order to center the play icon vertically we need to set the line height
+  to the same as the button height */
+  line-height: 1;
+  text-shadow: 0.05em 0.05em 0.1em $primary-bg;
+  text-align: center /* Needed for IE8 */;
+  vertical-align: middle;
+
+  position: absolute;
+  left: 0;
+  top: 50%;
+  margin-top: -0.5em;
+  width: 100%;
+}
+
+.vjs-error-display div {
+  position: absolute;
+  bottom: 1em;
+  right: 0;
+  left: 0;
+  font-size: 1.4em;
+  text-align: center;
+  padding: 3px;
+
+  @include background-color-with-alpha($primary-bg, 0.5);
+}
+
+.vjs-error-display a, .vjs-error-display a:visited {
+  color: $secondary-text;
+}
--- a/src/css/components/_fullscreen.scss
+++ b/src/css/components/_fullscreen.scss
@ -0,0 +1,12 @@
+.video-js .vjs-fullscreen-control {
+  width: 3.8em;
+  cursor: pointer;
+  @include flex(none);
+}
+.video-js .vjs-fullscreen-control {
+  @extend .vjs-icon-fullscreen-enter;
+}
+/* Switch to the exit icon when the player is in fullscreen */
+.video-js.vjs-fullscreen .vjs-fullscreen-control {
+  @extend .vjs-icon-fullscreen-exit;
+}
--- a/src/css/components/_icons.scss
+++ b/src/css/components/_icons.scss
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@ -0,0 +1,92 @@
+.video-js {
+  display: border-box;
+  color: $primary-text;
+  background-color: $primary-bg;
+  position: relative;
+  padding: 0;
+  /* Start with 10px for base font size so other dimensions can be em based and
+  easily calculable. */
+  font-size: $base-font-size;
+  /* Allow poster to be vertially aligned. */
+  vertical-align: middle;
+
+  /* Provide some basic defaults for fonts */
+  font-weight: normal;
+  font-style: normal;
+  /* Avoiding helvetica: issue #376 */
+  font-family: $text-font-family;
+
+  @include user-select(none);
+
+  /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
+  checking fullScreenEnabled. */
+  &:-moz-full-screen { position: absolute; }
+
+  &:-webkit-full-screen {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+/* Playback technology elements expand to the width/height of the containing div
+<video> or <object> */
+.video-js .vjs-tech {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Fullscreen Styles */
+body.vjs-full-window {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+  overflow-y: auto;
+}
+.video-js.vjs-fullscreen {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+
+/* Hide disabled or unsupported controls. */
+.vjs-hidden { display: none !important; }
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
+}
+
+/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
+The .video-js classname on the video tag also isn't considered.
+This optional paragraph inside the video tag can provide a message to users
+about what's required to play video. */
+.vjs-no-js {
+  padding: 20px;
+  color: $primary-text;
+  background-color: $primary-bg;
+  font-size: 18px;
+  font-family: $text-font-family;
+  text-align: center;
+  width: 300px;
+  height: 150px;
+  margin: 0px auto;
+}
+
+.vjs-no-js a, .vjs-no-js a:visited {
+  color: $secondary-text;
+}
--- a/src/css/components/_live.scss
+++ b/src/css/components/_live.scss
@ -0,0 +1,11 @@
+.video-js.vjs-live .vjs-time-control,
+.video-js.vjs-live .vjs-time-divider,
+.video-js.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+.video-js .vjs-live-control {
+  display: none;
+  font-size: 1em;
+  line-height: 3em;
+}
--- a/src/css/components/_loading.scss
+++ b/src/css/components/_loading.scss
@ -0,0 +1,64 @@
+.vjs-loading-spinner {
+  display: none;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  font-size: 4em;
+  line-height: 1;
+
+  width: 1em;
+  height: 1em;
+
+  margin-left: -0.5em;
+  margin-top: -0.5em;
+
+  opacity: 0.75;
+
+  @extend .vjs-icon-spinner;
+}
+
+/* Show the spinner when waiting for data and seeking to a new time */
+.vjs-waiting .vjs-loading-spinner,
+.vjs-seeking .vjs-loading-spinner {
+  display: block;
+
+  /* only animate when showing because it can be processor heavy *///
+  @include animation(spin 1.5s infinite linear);
+}
+
+/* Errors are unrecoverable without user interaction so hide the spinner */
+.vjs-error .vjs-loading-spinner {
+  display: none;
+
+  /* ensure animation doesn't continue while hidden *///
+  @include animation(none);
+}
+
+.video-js .vjs-loading-spinner:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1em;
+  height: 1em;
+  text-align: center;
+  text-shadow: 0em 0em 0.1em $primary-bg;
+}
+
+@-moz-keyframes spin {
+  0% { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(359deg); }
+}
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(359deg); }
+}
+@-o-keyframes spin {
+  0% { -o-transform: rotate(0deg); }
+  100% { -o-transform: rotate(359deg); }
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(359deg); }
+}
--- a/src/css/components/_menu.scss
+++ b/src/css/components/_menu.scss
@ -0,0 +1,69 @@
+.video-js .vjs-menu-button {
+  cursor: pointer;
+}
+
+.video-js .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: -3em; /* (Width of vjs-menu - width of button) / 2 */
+  width: 0em;
+  height: 0em;
+  margin-bottom: 1.5em;
+  border-top-color: rgba(7, 40, 50, $control-bar-transparency); /* Same as ul background */
+}
+
+/* Button Pop-up Menu */
+.video-js .vjs-menu-content {
+  @include background-color-with-alpha($primary-bg, 0.7);
+}
+
+.video-js .vjs-menu-button .vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0; margin: 0;
+  position: absolute;
+  width: 10em;
+  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+  max-height: 15em;
+  overflow: auto;
+}
+
+.video-js .vjs-menu-button:hover .vjs-control-content .vjs-menu,
+.video-js .vjs-control-content .vjs-menu.vjs-lock-showing {
+  display: block;
+}
+/* prevent menus from opening while scrubbing (FF, IE) */
+.video-js.vjs-scrubbing .vjs-menu-button:hover .vjs-control-content .vjs-menu {
+  display: none;
+}
+.video-js .vjs-menu-button ul li {
+  list-style: none;
+  margin: 0;
+  padding: 0.2em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+.video-js .vjs-menu-button ul li.vjs-selected {
+  background-color: $primary-bg;
+}
+.video-js .vjs-menu-button ul li:focus,
+.video-js .vjs-menu-button ul li:hover,
+.video-js .vjs-menu-button ul li.vjs-selected:focus,
+.video-js .vjs-menu-button ul li.vjs-selected:hover {
+  outline: 0;
+  color: $primary-bg;
+
+  @include background-color-with-alpha($primary-text, 0.75);
+}
+.video-js .vjs-menu-button ul li.vjs-menu-title {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 1em;
+  line-height: 2em;
+  padding: 0;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  cursor: default;
+}
--- a/src/css/components/_play-pause.scss
+++ b/src/css/components/_play-pause.scss
@ -0,0 +1,11 @@
+.video-js .vjs-play-control {
+  width: 5em;
+  cursor: pointer;
+  @include flex(none);
+}
+.video-js .vjs-play-control {
+  @extend .vjs-icon-play;
+}
+.video-js.vjs-playing .vjs-play-control {
+  @extend .vjs-icon-pause;
+}
--- a/src/css/components/_playback-rate.scss
+++ b/src/css/components/_playback-rate.scss
@ -0,0 +1,20 @@
+// TODO: I feel like this should be a generic menu. Research later.
+.video-js .vjs-playback-rate .vjs-playback-rate-value {
+  font-size: 1.5em;
+  line-height: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.video-js .vjs-playback-rate .vjs-menu {
+  left: 0em;
+}
+.video-js .vjs-playback-rate.vjs-menu-button .vjs-menu .vjs-menu-content {
+  width: 4em;
+  left: 0;
+  list-style: none;
+}
--- a/src/css/components/_poster.scss
+++ b/src/css/components/_poster.scss
@ -0,0 +1,41 @@
+.vjs-poster {
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.vjs-poster img {
+  display: block;
+  margin: 0 auto;
+  max-height: 100%;
+  padding: 0;
+  width: 100%;
+}
+
+/* Hide the poster after the video has started playing */
+.video-js.vjs-has-started .vjs-poster {
+  display: none;
+}
+
+/* Don't hide the poster if we're playing audio */
+.video-js.vjs-audio.vjs-has-started .vjs-poster {
+  display: block;
+}
+
+/* Hide the poster when controls are disabled because it's clickable
+and the native poster can take over */
+.video-js.vjs-controls-disabled .vjs-poster {
+  display: none;
+}
+
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
--- a/src/css/components/_progress.scss
+++ b/src/css/components/_progress.scss
@ -0,0 +1,50 @@
+.video-js .vjs-progress-control {
+  @include flex(auto);
+  @include display-flex(center);
+}
+
+/* Box containing play and load progresses. Also acts as seek scrubber. */
+.video-js .vjs-progress-holder {
+  @include flex(auto);
+  height: 0.3em;
+}
+
+/* Progress Bars */
+.video-js .vjs-progress-holder .vjs-play-progress,
+.video-js .vjs-progress-holder .vjs-load-progress,
+.video-js .vjs-progress-holder .vjs-load-progress div {
+  position: absolute;
+  display: block;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* updated by javascript during playback */
+  width: 0;
+  /* Needed for IE6 *///
+  left: 0;
+  top: 0;
+}
+
+.video-js .vjs-play-progress {
+  background-color: $primary-text;
+}
+.video-js .vjs-load-progress {
+  background: rgb(100, 100, 100) /* IE8- Fallback */;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* there are child elements of the load progress bar that represent the
+specific time ranges that have been buffered */
+.video-js .vjs-load-progress div {
+  background: rgba($secondary-bg, 0.1);
+}
+
+.video-js .vjs-slider-handle.vjs-seek-handle {
+  width: 0.95em;
+  height: 0.95em;
+}
+
+
+.video-js.vjs-no-flex .vjs-progress-control {
+  width: auto;
+}
--- a/src/css/components/_slider.scss
+++ b/src/css/components/_slider.scss
@ -0,0 +1,39 @@
+.video-js .vjs-slider {
+  outline: 0;
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+
+  @include background-color-with-alpha($secondary-bg, 0.9);
+}
+
+.video-js .vjs-slider:focus {
+  text-shadow: 0em 0em 1em rgba($primary-text, 1);
+
+  @include box-shadow(0 0 1em $primary-text);
+}
+
+.video-js .vjs-slider-handle {
+  position: absolute;
+  @extend .vjs-icon-circle;
+}
+
+.video-js .vjs-slider-horizontal .vjs-slider-handle {
+  left: 0;
+  top: -0.34em;
+}
+
+.video-js .vjs-slider-vertical .vjs-slider-handle {
+  left: -0.3em;
+  bottom: 0;
+}
+
+.video-js .vjs-slider-handle:before {
+  font-size: 1em;
+  line-height: 1;
+  text-align: center;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
--- a/src/css/components/_subtitles.scss
+++ b/src/css/components/_subtitles.scss
@ -0,0 +1,3 @@
+.video-js .vjs-subtitles-button {
+  @extend .vjs-icon-subtitles;
+}
--- a/src/css/components/_text-track.scss
+++ b/src/css/components/_text-track.scss
@ -0,0 +1,26 @@
+.video-js .vjs-text-track-display {
+  text-align: center;
+  position: absolute;
+  bottom: 4em;
+  /* Leave padding on left and right */
+  left: 1em;
+  right: 1em;
+}
+
+/* Move captions down when controls aren't being shown */
+.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
+  bottom: 1em;
+}
+
+/* Individual tracks */
+.video-js .vjs-text-track {
+  font-size: 1.4em;
+  text-align: center;
+  margin-bottom: 0.1em;
+  /* Transparent black background, or fallback to all black (oldIE) */
+  @include background-color-with-alpha($primary-bg, 0.5);
+}
+
+.video-js .vjs-subtitles { color: #fff /* Subtitles are white */; }
+.video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
+.vjs-tt-cue { display: block; }
--- a/src/css/components/_time.scss
+++ b/src/css/components/_time.scss
@ -0,0 +1,11 @@
+.video-js .vjs-time-control {
+  @include flex(none);
+  font-size: 1em;
+  line-height: 3em;
+}
+
+/* We need the extra specificity that referencing .vjs-no-flex provides. */
+.video-js .vjs-current-time, .video-js.vjs-no-flex .vjs-current-time { display: none; }
+.video-js .vjs-duration, .video-js.vjs-no-flex .vjs-duration { display: none; }
+.video-js .vjs-remaining-time, .video-js.vjs-no-flex .vjs-remaining-time { display: none; }
+.vjs-time-divider { display: none; line-height: 3em; }
--- a/src/css/components/_volume.scss
+++ b/src/css/components/_volume.scss
@ -0,0 +1,104 @@
+.video-js .vjs-mute-control,
+.video-js .vjs-volume-menu-button {
+  cursor: pointer;
+  @include flex(none);
+  @extend .vjs-icon-volume-high;
+}
+
+.video-js .vjs-mute-control.vjs-vol-0,
+.video-js .vjs-volume-menu-button.vjs-vol-0 {
+  @extend .vjs-icon-volume-mute;
+}
+.video-js .vjs-mute-control.vjs-vol-1,
+.video-js .vjs-volume-menu-button.vjs-vol-1 {
+  @extend .vjs-icon-volume-low;
+}
+.video-js .vjs-mute-control.vjs-vol-2,
+.video-js .vjs-volume-menu-button.vjs-vol-2 {
+  @extend .vjs-icon-volume-mid;
+}
+
+.video-js .vjs-volume-control {
+  width: 5em;
+  @include flex(none);
+  @include display-flex(center);
+}
+
+.video-js .vjs-volume-bar.vjs-slider-horizontal {
+  width: 5em;
+  height: 0.3em;
+}
+
+.video-js .vjs-volume-bar.vjs-slider-vertical {
+  width: 0.3em;
+  height: 5em;
+  margin: 1.3em;
+}
+
+.video-js .vjs-volume-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  background-color: $primary-text;
+}
+
+.video-js .vjs-slider-vertical .vjs-volume-level { width: 0.3em; }
+.video-js .vjs-slider-horizontal .vjs-volume-level { height: 0.3em; }
+
+.video-js .vjs-volume-bar .vjs-volume-handle {
+  width: 0.8em;
+  height: 0.8em;
+}
+
+/* Assumes volume starts at 1.0. If you change the size of the
+handle relative to the volume bar, you'll need to update this value
+too. */
+.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { height: 100%; }
+.video-js .vjs-volume-bar.vjs-slider-vertical .vjs-volume-handle { bottom: 4.3em; }
+.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { width: 100%; }
+.video-js .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-handle { left: 4.3em; }
+
+.video-js .vjs-volume-handle:before {
+  font-size: 0.9em;
+}
+
+/* The volume menu button is like menu buttons (captions/subtitles) but works
+a little differently. It needs to be possible to tab to the volume slider
+without hitting space bar on the menu button. To do this we're not using
+display:none to hide the slider menu by default, and instead setting the
+width and height to zero. */
+.video-js .vjs-volume-menu-button .vjs-menu {
+  display: block;
+  width: 0;
+  height: 0;
+  left: 0.5em;
+  border-top-color: transparent;
+}
+
+.video-js .vjs-menu-button.vjs-volume-menu-button .vjs-menu .vjs-menu-content {
+  height: 0;
+  width: 0;
+
+  // Avoids unnecessary scrollbars in the menu content. Primarily noticed in Chrome on Linux.
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.video-js .vjs-volume-menu-button:hover .vjs-menu,
+.video-js .vjs-volume-menu-button .vjs-menu.vjs-lock-showing {
+  // border-top-color: rgba(7, 40, 50, 0.5); /* Same as ul background */
+}
+
+.video-js .vjs-volume-menu-button:hover .vjs-menu .vjs-menu-content,
+.video-js .vjs-volume-menu-button .vjs-menu.vjs-lock-showing .vjs-menu-content {
+  height: 8em;
+  width: 2.9em;
+}
+
+// By default, all menu items are shown, but we hide .vjs-mute-control and .vjs-volume-control
+// so that the volume menu button is the only visible volume control.
+.video-js .vjs-mute-control,
+.video-js .vjs-volume-control {
+  display: none;
+}
--- a/src/css/font/VideoJS.eot
+++ b/src/css/font/VideoJS.eot
--- a/src/css/font/VideoJS.svg
+++ b/src/css/font/VideoJS.svg
@ -0,0 +1,40 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="VideoJS" horiz-adv-x="512">
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
+<glyph unicode="&#x25b6;" d="M170.667 373.334v-298.666l234.667 149.333z" />
+<glyph unicode="&#xe601;" d="M405.334 373.334v-298.666h-298.666v298.666h298.666zM405.334 416h-298.666c-23.573 0-42.666-19.094-42.666-42.666v-298.666c0-23.574 19.093-42.666 42.666-42.666h298.666c23.574 0 42.666 19.094 42.666 42.666v298.666c0 23.574-19.094 42.666-42.666 42.666z" />
+<glyph unicode="&#xe603;" d="M256 330.667c-58.88 0-106.666-47.787-106.666-106.667s47.786-106.666 106.666-106.666 106.666 47.786 106.666 106.666-47.786 106.666-106.666 106.666zM256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM256 53.334c-94.293 0-170.667 76.373-170.667 170.667s76.374 170.667 170.667 170.667 170.667-76.374 170.667-170.667-76.374-170.667-170.667-170.667z" />
+<glyph unicode="&#xe61a;" d="M384 136.853c-16.214 0-30.827-6.293-41.92-16.426l-152 88.64c1.173 4.8 1.92 9.813 1.92 14.934s-0.746 10.133-1.92 14.934l150.4 87.786c11.413-10.666 26.666-17.28 43.52-17.28 35.307 0 64 28.693 64 64s-28.693 64-64 64-64-28.694-64-64c0-5.12 0.747-10.134 1.92-14.934l-150.4-87.786c-11.413 10.666-26.667 17.28-43.52 17.28-35.306 0-64-28.693-64-64s28.694-64 64-64c16.853 0 32.106 6.613 43.52 17.28l152-88.64c-1.067-4.48-1.707-9.173-1.707-13.974 0-34.346 27.84-62.187 62.187-62.187s62.187 27.84 62.187 62.187-27.84 62.187-62.187 62.187z" />
+<glyph unicode="&#xe64b;" d="M149.333 181.334h-42.666v-106.666h106.666v42.666h-64v64zM106.666 266.667h42.666v64h64v42.666h-106.666v-106.666zM362.666 117.334h-64v-42.666h106.666v106.666h-42.666v-64zM298.666 373.334v-42.666h64v-64h42.666v106.666h-106.666z" />
+<glyph unicode="&#xe64c;" d="M106.666 138.666h64v-64h42.666v106.666h-106.666v-42.666zM170.667 309.333h-64v-42.666h106.667v106.666h-42.666v-64zM298.666 74.666h42.666v64h64v42.666h-106.666v-106.666zM341.334 309.333v64h-42.666v-106.666h106.666v42.666h-64z" />
+<glyph unicode="&#xe650;" d="M376.534 344.534c-30.827 30.933-73.387 50.134-120.534 50.134-94.293 0-170.453-76.374-170.453-170.667s76.16-170.667 170.453-170.667c79.466 0 146.026 54.4 164.906 128h-44.373c-17.6-49.707-64.746-85.334-120.534-85.334-70.72 0-128 57.28-128 128s57.28 128 128 128c35.307 0 66.986-14.72 90.134-37.867l-68.8-68.8h149.334v149.333l-50.134-50.133z" />
+<glyph unicode="&#xe692;" d="M469.334 224c0-117.82-95.512-213.333-213.334-213.333s-213.333 95.512-213.333 213.333c0 117.821 95.513 213.333 213.333 213.333s213.333-95.512 213.333-213.333z" />
+<glyph unicode="&#xe6e2;" d="M256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333z" />
+<glyph unicode="&#xe6f2;" d="M256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM256 53.334c-94.080 0-170.667 76.587-170.667 170.667s76.587 170.667 170.667 170.667 170.667-76.587 170.667-170.667-76.587-170.667-170.667-170.667z" />
+<glyph unicode="&#xe713;" d="M448 416h-384c-23.573 0-42.666-19.094-42.666-42.666v-64h42.666v64h384v-298.666h-149.333v-42.666h149.333c23.574 0 42.666 19.094 42.666 42.666v298.666c0 23.574-19.094 42.666-42.666 42.666zM21.334 96v-64h64c0 35.307-28.694 64-64 64zM21.334 181.334v-42.666c58.88 0 106.666-47.786 106.666-106.666h42.666c0 82.454-66.88 149.334-149.333 149.334zM21.334 266.667v-42.667c106.026 0 192-85.974 192-192h42.666c0 129.6-105.067 234.667-234.667 234.667z" />
+<glyph unicode="&#xe80d;" d="M426.666 394.666h-341.334c-23.573 0-42.666-19.094-42.666-42.666v-256c0-23.574 19.093-42.666 42.666-42.666h341.334c23.574 0 42.666 19.094 42.666 42.666v256c0 23.573-19.094 42.666-42.666 42.666zM85.334 224h85.334v-42.666h-85.334v42.666zM298.666 96h-213.333v42.666h213.333v-42.666zM426.666 96h-85.334v42.666h85.334v-42.666zM426.666 181.334h-213.333v42.666h213.333v-42.666z" />
+<glyph unicode="&#xe81e;" d="M405.334 394.666h-298.666c-23.573 0-42.666-19.094-42.666-42.666v-256c0-23.574 19.093-42.666 42.666-42.666h298.666c23.574 0 42.666 19.094 42.666 42.666v256c0 23.573-19.094 42.666-42.666 42.666zM234.667 245.333h-32v10.667h-42.667v-64h42.666v10.666h32v-21.334c0-11.733-9.494-21.334-21.334-21.334h-64c-11.84 0-21.334 9.6-21.334 21.334v85.334c0 11.733 9.493 21.334 21.334 21.334h64c11.84 0 21.334-9.6 21.334-21.334v-21.334zM384 245.333h-32v10.667h-42.666v-64h42.666v10.666h32v-21.334c0-11.733-9.493-21.334-21.334-21.334h-64c-11.84 0-21.334 9.6-21.334 21.334v85.334c0 11.733 9.493 21.334 21.334 21.334h64c11.84 0 21.334-9.6 21.334-21.334v-21.334z" />
+<glyph unicode="&#xe821;" d="M85.334 96l181.333 128-181.333 128v-256zM277.334 352v-256l181.334 128-181.333 128z" />
+<glyph unicode="&#xe822;" d="M234.667 96v256l-181.333-128 181.333-128zM245.333 224l181.333-128v256l-181.333-128z" />
+<glyph unicode="&#xe825;" d="M405.334 394.666h-298.666c-23.573 0-42.666-19.094-42.666-42.666v-256c0-23.574 19.093-42.666 42.666-42.666h298.666c23.574 0 42.666 19.094 42.666 42.666v256c0 23.573-19.094 42.666-42.666 42.666zM234.667 160h-32v42.666h-42.667v-42.666h-32v128h32v-53.334h42.666v53.334h32v-128zM384 181.334c0-11.733-9.493-21.334-21.334-21.334h-16v-32h-32v32h-16c-11.84 0-21.334 9.6-21.334 21.334v85.334c0 11.733 9.493 21.334 21.334 21.334h64c11.84 0 21.334-9.6 21.334-21.334v-85.334zM309.334 192h42.666v64h-42.666v-64z" />
+<glyph unicode="&#xe830;" d="M128 74.666h85.334v298.666h-85.334v-298.666zM298.666 373.334v-298.666h85.334v298.666h-85.334z" />
+<glyph unicode="&#xe831;" d="M256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM234.667 138.666h-42.667v170.666h42.666v-170.666zM320 138.666h-42.666v170.666h42.666v-170.666z" />
+<glyph unicode="&#xe832;" d="M192 138.666h42.666v170.666h-42.666v-170.666zM256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM256 53.334c-94.080 0-170.667 76.587-170.667 170.667s76.587 170.667 170.667 170.667 170.667-76.587 170.667-170.667-76.587-170.667-170.667-170.667zM277.334 138.666h42.666v170.666h-42.666v-170.666z" />
+<glyph unicode="&#xe834;" d="M256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM213.333 128v192l128-96-128-96z" />
+<glyph unicode="&#xe835;" d="M213.333 128l128 96-128 96v-192zM256 437.334c-117.867 0-213.333-95.466-213.333-213.334s95.466-213.333 213.333-213.333 213.333 95.466 213.333 213.333-95.466 213.333-213.333 213.333zM256 53.334c-94.080 0-170.667 76.587-170.667 170.667s76.587 170.667 170.667 170.667 170.667-76.587 170.667-170.667-76.587-170.667-170.667-170.667z" />
+<glyph unicode="&#xe840;" d="M128 96l181.333 128-181.333 128v-256zM341.334 352v-256h42.666v256h-42.666z" />
+<glyph unicode="&#xe841;" d="M128 352h42.666v-256h-42.666zM202.667 224l181.333-128v256z" />
+<glyph unicode="&#xe849;" d="M394.666 224c0 37.654-21.76 70.187-53.334 85.866v-171.84c31.574 15.786 53.334 48.32 53.334 85.974zM106.666 288v-128h85.334l106.666-106.666v341.334l-106.666-106.666h-85.334z" />
+<glyph unicode="&#xe84a;" d="M149.333 288v-128h85.333l106.666-106.666v341.334l-106.666-106.666h-85.334z" />
+<glyph unicode="&#xe84b;" d="M352 224c0 37.654-21.76 70.187-53.334 85.866v-47.146l52.373-52.374c0.64 4.48 0.96 9.067 0.96 13.654zM405.334 224c0-20.053-4.373-38.933-11.52-56.32l32.32-32.32c13.866 26.56 21.866 56.64 21.866 88.64 0 91.307-63.894 167.68-149.333 187.094v-44.053c61.654-18.347 106.666-75.413 106.666-143.040zM91.2 416l-27.2-27.2 100.8-100.8h-100.8v-128h85.334l106.666-106.666v143.466l90.774-90.774c-14.293-10.986-30.4-19.84-48.106-25.173v-44.053c29.334 6.72 56.106 20.16 78.613 38.613l43.52-43.413 27.2 27.2-356.8 356.8zM256 394.666l-44.587-44.587 44.587-44.587v89.173z" />
+<glyph unicode="&#xe84c;" d="M64 288v-128h85.334l106.666-106.666v341.334l-106.666-106.666h-85.334zM352 224c0 37.654-21.76 70.187-53.334 85.866v-171.84c31.574 15.786 53.334 48.32 53.334 85.974zM298.666 411.094v-44.053c61.654-18.347 106.666-75.413 106.666-143.040s-45.014-124.693-106.666-143.040v-44.053c85.44 19.413 149.334 95.68 149.334 187.094s-63.894 167.68-149.333 187.094z" />
+<glyph unicode="&#xe866;" d="M256 352v-64l85.334 85.334-85.334 85.334v-64c-94.293 0-170.667-76.374-170.667-170.667 0-33.493 9.814-64.534 26.453-90.88l31.147 31.147c-9.494 17.813-14.933 38.080-14.933 59.733 0 70.72 57.28 128 128 128zM400.214 314.88l-31.147-31.147c9.493-17.814 14.933-38.080 14.933-59.733 0-70.72-57.28-128-128-128v64l-85.334-85.334 85.334-85.334v64c94.293 0 170.667 76.374 170.667 170.667 0 33.493-9.813 64.534-26.454 90.88z" />
+<glyph unicode="&#xe891;" d="M64 202.666h42.666v42.666h-42.666v-42.666zM64 117.334h42.666v42.666h-42.666v-42.666zM64 288h42.666v42.666h-42.666v-42.666zM149.333 202.666h298.667v42.666h-298.666v-42.666zM149.333 117.334h298.667v42.666h-298.666v-42.666zM149.333 330.667v-42.667h298.667v42.666h-298.666z" />
+<glyph unicode="&#xe8b1;" d="M414.507 203.2c0.853 6.827 1.493 13.76 1.493 20.8s-0.64 13.974-1.493 20.8l45.12 35.306c4.053 3.2 5.226 8.96 2.56 13.654l-42.666 73.92c-2.666 4.587-8.214 6.507-13.014 4.587l-53.12-21.44c-10.986 8.427-23.040 15.573-36.053 21.014l-8 56.533c-0.96 5.014-5.334 8.96-10.666 8.96h-85.334c-5.333 0-9.707-3.947-10.56-8.96l-8-56.533c-13.013-5.44-25.066-12.48-36.053-21.014l-53.12 21.44c-4.8 1.814-10.347 0-13.013-4.587l-42.666-73.92c-2.666-4.587-1.493-10.346 2.56-13.654l45.014-35.306c-0.853-6.827-1.493-13.76-1.493-20.8s0.64-13.974 1.493-20.8l-45.014-35.306c-4.053-3.2-5.227-8.96-2.56-13.654l42.666-73.92c2.666-4.587 8.213-6.507 13.013-4.587l53.12 21.44c10.987-8.426 23.040-15.574 36.053-21.014l8-56.534c0.853-5.014 5.226-8.96 10.56-8.96h85.334c5.334 0 9.707 3.947 10.56 8.96l8 56.534c13.014 5.44 25.067 12.48 36.053 21.014l53.12-21.44c4.8-1.813 10.346 0 13.014 4.587l42.666 73.92c2.666 4.587 1.493 10.346-2.56 13.654l-45.014 35.307zM256 149.334c-41.28 0-74.666 33.387-74.666 74.666s33.387 74.666 74.666 74.666 74.666-33.387 74.666-74.666-33.387-74.666-74.666-74.666z" />
+</font></defs></svg>
--- a/src/css/font/VideoJS.ttf
+++ b/src/css/font/VideoJS.ttf
--- a/src/css/font/VideoJS.woff
+++ b/src/css/font/VideoJS.woff
--- a/src/css/font/vjs.eot
+++ b/src/css/font/vjs.eot
--- a/src/css/font/vjs.svg
+++ b/src/css/font/vjs.svg
@ -1,28 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="512" />
-<glyph unicode="&#xe000;" d="M1024 960v-416l-160 160-192-192-96 96 192 192-160 160zM448 288l-192-192 160-160h-416v416l160-160 192 192z" />
-<glyph unicode="&#xe001;" d="M192 832l640-384-640-384z" />
-<glyph unicode="&#xe002;" d="M128 832h320v-768h-320zM576 832h320v-768h-320z" />
-<glyph unicode="&#xe003;" d="M401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
-<glyph unicode="&#xe004;" d="M549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
-<glyph unicode="&#xe005;" d="M719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" />
-<glyph unicode="&#xe006;" d="M890.040 37.96c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.746-18.744 49.136 0 67.882 87.638 87.642 135.904 204.16 135.904 328.1 0 123.938-48.266 240.458-135.904 328.098-18.744 18.746-18.744 49.138 0 67.882 18.744 18.744 49.138 18.744 67.882 0 105.77-105.772 164.022-246.4 164.022-395.98 0-149.582-58.252-290.208-164.022-395.98-9.372-9.374-21.656-14.060-33.94-14.060zM719.53 128.47c-12.286 0-24.568 4.686-33.942 14.058-18.744 18.744-18.744 49.136 0 67.882 131.006 131.006 131.006 344.17 0 475.176-18.744 18.746-18.744 49.138 0 67.882 18.744 18.742 49.138 18.744 67.882 0 81.594-81.592 126.53-190.076 126.53-305.468 0-115.39-44.936-223.876-126.53-305.47-9.372-9.374-21.656-14.060-33.94-14.060zM549.020 218.98c-12.286 0-24.568 4.686-33.942 14.058-18.746 18.746-18.746 49.136 0 67.882 81.1 81.1 81.1 213.058 0 294.156-18.746 18.746-18.746 49.138 0 67.882 18.746 18.744 49.136 18.744 67.882 0 118.53-118.53 118.53-311.392 0-429.922-9.372-9.37-21.656-14.056-33.94-14.056zM401.332 881.332c25.668 25.668 46.668 16.968 46.668-19.332v-828c0-36.3-21-44.998-46.668-19.33l-241.332 241.33h-160v384h160l241.332 241.332z" horiz-adv-x="1088" />
-<glyph unicode="&#xe007;" d="M512 960l-320-512 320-512 320 512z" />
-<glyph unicode="&#xe008;" d="M0 960h1374.316v-1030.414h-1374.316v1030.414zM1245.462 449.276c-1.706 180.052-8.542 258.568-51.2 314.036-7.68 11.946-22.186 18.772-34.132 27.296-41.814 30.73-238.944 41.814-467.636 41.814-228.702 0-435.21-11.084-476.17-41.814-12.8-8.524-27.316-15.35-35.84-27.296-41.822-55.468-47.786-133.984-50.346-314.036 2.56-180.062 8.524-258.57 50.346-314.036 8.524-12.8 23.040-18.774 35.84-27.306 40.96-31.574 247.468-41.814 476.17-43.52 228.692 1.706 425.822 11.946 467.636 43.52 11.946 8.532 26.452 14.506 34.132 27.306 42.658 55.466 49.494 133.974 51.2 314.036zM662.358 495.904c-11.58 140.898-86.51 223.906-220.556 223.906-122.458 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.766 0 196.798 85.298 209.588 226.95h-138.302c-5.48-52.548-27.414-92.914-73.72-92.914-73.108 0-86.51 72.354-86.51 149.27 0 105.868 30.46 159.932 81.032 159.932 45.082 0 73.718-32.75 77.976-89.868h136.48zM1140.026 495.904c-11.57 140.898-86.51 223.906-220.546 223.906-122.466 0-218.722-110.432-218.722-287.88 0-178.212 87.73-289.396 232.734-289.396 115.758 0 196.788 85.298 209.58 226.95h-138.304c-5.47-52.548-27.404-92.914-73.71-92.914-73.116 0-86.518 72.354-86.518 149.27 0 105.868 30.468 159.932 81.030 159.932 45.084 0 73.728-32.75 77.986-89.868h136.47z" horiz-adv-x="1374" />
-<glyph unicode="&#xe009;" d="M128 832h768v-768h-768z" />
-<glyph unicode="&#xe00a;" d="M384 832c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM655.53 719.53c0-70.692 57.308-128 128-128s128 57.308 128 128c0 70.692-57.308 128-128 128-70.692 0-128-57.308-128-128zM832 448c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM719.53 176.47c0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64zM448.002 64c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM176.472 176.47c0 0 0 0 0 0 0-35.346 28.654-64 64-64 35.346 0 64 28.654 64 64 0 0 0 0 0 0 0 0 0 0 0 0 0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64s0 0 0 0zM144.472 719.53c0 0 0 0 0 0 0-53.019 42.981-96 96-96 53.019 0 96 42.981 96 96 0 0 0 0 0 0 0 0 0 0 0 0 0 53.019-42.981 96-96 96-53.019 0-96-42.981-96-96s0 0 0 0zM56 448c0-39.765 32.235-72 72-72s72 32.235 72 72c0 39.765-32.235 72-72 72-39.765 0-72-32.235-72-72z" />
-<glyph unicode="&#xe00b;" d="M448 384v-416l-160 160-192-192-96 96 192 192-160 160zM1024 864l-192-192 160-160h-416v416l160-160 192 192z" />
-<glyph unicode="&#xe00c;" d="M512 896c282.77 0 512-186.25 512-416 0-229.752-229.23-416-512-416-27.156 0-53.81 1.734-79.824 5.044-109.978-109.978-241.25-129.7-368.176-132.596v26.916c68.536 33.578 128 94.74 128 164.636 0 9.754-0.758 19.33-2.164 28.696-115.796 76.264-189.836 192.754-189.836 323.304 0 229.75 229.23 416 512 416z" />
-<glyph unicode="&#xe00d;" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 704c141.384 0 256-114.616 256-256s-114.616-256-256-256-256 114.616-256 256 114.616 256 256 256zM817.47 142.53c-81.594-81.594-190.080-126.53-305.47-126.53-115.392 0-223.876 44.936-305.47 126.53-81.594 81.594-126.53 190.078-126.53 305.47 0 115.39 44.936 223.876 126.53 305.47l67.882-67.882c0 0 0 0 0 0-131.006-131.006-131.006-344.17 0-475.176 63.462-63.462 147.838-98.412 237.588-98.412 89.748 0 174.124 34.95 237.588 98.412 131.006 131.006 131.006 344.168 0 475.176l67.882 67.882c81.594-81.594 126.53-190.080 126.53-305.47 0-115.392-44.936-223.876-126.53-305.47z" />
-<glyph unicode="&#xe00e;" d="M864 256c-45.16 0-85.92-18.738-115.012-48.83l-431.004 215.502c1.314 8.252 2.016 16.706 2.016 25.328s-0.702 17.076-2.016 25.326l431.004 215.502c29.092-30.090 69.852-48.828 115.012-48.828 88.366 0 160 71.634 160 160s-71.634 160-160 160-160-71.634-160-160c0-8.622 0.704-17.076 2.016-25.326l-431.004-215.504c-29.092 30.090-69.852 48.83-115.012 48.83-88.366 0-160-71.636-160-160 0-88.368 71.634-160 160-160 45.16 0 85.92 18.738 115.012 48.828l431.004-215.502c-1.312-8.25-2.016-16.704-2.016-25.326 0-88.368 71.634-160 160-160s160 71.632 160 160c0 88.364-71.634 160-160 160z" />
-<glyph unicode="&#xe01e;" d="M1024 448c-1.278 66.862-15.784 133.516-42.576 194.462-26.704 61-65.462 116.258-113.042 161.92-47.552 45.696-103.944 81.82-164.984 105.652-61.004 23.924-126.596 35.352-191.398 33.966-64.81-1.282-129.332-15.374-188.334-41.356-59.048-25.896-112.542-63.47-156.734-109.576-44.224-46.082-79.16-100.708-102.186-159.798-23.114-59.062-34.128-122.52-32.746-185.27 1.286-62.76 14.964-125.148 40.134-182.206 25.088-57.1 61.476-108.828 106.11-151.548 44.61-42.754 97.472-76.504 154.614-98.72 57.118-22.304 118.446-32.902 179.142-31.526 60.708 1.29 120.962 14.554 176.076 38.914 55.15 24.282 105.116 59.48 146.366 102.644 41.282 43.14 73.844 94.236 95.254 149.43 13.034 33.458 21.88 68.4 26.542 103.798 1.246-0.072 2.498-0.12 3.762-0.12 35.346 0 64 28.652 64 64 0 1.796-0.094 3.572-0.238 5.332h0.238zM922.306 278.052c-23.472-53.202-57.484-101.4-99.178-141.18-41.67-39.81-91-71.186-144.244-91.79-53.228-20.678-110.29-30.452-166.884-29.082-56.604 1.298-112.596 13.736-163.82 36.474-51.25 22.666-97.684 55.49-135.994 95.712-38.338 40.198-68.528 87.764-88.322 139.058-19.87 51.284-29.228 106.214-27.864 160.756 1.302 54.552 13.328 108.412 35.254 157.69 21.858 49.3 53.498 93.97 92.246 130.81 38.73 36.868 84.53 65.87 133.874 84.856 49.338 19.060 102.136 28.006 154.626 26.644 52.5-1.306 104.228-12.918 151.562-34.034 47.352-21.050 90.256-51.502 125.624-88.782 35.396-37.258 63.21-81.294 81.39-128.688 18.248-47.392 26.782-98.058 25.424-148.496h0.238c-0.144-1.76-0.238-3.536-0.238-5.332 0-33.012 24.992-60.174 57.086-63.624-6.224-34.822-16.53-68.818-30.78-100.992z" />
-<glyph unicode="&#xe01f;" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96 53.020 0 96 42.98 96 96 0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96-53.020 0-96-42.98-96-96 0-282.77 229.23-512 512-512z" />
-<glyph unicode="&#xe600;" d="M1024 351.906v192.188l-146.774 24.462c-5.958 18.132-13.222 35.668-21.694 52.5l86.454 121.034-135.896 135.898-120.826-86.304c-16.91 8.554-34.538 15.888-52.768 21.902l-24.402 146.414h-192.188l-24.402-146.416c-18.23-6.014-35.858-13.348-52.766-21.902l-120.828 86.304-135.898-135.898 86.454-121.036c-8.47-16.83-15.734-34.366-21.692-52.498l-146.774-24.46v-192.188l147.118-24.52c5.96-17.968 13.21-35.348 21.642-52.030l-86.748-121.448 135.898-135.896 121.654 86.894c16.602-8.35 33.89-15.528 51.764-21.434l24.578-147.472h192.188l24.578 147.474c17.874 5.906 35.162 13.084 51.766 21.432l121.652-86.892 135.896 135.896-86.744 121.446c8.432 16.682 15.678 34.062 21.64 52.032l147.118 24.518zM512 320c-70.692 0-128 57.306-128 128 0 70.692 57.308 128 128 128 70.694 0 128-57.308 128-128 0-70.694-57.306-128-128-128z" />
-</font></defs></svg>
--- a/src/css/font/vjs.ttf
+++ b/src/css/font/vjs.ttf
--- a/src/css/font/vjs.woff
+++ b/src/css/font/vjs.woff
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
--- a/src/css/video-js.scss
+++ b/src/css/video-js.scss
@ -0,0 +1,25 @@
+@import "variables";
+@import "utilities";
+
+@import "components/icons";
+@import "components/layout";
+@import "components/big-play";
+@import "components/control-bar";
+@import "components/control";
+@import "components/progress";
+@import "components/slider";
+@import "components/volume";
+@import "components/menu";
+@import "components/poster";
+@import "components/live";
+@import "components/time";
+@import "components/play-pause";
+@import "components/text-track";
+@import "components/fullscreen";
+@import "components/playback-rate";
+@import "components/error";
+@import "components/loading";
+@import "components/captions";
+@import "components/chapters";
+@import "components/subtitles";
+@import "components/adaptive";
--- a/src/js/base-styles.js
+++ b/src/js/base-styles.js
@ -0,0 +1,16 @@
+/**
+* This code injects the required base styles in the head of the document.
+*/
+import window from 'global/window';
+import document from 'global/document';
+
+if (window.VIDEOJS_NO_BASE_THEME) return;
+
+const styles = '{{GENERATED_STYLES}}';
+
+if (styles === '{{GENERATED'+'_STYLES}}');
+
+const styleNode = document.createElement('style');
+styleNode.innerHTML = styles;
+
+document.head.insertBefore(styleNode, document.head.firstChild);
--- a/src/js/control-bar/control-bar.js
+++ b/src/js/control-bar/control-bar.js
@ -37,24 +37,24 @@ class ControlBar extends Component {

 ControlBar.prototype.options_ = {
  loadEvent: 'play',
-  children: {
-    'playToggle': {},
-    'currentTimeDisplay': {},
-    'timeDivider': {},
-    'durationDisplay': {},
-    'remainingTimeDisplay': {},
-    'liveDisplay': {},
-    'progressControl': {},
-    'customControlSpacer': {},
-    'fullscreenToggle': {},
-    'volumeControl': {},
-    'muteToggle': {},
-    // 'volumeMenuButton': {},
-    'playbackRateMenuButton': {},
-    'subtitlesButton': {},
-    'captionsButton': {},
-    'chaptersButton': {}
-  }
+  children: [
+    'playToggle',
+    'currentTimeDisplay',
+    'timeDivider',
+    'durationDisplay',
+    'progressControl',
+    'liveDisplay',
+    'remainingTimeDisplay',
+    'customControlSpacer',
+    'playbackRateMenuButton',
+    'muteToggle',
+    'volumeControl',
+    'chaptersButton',
+    'subtitlesButton',
+    'captionsButton',
+    'volumeMenuButton',
+    'fullscreenToggle'
+  ]
 };

 Component.registerComponent('ControlBar', ControlBar);
--- a/src/js/control-bar/live-display.js
+++ b/src/js/control-bar/live-display.js
@ -12,7 +12,7 @@ class LiveDisplay extends Component {

  createEl() {
    var el = super.createEl('div', {
-      className: 'vjs-live-controls vjs-control'
+      className: 'vjs-live-control vjs-control'
    });

    this.contentEl_ = Lib.createEl('div', {
--- a/src/js/control-bar/time-controls/current-time-display.js
+++ b/src/js/control-bar/time-controls/current-time-display.js
@ -17,7 +17,7 @@ class CurrentTimeDisplay extends Component {

  createEl() {
    let el = super.createEl('div', {
-      className: 'vjs-current-time vjs-time-controls vjs-control'
+      className: 'vjs-current-time vjs-time-control vjs-control'
    });

    this.contentEl_ = Lib.createEl('div', {
--- a/src/js/control-bar/time-controls/duration-display.js
+++ b/src/js/control-bar/time-controls/duration-display.js
@ -22,7 +22,7 @@ class DurationDisplay extends Component {

  createEl() {
    let el = super.createEl('div', {
-      className: 'vjs-duration vjs-time-controls vjs-control'
+      className: 'vjs-duration vjs-time-control vjs-control'
    });

    this.contentEl_ = Lib.createEl('div', {
--- a/src/js/control-bar/time-controls/remaining-time-display.js
+++ b/src/js/control-bar/time-controls/remaining-time-display.js
@ -17,7 +17,7 @@ class RemainingTimeDisplay extends Component {

  createEl() {
    let el = super.createEl('div', {
-      className: 'vjs-remaining-time vjs-time-controls vjs-control'
+      className: 'vjs-remaining-time vjs-time-control vjs-control'
    });

    this.contentEl_ = Lib.createEl('div', {
--- a/src/js/control-bar/time-controls/time-divider.js
+++ b/src/js/control-bar/time-controls/time-divider.js
@ -13,7 +13,7 @@ class TimeDivider extends Component {

  createEl() {
    return super.createEl('div', {
-      className: 'vjs-time-divider',
+      className: 'vjs-time-control vjs-time-divider',
      innerHTML: '<div><span>/</span></div>'
    });
  }
--- a/src/js/control-bar/volume-menu-button.js
+++ b/src/js/control-bar/volume-menu-button.js
@ -35,7 +35,13 @@ class VolumeMenuButton extends MenuButton {
    let menu = new Menu(this.player_, {
      contentElType: 'div'
    });
-    let vc = new VolumeBar(this.player_, this.options_['volumeBar']);
+
+    // The volumeBar is vertical by default in the base theme when used with a VolumeMenuButton
+    var options = this.options_['volumeBar'] || {};
+    options['vertical'] = options['vertical'] || true;
+
+    let vc = new VolumeBar(this.player_, options);
+
    vc.on('focus', function() {
      menu.lockShowing();
    });
--- a/src/js/player.js
+++ b/src/js/player.js
@ -118,6 +118,10 @@ class Player extends Component {
      this.addClass('vjs-audio');
    }

+    if (this.flexNotSupported_()) {
+      this.addClass('vjs-no-flex');
+    }
+
    // TODO: Make this smarter. Toggle user state between touching/mousing
    // using events, since devices can have both touch and mouse events.
    // if (Lib.TOUCH_ENABLED) {
@ -399,6 +403,7 @@ class Player extends Component {
   * @event pause
   */
  onPause() {
+    this.removeClass('vjs-playing');
    this.addClass('vjs-paused');
  }

@ -1718,5 +1723,14 @@ Player.prototype.onVolumeChange;
 */
 Player.prototype.onError;

+Player.prototype.flexNotSupported_ = function() {
+  var elem = document.createElement('i');
+
+  return !('flexBasis' in elem.style ||
+          'webkitFlexBasis' in elem.style ||
+          'mozFlexBasis' in elem.style ||
+          'msFlexBasis' in elem.style);
+};
+
 Component.registerComponent('Player', Player);
 export default Player;
--- a/src/js/poster-image.js
+++ b/src/js/poster-image.js
@ -92,7 +92,11 @@ class PosterImage extends Button {
  onClick() {
    // We don't want a click to trigger playback when controls are disabled
    // but CSS should be hiding the poster to prevent that from happening
-    this.player_.play();
+    if (this.player_.paused()) {
+      this.player_.play();
+    } else {
+      this.player_.pause();
+    }
  }

 }
--- a/tasks/style-injection.js
+++ b/tasks/style-injection.js
@ -0,0 +1,11 @@
+module.exports = function(grunt) {
+  grunt.registerTask('addStyleInjection', 'Adding base style injection', function() {
+    var minifiedCss = grunt.file.read('build/files/video-js.min.css');
+    // We need to escape any strings
+    minifiedCss = minifiedCss.replace(/'/g, '\\\'');
+
+    var combinedJs = grunt.file.read('build/files/combined.video.js');
+    combinedJs = combinedJs.replace(/\{{GENERATED_STYLES}}/g, minifiedCss);
+    grunt.file.write('build/files/combined.video.js', combinedJs);
+  });
+};