Player Themes

How to configure your Player Themes for your video players, watch pages, and custom domains

Updated over a week ago

Themes Overview

Spotlightr Themes form the framework of your videos and watch pages. They are used to configure the features, settings, and brand identity that you need for every video that you publish in a particular project.

When you add a video to Spotlightr, all videos must be part of a Project. Once a project is created, you can apply a theme to it. Every video added to that project will have that theme applied to it. If you don't apply a custom theme you created to a project, then default settings will be used.

One thing to note is that not ALL Spotlightr features are configured in themes. Some are on the individual video level and must be set when configuring an individual video. But most features are set in themes.

Create a New Theme

There are multiple ways to create a new theme:

1. When you create a new project, you can create it here:

2. From your list of projects, you can create it from the theme label here:

3. Navigate to your App Settings on the left-side menu, then Themes tab. You will see a button to Add Theme:

A new pop-up window opens to configure the theme settings. You can see the previews for both the actual player and the watch page as you personalize the theme settings.

Once you configure your settings, be sure to name the theme and click Save & Close.

Please note that when you create a new theme it is only created. It still needs to be applied to a project.

Apply Theme To Project

From your list of projects, simply click on the themes label next to the project. This will open a drop-down menu to select the theme you've already created.

Alternatively, if you're inside a project, you can hover over the area right next to the project name to reveal this pencil icon (by default it's hidden). ​

That will open an edit project pop-up window. Select the theme to apply (or create a new one).

Please not that at any time you can switch between different themes as well.

Delete a Theme

From the main menu on the left side click on App Settings, then the Themes tab.

Click on the three dots next to the theme name to open the available options, and click Delete Theme.


Theme Configurations

While configuring your theme, many of the features can be previewed. You can see the previews for both the actual player and the watch page as you personalize the theme settings.

Player Colors & Logo

Here is where you'll set all colors of the player to match your brand palette, as well as set the colors for all of your dialog windows and links. Also set your logo to display in the corner of your video.

Player Colors

These are the colors for your play button and player controls. Fore more information and instructions, see our guide on Player Colors.

Dialog Colors

Customize the colors of all of your dialog windows, pop-ups, forms, links, overlays, etc across any Spotlightr feature that generates these.

For more information and instructions, see our guide on Dialog Colors.

Custom Logo

Set your brand logo in one of the corners of your video to reinforce brand awareness. For more information and instructions, see our guide on setting your Custom Logo.

Play Button

Customize the main play button that appears in the middle of your player, including the size, shape, and border. For more information and instructions, see our guide on the Play Button:

Security

Various options to configure added security to your videos.

Disable watch page - This will disable the watch page from being viewed. The watch page will still load, but it will show a message that it's been disabled.

HLS Encode videos - This feature is turned on by default, meaning that all videos will be encrypted when uploaded by default. If you want the default to be unencrypted then disable this setting.

Show IP Watermark - Displays the viewer's IP address in the corner of the video to discourage screen recording or monitor recording

Password Protect - Adds a password to the video at the time stamp of your choice

GeoControl - Add countries to your "allow" list. When configured, any country you add will be the only countries that can view your videos. The rest are blocked.

Player Settings

These are various playback, display, and player control settings.

Playback Speed - Adds an icon to your player so viewers can adjust speed of the video. Speeds are .5, .75, 1, 1.25, 1.5, 2.

Auto-Play - Auto-plays the video when the video loads on the page. As per current modern browser restrictions, the player must auto-play muted. A button to "unmute" the video will show in the corner of the player.

Auto-Resume - When activated any viewer that stops a video and later returns to the same video will start where the video left off on last visit

Comments - Allow viewers to leave comments, either public or private, as well as reactions

Share Widget - Adds a widget to the video for social sharing

OnFinish Action - Add various automated actions to occur after the video is watched to completion.

Pre & Post Rolls - Add a video clip to appear before or after the video.

Player Settings >> Advanced Options

Tracking Codes & Tags - Add any tracking code to fire at any point in the video or configure contacts to get tagged in CRM when they watch a video or a certain percentage of video

Show Video Title - Displays the title of the video in top left corner of the video

Hide Play Timeline - Hides the timeline in the player controls so that viewers can't see the progress of the video or skip back and forth. Other icons/buttons will still show like the play button, pause, volume, etc

Enable Screen Cast -

