Listy for JW Player

Example: Add from YouTube

Demonstrates how to enable the option to search YouTube directly and add items to the playlist.

Key features

  • Customisable button labels - rename "Add from YouTube", "Add from YouTube > Preview item", "Add from YouTube > Add as last" and "Add from YouTube > Add as next" to whatever you like.
  • Search for YouTube items directly within the Listy interface
  • Even when enabled, this option will only appear when the player has been rendered in Flash mode or is using JW Player 6.9+


CSS

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

HTML

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

Setup code

  jwplayer("example").setup({
    "playlist":[{...}],
    "width":"100%",
    "aspectratio":"16:9",
    "plugins": {
      "listy.js":{
        "list":{
          "label":"My playlist"
        },
        "features":{
          "shuffle":{"enabled":true,"label":"Mix it up!"},
          "search":{"enabled":true},
          "edit":{
            "enabled":true,
            "label":"Edit",
            "buttons":{
              "move_up":{"enabled":true},
              "remove":{"enabled":true,"label":"REMOVE"},
              "move_down":{"enabled":true}
            }
          },
          "add":{
            "enabled":true,
            "label":"Add item",
            "options":{
              "form":{
                "label":"New item",
                "fields":{
                  "mediaid":{"label":"Media ID:","type":"hidden"},
                  "title":{"label":"Title:","value":"Example: JW Player promo"},
                  "description":{"label":"Description:","value":"Example: Your video solution starts with JW Player"},
                  "image":{"label":"Image URL:","value":"http://content.jwplatform.com/thumbs/HkauGhRi-640.jpg"},
                  "file":{"label":"File URL:","value":"http://content.jwplatform.com/videos/HkauGhRi-640.mp4"},
                  "type":{
                    "label":"Type:",
                    "type":"radio",
                    "options":{
                      "mp4":{"label":"MP4","checked":true},
                      "rtmp":{"label":"RTMP","checked":false},
                      "youtube":{"label":"YouTube","checked":false}
                    }
                  },
                  "duration":{"label":"Duration:","value":"mm:ss"},
                  "custom_field":{
                    "label":"Custom:",
                    "type":"checkbox",
                    "options":{
                      "custom_1":{"label":"Custom value 1","checked":true},
                      "custom_2":{"label":"Custom value 2","checked":false},
                      "custom_3":{"label":"Custom value 3","checked":true}
                    }
                  }
                },
                "buttons":{
                  "next":{"enabled":true,"label":"Add as next"},
                  "last":{"enabled":true,"label":"Add as last"},
                  "preview":{"enabled":true,"label":"Preview item"},
                  "custom_button":{"enabled":true,"label":"Custom button","action":function(a,b){
                      if(top.console){
                        console.info(jwplayer().plugins.listy.buildCustomItem());
                      }
                    }
                  }
                }
              },
              "from_removed":{
                "label":"From removed",
                "enabled":true,
                "buttons":{
                  "preview":{"enabled":true,"label":"Preview"},
                  "last":{"enabled":true,"label":"+Last"},
                  "next":{"enabled":true,"label":"+Next"}
                }
              }
            }
          }
          "add_from_yt":{
            "enabled":true,
            "label":"Add from YouTube",
            "buttons":{
              "preview":{"enabled":true,"label":"Preview"},
              "last":{"enabled":true,"label":"+Last"},
              "next":{"enabled":true,"label":"+Next"}
            }
          }
        }
      }
    }
  });
One thing to note is that you should not include the JW "listbar" setting if using the Listy plugin