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 tofalse
.data-ratio
– This allows you to define the aspect ratio of the player. This is16:9
by default but can be any value given the format “x:y” such as4:3
.data-width
– If the responsive option is switched off, this allows you to specify the width of the player. If you include thedata-ratio
setting, you don’t need to includedata-height
.data-height
– If the responsive option is switched off, this allows you to specify the height of the player. If you include thedata-ratio
setting, you don’t need to includedata-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: