Skip to content

Loading…

Full width jPlayer #1

Closed
satyadeepk opened this Issue · 16 comments

3 participants

@satyadeepk

Cool theme for jPlayer!
But how do I make the jPlayer (audio) to take the full width (100%) like Google Music and Grooveshark?

@KasimAhmic KasimAhmic was assigned
@KasimAhmic
Owner

If you open jplayer.midnight.black.css and go to line 38, you'll see this:

width:48px;

Just change that to:

width:100%;

And you should be good. The only problem is that the controls won't center. If you wanted that too, I could change the code up a bit and give you the modified CSS file.

@satyadeepk

Thanks, width: 100% is working fine.
Yeah, but the controls are not centred and the progress bar width did not increase with the player. Can you please update and give the modified CSS file, that will really help.

@KasimAhmic
Owner

No problem! I'll have it either later today or, more likey, tomorrow afternoon.

@KasimAhmic
Owner

http://www.mediafire.com/?259snbiirqgig5u

Here you go! I made it super fluid so it should work on all screen sizes. If not, just send me a screen shot and I'll try to fix it. Another thing, I only made this work when using the playlist player. If you need me to, I can make it work for the single file player as well.

Enjoy! :)

@satyadeepk

Awesome, Thanks! Now its responsive and adjusts to the screen size :)

To get it for the single player, simply removing the playlist list html code will work right?

@KasimAhmic
Owner

You're welcome!

Actually no. jPlayers CSS file sets the style for the single player audio, single player video, playlist audio, and playlist video separately. I only changed the code for the playlist audio. Of you need the video players and the single player skinned as well, I can probably get it done today or tomorrow.

@satyadeepk

Oh, I see.

I actually do not require the video player, so if you could just update the single player audio, that would be cool.

For screen width less than around 520px, the progress bar is a bit skewed. (Screenshot). May be the volume control could be made a bit smaller in such cases, so that the player will work on most mobile phones too :)

Screenshot

@KasimAhmic
Owner

What device is that?

OK so I fixed the time stamps and instead of making the volume bar smaller, I got rid of it all together for mobile devices. As far as I know, the volume bar shouldn't even show up on most of them. I only have a 4th Gen iPod Touch so I'm not entirely sure. Also, I have just about finished the single player. I'll send you the updated CSS file in a bit

@KasimAhmic
Owner

http://www.mediafire.com/?axx792ad525dvp5

Here you go! This should work just fine :)

@satyadeepk

Hey, I think the file which you gave is the original fixed width version, can you please check that?

@KasimAhmic
Owner

OK I re-uploaded it: http://www.mediafire.com/?0bwu4hbsqb234e2

Also, try clearing your cache if it doesn't work.

EDIT: Also, before you use that CSS file, make sure to get the updated files that I just uploaded yesterday.

@satyadeepk

OK, thats super fluid now!
Updated to the latest code too.

Thanks a lot :)

@satyadeepk satyadeepk closed this
@KasimAhmic KasimAhmic reopened this
@KasimAhmic KasimAhmic closed this
@jathoo

hi mate i just used your css from this link (http://www.mediafire.com/download/axx792ad525dvp5/jplayer.midnight.black.css) for the original version (2.0.0) of this plugin because i'm using it in drupal 7 , which only has the jplayer module for version 2.0.0 . and everything is fine but just the volume bar is offset ,

untitled-1

and ("http://www.mediafire.com/?0bwu4hbsqb234e2") this link is down as well.

could you please have a look and let me know where I'm wrong , thanks a lot :)

@KasimAhmic
Owner

Have you tried using the current CSS file? As far as I know, it should support older versions just fine as jPlayer's markup hasn't changed at all.

@jathoo

oh , no , i didn't , but i modified the css which was on the working link from the above comment and it just works fine.

thanks a lot buddy :)

@KasimAhmic
Owner

Anytime! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.