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:
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:
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.
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.