Always Visible Controls - By default the controls at the bottom of the video player are only shown when the mouse is hovering over the video. Enabling this feature keeps the player controls always visible.

Hide All Controls - This will hide all controls like the play button, pause, timeline, etc. Absolutely no controls will show at the bottom of the video player.

Skip & Rewind - Enables 2 buttons in the player controls that allows viewers to skip forward or rewind the video 10 seconds.

Disable Forward Seek - Viewers can rewind video but cannot skip ahead.

Show Remaining Time - When video is first played will show the total length of the video. Then will continue to show the remaining time of the video and count down as the video progresses.

Show Video Duration - When video is first played this starts at 0:00. Then will show how long the video has been playing and will count up as the video progresses

Show Controls On Load - By default when our player loads on a page only the main play button is visible. Enabling this feature will load all player controls when the video loads

Affiliate Badge - Displays a small Spotlightr logo in the bottom corner of your player controls that is automatically linked to your affiliate link (you must first sign up for the affiliate program.)

Enable Full-screen - Adds button to controls that allows viewer to view video in full screen.

Full screen on Play - When the play button is clicked, the player automatically launches into full screen mode. Can be configured for mobile-only or both mobile and desktop.

Enable Download - Adds button to controls to allow viewer to download copy of the video

Disable Pause - When enabled, viewers will not be able to pause button in any way

Image on Pause - Display an image in the middle of the video when the video is paused

Volume Level - Adds button to controls to configure volume level.

SMART Playback - Video will pause automatically when viewer navigates away and continue to play when video is again in view

Hide Replay Button - By default when a video is finished we display a replay button in the middle of the player. Enabling this will hide that button

Hide Play Button - Hides the play button from middle of player.

Disable Preload - By default when a video is loaded on the page we load a fraction of the beginning so that the video plays instantly when play is clicked. Disabling this will not load that fraction of the video and instead load only the thumbnail. This provides for a slightly quicker load on the page. This is mostly used for pages with multiple videos on them.

Play Frame By Frame - Navigate video frame by frame via comma (,) and period (.) on keyboard.

Limit Once Per Viewer - Every video of the video can only watch once, then video is disabled for them

View Notifications - Send a notification to your email when a video is viewed

VAST Feed - Add advertisements to your videos via various ad network platforms

Forward URL Parameters - Forward any query string from a page you have a video on to overlays

Overlays & Annotations

Add various forms, buttons, links, etc to your video. For more information and instructions, see our guide on Overlays & Annotations.

Advanced > Watch Page

This section configures your theme for your Watch Page only. Keep in mind that you also have Watch Page settings for each individual video as well. This will set the colors, fonts, logo, etc to stay on brand for all watch pages with this theme applied.

Watch Page Logo URL - This is the logo that will show in the header of your Watch Page. The Spotlightr logo is used by default. You can either enter the URL of it's location or upload an image.

Watch Page Favicon URL - This is the logo that will show in the browser tab. The Spotlightr logo is used by default. You can either enter the URL of it's location or upload an image.

Show Placeholder Headline - Your Watch Page headline is configured on your individual videos. Select this box to show a placeholder to see how your headline font, size and color will look.

Headline Font Family, Font Size, Color - Customize the look of your headline.

Hide Video Title - Hides the title shown by default under the video in watch pages

Hide Plays Count - Hides the play count shown by default under a video in watch pages

Video Background Color - Background color of the area surrounding the video only

Header Background Color - Please note this will only show if you change the default logo. This changes the color of the header area right above the headline and video.

Watch Page >> Advanced Options

Custom Code - Any code you want to add to customize your Watch Pages further

Advanced > Publishing

Use Advanced Code - By default all videos show our default embed code when you browse your publish options. Enabling this will show your advanced code by default.

SEO Optimization - Adds code to your embed code so your videos can be crawled by search engines

Custom Domain - Here you can set your own custom domain to use for your Watch pages instead of using the spotlightr.com domain. Instead of using a custom domain you can also change the sub-domain for your spotlightr.com link (so that you have a custom sub-domain for this theme that overrides the default sub-domain in your Account Profile.)

Advanced > Captions & Transcripts

Generate transcripts from the audio of your videos and display captions for them. Add interactive transcripts so viewers can search the transcription for specific parts of the video. For more information and instructions, see our article on Captions & Transcripts.

Did this answer your question?