Skin

JW Player provides you with 11 skin configuration options out-of-the-box. With such granular control over brand identity, it’s easier than ever to customize the player.

Color Customization

Color can be specified as a hex value, RGBA color value, or color name.8.0+

ConfigTypeDescriptionDefault
skin.controlbar.textStringThe color of any plain text in the control bar, such as the time."#FFFFFF"
skin.controlbar.iconsStringThe default, inactive color of all icons in the control bar. This option also controls the color of the play, pause, and replay icons in the inactive and complete states."rgba(255,255,255,0.8)"
skin.controlbar.iconsActiveStringThe color of hovered or selected icons in the control bar."#FFFFFF"
skin.controlbar.backgroundStringTThe background color of the control bar and the volume slider. The default background is transparent."rgba(0,0,0,0)"
skin.timeslider.progressStringThe color of the bar in the time slider filled in from the beginning of the video through the current position. The buffer region of the control bar is 50% of the opacity of this color. The color of the volume slider is also controlled by this option."#F2F2F2"
skin.timeslider.railStringThe color of the base of the timeslider, known as the rail."rgba(255,255,255,0.3)"
skin.menus.textStringThe color of inactive, default text in menus and the Next Up overlay."rgba(255,255,255,0.8)"
skin.menus.textActiveStringThe color of hovered or selected text in menus. This option also controls the text color in the Discover overlay and the hover state text color in the Next Up overlay."#FFFFFF"
skin.menus.backgroundStringThe background color of menus and the Next Up overlay."#333333"
skin.tooltips.textStringThe text color of tooltips."#000000"
skin.tooltips.backgroundStringThe background color of tooltips."#FFFFFF"

Custom Skins

For more information regarding custom skins, see our Branding documentation.

ConfigTypeDescriptionDefault
skin.urlStringIf using an external CSS file to style your player, this must be specified here.-
skin.nameStringThe name of your custom skin to use for styling the player. If you are specifying skin.url, you must specify skin.name, which must match the class name in your CSS file.-