How to make jplayer responsive?

[Nat Harman]

i'm using jplayer for an app, its working fine with a audio and video playlist my only problem is when i reach smaller phones sizes viewport 437 or less, the player shrinks but the progress and some of the controls fall out, i'm trying to target the elements in the css like this

any help would be great!

@media only screen and (min-device-width : 320px)and (max-device-width : 480px) {
    .jp-seek-bar {
background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px;
height:100%;
cursor: pointer;
visibility:hidden;
}
 }

[Marc Dingena]

A good start would be to write your own jPlayer GUI, so that it can be compliant with your requirements.

If you insist on modifying blue monday, a good idea would be to absolutely position some key controls, so that you know exactly where they will appear on the screen. You can also hide other functions, and have them appear progressively as the viewport becomes larger.

You most definitely need to write conditional CSS for these <li> elements in the jp-controls <ul>:

jp-previous

jp-play

jp-pause

jp-next

jp-stop

jp-mute

jp-unmute

jp-volume-max

By writing your own GUI, you can tailor your player to match your app's style exactly.

For a preview of mine, go to http://next.tjoonz.com and click the "Take tour" button (silent mp3 will begin playing, i am aware there is no audible sound at the moment of writing).