LongTail Video is now JW Player - New Name, Same Passion For Video

Close

JW Player Support Documentation

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. Skins are displayed on desktop and mobile browsers

The image below shows the 8 Premium Skins that are included with the paid editions of JW Player (Pro, Premium and Enterprise):

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 are 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.

There are two ways to skin your player:

  • The Pro, Premium and Enterprise editions of JW6 include a pack of 8 premium skins maintained by us. You are free to use these skins on your website(s).
  • If you are proficient with an image editor (like Photoshop), building your own JW Player skin is straightforward. See Building JW Player Skins for more info.

Loading a Premium Skin

The skins included in the Pro/Premium/Enterprise editions can be loaded effortlessly 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 Pro/Premium/Enterprise editions: bekle, five, glow, five, beelden, stormtrooper, vapor and roundster. See our skinning product page for a closer look at their designs.

Note the Pro/Premium/Enterprise skins are also available as a ZIP download inside your JW Player Account. Use the download if you want to slightly modify the skin and then host it yourself.

Loading a Custom Skin

After building your own skin, 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/mySkin.xml)
  • A domain-absolute path (e.g. /skins/mySkin.xml)
  • A path relative to the HTML file (e.g. ../skins/mySkin.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/mySkin.xml",
    width: 640
});

Still don't have the new JW Player? Get It Here