Skinning a Plugin

Some plugins have the ability to be skinned with the JW Player skinning model. (The documentation for each plugin will specify whether or not it supports skinning, as is the case for the Sharing plugin).

In this example, we will skin the Sharing plugin. From the Sharing reference, we can see the following items are skinnable:

• embedButton
• embedIcon
• embedScreen
• shareButton
• shareIcon
• shareScreen

Editing the Skin

First, you will need to unzip your skin and edit the XML file inside. For example, the Glow skin contains a file named "glow.xml" inside of its zip file. You will need to add a <component> tag with the name of the plugin, containing the skinnable elements:

<component name="sharing">
  <elements>
    <element name="embedButton" src="embedButton.png" />
    <element name="embedIcon" src="embedIcon.png" />
    <element name="embedScreen" src="embedScreen.png" />
    <element name="shareButton" src="shareButton.png" />
    <element name="shareIcon" src="shareIcon.png" />
    <element name="shareScreen" src="shareScreen.png" />
  </elements>
</component>

Next, create a folder with the same name as the plugin (sharing in this case) and place it alongside the other folders in the skin (controlbar, dock, etc.). Now you can begin creating customized graphics for your plugin.

Packaging your skin

Once you have modified skin, save the XML file, package the entire folder into a zip file, and upload the zip file to your web server. After that, it's simply a matter of embedding the player and specifying the skin.

Putting it all together