Exemplos

Três mudanças que cobrem a maior parte do que os times querem do player. Cada uma é um punhado de variáveis CSS no elemento vturb-smartplayer.

Ajustar o player às cores da sua marca

A barra de progresso carrega a maior parte da identidade visual do player — a trilha, a parte assistida e a alça:

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

Arredondar os cantos

O raio da borda definido no painel tem precedência, então o valor precisa de !important:

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

Usar a sua própria fonte

O player não herda nada da sua página por padrão, então defina a família explicitamente. Carregue a fonte na sua página como de costume; isto apenas informa ao player qual usar.

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