First release

node_modules/video.js/src/css/components/_adaptive.scss

@@ -0,0 +1,78 @@
+// When the player is "medium" and higher, display everything by default.
+//
+// When the player is "small", display only:
+// - Play button
+// - Volume Mute button
+// - Progress bar
+// - Subs-Caps button
+// - Fullscreen button
+//
+// When the player is "small", display only:
+// - Play button
+// - Volume Mute button
+// - Progress bar
+// - Fullscreen button
+//
+// When the player is "tiny", display only:
+// - Play button
+// - Volume Mute button
+// - Fullscreen Button
+//
+.video-js {
+
+  &.vjs-layout-small,
+  &.vjs-layout-x-small,
+  &.vjs-layout-tiny {
+    .vjs-current-time,
+    .vjs-time-divider,
+    .vjs-duration,
+    .vjs-remaining-time,
+    .vjs-playback-rate,
+    .vjs-chapters-button,
+    .vjs-descriptions-button,
+    .vjs-captions-button,
+    .vjs-subtitles-button,
+    .vjs-audio-button,
+    .vjs-volume-control {
+      display: none !important;
+    }
+
+    // Reset the size of the volume panel to the default so we don't see a big
+    // empty space to the right of the mute button.
+    .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
+    .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+    .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+      width: auto;
+      width: initial;
+    }
+  }
+
+  // Hide the subs-caps button for non-Live UI "x-small" and for "tiny" players.
+  &.vjs-layout-x-small:not(.vjs-liveui),
+  &.vjs-layout-x-small:not(.vjs-live),
+  &.vjs-layout-tiny {
+    .vjs-subs-caps-button {
+      display: none;
+    }
+  }
+
+  // With the new Live UI, we can have the same treatment as "tiny". At
+  // "x-small", the Live UI makes the progress control very small and almost
+  // useless.
+  &.vjs-layout-x-small.vjs-liveui,
+  &.vjs-layout-tiny {
+
+    .vjs-custom-control-spacer {
+      @include flex(auto);
+      display: block;
+    }
+
+    &.vjs-no-flex .vjs-custom-control-spacer {
+      width: auto;
+    }
+
+    .vjs-progress-control {
+      display: none;
+    }
+  }
+}

node_modules/video.js/src/css/components/_audio.scss

@@ -0,0 +1,17 @@
+.video-js .vjs-audio-button .vjs-icon-placeholder {
+  @extend .vjs-icon-audio;
+}
+
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+
+// Mark a main-desc-menu-item (main + description) item with a trailing Audio Description icon
+.video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: " \f11d";
+  font-size: 1.5em;
+  line-height: inherit;
+}

node_modules/video.js/src/css/components/_big-play.scss

@@ -0,0 +1,58 @@
+@use "sass:math";
+
+.video-js .vjs-big-play-button {
+  font-size: 3em;
+  line-height: $big-play-button--line-height;
+  height: $big-play-button--height;
+  width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
+  display: block;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 0;
+  cursor: pointer;
+  opacity: 1;
+  border: $big-play-button--border-size solid $primary-foreground-color;
+
+  // Need a slightly gray bg so it can be seen on black backgrounds
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
+  @include border-radius(0.3em);
+  @include transition(all 0.4s);
+
+  // Since the big play button doesn't inherit from vjs-control, we need to specify a bit more than
+  // other buttons for the icon.
+  & .vjs-icon-placeholder:before {
+    @extend .vjs-icon-play;
+
+    @extend %icon-default;
+  }
+}
+
+// Allow people that hate their poster image to center the big play button.
+.vjs-big-play-centered .vjs-big-play-button {
+  top: 50%;
+  left: 50%;
+  margin-top: -(math.div($big-play-button--height, 2));
+  margin-left: -(math.div($big-play-button--width, 2));
+}
+
+.video-js:hover .vjs-big-play-button,
+.video-js .vjs-big-play-button:focus {
+  border-color: $primary-foreground-color;
+
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
+  @include transition(all 0s);
+}
+
+// Hide if controls are disabled, the video is playing, or native controls are used.
+.vjs-controls-disabled .vjs-big-play-button,
+.vjs-has-started .vjs-big-play-button,
+.vjs-using-native-controls .vjs-big-play-button,
+.vjs-error .vjs-big-play-button {
+  display: none;
+}
+
+// Show big play button if video is paused and .vjs-show-big-play-button-on-pause is set on video element
+.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
+  display: block;
+}

node_modules/video.js/src/css/components/_button.scss

@@ -0,0 +1,21 @@
+.video-js button {
+  background: none;
+  border: none;
+  color: inherit;
+  display: inline-block;
+
+  font-size: inherit; // IE in general. WTF.
+  line-height: inherit;
+  text-transform: none;
+  text-decoration: none;
+  transition: none;
+
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+}
+
+.vjs-control .vjs-button {
+  width: 100%;
+  height: 100%;
+}

