Enable Skins in the JW Player

Prerequisite Documents: Configuring the JW Player, Embedding Flash

A JW skin refers to the outward appearance of the player. It is, technically speaking, an element of the graphical user interface.

To enable the use of skins in your JW Player, you must add a bit of code to your existing JW Player HTML. A skin is implemented in very much the same way as a plugin, only rather than use the variable plugin to implement plugins, you must here use the variable skin to implement skins.

Step 1: Install the Skin

1. Download the skin you wish to use from the LongTail Video Skins page.
2. Upload the .swf or .zip file to a directory on your server.

Step 2: Configure the Player

Set the skin flashvar to the path where you uploaded the skin .swf or .zip file.  This can be an absolute or relative path.  Examples of using a skin with the three most common embed methods are presented below.  For more information about embedding the player, please see Embedding Flash.

Object / Embed

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' id='player1' name='player1'>
   <param name='movie' value='player.swf'>
   <param name='allowfullscreen' value='true'>
   <param name='allowscriptaccess' value='always'>
   <param name='flashvars' value='file=playlist.xml&skin=path/to/skin.zip'>
   <embed id='player1'
          name='player1'
          src='player.swf'
          width='300'
          height='300'
          allowscriptaccess='always'
          allowfullscreen='true'
          flashvars='file=playlist.xml&skin=path/to/skin.zip'
   />
</object>

SWFObject 1.5 (recommended)

<script type="text/javascript">
    var so = new SWFObject('player.swf','flashContent','300','250','9');
    so.addParam('allowfullscreen','true');
    so.addParam('allowscriptaccess','always');
    so.addParam('bgcolor','#FFFFFF');
    so.addParam('flashvars','file=playlist.xml&skin=path/to/skin.zip');
    so.write('flashbanner');
</script>

SWFObject 2.X

<script type="text/javascript">
   var flashvars = {
      'file': 'playlist.xml',
      'skin': 'path/to/skin.zip'
   };

   var params = {
      'allowfullscreen':    'true',
      'allowscriptaccess':  'always',
      'bgcolor':            '#ffffff'
   };

   var attributes = {
      'id':                 'player1',
      'name':               'player1'
   };

   swfobject.embedSWF('player.swf', 'flashContent', '300', '250', '9', 'false', flashvars, params, attributes);
</script>