Main settings

The following are optional data- attributes that can be added to the div.jw-settings block in order to configure JW Player.

  • data-skin
    • JW5 – A URL referencing the player custom skin ZIP or XML file.
    • JW6 – A URL referencing the player custom skin XML file. Or the name of one of the predefined skins: “beelden”, “bekle”, “five”, “glow”, “modieus”, “roundster”, “stormtrooper” or “vapor” (for JW6 Premium and Ads only).
    • Please note: The XML format for skins has changed between JW5 and JW6. If you try and load a JW5 skin in JW6 you will get an error.
  • data-responsive – This allows you switch off the responsive behaviour by setting the value to false.
  • data-ratio – This allows you to define the aspect ratio of the player. This is 16:9 by default but can be any value given the format “x:y” such as 4:3.
  • data-width – If the responsive option is switched off, this allows you to specify the width of the player. If you include the data-ratio setting, you don’t need to include data-height.
  • data-height – If the responsive option is switched off, this allows you to specify the height of the player. If you include the data-ratio setting, you don’t need to include data-width.

Example usage

<div class="jw-settings" id="my_simple_settings" data-skin="/haiku/haiku.xml" data-responsive="false" data-width="300" data-ratio="4:3">
     <video id="my_simple_video" poster="/posters/big-buck-bunny-preview.jpg" preload="none">
          <source src="/videos/mp4/big-buck-bunny.mp4" type="video/mp4" />
     </video>
     <div class="jw-modes">
          <div class="jw-mode" data-type="html5"></div>
          <div class="jw-mode" data-type="flash" data-src="/jwplayer/v5/player.swf"></div>
     </div>
</div>

Results in: