harella1/video.js

.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;
}
// Don't transition when tabbing in reverse to the volume menu
// because it looks weird
.video-js .vjs-menu-button-inline.vjs-slider-active {
  @include transition(none);
}

.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;
}