With Player Themes you can create a theme and brand identity that can apply to your embedded video player, watch pages, and the URL that appears for your watch pages. In this article we'll explain how to configure your Theme and how to apply it to your videos.

Themes can be accessed from your Account Settings -> Themes

When you create a new theme, you will see your Watch Page preview on the left side of the page and your theme options on the right.

The first step is to name your theme. You will also see an option to set that theme as default. If you enable the default option, then this theme will automatically be chosen when you upload a new video.


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 theme will set the colors, fonts, logo, etc to stay on brand.

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.

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.

Watch Page 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 Background color - Changes the color on the sides of the video

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

For example, you can use the Bablic translation service to translate the important elements of a page without modifying them by integrating a short code. This preserves the function of the page, but it is readable in another language.


Player Colors

This section configures your theme for your embedded player. Keep in mind that these settings can also be configured on individual videos. But once you select a theme for a video, any settings already configured will be overwritten by the theme.

Player Controls Background - This is the background of the Play button and the background of the player controls.

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

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.

For more detailed information on how to set the colors and how to use the color picker please see this article on Player Colors & Styles.


Buttons & Controls

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


Page Title & Domains

Watch Page Site Title - Title of your brand/account and what will show on the tab in your browser of your Watch Page

Custom Domains - Here you can set your own custom domain (or use our generic domain) to use for your Watch pages instead of using the spotlightr.com domain.

For example, instead of your Watch Page link as:

https://myaccount.cdn.spotlightr.com/watch/123456

you would instead use something like this:

https://mysubdomain.mydomain.com/watch/123456

In this example 'mydomain' is an actual domain that you own with a sub-domain configured. So if you own acme.com, you can use a sub-domain with it for your Watch Pages. For example, your links could look like:

https://videos.acme.com/watch/123456.

There are 2 ways to add a custom domain. Using our generic domain or using your custom domain.

1 - Using a Generic Domain

This first option can be used if you don't have your own domain yet or just want a quick and easy way to use a generic domain instead of spotlightr.com.

You can use our generic domain vplay.media. So your full URL would bet yoursubdomain.vplay.media.

To set this, simply enter the subdomain you want with the domain "vplay.media" in the Custom Domain field. You can use anything you want for the subdomain.

In this example, my subdomain is "mycoolvideos". So my complete URL would be mycoolvideos.vplay.media.

2 - Using a Custom Domain

The second option, if you have your own domain to use, is to set up a completely custom domain. To set up a custom domain you have a few options.

Using an A record

The first is to set your DNS host records (usually @ and www) A records to point to 208.68.36.121

Using a CNAME

This second option, which we would recommend, is to set 'app.spotlightr.com' as a CNAME record. In this example in the Namecheap registrar, we are setting the sub-domain "videos" under the domain "zimmplify.com" to point to our application "app.spotlightr.com".

(To view a larger image, open the image in a new tab)

So videos.zimmplify.com when put into a browser will go to app.spotlightr.com, though videos.zimmplify.com will remain in the URL field. Thus successfully masking the domain.

Here is how that configuration would look inside of Namecheap:

For both options, please note that when you are entering your custom domain inside of Spotlightr, do not enter http:// https:// or www.


Did this answer your question?