Examples

Three changes that cover most of what teams want from the player. Each one is a handful of CSS variables on the vturb-smartplayer element.

Match the player to your brand colors

The progress bar carries most of the player's color identity — the track, the played portion and the handle:

vturb-smartplayer {
  --progressbar-background-color: rgba(255, 0, 0, 0.2);
  --progressbar-fill-color: #ff0000;
  --progressbar-handle-color: #ff0000;
}

Round the corners

The border radius set in the dashboard takes precedence, so the value needs !important:

vturb-smartplayer {
  --player-border-radius: 10px !important;
}

Use your own font

The player inherits nothing from your page by default, so set the family explicitly. Load the font on your page as usual; this only tells the player which one to use.

vturb-smartplayer {
  --style-font-family: "Your Custom Font", sans-serif;
}