Listy for JW Player

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

---

---

CSS

  #player_wrapper{
    width:85%;
    margin-right:auto;
    margin-left:auto;
  }
  #example{
    float:left;
  }
  /* ************************ */
  /* Additional listy styling */
  /* ************************ */
  /* Default breakpoint styles */
  #example, #example.jwfullscreen{
    width:100% !important;
  }
  /* Listy override container */
  #detached_options{
    width:100%;
    float:left;
  }
  /* Listy override - detached playlist */
  #detached_playlist{
    clear:both;
    width:100%;
    float:left;
    max-height:500px;
    overflow:auto;
  }
  /* Description - Limit displayed text */
  #detached_playlist .listy-description{
    height:42px;
    overflow:hidden;
  }
  /* Playlist images - Hide images*/
  #detached_playlist .listy-fill{
    display:none;
  }
  #detached_playlist .listy-textwrapper {
    padding:10px;
  }
  /* Medium breakpoint */
  @media only screen and (min-width: 35em) {
    #player_wrapper{
      width:65%;
    }
    #detached_options .listy-search-wrapper{
      width:50%;
    }
    /* IMAGES */
    #detached_playlist .listy-fill{
      display:block;
    }
    #detached_playlist .listy-textwrapper {
      padding:10px 10px 10px 150px;
    }
  }
  /* Large breakpoint */
  @media only screen and (min-width: 65em) {
    #player_wrapper{
      width:75%;
    }
    #example{
      width:47% !important;
    }
    #detached_options{
      width:47%;
      float:right;
    }
    /* Playlist area */
    #example_listy_list{
      height:500px;
    }
    /* Description */
    #detached_playlist .listy-description{
      height:auto;
      overflow:none;
    }
  }


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}
        }
      }
    }
  });