Spotlightr allows you to completely change and customize the player style to match your brand. The branding options for the video player colors, play button options and custom logo are all found in your Theme.

To configure these options navigate to your Theme >> Player Colors & Logo

Player Colors

There are 4 color controls:

These can be edited by clicking on the circular color picker next to each one. When you click on one you will get your color picker.

Be aware that in addition to picking your color you can also adjust the transparency of each. The first horizontal bar is the color picker. And the second horizontal bar is the transparency which is pointed to here:

Player Icons & Text

This is the white color that you see by default when you create a new Theme. This is the color for the middle of your play button as well as any text/number and icons in your video controls:

Player Controls Background

This is the background of the Play button and the background of the player controls at the bottom. When you create a new theme by default this is set to transparent so no color is showing on the play button background. There is only the white color set for Player icons & text as shown above.

If I change this color to a blue color it will result in this:

Player Bar

This is the color of the progress bar. Here I've changed it to an orange color:

Player Highlight

This is the color of the gradient that shows at the top and the bottom of the player when you hover over the video.

If you want to completely remove it, just set the transparency control all the way to the left as shown here:

Custom Logo

We have a dedicated article for this feature.

Play Button

There are additional options here to further customize the look of your player by clicking on the Play Button option. You'll see this:

Button Animation - Choose from a variety of animations for your play button

Button Size - Change shape of entire play button including the background

Button Shape - Choose from a variety of shapes for your play button

Button Border - This will add a border around your play button and background. The color of this is controlled by the Player Bar color described above.

Preview Duration - This will show the duration of your video right underneath the play button

Under Advanced Options:

Play Button Image - Here you can add a URL for your own play button, or upload it by dragging it and dropping it into the supplied field

Button Position - Choose from a variety of positions for your play button to appear on your video

Did this answer your question?