Spotlightr allows you to completely change and customize the player style. You will find this feature under Appearance & Style >> Player Colors & Style.


There are 4 color controls:

Player Controls Background

This is the background of the Play button and the background of the player controls. By default this is set to transparent so no color is showing on the play button background. There is only the white color of the play icon (triangle):

And there is no color showing for the player controls:

As you can see from this image, the control for transparency is all the way to the bottom so the color is completely transparent:

To set a color for this option, I'll scroll the control on the right side for transparency all the way to the top so the color is completely opaque. Then I'll choose the color range I need on the left, which in this case is blue:

Then I'll choose the shade of blue I want and then click Select:

You'll now see that color in the menu options:

Next click Save:

And now you will see that blue color in the play button background and the player controls background:

Player Icons & Text

This is the white color that you see in the previous images

Player Bar

This is the color of the progress bar here:

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 bottom and then choose white as your color by dragging the color picker to the top left corner. Alternatively you can manually enter 255, 255, 255 as the color which is white, and then the last digit should be 0 which represents the transparency:

Button & Controls

There are additional options here to further customize the look of your player:

Timeline Position - Inline when able will set the player timeline to be on the same line as the other controls where able. Always on top will present the timeline on top of the other player controls

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

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

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

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

Button Border - This will add a border around your play button and background

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

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

Did this answer your question?