All Collections
Advanced Use-Cases
Customizing Player Interface Elements
Customizing Player Interface Elements

Using the custom code feature inside of Spotlightr, you are able to customize some elements of the interface

Updated over a week ago

This article will build out different ways you can customize the player to change certain elements that don't have an integrated way to change them inside of your app options.

Many elements and buttons can be easily customized via Spotlightr app settings. However some edge cases are not covered, and in these cases you may be able to customize elements with custom code.

We'll review examples below.

Auto-Play Un-mute Button

You are able to change the color of the button or size of the button by adding some custom code.

Here is the Un-mute button by default:

You can change the background color of the button to red by adding this code to your Custom Code section:


.mute-button {
background:red !important;

Which will result in this:

Playlist Background Color

To change the background color to something specific use this code:

#playlistVideoList {background:white

Just change the color as necessary.

We will continue to build onto this topic as customer questions arise.

Font of the Video Title

The font that appears at the top of the video when you turn that option on can be changed:

This can be changed via the watch page customization field. Navigate to your Theme >> Watch Page >> Advanced Options:

Here is the code, just change the font name accordingly:

#video-name {
font-family: Georgia, serif;

Did this answer your question?