node_modules/video.js/src/css/components/_captions-settings.scss

@@ -0,0 +1,116 @@
+.vjs-modal-dialog.vjs-text-track-settings {
+  background-color: $primary-background-color;
+  background-color: rgba($primary-background-color, 0.75);
+  color: $primary-foreground-color;
+  height: 70%;
+}
+
+// Layout divs
+.vjs-text-track-settings .vjs-modal-dialog-content {
+  display: table;
+}
+
+.vjs-text-track-settings .vjs-track-settings-colors,
+.vjs-text-track-settings .vjs-track-settings-font,
+.vjs-text-track-settings .vjs-track-settings-controls {
+  display: table-cell;
+}
+
+.vjs-text-track-settings .vjs-track-settings-controls {
+  text-align: right;
+  vertical-align: bottom;
+}
+
+// code that will only run if CSS Grid is supported by the browser
+@supports (display: grid) {
+  .vjs-text-track-settings .vjs-modal-dialog-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    // Flex and Grid for Firefox, IE, and Edge remove the bottom padding/margin in a container as size decreases
+    // so we add bottom padding/margin to the last item in the grid instead of here
+    // see https://stackoverflow.com/a/23754080
+    padding: 20px 24px 0px 24px;
+  }
+
+  // see the comment for padding above
+  .vjs-track-settings-controls .vjs-default-button {
+    margin-bottom: 20px;
+  }
+
+  .vjs-text-track-settings .vjs-track-settings-controls {
+    // make this take up both columns
+    grid-column: 1 / -1;
+  }
+
+  // 1 column for small players
+  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content ,
+  .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
+  .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
+    grid-template-columns: 1fr;
+  }
+
+}
+
+// Form elements
+.vjs-track-setting > select {
+  margin-right: 1em;
+  margin-bottom: 0.5em;
+}
+
+.vjs-text-track-settings fieldset {
+  margin: 5px;
+  padding: 3px;
+  border: none;
+}
+
+.vjs-text-track-settings fieldset span {
+  display: inline-block;
+}
+
+// style the second select for text colors
+.vjs-text-track-settings fieldset span > select {
+  max-width: 7.3em;
+}
+
+.vjs-text-track-settings legend {
+  color: $primary-foreground-color;
+  margin: 0 0 5px 0;
+}
+
+// Hide labels, so they are only for screen reader users
+.vjs-text-track-settings .vjs-label {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px); // for Internet Explorer
+  clip: rect(1px, 1px, 1px, 1px);
+  display: block;
+  margin: 0 0 5px 0;
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+.vjs-track-settings-controls button:focus,
+.vjs-track-settings-controls button:active {
+  outline-style: solid;
+  outline-width: medium;
+  background-image: linear-gradient(0deg, $primary-foreground-color 88%, $secondary-background-color 100%);
+}
+
+.vjs-track-settings-controls button:hover {
+  color: rgba(#2B333F, 0.75);
+}
+
+.vjs-track-settings-controls button {
+  background-color: $primary-foreground-color;
+  background-image: linear-gradient(-180deg, $primary-foreground-color 88%, $secondary-background-color 100%);
+  color: #2B333F;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
+.vjs-track-settings-controls .vjs-default-button {
+  margin-right: 1em;
+}

node_modules/video.js/src/css/components/_captions.scss

@@ -0,0 +1,3 @@
+.video-js .vjs-captions-button .vjs-icon-placeholder {
+  @extend .vjs-icon-captions;
+}

node_modules/video.js/src/css/components/_chapters.scss

@@ -0,0 +1,7 @@
+.video-js .vjs-chapters-button .vjs-icon-placeholder {
+  @extend .vjs-icon-chapters;
+}
+
+.vjs-chapters-button .vjs-menu ul {
+  width: 24em;
+}

node_modules/video.js/src/css/components/_close-button.scss

@@ -0,0 +1,12 @@
+.video-js .vjs-control.vjs-close-button {
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-cancel;
+  }
+
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}

node_modules/video.js/src/css/components/_control-bar.scss

@@ -0,0 +1,50 @@
+.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($primary-background-color, $primary-background-transparency);
+}
+
+// Video has started playing
+.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
+.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  // Remain visible for screen reader and keyboard users
+  visibility: visible;
+  opacity: 0;
+
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+
+}
+
+.vjs-controls-disabled .vjs-control-bar,
+.vjs-using-native-controls .vjs-control-bar,
+.vjs-error .vjs-control-bar {
+  // !important is ok in this context.
+  display: none !important;
+}
+
+// Don't hide the control bar if it's audio
+.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
+// no flex support
+.vjs-has-started.vjs-no-flex .vjs-control-bar {
+  display: table;
+}

