Styling Players

This topic provides an overview of the player styling settings that can be configured.

Some basic player styling options can be configured using the administration menu. To configure the player Styling settings, in the navigation header, click the administration icon () and then Player Styling.

style menu

The following style settings can be configured:

After any changes have been made, make sure to click Save for the changes to be visible. To discard any styling changes you make and go back to the initial player styling, click Reset to Default.

Title and description

Select Show title and description to display the video title and description on the player.

video title

Play button shape

The Play Button Shape setting controls the shape of the play button. The following shapes are supported:

  • Circle
  • Square
  • Rectangle

Play button position

The Play Button Position setting controls the location of the play button within the player. The following positions are supported:

  • Center
  • Top Left
  • Top Right

Color theme

The Color Theme settings control the colors used in the player including the play/pause buttons, elapsed time and volume, captions, full screen and sharing icons.

The following theme colors can be configured:

  • Play Button - Controls the color of the big play button, progress bar and volume level
  • Control Bar - Controls the background color of the player controls
  • Icons - Controls the color of the arrow in the play button and the icons in the player control bar

To change a theme color:

  1. Click a theme color to open the color picker.
  2. Click a color on the ride side of the control.
  3. Click in the square to select a shade of the desired color. Color can also be set by entering the hue, saturation and value (HSV) numbers into the text control.
    icon color
  4. The slider below the color square can be used to set the opacity of the controls.
  5. Click outside of the color picker to modify another theme color.
Selecting Revert back to older player default theme will set the play button and progress bar to a pinkish color.

Logo Overlay

A logo overlay is an image that appears on top of the player. A sample logo overlay appears below.

To add a logo overlay:

  1. Set the Logo Overlay to On.
  2. Click Browse and select an overlay image (.png, .jpg, and .gif images are supported).
  3. (Optional) Enter a Logo URL. When the overlay is clicked, this URL will open in a new browser tab.
  4. Select a Logo Position for the overlay:
    • Bottom Right
    • Bottom Left
    • Top Right