I’m using videojs-marker plugin to build a customized player that loads custom markers.

Each marker has a "type" that determines its color. I know that I can give a "class" attribute to each marker but the problem is that I have a lot of types and I do not want to create a separate CSS class for each type because it will be hard to maintain.

The code for creating the markers look something like this:

const markers = this.chapters.map(chapter => ({
  time: chapter.time / 1000,
  markersType: chapter.type,
  text: chapter.label,
  class: 'cue-style'
}));

cue-style CSS class looks like this:

/deep/ .cue-style {
  background-color: blue;
}

what I want is to alter the CSS class each time with a background-color based on chapter.label

is there any way to alter the default class of the marker instead of passing a new class each time?

something like:

const markers = this.chapters.map(chapter => ({
  time: chapter.time / 1000,
  markersType: chapter.type,
  text: chapter.label,
  markerStyle: {
    'background-color': 'red'
  },
}));