Example: Basic responsive setup
Demonstrates how additional 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
#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":{}
}
});
One thing to note is that you should not include the JW
"listbar" setting if using the Listy plugin