Video.js: How to extend the clicked area in progress control

[ghost]

Hi,

I think the current progress control bar is a little bit hard to click because the gray area is small.

Is that possible to increase the clicked area to the red rectangle of the above diagram?
If yes, how could I modify to reach this?

Thanks.

[RDGHZ]

Well, what I did is, Add a new div element with a width of 100%, behind the bar (position: absolute;) and high height: 25px; (Or what is necessary) and add z-index if necessary to be behind.

This should work as padding.

Translated by Google

[gkatsev]

This is something that we've thought about doing in videojs, we haven't done it yet, mostly due to time constraints. The volume control already supports this ability, so, we really just need to extended it our sliders in general.

[ghost]

Hi @RodrigoMaster7,

If I add a new div element, how could I make it clickable? The clickable HTML code of control bar is as following:

<div class="vjs-progress-control vjs-control">
  <div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.93" aria-valuemin="0" aria-valuemax="100" aria-label="progress bar" aria-valuetext="0:00">
    <div class="vjs-load-progress" style="width: 55.0256%;"><span class="vjs-control-text" style="left: 0%; width: 100%;"><span>Loaded</span>: 0%</span></div>
    <div class="vjs-mouse-display" data-current-time="0:01" style="left: 14px;"></div>
    <div class="vjs-play-progress vjs-slider-bar" data-current-time="0:00" style="width: 0.93%;"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div>
  </div>
</div>

Could you give me some tips how or where should I add the div and make it clickable?
Thank you.

[RDGHZ]

Look in the file "Video.js" and add or replace the "InnerHTML" line as shown in the following code:

  SeekBar.prototype.createEl = function createEl() {
    return _Slider.prototype.createEl.call(this, 'div', {
      className: 'vjs-progress-holder',
      innerHTML : "<div class='progress-bar-padding'></div>"
    }, {
      'aria-label': 'progress bar'
    });
  };

It would already be added in the DOM, just add the styles to the div. Saludos.

• Translated by Google

[ox-michaelradionov]

It did it by creating a custom CSS theme. The problem is that .vjs-progress-holder is both used as a background for a progress bar and for capturing user clicks. What I did is I've removed background from this class, increased it's click area by adding more padding and moved background into :before for this same element. Make sure to adjust a position of progress bars inside of .vjs-progress-holder which are used for "load" and "play", because they will be misplaced after adding some padding. Here is my source:

$progress-height: 5px;
$progress-offset-top: 8px;

.vjs-progress-control {

    .vjs-progress-holder {
      font-size: 13px;
      padding: $progress-offset-top 0 15px 0;
      background: none;

      &:before {
        content: '';
        display: block;
        width: 100%;
        height: $progress-height;
        background: #485466;
      }

      .vjs-load-progress,
      .vjs-play-progress {
        height: $progress-height;
        top: $progress-offset-top;
      }
}

[edemaine]

@ox-michaelradionov Nice solution. This worked for me. I just had to add one additional rule to put the black vertical line in the right place:

  .vjs-progress-control .vjs-progress-holder .vjs-mouse-display {
    top: 0px;
  }

Presumably the "right" solution is to rebind the click event on the vjs-progress-control parent object, which is what already triggers the hover effects.

Incidentally, this counterintuitive behavior may be what's causing #4464. It would also help a lot for #396.

[gkatsev]

We've since updated to make seeking work properly here (we forgot to make clicking work properly but hopefully we'll get to that soon).

[lexiv0re]

For those who are still looking for a workaround that doesn't affect any other styling:

.vjs-progress-control {
  .vjs-progress-holder {
    position: relative;

    &::before {
      bottom: -300%;
      content: '';
      left: 0;
      position: absolute;
      right: 0;
      top: -300%;
    }
  }
}

Tested with video.js v6.6.0.