Example: Detaching playlist elements

Demonstrates how to detach the playlist feature bars and the playlist from the player for more control over page layout.

Key features

  • By default Listy will create a container for both playlist feature bars and playlist immediately after the player
  • Using the "target" setting either the playlist feature bars and/or the playlist can be loaded into seperate containers - allowing for greater positional control

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",
         "list":{
          "label":"My playlist",
          "target":"detached_playlist"
         },
        "features":{
          "shuffle":{"enabled":true},
          "search":{"enabled":true},
          "edit":{"enabled":true},
          "add":{"enabled":true},
          "add_from_yt":{"enabled":true}
        }
      }
    }
  });