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 | Default Player Theme ‘Blue’: #045473 Player Theme 'Red': #F03619 Player Theme 'Orange': #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 | Default Player Theme ‘Blue’: #045473 Player Theme 'Red': #F03619 Player Theme 'Orange': #F3B91A |
| --stn-player-adVolumeBarTrackUnusedColor | rgba(0,0,0,0.3) |
| Variable | Default |
| --stn-player-adVolumeBarThumbColor | rgb(255, 255, 255) |
| --stn-player-volumeBarTrackColor | Default Player Theme ‘Blue’: #045473 Player Theme 'Red': #F03619 Player Theme 'Orange': #F3B91A |
| --stn-player-volumeBarTrackUnusedColor | rgba(0,0,0,0.3) |
| --stn-player-volumeBarThumbColor | rgb(255, 255, 255) |
| --stn-player-barkerSelectedPlaylistItemBackgroundColor | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --stn-player-barkerSelectedPlaylistItemLeftBorderColor | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --stn-player-barkerBackground | #1a3843 |
| --stn-player-hoveredPlaylistItemTitleColor | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --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 | Default Player Theme 'Orange'/’Blue’: #CCCCCC Player Theme 'Red': #9E1E0A |
| --stn-player-scrollBarTrackColor | rgb(6, 3, 3) |
| --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 | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --stn-player-titleBarColor | rgb(255, 255, 255) |
| --stn-player-titleBarButtonsBackground | #F3B91A |
| --stn-player-titleBarButtonsBackgroundHover | #F3B91A |
| --stn-player-titleBarBackground | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --stn-player-miniTitleBarColor | Default 'Black': #FFFFFF Float Theme 'White': #000000 |
| --stn-player-miniTitleBarBackground | Default 'Black': #000000 Float Theme 'White': #FFFFFF |
| --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 | Default Player Theme 'Orange'/’Blue’: #045473 Player Theme 'Red': #9E1E0A |
| --stn-player-playerBackground | rgb(249, 249, 249) |
| --stn-player-borderRadius | 0px |
| --stn-player-floatZIndex | 2147483647 |
| --stn-player-floatMarginY | (none) |
| --stn-player-stnEngageProgressColor | #F5B900 |
| --stn-player-stnEngageTimeLeftColor | #282829 |
| --stn-player-readMoreButtonColor | #F3B91A |