Video JS skin boiler plate (SASS)

vjs.boiler.css

/**
 * Variables
 * Description: reusable options
 */
$control-bar-height : 20px;
$control-bar-background : #cccccc;
$handle-width: 3px;
$play-button-width: 50px;
$fullscreen-button-width: 50px;
$ui-color: #ffffff;


/**
 * General Setup
 * Description: Defines which parts of player we care about
 */
.folder-player {
  position: absolute;
  height: 100%!important;
  width: 100%!important;

  /* UI we use */
  .vjs-play-control {} // container that plays/pauses the video
  .vjs-progress-control {} // lets user scrub the video
  .vjs-fullscreen-control {} // lets user enter fullscreen

  /* UI we don't use */
  .vjs-current-time     { display: none!important; } // container that shows current time
  .vjs-time-divider     { display: none!important; } // useless divider '/'
  .vjs-duration         { display: none!important; } // container that shows video duration
  .vjs-remaining-time   { display: none!important; } // container that shows remaining time
  .vjs-live-controls    { display: none!important; } // container that shows if video is live (useless)
  .vjs-volume-control   { display: none!important; } // lets user scrub the volume
  .vjs-mute-control     { display: none!important; } // container that mutes video on click
  .vjs-playback-rate    { display: none!important; } // useless
  .vjs-subtitles-button { display: none!important; } // useless
  .vjs-captions-button  { display: none!important; } // useless
  .vjs-chapters-button  { display: none!important; } // useless
}


/**
 * Base UI Elements (Slider)
 * Description: Set's up basic style for reusable interface elements
 */
.folder-player {
  .vjs-slider { // volume/progress scrubbing
    position: relative;
    &:focus {}
  }
  .vjs-slider-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: $handle-width;
    height: $control-bar-height;
    cursor: pointer;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $ui-color;
    }
  }
}


/**
 * Control Bar
 * Description: Styling for the control bar wrapper
 */
.folder-player {
  .vjs-control-bar {
    display: none;
    opacity: 0;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: $control-bar-height;
    background-color: $control-bar-background;
    transition: opacity 0.3s;
  }
  &.vjs-has-started { // show when video starts
    .vjs-control-bar {
      display: block;
      opacity: 1;
    }
  }
  &.vjs-has-started.vjs-user-inactive.vjs-playing { // hide when user inactive during playback
    .vjs-control-bar {
      display: block;
      opacity: 0;
    }
  }
  &.vjs-controls-disabled,
  &.vjs-using-native-controls,
  &.vjs-error { 
    display: none; 
  }
}
@media \0screen { // IE8 fix, not sure if necessary
  .folder-player.vjs-user-inactive.vjs-playing .vjs-control-bar :before { content: ""; }
}


/**
 * Control Bar Control
 * Description: Basic styling for the control bar controls
 */
.folder-player {
  .vjs-control {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    height: $control-bar-height;
    width: 50px; // arbitrary width of control sections
    outline: none;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    &:focus:before,
    &:hover:before { }
    &:focus { }
  }
  .vjs-control-text { // visually hide text within these units (available for screen reading)
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}


/**
 * Play/Pause Control
 * Description: Styling for the play/pause control
 */
.folder-player {
  .vjs-play-control {
    width: $play-button-width;
    cursor: pointer;
    z-index: 15;
    background-color: red;
  }
  .vjs-play-control:before {
    content: "PLAY"; // play
  }
  &.vjs-playing {
    .vjs-play-control:before {
      content: "PAUSE"; // pause
    }
  }
}


/**
 * Volume/Mute Control
 * Description: Styling for the volume control.
 * Status: Not built, look to Video JS source for example
 */


/**
 * Progress Bar
 * Description: Styling for the progress/loaded bar and handle
 */
.folder-player {
  .vjs-progress-control {
    position: absolute;
    width: 100%;
    padding-left: $play-button-width;
    padding-right: $fullscreen-button-width;
    z-index: 10;
    transition: all 0.4s;
    background-color: lime;
  }
  .vjs-progress-holder {
    height: 100%;
    .vjs-play-progress,
    .vjs-load-progress {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      height: 100%;
      width: 0;
      margin: 0;
      padding: 0;
    }
  }
  .vjs-play-progress {
    background: $ui-color;
    opacity: 0.7;
  }
  .vjs-load-progress {
    background: $ui-color;
    opacity: 0.4;
  }
  .vjs-seek-handle {
    width: $handle-width;
    height: 100%;
  }
}


/**
 * Fullscreen Control
 * Description: Styling for the fullscreen control
 */
.folder-player {
  .vjs-fullscreen-control {
    width: $fullscreen-button-width;
    cursor: pointer;
    float: right;
    z-index: 15;
    background-color: yellow;
    &:before {
      content: "Enter"; // Button contents when not in fs
    }
  }
  &.vjs-fullscreen {
    .vjs-fullscreen-control:before {
      content: "Exit"; // Button contents when in fs
    }
  }
}


/**
 * Big Play Button
 * Description: Styling for the Big Play button
 */
.folder-player {
  .vjs-big-play-button {
    position: absolute;
    display: block;
    opacity: 1;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-color: white;
    transition: opacity 0.3s ease;
    &:before {
      content: 'PLAY';
    }
  }
  &.vjs-has-started {
    .vjs-big-play-button {
      opacity: 0;
    }
  }
  &.vjs-error,
  &.vjs-controls-disabled,
  &.vjs-using-native-controls,
  &.big-play-disabled {
    .vjs-big-play-button {
      display: none!important;
    }
  }
}


/**
 * Loading Spinner
 * Description: Styling for the video loader
 */
.folder-player {
  .vjs-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 40px;
    width: 40px;
    margin-top: -25px;
    margin-left: -25px;
    &:before {
      content: '';
      display: block;
      border-bottom: 4px solid #fff;
      border-left: 4px solid #fff;
      border-right: 4px solid #000;
      border-top: 4px solid #000;
      border-radius: 100%;
      height: 40px;
      width: 40px;
      animation: spin .6s infinite linear;
    }
  }
  &.vjs-error {
    .vjs-loading-spinner {
      display: none !important;
      animation: none;
    }
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}


/**
 * Error
 * Description: Styling for error when video cannot be player
 * Status: Currently still default VJS, needs to be cleaned up
 */
.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: Arial;
  font-size: 4em;
  color: #666666;
  /* 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 #000;
  text-align: center /* Needed for IE8 */;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  width: 100%;
}
.vjs-error-display div {
  position: absolute;
  font-size: 1.4em;
  text-align: center;
  bottom: 1em;
  right: 1em;
  left: 1em;
}
.vjs-error-display a,
.vjs-error-display a:visited {
  color: #F4A460;
}