Marker Color Styling

Custom colors and styles

This example demonstrates configuring the plugin with custom colour and styles for each marker.

Color Css Style Config

The style name style referencing a css selector can be configured like so:

#colors .jw-cue.one { background-color:#000000;}
#colors .jw-cue.one:hover { background-color:#CCCCCC;}
#colors .jw-cue.two { background-color:#CCCCCC;}
#colors .jw-cue.two:hover {background-color:#FFFFFF;}
#colors .jw-cue.three {background-color:#999999;}
#colors .jw-cue.three:hover {background-color:#FFFFFF;}

Refernce the css selector with the style property

{
  "startTime": 120,
  "endTime": 180,
  "style": "one"
}
    <div class="flex w-full h-auto my-auto">
          <div id="colors" class=""></div>
  </div>
  <script type="text/javascript">
  	var player = jwplayer("colors").setup({
    "aspectratio": "16:9",
    "markers": [
        {
            "endTime": 180,
            "startTime": 120,
            "style": "one",
            "text": "Marker 1"
        },
        {
            "endTime": 360,
            "startTime": 300,
            "style": "two",
            "text": "Marker 2"
        },
        {
            "endTime": 570,
            "startTime": 510,
            "style": "three",
            "text": "Marker 3"
        }
    ],
    "playbackRateControls": true,
    "plugins": {
        "../../js/videomarkers-8.1.0.js": {}
    },
    "sources": [
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.webm",
            "type": "webm"
        },
        {
            "file": "https://videos.electroteque.org/bitrate/big_buck_bunny_2000k.mp4",
            "type": "mp4"
        }
    ],
    "width": "100%"
});
  </script>