node_modules/video.js/src/css/components/_control-spacer.scss

@@ -0,0 +1,3 @@
+.video-js .vjs-custom-control-spacer {
+  display: none;
+}

node_modules/video.js/src/css/components/_control.scss

@@ -0,0 +1,40 @@
+// vjs-control might be better named vjs-button now.
+// It's used on both real buttons (play button)
+// and div buttons (menu buttons)
+.video-js .vjs-control {
+  position: relative;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 4em;
+  @include flex(none);
+
+}
+.vjs-button > .vjs-icon-placeholder:before {
+  font-size: 1.8em;
+  line-height: 1.67;
+
+  @extend %icon-default;
+}
+
+.vjs-button > .vjs-icon-placeholder {
+    display: block;
+}
+
+// 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-foreground-color, 1);
+}
+
+// Hide control text visually, but have it available for screenreaders
+.video-js .vjs-control-text {
+  @include hide-visually;
+}
+
+.vjs-no-flex .vjs-control {
+  display: table-cell;
+  vertical-align: middle;
+}

node_modules/video.js/src/css/components/_descriptions.scss

@@ -0,0 +1,3 @@
+.video-js .vjs-descriptions-button .vjs-icon-placeholder {
+  @extend .vjs-icon-audio-description;
+}

node_modules/video.js/src/css/components/_error.scss

@@ -0,0 +1,23 @@
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.4em;
+  text-align: center;
+}
+
+.vjs-error .vjs-error-display:before {
+  color: #fff;
+  content: 'X';
+  font-family: $text-font-family;
+  font-size: 4em;
+  left: 0;
+
+  // 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;
+  margin-top: -0.5em;
+  position: absolute;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center;
+  top: 50%;
+  vertical-align: middle;
+  width: 100%;
+}

node_modules/video.js/src/css/components/_fullscreen.scss

@@ -0,0 +1,12 @@
+.video-js .vjs-fullscreen-control {
+  cursor: pointer;
+  @include flex(none);
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-fullscreen-enter;
+  }
+}
+// Switch to the exit icon when the player is in fullscreen
+.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
+  @extend .vjs-icon-fullscreen-exit;
+}

node_modules/video.js/src/css/components/_layout.scss

@@ -0,0 +1,181 @@
+@use "sass:math";
+
+.video-js {
+  // display:inline-block would be closer to the video el's display:inline
+  // but it results in flash reloading when going into fullscreen [#2205]
+  // TODO: Still needed?
+  display: block;
+  // Make video.js videos align top when next to video elements
+  vertical-align: top;
+  box-sizing: border-box;
+
+  color: $primary-foreground-color;
+  background-color: #000;
+  position: relative;
+  padding: 0;
+  // Start with 10px for base font size so other dimensions can be em based and
+  // easily calculable.
+  font-size: 10px;
+  line-height: 1;
+
+  // Provide some basic defaults for fonts
+  font-weight: normal;
+  font-style: normal;
+  // Avoiding helvetica: issue #376
+  font-family: $text-font-family;
+
+  // 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;
+  }
+  
+  // reset word-break inside the player div
+  word-break: initial;
+}
+
+.video-js[tabindex="-1"] {
+  outline: none;
+}
+
+// All elements inherit border-box sizing
+.video-js *,
+.video-js *:before,
+.video-js *:after {
+  box-sizing: inherit;
+}
+
+// List style reset
+.video-js ul {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  list-style-position: outside;
+
+  // Important to specify each
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+// Fill the width of the containing element and use padding to create the
+// desired aspect ratio. Default to 16x9 unless another ratio is given.
+@mixin apply-aspect-ratio($width, $height) {
+  padding-top: 100% * math.div($height, $width);
+}
+
+// Not including a default AR in vjs-fluid because it would override
+// the user set AR injected into the header.
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-9-16,
+.video-js.vjs-1-1 {
+  width: 100%;
+  max-width: 100%;
+  height: 0;
+}
+
+.video-js.vjs-16-9 {
+  @include apply-aspect-ratio(16, 9);
+}
+
+.video-js.vjs-4-3 {
+  @include apply-aspect-ratio(4, 3);
+}
+
+.video-js.vjs-9-16 {
+  @include apply-aspect-ratio(9, 16);
+}
+
+.video-js.vjs-1-1 {
+  @include apply-aspect-ratio(1, 1);
+}
+
+.video-js.vjs-fill {
+  width: 100%;
+  height: 100%;
+}
+
+// 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%;
+}
+.vjs-full-window .video-js.vjs-fullscreen {
+  position: fixed;
+  overflow: hidden;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
+  width: 100% !important;
+  height: 100% !important;
+  // Undo any aspect ratio padding for fluid layouts
+  padding-top: 0 !important;
+}
+
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
+
+
+// Hide disabled or unsupported controls.
+.vjs-hidden { display: none !important; }
+
+.vjs-disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+// Visually hidden offscreen, but accessible to screen readers.
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
+.vjs-lock-showing {
+  display: block !important;
+  opacity: 1;
+  visibility: visible;
+}
+
+// This optional paragraph inside the video tag can provide a message to users
+// about what's required to play video when JavaScript is disabled
+.vjs-no-js {
+  padding: 20px;
+  color: #fff;
+  background-color: #000;
+  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: #66A8CC;
+}

