Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

item number in visual playlist scroll


I've been able to increase width and height of the visual playlist container- but not the number of items that is displayed inside the scroll element. There must be another CSS style for that not mentioned?
What I have is a container that is 443 px high but the number of playlist items listed is only 4 and a bit, the rest I still have to scroll down, when there is space below to be able to not have to scroll.
What is this missing style?

11 Community Answers

Eric Boyd

Best Answer  JW Player Support Agent  

Hi Mark,
Here is some CSS to the seven skin that does what I think you are trying to do
1) Makes the playlist as tall as the player
2) Aligns the list items to the left
3) Increases the width of the entire playlist

We chose to have a default max and min height of the visual playlist to not have to account for every edge case like what to show when there are 3 items and the player is too small to show all of them.

With that said – we do give you control over the style since you know what your use case is and how many playlist items you intend on showing.

I’ll throw this up as an example on the support site as well add some more notes inside the sample CSS file.

http://demo.jwplayer.com/eric/visualplaylist.html

<style>

/*Sets the visual listbar width to 400 px and realigns it above the icon. */
.jw-skin-seven .jw-overlay .jw-playlist-container {
width:400px;
left:-20%;
}

/* overrides the player settings for how tall the visualplaylist can be. 195px is the about right for a player that is 270px tall, including the controlbar height, and menus. */
.jwplayer .jw-playlist {
min-height: none;
max-height: none;
height: 195px;

}

/* Makes it so the list items are left aligned in the visualplaylist */
.jwplayer .jw-playlist .jw-option {
padding: 0 15px;
margin: auto;
text-align: left;
}

</style>

Hope this helps!

Cheers,
Eric

View in conversation

mark

User  
0 rated :

basically I want a full height playlist container with 50% width, and you make it very hard to work out how, change one thing it messes something else up. I would have thought it would be default to fill height, it's so small at default height and width, I don't understand your thoughts on this one.

Alex

JW Player Support Agent  
0 rated :

Hi, Mark.

We have a reference article of our supported CSS classes that users can change on our skins which can be found at: http://support.jwplayer.com/customer/portal/articles/2067702-skin-css-classes-reference-#controls

We do not support any more classes than those listed.

Please let me know if you need any more help or have any other questions.

Thank you!

mark

User  
0 rated :

Thanks Alex
This reply unfortunately hasn't helped me as I already using the sample CSS and seen the reference.
Are you telling me that the team has decided that the height of the scroll element in the playlist container is set at (what looks like 50%) and there is no method to make it higher. It's CSS and therefore there must be a way. Please can you double check if you are unsure.
Again, I think the height and width of the visual playlist is not user friendly at all, and there has already been at least one other post about it since V7 was released.
The new visual playlist is nice but it can only be very useful if it it's dimensions are customizable.
Please find out more for me.

Alex

JW Player Support Agent  
0 rated :

Mark,

It may very well be possible to do, but it is not something that we support nor provide assistance with. With that being said, I will escalate this to our Engineering team to see if there is any way they can assist you.

I will respond when I hear back from them. Thank you for your patience.

Eric Boyd

Best Answer  JW Player Support Agent  
0 rated :

Hi Mark,
Here is some CSS to the seven skin that does what I think you are trying to do
1) Makes the playlist as tall as the player
2) Aligns the list items to the left
3) Increases the width of the entire playlist

We chose to have a default max and min height of the visual playlist to not have to account for every edge case like what to show when there are 3 items and the player is too small to show all of them.

With that said – we do give you control over the style since you know what your use case is and how many playlist items you intend on showing.

I’ll throw this up as an example on the support site as well add some more notes inside the sample CSS file.

http://demo.jwplayer.com/eric/visualplaylist.html

<style>

/*Sets the visual listbar width to 400 px and realigns it above the icon. */
.jw-skin-seven .jw-overlay .jw-playlist-container {
width:400px;
left:-20%;
}

