Using JW Player Skins

This guide explains how to get and configure existing skins for JW Player 6. If you are looking for information on how to design and package a skin yourself, see Building JW Player Skins.

Introduction

JW Player skins change the appearance of the player, adding a custom layer to your player embeds. All visual components of the player (the controlbar, display, tooltip, dock and playlist) can be skinned.

Here are a few examples of a skinned player. These 8 skins are included in the Premium and Ads editions of JW Player 6:

Technically, a JW Player skin consists of an XML file that contains a number of settings (e.g. the color of the tooltip texts) and a number of links to PNG images (e.g. for the play button).

Like with CSS, the PNG files can be stored as base64 encoded strings in the XML file. This speeds up delivery and makes managing the skin easier, since there's only 1 file.

Getting a Skin

There are two ways to get a skin for your player:

• The Premium and Ads editions of JW6 include a pack of 8 skins maintained by us. You are free to use these skins on your website(s) and to modify these skins (by editing the XML and PNG images).
• If you are proficient with an image editor (like Photoshop), designing and packaging your own JW Player skin is straightforward. See Building JW Player Skins for more info.

Configuring a Premium Skin

The skins included in the Premium/Ads editions can be loaded directly off our CDN by simply inserting the skin name. Here's an example:

jwplayer("myElement").setup({
  file: "myVideo.mp4",
  skin: "bekle"
});

The following skins are available as part of the Premium/Ads editions: bekle, modieus, glow, five, beelden, stormtrooper, vapor and roundster. See our skinning product page for a closer look at their designs.

Note the Premium/Ads skins are also available as a ZIP download inside your JW Player Account. Use the download if you want more control over the skin hosting or if you want to slightly modify the skin.

Configuring a Self-Hosted Skin

After downloading (or packaging) the skin of your choice, upload it to your webserver, so the skin can be added to your player embeds. Once you have uploaded your skin, simply set the skin configuration option to the path where you uploaded the XML file. This can be:

• An absolute path (e.g. http://example.com/skins/bekle.xml)
• A domain-absolute path (e.g. /skins/bekle.xml)
• A path relative to the HTML file (e.g. ../skins/bekle.xml)

Note that skins are subject to Crossdomain Security Restrictions, which causes issues when loading the skins from another domain than your website's.

Example Setup

Here is an example player setup block, using a domain-absolute path to the skin files:

jwplayer("myElement").setup({
    file: "/uploads/example.mp4",
    height: 360,
    image: "/uploads/example.jpg",
    skin: "/uploads/bekle.xml",
    width: 640
});