node_modules/video.js/src/css/components/_live.scss

@@ -0,0 +1,64 @@
+// css for the old live ui, assumes that the progress bar is hidden
+.video-js .vjs-live-control {
+  @include display-flex(flex-start);
+  @include flex(auto);
+  font-size: 1em;
+  line-height: 3em;
+}
+
+.vjs-no-flex .vjs-live-control {
+  display: table-cell;
+  width: auto;
+  text-align: left;
+}
+
+// hide the LiveDisplay when not live or when
+// the new liveui is in use
+.video-js:not(.vjs-live) .vjs-live-control,
+.video-js.vjs-liveui .vjs-live-control {
+  display: none;
+}
+
+// css for the new live ui below
+.video-js .vjs-seek-to-live-control {
+  align-items: center;
+  cursor: pointer;
+  @include flex(none);
+  display: inline-flex;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  font-size: 1em;
+  line-height: 3em;
+  width: auto;
+  min-width: 4em;
+}
+
+.vjs-no-flex .vjs-seek-to-live-control {
+  display: table-cell;
+  width: auto;
+  text-align: left;
+}
+
+// hide the SeekToLive button when not live and
+// when the liveui is not in use
+.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
+.video-js:not(.vjs-live) .vjs-seek-to-live-control {
+  display: none;
+}
+
+// only show as a pointer when we will seek to live edge
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
+  cursor: auto;
+}
+
+.vjs-seek-to-live-control .vjs-icon-placeholder {
+  margin-right: 0.5em;
+  @extend .vjs-icon-circle;
+  color: #888;
+}
+
+// make the live circle red when at the live edge
+.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
+  color: red;
+}

node_modules/video.js/src/css/components/_loading.scss

@@ -0,0 +1,125 @@
+.vjs-loading-spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  opacity: 0.85;
+
+  // Need to fix centered page layouts
+  text-align: left;
+
+  border: 6px solid rgba($primary-background-color, $primary-background-transparency);
+  // border: 6px solid rgba(43, 51, 63, 0.5);
+
+  box-sizing: border-box;
+  background-clip: padding-box;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  visibility: hidden;
+}
+
+.vjs-seeking .vjs-loading-spinner,
+.vjs-waiting .vjs-loading-spinner {
+  display: block;
+  // add a delay before actual show the spinner
+  animation: vjs-spinner-show 0s linear 0.3s forwards;
+}
+
+.vjs-loading-spinner:before,
+.vjs-loading-spinner:after {
+  content: "";
+  position: absolute;
+  margin: -6px;
+  box-sizing: inherit;
+  width: inherit;
+  height: inherit;
+  border-radius: inherit;
+  // Keep 100% opacity so they don't show through each other
+  opacity: 1;
+  border: inherit;
+  border-color: transparent;
+  border-top-color: white;
+}
+
+// only animate when showing because it can be processor heavy
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:after {
+  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
+}
+
+.vjs-seeking .vjs-loading-spinner:before,
+.vjs-waiting .vjs-loading-spinner:before {
+  border-top-color: rgb(255,255,255);
+}
+
+.vjs-seeking .vjs-loading-spinner:after,
+.vjs-waiting .vjs-loading-spinner:after {
+  border-top-color: rgb(255,255,255);
+  -webkit-animation-delay: 0.44s;
+  animation-delay: 0.44s;
+}
+
+@keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+
+@-webkit-keyframes vjs-spinner-show {
+  to {
+    visibility: visible;
+  }
+}
+
+@keyframes vjs-spinner-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@-webkit-keyframes vjs-spinner-spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: $secondary-background-color;
+  }
+  20% {
+    border-top-color: $secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $secondary-background-color;
+  }
+  100% {
+    border-top-color: $secondary-background-color;
+  }
+}
+
+@-webkit-keyframes vjs-spinner-fade {
+  0% {
+    border-top-color: $secondary-background-color;
+  }
+  20% {
+    border-top-color: $secondary-background-color;
+  }
+  35% {
+    border-top-color: white;
+  }
+  60% {
+    border-top-color: $secondary-background-color;
+  }
+  100% {
+    border-top-color: $secondary-background-color;
+  }
+}

node_modules/video.js/src/css/components/_modal-dialog.scss

