How can I make a full width videojs v5 progress bar?

Question

I would like to change the videojs v5 controls layout in order to make a full width progress bar, on top of the vjs-control-bar area, similar to the pre-v5 player skin.

Here is the v5 skin:

And here is the pre-v5 skin. Notice the full width progress bar:

How should I proceed? Is it necessary to modify the component structure tree within the ProgressControl component or can it be done using CSS only, with the existing ProgressControl component?

I noticed that I can put it on top by changing the vjs-progress-control display CSS property from flex to block, initial or inline but I can't set the width to 100% (other ProgressControl components width are still considered). I assume it is because the vjs-progress-control is still in the flex flow of the container.

EDIT

I made some progress. I can achieve the desired effect by using the following CSS:

.vjs-progress-control {  
  position: absolute;
  bottom: 26px; /* The height of the ControlBar minus 4px. */
  left: 0;
  right: 0;
  width: 100%;
  height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */
}
.vjs-progress-holder {/* needed to have a real 100% width display. */
  margin-left: 0px;
  margin-right: 0px;
}

Unless one of you find a way to make it better, I will post this edit as accepted answer when it will be allowed.

I like your solution better than the accepted answer -- less code and it works well. The rest is really just fluff. — Thomas, Dec 03 '15 at 17:18

rafaelcastrocouto · Accepted Answer · 2015-10-21T00:26:45.293

DEMO

  .vjs-fluid {
    overflow: hidden;
  }
  .vjs-control-bar {
    display: block;
  }
  .vjs-control {
    position: absolute;
  }
  .vjs-progress-control {
    bottom: 28px; left: 0;
    height: 10px;
    width:  100%;
  }
  .vjs-progress-holder  {
    position: absolute;
    left: 0; margin: 0;
    height: 8px; width:  100%;
  }
  .vjs-play-progress,
  .vjs-load-progress {
    height: 8px;
  }
  .vjs-play-progress:before {
    font-size: 12px; top: -2px; 
    text-shadow: 0 0 2px black 
  }
  .vjs-current-time {
    display: block;
    left: 35px;
  }
  .vjs-time-divider {
    position: absolute;
    display: block;
    left: 70px;
  }
  .vjs-remaining-time {
    display: none;   
  }
  .vjs-duration {
    display: block;
    left: 70px;
  }
  .vjs-volume-menu-button {
    position: absolute;
    bottom: 0; right: 55px;
  }
  .vjs-playback-rate {
    position: absolute;
    bottom: 0; right: 28px;
  }
  .vjs-fullscreen-control {
    position: absolute;
    bottom: 0; right: 0;
  }

There's still need to style the subtitles, captions and chapter buttons

This doesn't work outside of Chrome. Other browsers display an overlap between the control bar and the progress bar. Also the case with the OP's solution, as well. I don't know what the solution for the overlap, but thought that I would mention it. +1 to your answer, though. — Thomas, Dec 03 '15 at 18:36

score 4 · Answer 2 · answered Dec 03 '15 at 22:00

.video-js .vjs-progress-control {
    position:absolute;
    width: 100%;
    top:-.3em;
    height:3px;
    /* deal with resulting gap between progress control and control bar that
       is the result of the attempt to keep things "clickable" on the controls */
    background-color: #2B333F;
    background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-progress-holder {
    position:absolute;
    margin:0px;
    top:0%;
    width:100%;
}

This seemed to get rid of the problems I had across other browsers with the :hover styling inherited from video.js. More masterful css developers might be able to make the expansion a bottom-to-top expansion, negating the need for the fancy footwork around the position of the progress control and the color.

tmm1 · Answer 3 · 2017-05-03T19:14:40.450

Here is a minimal custom skin (in scss) that shows a full-width progress bar above the rest of the controls. This works with video.js 5.19.2

.video-js.vjs-custom-skin {
  .vjs-custom-control-spacer {
    display: flex;
    flex: 1 1 auto;
  }
  .vjs-time-divider {
    display: inherit;
  }
  .vjs-current-time {
    margin-left: 1em;
  }
  .vjs-current-time, .vjs-duration {
    display: inherit;
    padding: 0;
  }
  .vjs-remaining-time {
    display: none;
  }
  .vjs-play-progress:before {
    display: none;
  }
  .vjs-progress-control {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: .5em;
    top: -.5em;

    &:hover {
      height: 1.5em;
      top: -1.5em;
    }
  }
  .vjs-progress-holder {
    margin: 0;
    height: 100%;
  }
}

How can I make a full width videojs v5 progress bar?

3 Answers3