/* overrides the player settings for how tall the visualplaylist can be. 195px is the about right for a player that is 270px tall, including the controlbar height, and menus. */
.jwplayer .jw-playlist {
min-height: none;
max-height: none;
height: 195px;

}

/* Makes it so the list items are left aligned in the visualplaylist */
.jwplayer .jw-playlist .jw-option {
padding: 0 15px;
margin: auto;
text-align: left;
}

</style>

Hope this helps!

Cheers,
Eric

jherrieven

User  
0 rated :

I've put together a plugin to make the Visual Playlist much more usable in a responsive scenario.

I still need to write some documentation, but the basic implementation is as follows:

"plugins":{
"http://www.dev.powered-by-haiku.co.uk/solutions/jw7vpl/code/jw7vpl.js":{
}
}

This defaults the Visual Playlist to take up 100% width and 100% height of the player area, with no margin around the VP.

If you wished to have the VP react differently as the player is sized, you can simply add configuration options to the plugin which will take effect as the player reaches certain width breakpoints.

These take the following format:

"<player-width-in-pixels>":{
"width": "<visual-playlist-width>(% or px)",
"height": "<visual-playlist-height>(% or px)",
"margin": [<top-margin-in-px>,<right-margin-in-px>,<bottom-margin-in-px>,<left-margin-in-px>]
}

So a full example would be:

"plugins":{
"http://www.dev.powered-by-haiku.co.uk/solutions/jw7vpl/code/jw7vpl.js":{
"400":{
"width":"50%",
"margin":[5,5,5,5]
},
"600":{
"width":"40%",
"height":"75%"
}
}
}

Which would result in the following:

> Default size (player is less than 400px wide in this case): VP will be 100% wide, 100% high with no margin.
> Player reaches 400px wide: VP will become 50% width of the player area with a 5px margin around it. It will still be 100% high.
> Player reaches 600px wide: VP will become 40% width of the player area and will now be 75% of the player height. It will still have a 5px margin around it.

This plugin / configuration options works with all JW7 skins.

James Herrieven
===================================================
Powered by Haiku
http://powered-by-haiku.co.uk/
---------------------------------------------------
Tatami for Online Video
http://dev.powered-by-haiku.co.uk/solutions/tatami/
---------------------------------------------------
skype: JamesHerrieven
email: james[at]haiku[dot]co[dot]uk
===================================================

mark

User  
0 rated :

Thank you Eric
This works almost the way I'd like. Just that the scroll bar is still visible even if there is no need to scroll?
I don't mind if there are only 2 or 3 items and the height is still to the top. ( if the scroll bar can be removed in such case)

mark

User  
0 rated :

James, Tried your script, hosted on my site as I need https.
Couldn't get it to do anything. Maybe because of over riding CSS in my own skin reference?

mark

User  
0 rated :

To be fair, the scroll bar container in Chrome I could put up with it because it's much slimmer. In MS Edge it's too wide and off color.

mark

User  
1 rated :

FWIW, James's script does work well, since we worked out the js file has to be the same name ( I changed the name)
Thanks James and Eric, both working solutions.

jherrieven

User  
0 rated :

I've updated my plugin to include the following additional features:

> Makes the Visual Playlist responsive - with configurable width, height and margin options at flexible player sizes
> Removes the scrollbar when not needed
> Ability to include descriptions within the Visual Playlist
> Ability to customise the Visual Playlist title (changing it from "PLAYLIST")
> When a player has a playlist, and the Visual Playlist is enabled, the controlbar will be visible by default - this can also be configured.

Check an example and implementation details here: http://dev.powered-by-haiku.co.uk/solutions/jw7vpl/

James Herrieven

===================================================
Powered by Haiku
http://powered-by-haiku.co.uk/
---------------------------------------------------
Tatami for Online Video
http://dev.powered-by-haiku.co.uk/solutions/tatami/
---------------------------------------------------
skype: JamesHerrieven
email: james[at]haiku[dot]co[dot]uk
===================================================

This question has received the maximum number of answers.