Platform DocsPlayers DocsRelease Notes
System StatusSubmit a CaseDashboard LoginContact Sales

<img src="https://img.shields.io/badge/%20-ALL-%2300B180" style="float:left"/><br />

From the **Customize Player Branding** screen, you can adjust the appearance of the player including display options, colors, logos, and on-click behaviors.

The player supports HEX and RGBA color values for all color customizations. For default color settings, RGBA values are used to add transparency to player elements. Otherwise, default colors are defined with HEX colors.

<br />

2146


<br /> <hr />

## Customize player appearance



If you are a developer, use the [CSS Skinning Reference](🔗) to customize specific player elements.

<br />

Use the following steps to customize the appearance of a player:

  1. From the [**Players**](🔗) page, select an existing player. The player builder page appears. If you have clicked **Create Web Player** to create a new player, the player builder page will also appear.

  2. Above the player preview, click **Customize Player Branding**. The **Customize Player Branding** page appears.

  3. Customize the [logo](🔗).

  4. Customize the [controls](🔗) of the player.

  5. Customize the [menus](🔗) of the player.

  6. Customize the [tooltips](🔗) that appear in the player.

  7. Customize the [right-click](🔗) behavior

  8. Click **Done**. The player builder page appears.

  9. Click **Save**.

As changes are made to the player settings, these changes appear in the player preview on the right side of the screen in real-time.

<br /> <hr />

## Logo

The **Logo** tab allows you to add branding to the video player. A logo can only be placed in one location per player. If you position the logo in the control bar, use a logo with a height of 44px. Otherwise, use a logo with a height of 60px.

Use the following steps to add a logo:

  1. On the **Logo** tab under **Logo**, drag and drop a logo file. The following file types are supported: .jpg, .png, .gif. You can also click **Choose File** to upload the logo file from your computer.

  2. From the **Position** dropdown menu, choose the placement of the logo on the player.

  3. Click the **Visibility** toggle to **ON** so that the logo persists as an overlay when controls are hidden.

  4. In the **Link** textbox, enter a URL. When a URL is provided and the logo is clicked, playback in the player pauses and the URL opens in a new window.

<br /> <hr />

## Controls

The **Controls** tab allows you to customize the colors of the control icons. The following table explains each control option.

CONTROLS OPTIONDESCRIPTION
**Text**Color of any plain text in the control bar of the player
**Icons**Color of the following icons: • Control bar icons • Playlist and recommendations next page and previous page icons • Playlist and recommendations close icon (X) • Play icon on the idle screen • Next Up icons • Casting icon on the idle screen Default: Inactive color of icons Hover: Color of hovered or selected icons
**Timeslider**Color of time slider elements **Progress: ** • Bar in the time slider filled in between the beginning of the video to the current position in the video • Buffer region, but with a 50% opacity • Volume slider **Rail: ** • Base of the time slider • Base of the volume slider
**Background**Color of the control bar and menu icon bar

<br /> <hr />

## Menus

The **Menus** tab allows you to customize the colors of the menus. The following table explains each menu option.

MENUS OPTIONDESCRIPTION
**Links**Color of the following items: • Title and description of Next Up popup • Tile of playlist or recommended playlist overlay • Title and descriptions of playlist or recommended media content • Settings menu items **Default**: Inactive, the default color of text **Hover**: Color of hovered or selected text. There is no hover functionality for the title of the playlist or recommended playlist overlay.
**Background**Background color of the settings menu and Next Up popup Two additional settings are listed beneath the menu settings: - **Revert to Last Saved**: Clicking this button reverts settings to the version saved prior to the most recent save. - **Reset to Default**: Clicking this button reverts all settings to default.

<br /> <hr />

## Tooltips

The **Tooltips** tab allows you to customize the colors of the tooltips. The following table explains each menu option.

TOOLTIPS OPTIONDESCRIPTION
**Text**Color of tooltip text
**Background**Background color of tooltips

<br /> <hr />

## Right-Click

When a viewer right-clicks on the player, a menu appears. The **Right Click** tab allows you to overwrite the **Powered by JW Player** text that can open a new page when clicked by a viewer.

Follow the steps below to edit the right-click menu:

  1. In the **Text** field, enter the text to overwrite the **Powered by JW Player** label.

  2. (Optional) In the **Link** field, enter a URL. Be sure to add _http\://_ or _https\://_ at the beginning of the URL.

<br />