Changing size of audio player

412 views
Skip to first unread message

Helenstlouis

unread,
Feb 2, 2012, 8:04:31 AM2/2/12
to jPlayer: HTML5 Audio & Video for jQuery
Hello everyone.

I am a complete newbie and novice coder and I just managed to deploy
jplayer audio in a very short time using the step-by-step
instructions! So thank you HappyWorm! I'm so glad I dared to give it a
try :-)

The only thing I need to change is the size of the player. I am using
the Blue Monday skin and want to make the player much smaller, about
150px wide. A search on this group brought up a few similar questions,
but I am still not entirely clear. Could someone clarify please
whether changing the size of the player is possible through editing
the sizes in the jplayer.blue.monday.css file? It seems complicated to
find the relevant bits... that's what I'm struggling with.

Thanks in advance!

Dustin Blake

unread,
Feb 9, 2012, 9:47:32 AM2/9/12
to jpl...@googlegroups.com
Open your page in the Google Chrome web browser, rightclick any portion of the jPlayer on your page, and choose inspect element, in the debug window you'll see the HTML mark-up,  hover or click the elements and you should see them highlight on the actual page, when you click an element, css styling information will display in the right sidebar of the debug window, here you can see widths, heights, paddings, margins, etc and most importantly what selectors, files, and lines where the styling is defined.

Opening the blue monday theme CSS file you can also start by looking for .jp-audio (should be at the top) and setting its width smaller (i think its 400px). Just to get you started.  Good luck.

lamacchiacosta

unread,
Feb 20, 2012, 6:09:23 AM2/20/12
to jpl...@googlegroups.com
Hi Dustin,

thanks a lot for the tip, I never used Chrome before, but you just gave me a startup to a new html tool!

Thanks a lot.

Ema

Dustin Blake

unread,
Feb 20, 2012, 6:33:30 AM2/20/12
to jpl...@googlegroups.com
Well, just so you know, most major browser vendors have some sort of debugging tool that is similar.  For example Firefox has the extension Firebug, and IE uses Developer Tools (via F12 button I think).

johnny

unread,
Mar 10, 2012, 7:06:16 AM3/10/12
to jpl...@googlegroups.com
Dustin,
I, too, would like to make a smaller player. I see how to change the CSS, but when I alter the width and size, only the border is effected, and the volume button and play stream stay in the same place. is there a way to make the entire player smaller? Can this be accomplished in the CSS?

BubbaDan47

unread,
Mar 11, 2012, 11:06:40 AM3/11/12
to jPlayer: HTML5 Audio & Video for jQuery
I too have tried nearly everything and even though I am not a newbie
at css I can't seem to get this to work.
Anyone have a base css for making the volume and play stream wrap?
> > Thanks in advance!- Hide quoted text -
>
> - Show quoted text -
Reply all
Reply to author
Forward
0 new messages