@@ -0,0 +1,21 @@
+.video-js .vjs-modal-dialog {
+  @extend %fill-parent;
+  @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+
+  // This allows scrolling of content if need be.
+  overflow: auto;
+}
+
+// Reset box-sizing inside the modal dialog.
+.video-js .vjs-modal-dialog > * {
+  box-sizing: border-box;
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  @extend %fill-parent;
+
+  font-size: 1.2em; // 12px
+  line-height: 1.5; // 18px
+  padding: 20px 24px;
+  z-index: 1;
+}

node_modules/video.js/src/css/components/_picture-in-picture.scss

@@ -0,0 +1,12 @@
+.video-js .vjs-picture-in-picture-control {
+  cursor: pointer;
+  @include flex(none);
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-picture-in-picture-enter;
+  }
+}
+// Switch to the exit icon when the player is in Picture-in-Picture
+.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder {
+  @extend .vjs-icon-picture-in-picture-exit;
+}

node_modules/video.js/src/css/components/_play-pause.scss

@@ -0,0 +1,13 @@
+.video-js .vjs-play-control {
+  cursor: pointer;
+}
+.video-js .vjs-play-control .vjs-icon-placeholder {
+  @include flex(none);
+  @extend .vjs-icon-play;
+}
+.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
+  @extend .vjs-icon-pause;
+}
+.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
+  @extend .vjs-icon-replay;
+}

node_modules/video.js/src/css/components/_playback-rate.scss

@@ -0,0 +1,21 @@
+// TODO: I feel like this should be a generic menu. Research later.
+.vjs-playback-rate > .vjs-menu-button,
+.vjs-playback-rate .vjs-playback-rate-value {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.vjs-playback-rate .vjs-playback-rate-value {
+  pointer-events: none;
+  font-size: 1.5em;
+  line-height: 2;
+  text-align: center;
+}
+
+.vjs-playback-rate .vjs-menu {
+  width: 4em;
+  left: 0em;
+}

node_modules/video.js/src/css/components/_poster.scss

@@ -0,0 +1,32 @@
+.vjs-poster {
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: contain;
+  background-color: #000000;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+}
+
+// Hide the poster after the video has started playing
+.vjs-has-started .vjs-poster {
+  display: none;
+}
+
+// Don't hide the poster if we're playing audio
+.vjs-audio.vjs-has-started .vjs-poster {
+  display: block;
+}
+
+// Hide the poster when native controls are used otherwise it covers them
+.vjs-using-native-controls .vjs-poster {
+  display: none;
+}

node_modules/video.js/src/css/components/_progress.scss

@@ -0,0 +1,179 @@
+// .vjs-progress-control / ProgressControl
+//
+// This is the container for all progress bar-related components/elements.
+.video-js .vjs-progress-control {
+  cursor: pointer;
+  @include flex(auto);
+  @include display-flex(center);
+  min-width: 4em;
+  touch-action: none;
+}
+
+.video-js .vjs-progress-control.disabled {
+  cursor: default;
+}
+
+.vjs-live .vjs-progress-control {
+  display: none;
+}
+
+.vjs-liveui .vjs-progress-control {
+  @include display-flex(center);
+}
+
+.vjs-no-flex .vjs-progress-control {
+  width: auto;
+}
+
+// .vjs-progress-holder / SeekBar
+//
+// Box containing play and load progress bars. It also acts as seek scrubber.
+.video-js .vjs-progress-holder {
+  @include flex(auto);
+  @include transition(all 0.2s);
+  height: 0.3em;
+}
+
+.video-js .vjs-progress-control .vjs-progress-holder {
+
+  // This is one of the rare cases where we are using a pixel dimension. The
+  // reason is that the progress holder font-size changes on hover. With the
+  // default em-based margins, this means it gets narrower and causes issues
+  // with mouseover behaviors/math.
+  margin: 0 10px;
+}
+
+// This increases the size of the progress holder so there is an increased
+// hit area for clicks/touches.
+.video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: 1.666666666666666666em;
+}
+
+.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
+  font-size: 1em;
+}
+
+// .vjs-play-progress / PlayProgressBar and .vjs-load-progress / LoadProgressBar
+//
+// These are bars that appear within the progress control to communicate the
+// amount of media that has played back and the amount of media that has
+// loaded, respectively.
+.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;
+}
+
+.video-js .vjs-play-progress {
+  background-color: $primary-foreground-color;
+  @extend .vjs-icon-circle;
+
+  // Progress handle
+  &:before {
+    font-size: 0.9em;
+    position: absolute;
+    right: -0.5em;
+    top: -0.333333333333333em;
+    z-index: 1;
+  }
+}
+
+.video-js .vjs-load-progress {
+  background: rgba($secondary-background-color, $secondary-background-transparency);
+}
+
+// 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-background-color, 0.75);
+}
+
+// .vjs-time-tooltip
+//
+// These elements are displayed above the progress bar.
+//
+// By default, they are hidden and only shown when hovering over the progress
+// control.
+.video-js .vjs-time-tooltip {
+  @include background-color-with-alpha(#fff, 0.8);
+  @include border-radius(0.3em);
+  color: #000;
+
+  // By floating the tooltips to the right, their right edge becomes aligned
+  // with the right edge of their parent element. However, in order to have them
+  // centered, they must be pulled further to the right via positioning (e.g.
+  // `right: -10px;`. This part is left to JavaScript.
+  float: right;
+  font-family: $text-font-family;
+
+  // The font-size should translate to a consistent 10px for time tooltips in
+  // all states. This is tricky because the .vjs-progress-holder element
+  // changes its font-size when the .vjs-progress-control is hovered.
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-time-tooltip,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
+  display: block;
+
+  // Ensure that we maintain a font-size of ~10px.
+  font-size: 0.6em;
+  visibility: visible;
+}
+
+.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
+  font-size: 1em;
+}
+
+// .vjs-mouse-display / MouseTimeDisplay
+//
+// This element tracks the mouse position along the progress control and
+// includes a tooltip, which displays the time at that point in the media.
+.video-js .vjs-progress-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+}
+
+.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+  z-index: 0;
+}
+
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+  display: none;
+}
+
+.vjs-mouse-display .vjs-time-tooltip {
+  color: #fff;
+  @include background-color-with-alpha(#000, 0.8);
+}

node_modules/video.js/src/css/components/_slider.scss

@@ -0,0 +1,20 @@
+.video-js .vjs-slider {
+  position: relative;
+  cursor: pointer;
+  padding: 0;
+  margin: 0 0.45em 0 0.45em;
+
+  @include user-select(none);
+
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
+ }
+
+.video-js .vjs-slider.disabled {
+  cursor: default;
+}
+
+.video-js .vjs-slider:focus {
+  text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
+
+  @include box-shadow(0 0 1em $primary-foreground-color);
+}

node_modules/video.js/src/css/components/_subs-caps.scss

@@ -0,0 +1,27 @@
+// North America uses 'CC' icon
+.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-captions;
+}
+
+// ROW uses 'subtitles'
+// Double selector because @extend puts these rules above the captions icon
+.video-js .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
+.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder {
+  @extend .vjs-icon-subtitles;
+}
+
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
+  vertical-align: middle;
+  display: inline-block;
+  margin-bottom: -0.1em;
+}
+.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
+  font-family: VideoJS;
+  content: "\f10d";
+  font-size: 1.5em;
+  line-height: inherit;
+}

