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+

jwplayer("myElement").setup({
    "playlist": "https://cdn.jwplayer.com/v2/media/hWF9vG66",
    "skin": {
        "controlbar": {
            "background": "rgba(0,0,0,0)",
            "icons": "rgba(255,255,255,0.8)",
            "iconsActive": "#FFFFFF",
            "text": "#FFFFFF"
        },
        "menus": {
            "background": "#333333",
            "text": "rgba(255,255,255,0.8)",
            "textActive": "#FFFFFF"
        },
        "timeslider": {
            "progress": "#F2F2F2",
            "rail": "rgba(255,255,255,0.3)"
        },
        "tooltips": {
            "background": "#FFFFFF",
            "text": "#000000"
        }
    }
});

Property	Description
controlbar object	Color customizations for the control bar See: controlbar
menus object	Color customizations for menus See: menus
name string	Name of the 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. For more information regarding custom skins, see our Branding documentation.
timeslider object	Color customizations for the time slider See: timeslider
tooltips object	Color customizations for tooltips See: tooltips
url string	Specifies an external CSS file to style the player If you are specifying `skin.url`, you must specify `skin.name`, which must match the class name in your CSS file. For more information regarding custom skins, see our Branding documentation.

controlbar

Property	Description
background string	Background color of the control bar and the volume slider The default background is transparent. Default: `"rgba(0,0,0,0)"`
icons string	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. Default: `"rgba(255,255,255,0.8)"`
iconsActive string	Color of hovered or selected icons in the control bar Default: `"#FFFFFF"`
text string	Color of any plain text in the control bar, such as the time Default: `"#FFFFFF"`

menus

Property	Description
background string	Background color of menus and the Next Up overlay Default: `"#333333"`
text string	Color of inactive, default text in menus and the Next Up overlay Default: `"rgba(255,255,255,0.8)"`
textActive string	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. Default: `"#FFFFFF"`

timeslider

Property	Description
progress string	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. Default: `"#F2F2F2"`
rail string	Color of the base of the time slider, known as the rail Default: `"rgba(255,255,255,0.3)"`

tooltips

Property	Description
background string	Background color of tooltips Default: `"#000000"`
text string	Text color of tooltips Default: `"#000000"`