PlayerPersonalización

Ejemplos

Colores, esquinas redondeadas y fuente personalizada

Tres cambios que cubren la mayor parte de lo que los equipos quieren del reproductor. Cada uno es un puñado de variables CSS en el elemento vturb-smartplayer.

Ajustar el reproductor a los colores de tu marca

La barra de progreso carga casi toda la identidad visual del reproductor — la pista, la parte reproducida y el tirador:

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

Redondear las esquinas

El radio del borde definido en el panel tiene precedencia, así que el valor necesita !important:

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

Usar tu propia fuente

El reproductor no hereda nada de tu página por defecto, así que define la familia explícitamente. Carga la fuente en tu página como de costumbre; esto solo le dice al reproductor cuál usar.

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

Los titulares tienen su propia --headline-font-family, con valor inherit, así que siguen este valor a menos que los sobrescribas por separado.

En esta página