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;
}
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.
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.
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.
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.
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;
}
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>] }
> 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 ===================================================
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)
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?
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.
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.