Example: Applying multiple skins

Demonstrates how to apply different skins to the playlist feature bars and the playlist - seperate to the player skin.

Key features

  • By default Listy will use the same skin as defined for the player for the playlist feature bars and the playlist
  • Using the "skin" setting either the playlist feature bars and/or the playlist can be styled independently of the player

CSS

HTML

  <div id="player_wrapper">
    <div id="example"></div>
    <div id="detached_options"></div>
    <div id="detached_playlist"></div>
  </div>

Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{
        "target":"detached_options",
        "skin":"http://p.jwpcdn.com/6/7/skins/five.xml",
         "list":{
          "label":"My playlist",
          "target":"detached_playlist",
          "skin":"http://p.jwpcdn.com/6/8/skins/stormtrooper.xml"
         },
        "features":{
          "shuffle":{"enabled":true},
          "search":{"enabled":true},
          "edit":{"enabled":true},
          "add":{"enabled":true}
          "add_from_yt":{"enabled":true}
        }
      }
    }
  });