item number in visual playlist scroll

mark — Aug 24, 2015 10:14AM EDT

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

Aug 25, 2015 12:15PM EDT

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.

/* 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;

mark

User

Aug 24, 2015 10:53AM EDT0rated :

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

Aug 24, 2015 05:21PM EDT0rated :

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.

mark

User

Aug 24, 2015 07:33PM EDT0rated :

Thanks AlexThis 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

Aug 25, 2015 10:04AM EDT0rated :

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

Aug 25, 2015 12:15PM EDT0rated :

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.

/* 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;

> 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 Haikuhttp://powered-by-haiku.co.uk/---------------------------------------------------Tatami for Online Videohttp://dev.powered-by-haiku.co.uk/solutions/tatami/---------------------------------------------------skype: JamesHerrievenemail: james[at]haiku[dot]co[dot]uk===================================================

mark

User

Aug 25, 2015 07:57PM EDT0rated :

Thank you EricThis 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)

jherrieven

User

Aug 27, 2015 01:45PM EDT0rated :

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.