Using JW Player Skins

This guide explains how to load existing skins into JW Player. 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.

All paid editions of JW Player (Pro, Premium and Ads) come included with a set of 8 skins. Here you can cycle through them:

Several third-party vendors offer additional JW Player skins, or offer their services to create specific skins. If you are proficient with an image editor (like Photoshop), you can also build a JW Player yourself. See Building JW Player Skins for more info on that.

Loading a Pro Skin

The skins included in the Pro/Premium/Ads editions can be configured by simply inserting the skin name. Here's an example, loading the bekle skin:

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

The full list of skins (see gallery above) is: beelden, bekle, five, glow, roundster, six, stormtrooper and vapor.

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

Loading a Custom Skin

A custom skin can be loaded by setting the skin configuration option to the URL of your skin on your webserver. Here is an example:

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

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

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here