The STN Video Player can be customized for your site! Our player has built in CSS variables you can use to customize parts of the player appearance, including aspects such as the colours of the title bar, progress bar and more.
To use these variables you'll need to be familiar with CSS (Cascading Style Sheets), if you're not sure how to use CSS, please talk to your developer team. If you'd like to learn more about CSS, Mozilla has a great overview here: https://developer.mozilla.org/en-US/docs/Web/CSS
How to use a variable
Example Code
change the background of the title bar
<style>
body
{ --stn-player-titleBarBackground: #0af21d;
}
</style>
Available Variables
| Variable | Default |
| --stn-player-adProgressBarTrackColor | #FF0 |
| --stn-player-adProgressBarTrackTimeLeftColor | transparent |
| --stn-player-adProgressBarThumbColor | rgb(255, 255, 255) |
| --stn-player-progressBarTrackColor | #F3B91A |
| --stn-player-progressBarTrackTimeLeftColor | transparent |
| --stn-player-progressBarThumbColor | rgb(255, 255, 255) |
| --stn-player-timeElapsedColorMini | #F3B91A |
| --stn-player-timeRemainingColorMini | rgb(255, 255, 255) |
| --stn-player-adVolumeBarTrackColor | #F3B91A |
| --stn-player-adVolumeBarTrackUnusedColor | rgba(0,0,0,0.3) |
| Variable | Default |
| --stn-player-adVolumeBarThumbColor | rgb(255, 255, 255) |
| --stn-player-volumeBarTrackColor | #F3B91A |
| --stn-player-volumeBarTrackUnusedColor | rgba(0,0,0,0.3) |
| --stn-player-volumeBarThumbColor | rgb(255, 255, 255) |
| --stn-player-barkerSelectedPlaylistItemBackgroundColor | inherit |
| --stn-player-barkerSelectedPlaylistItemLeftBorderColor | #045473 |
| --stn-player-hoveredPlaylistItemTitleColor | #045473 |
| --stn-player-selectedPlaylistItemBackgroundColor | rgb(217, 217, 217) |
| --stn-player-selectedPlaylistItemLeftBorderColor | transparent |
| --stn-player-bigPlayButtonColor | rgb(255, 255, 255) |
| --stn-player-bigPlayButtonBackground | #F3B91A |
| Variable | Default |
| --stn-player-controlbarActiveButtonsColour | #F3B91A |
| --stn-player-panelBackground | rgb(241, 241, 241) |
| --stn-player-scrollBarColor | #045473 |
| --stn-player-scrollBarTrackColor | rgb(225, 225, 225) |
| --stn-player-smartMenuButtonBackground | inherit |
| --stn-player-smartMenuButtonColor | green |
| --stn-player-menuButtonBackground | inherit |
| --stn-player-menuButtonColor | inherit |
| --stn-player-spinnerColor1 | #95E5E5 |
| --stn-player-spinnerColor2 | #045473 |
| --stn-player-subtitleCueColor | rgb(255, 255, 255) |
| Variable | Default |
| --stn-player-subtitleCueFontSize | 0.75em |
| --stn-player-subtitleCueBackgroundColor | #045473 |
| --stn-player-titleBarColor | rgb(255, 255, 255) |
| --stn-player-titleBarButtonsBackground | #F3B91A |
| --stn-player-titleBarButtonsBackgroundHover | #F3B91A |
| --stn-player-titleBarBackground | #045473 |
| --stn-player-miniTitleBarColor | rgb(255, 255, 255) |
| --stn-player-miniTitleBarBackground | black |
| --stn-player-miniTitleBarButtonsBackground | #F3B91A |
| --stn-player-miniTitleBarButtonsColor | white |
| --stn-player-unmuteBackgroundColor | #F3B91A |
| Variable | Default |
| --stn-player-unmuteColor | rgb(255, 255, 255) |
| --stn-player-upNextBannerColor | rgb(255, 255, 255) |
| --stn-player-upNextBannerBackground | #045473 |
| --stn-player-playerBackground | rgb(249, 249, 249) |
| --stn-player-borderRadius | 10px |
| --stn-player-floatZIndex | 2147483647 |
| --stn-player-stnEngageProgressColor | #F5B900 |
| --stn-player-stnEngageTimeLeftColor | #282829 |
| --stn-player-readMoreButtonColor | #F3B91A |