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

Width of the visual playlist


I'm loading a visual playlist through an RSS file within setup (playlist : "./myplaylist.rss")

Some of the videos in my playlist have very long names and titles.
How do I change the width of the visual playlist so the full name of the clip would appear?

9 Community Answers

Andrew

JW Player Support Agent  
-1 rated :

Hi,

Currently, this would need to be done via CSS. There is no built-in way to control the width of the visual playlist at this time. This may always change based on user feedback, however.

mark

User  
2 rated :

It would help to be told what CSS element needs styling.
I also wish for complete control of visual playlist width/height, please request

assistant

User  
0 rated :

I tried all the CSS elements containing the word "playlist" with an attribute "width: 300px"; and none influenced the width of the playlist.

Please tell us more about the CSS elements to modify or add.

Todd

JW Player Support Agent  
-1 rated :

Have you seen the Visual Playlist Overlay section at http://support.jwplayer.com/customer/portal/articles/2067702-skin-css-classes-reference-#menus ?

I’m not a CSS expert, but my guess would be to apply your width to .jw-playlist-container

assistant

User  
0 rated :

I've find out that adding 'width:400px;' into the jw-playlist-container CSS class in the developpers tools of my browser do change the width of the container. It also scramble the content of the container for obscure reasons (no more title, incomplete file names, etc.)

Anyway, changing it in the CSS file doesn't do anything. Any hint?

jherrieven

User  
0 rated :

@assistant

I've built a plugin to allow Visual Playlist customisation which includes the following 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
===================================================

Todd

JW Player Support Agent  
0 rated :

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

roland.leon

User  
1 rated :

Todd Grunow:
You copied only a part which is already on the web. The question is about LONG titles. Test this with lo,ng titles and with the values of the example of the web: the names (titles) are cropted (till about 150px).
And then there is no Description in the playlist (as it was in jw5, jw6,...); a plugin from Jherrieven (thank you!) can be used.

roland.leon

User  
1 rated :

Dear people of JW:
1. The example for a wider visual playlist on the website is not complete. In this example only the container is wide, not the text.
You have to add as example following ccs:
.jw-playlist .jw-name{width:500px; text-overflow:ellipsis;}

2. The space for the sequence number in the playlist is sometimes too small. You have to add
.jw-playlist .jw-label{width:2em;}

2.The Reference Skin-CSS is not complete: see examples above.

I am right? Is it possible to modify the documentation?

This question has received the maximum number of answers.