We've designed Spotlight and the Prizma player to look great and work great, but we know certain web designs can call for certain themes and colors. 

In order to customize Spotlight, add playerCss: ['http://example.com/style.css'] to Spotlight's parameters once your CSS is ready!

What you can and cannot change

  • The player control bar cannot be modified. Besides changing the accent colors for the play bar and volume slider (instructions below), you may not modify the control area.
  • You may modify the video title font. This includes the font face, sizing, etc. Generally we recommend leaving the size as-is, unless your font renders dramatically differently.
  • You may modify the pre-video play button, within certain constraints. Our recommendation is to leave it the same size. You can swap out a different background image, but Prizma strongly recommmend having differentiated default and hover states.

Common modifications and their classes

Progress bar and volume slider color .vjs-prizma-skin .vjs-play-progress, .vjs-prizma-skin .vjs-volume-level

Use background: [color] to modify both with this selector.

Video title .video-js .vjs-prizma-title

.video-js .vjs-prizma-title controls the appearance of Spotlight's title parameter. (This is populated automaticlaly if pulling from your library.) You can modify font-family, font-weight, line-height and other typical properties are allowed.

Video thumbnail titles .prizma-unit-title

.prizma-unit-title controls the appearance of the title on each of the widget thumbnails.

Play button .video-js.vjs-prizma-skin .prizma-unit-play-button, .video-js.vjs-prizma-skin .prizma-unit-play-button svg

.video-js.vjs-prizma-skin .prizma-unit-play-button svg controls the Prizma-provided play button. If you are replacing it, rather than modifying its color, use display:none on this element.

.video-js.vjs-prizma-skin .vjs-big-play-button controls the Prizma-provided play button background. This is the element to use background-image on.