node_modules/video.js/src/css/components/_subtitles.scss

@@ -0,0 +1,3 @@
+.video-js .vjs-subtitles-button .vjs-icon-placeholder {
+  @extend .vjs-icon-subtitles;
+}

node_modules/video.js/src/css/components/_text-track.scss

@@ -0,0 +1,35 @@
+// Emulated tracks
+.vjs-text-track-display {
+  position: absolute;
+  bottom: 3em;
+  left: 0;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+// 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;
+}
+
+.vjs-subtitles { color: #fff; } // Subtitles are white
+.vjs-captions { color: #fc6; } // Captions are yellow
+.vjs-tt-cue { display: block; }
+
+// Native tracks
+video::-webkit-media-text-track-display {
+  @include transform(translateY(-3em));
+}
+
+// Move captions down when controls aren't being shown
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  @include transform(translateY(-1.5em));
+}

node_modules/video.js/src/css/components/_time.scss

@@ -0,0 +1,35 @@
+.video-js .vjs-time-control {
+  @include flex(none);
+  font-size: 1em;
+  line-height: 3em;
+  min-width: 2em;
+  width: auto;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+
+.vjs-live .vjs-time-control {
+  display: none;
+}
+
+// We need the extra specificity that referencing .vjs-no-flex provides.
+.video-js .vjs-current-time,
+.vjs-no-flex .vjs-current-time {
+  display: none;
+}
+
+.video-js .vjs-duration,
+.vjs-no-flex .vjs-duration {
+  display: none;
+}
+
+.vjs-time-divider {
+  display: none;
+  line-height: 3em;
+}
+
+.vjs-live .vjs-time-divider {
+  // Already the default, but we want to ensure when the player is live
+  // this hides in the same way as the other time controls for other skins
+  display: none;
+}

node_modules/video.js/src/css/components/_volume.scss

@@ -0,0 +1,268 @@
+.video-js .vjs-mute-control {
+  cursor: pointer;
+  @include flex(none);
+
+  & .vjs-icon-placeholder {
+    @extend .vjs-icon-volume-high;
+  }
+}
+
+.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
+  @extend .vjs-icon-volume-mute;
+}
+.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
+  @extend .vjs-icon-volume-low;
+}
+.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
+  @extend .vjs-icon-volume-mid;
+}
+
+.video-js .vjs-volume-control {
+  cursor: pointer;
+  margin-right: 1em;
+  @include display-flex;
+}
+.video-js .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control {
+  visibility: visible;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin-left: -1px;
+}
+
+.video-js .vjs-volume-panel {
+  &.vjs-hover .vjs-volume-control,
+  &:active .vjs-volume-control,
+  &:focus  .vjs-volume-control,
+  & .vjs-volume-control:active,
+  &.vjs-hover .vjs-mute-control  ~ .vjs-volume-control,
+  & .vjs-volume-control.vjs-slider-active {
+    &.vjs-volume-horizontal {
+      width: 5em;
+      height: 3em;
+      margin-right: 0;
+    }
+    visibility: visible;
+    opacity: 1;
+    position: relative;
+
+    &.vjs-volume-vertical {
+      left: -3.5em;
+      @include transition(left 0s);
+    }
+    $transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
+    @include transition($transition-property);
+  }
+
+  &.vjs-volume-panel-horizontal {
+    &.vjs-hover,
+    &:active,
+    &.vjs-slider-active {
+      width: 10em;
+
+      @include transition(width 0.1s);
+    }
+    &.vjs-mute-toggle-only {
+      width: 4em;
+    }
+  }
+
+  @include transition(width 1s);
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  height: 8em;
+  width: 3em;
+  left: -3000em;
+
+  $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
+  @include transition($transition-property)
+}
+
+.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  $transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
+  @include transition($transition-property)
+}
+
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
+  width: 5em;
+  height: 3em;
+
+  visibility: visible;
+  opacity: 1;
+  position: relative;
+
+  @include transition(none);
+}
+
+.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
+.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
+  position: absolute;
+  bottom: 3em;
+  left: 0.5em;
+}
+
+.video-js .vjs-volume-panel {
+  @include display-flex;
+}
+
+.video-js .vjs-volume-bar {
+  margin: 1.35em 0.45em;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal {
+  width: 5em;
+  height: 0.3em;
+}
+
+.vjs-volume-bar.vjs-slider-vertical {
+  width: 0.3em;
+  height: 5em;
+  margin: 1.35em auto;
+}
+
+.video-js .vjs-volume-level {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+
+  background-color: $primary-foreground-color;
+
+  @extend .vjs-icon-circle;
+
+  // Volume handle
+  &:before {
+    position: absolute;
+    font-size: 0.9em; // Doing this to match the handle on play progress.
+    z-index: 1;
+  }
+}
+
+.vjs-slider-vertical .vjs-volume-level {
+  width: 0.3em;
+
+  // Volume handle
+  &:before {
+    top: -0.5em;
+    left: -0.3em;
+    z-index: 1;
+  }
+}
+.vjs-slider-horizontal .vjs-volume-level {
+  height: 0.3em;
+
+  // Volume handle
+  &:before {
+    top: -0.3em;
+    right: -0.5em;
+  }
+}
+
+.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
+  width: 4em;
+}
+
+// Assumes volume starts at 1.0.
+.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
+  height: 100%;
+}
+
+.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
+  width: 100%;
+}
+
+.video-js .vjs-volume-vertical {
+  width: 3em;
+  height: 8em;
+  bottom: 8em;
+
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
+}
+
+.video-js .vjs-volume-horizontal .vjs-menu {
+  left: -2em;
+}
+
+// .vjs-volume-tooltip
+//
+// These elements are displayed above the volume bar.
+//
+// By default, they are hidden and only shown when hovering over the volume
+// control.
+.video-js .vjs-volume-tooltip {
+  @include background-color-with-alpha(#fff, 0.8);
+  @include border-radius(0.3em);
+  color: #000;
+  float: right;
+  font-family: $text-font-family;
+  font-size: 1em;
+  padding: 6px 8px 8px 8px;
+  pointer-events: none;
+  position: absolute;
+  top: -3.4em;
+  visibility: hidden;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  display: block;
+  font-size: 1em;
+  visibility: visible;
+}
+
+.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
+.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
+  left: 1em;
+  top: -12px;
+}
+
+.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
+  font-size: 1em;
+}
+
+// .vjs-mouse-display / MouseVolumeLevelDisplay
+//
+// This element tracks the mouse position along the volume control and
+// includes a tooltip, which displays the volume level.
+.video-js .vjs-volume-control .vjs-mouse-display {
+  display: none;
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background-color: #000;
+  z-index: 1;
+}
+
+.video-js .vjs-volume-horizontal .vjs-mouse-display {
+  width: 1px;
+  height: 100%;
+}
+
+.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+  z-index: 0;
+}
+
+.video-js .vjs-volume-control:hover .vjs-mouse-display {
+  display: block;
+}
+
+.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
+  visibility: hidden;
+  opacity: 0;
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
+  display: none;
+}
+
+.vjs-mouse-display .vjs-volume-tooltip {
+  color: #fff;
+  @include background-color-with-alpha(#000, 0.8);
+}

node_modules/video.js/src/css/components/menu/_menu-inline.scss

@@ -0,0 +1,62 @@
+.video-js .vjs-menu-button-inline {
+  @include transition(all 0.4s);
+  overflow: hidden;
+}
+
+.video-js .vjs-menu-button-inline:before {
+  // Icon pseudoelement has a different base font size (1.8em), so we need to
+  // account for that in the width. 4em (standard button width) divided by 1.8
+  // to get the same button width as normal.
+  width: 2.222222222em;
+}
+
+// Hover state
+.video-js .vjs-menu-button-inline:hover,
+.video-js .vjs-menu-button-inline:focus,
+.video-js .vjs-menu-button-inline.vjs-slider-active,
+.video-js.vjs-no-flex .vjs-menu-button-inline {
+  // This width is currently specific to the inline volume bar.
+  width: 12em;
+}
+
+.vjs-menu-button-inline .vjs-menu {
+  opacity: 0;
+  height: 100%;
+  width: auto;
+
+  position: absolute;
+  left: 4em;
+  top: 0;
+
+  padding: 0;
+  margin: 0;
+
+  @include transition(all 0.4s);
+}
+
+.vjs-menu-button-inline:hover .vjs-menu,
+.vjs-menu-button-inline:focus .vjs-menu,
+.vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+  display: block;
+  opacity: 1;
+}
+
+.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
+  display: block;
+  opacity: 1;
+  position: relative;
+  width: auto;
+}
+
+.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
+.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
+.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
+  width: auto;
+}
+
+.vjs-menu-button-inline .vjs-menu-content {
+  width: auto;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}

