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