Using JW Player Skins

This guide explains JW Player's built-in methods for configuring skins. If you are looking for information on how to design and create a skin yourself, see Building JW Player Skins.


JW Player skins change the appearance of the player, adding a customizable interactive layer to your player embeds. All visual components of the player (the controlbar, display, tooltip, dock and playlist) can be skinned in accordance to our skin reference page. Skins will be displayed on desktop and mobile browsers, with the exception of Youtube embeds prior to playback.

Compared to JW6's XML model, JW Player 7 CSS-based skins. Due to this change, skin modifications can be easily made on-the-fly. See our skin-swapping example below for more information. Note that due to the fundamental changes in our skinning model, JW6 skins are not compatible with JW7.

Using JW Player's built-in skins

The 8 skins included in JW7 can be chosen by simply inserting the skin name into your player's config. The available premade skin names include six, five, beelden, vapor, roundster, bekle, stormtrooper, and glow. Example code, which will load our bekle skin, is shown here:

var playerInstance = jwplayer("myElement");
  file: "/upload/myVideo.mp4",
  skin: {
  name: "bekle"

JW7 Skinning Gallery

Because JW7 utilizes CSS for its skinning model, we can easily switch between skins on-the-fly. Below is an example player which allows you to dynamically view our different available skinning options.

Setting Custom Colors

Once you've chosen a skin to use with your player, it is possible to further customize the skin by setting up to three colors in the JW Player configuration:
Active skin elements. This includes active and highlighted labels, as well scrubber time that has elapsed .
Skin elements that are not active. This includes scrubber time that has not yet elapsed.
The background portion of the control bar.

Fully configuring a player embed with a custom skin, as well as custom skin colors, can be seen below:

    file: "/uploads/example.mp4",
    height: 360,
    width: 640,
    image: "/uploads/example.jpg",
    skin: {
       name: "bekle",
       active: "red",
       inactive: "white",
       background: "black"

For more information regarding JW Player skin customization, please see the following articles:

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here