Example: Basic responsive setup

Demonstrates how additonal styling can be added to enable Listy to act responsively.

Key features

  • Same playlist output whether the player is rendered in Flash or HTML5 mode - allowing for complete control over styling
  • Playlist thumbnails are hidden at smallest breakpoint
  • Playlist descriptions are clipped at small and medium breakpoints
  • Player and playlist are resized and aligned independently at large breakpoint

CSS

HTML

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

Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{}
    }
   });