node_modules/video.js/src/css/components/menu/_menu-popup.scss

@@ -0,0 +1,44 @@
+.vjs-menu-button-popup .vjs-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  width: 10em;
+  left: -3em; // (Width of vjs-menu - width of button) / 2
+  height: 0em;
+  margin-bottom: 1.5em;
+  border-top-color: rgba($primary-background-color, $primary-background-transparency); // Same as ul background
+}
+
+// Button Pop-up Menu
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
+
+  position: absolute;
+  width: 100%;
+  bottom: 1.5em; // Same bottom as vjs-menu border-top
+  max-height: 15em;
+}
+
+.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 5em;
+}
+
+.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 10em;
+}
+
+.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 14em;
+}
+
+.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,
+.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
+  max-height: 25em;
+}
+
+.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu,
+.vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
+  display: block;
+}

node_modules/video.js/src/css/components/menu/_menu.scss

@@ -0,0 +1,73 @@
+.vjs-menu-button {
+  cursor: pointer;
+}
+
+// Change cursor back to default if the menu button is disabled
+.vjs-menu-button.vjs-disabled {
+  cursor: default;
+}
+
+// prevent menus from opening while disabled
+.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu .vjs-menu-content {
+  display: block;
+  padding: 0;
+  margin: 0;
+  font-family: $text-font-family;
+
+  // This allows scrolling of content if need be.
+  overflow: auto;
+}
+
+// Reset box-sizing inside the menu.
+.vjs-menu .vjs-menu-content > * {
+  box-sizing: border-box;
+}
+
+// prevent menus from opening while scrubbing
+.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
+  display: none;
+}
+
+.vjs-menu li {
+  list-style: none;
+  margin: 0;
+  padding: 0.2em 0;
+  line-height: 1.4em;
+  font-size: 1.2em;
+  text-align: center;
+  text-transform: lowercase;
+}
+
+.vjs-menu li.vjs-menu-item:focus,
+.vjs-menu li.vjs-menu-item:hover,
+.js-focus-visible .vjs-menu li.vjs-menu-item:hover {
+  @include background-color-with-alpha($secondary-background-color, $secondary-background-transparency);
+}
+
+.vjs-menu li.vjs-selected,
+.vjs-menu li.vjs-selected:focus,
+.vjs-menu li.vjs-selected:hover,
+.js-focus-visible .vjs-menu li.vjs-selected:hover {
+  background-color: $primary-foreground-color;
+  color: $primary-background-color;
+}
+
+.video-js .vjs-menu *:not(.vjs-selected):focus:not(:focus-visible),
+.js-focus-visible .vjs-menu *:not(.vjs-selected):focus:not(.focus-visible) {
+  background: none;
+}
+
+.vjs-menu 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;
+}