JPlayer - How to make the audio player responsive?

Question

is there a way to make jplayer responsive? It's this skin: http://jplayer.org/latest/demo-01-supplied-mp3/?theme=0

I would like to scale the whole player using percentage on Width. I tried with a wrapper:

.wrapper {

max-width: 100%;
height: auto;
width: 100%\0/; /* IE8 hack for max-width */
}

but it doesn't work.

Can anybody help?

Thanks!

Answer 1

I came across this jplayer responsive design today, which might point you in the right direction:

Demo: http://www.beyondhyper.com/jplayer/

GitHub: https://github.com/BeyondHyper/responsive-jPlayer

Answer 2

The player you specified has a static width set on it's container, div.jp-audio. It's set to 420px. Try changing that value or commenting it out. I think that is what you are looking for. If not, let me know.

Answer 3

Here is a way to make JWplayer 5 responsive, it is meant for videos, but it works with audios as well. http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/

Basically, what you need to do is to set 2 wrapper divs:

   <div style='position:relative;width:100%;height:100%;padding-bottom:56.25%;'>
   <div style='position:absolute;width:100%;height:100%;'>
embedding code...
    </div>
    </div>

Then set the width and the height for embedding code of the player to 100% In the first line, you see padding-bottom:56.25%, this is a value for the height of a HD video. For an audio, you will want to make this much smaller, unless you want to show a poster image. I hope this helps?

Answer 4

This what you are looking for

@media screen and (min-width: 1024px)
#wrapper {
width: 65%;
float: left;
margin: 30px auto auto;

Answer 5

I use the following to make jplayer responsive. Jplayer adds style tags directly to the HTML so you need to use !important.

I'm having trouble with responsive video still though as jquery sets the video height and width to zero before play is pressed, if you set the height to auto on video in CSS it will display the poster on top of the video on first load. This should work fine for audio though

@media screen and (max-width: 500px) {

    /* jplayer */
    .jp-video video, .jp-audio, .jp-controls-holder {
        width: 100% !important;
    }

   .jp-video, .jp-video > div, .jp-video img {
       height: auto !important;
       width: 100% !important;
   }

   .jp-video-360p {
       max-width: 570px !important;
   }

   .jp-video-270p {
       max-width: 480px !important;
   }

   .jp-progress {
       width: 130px;
   }
}

Answer 6

You need to make the wrapper's width 100% and the max-width whatever you want it limited to.

.wrapper {
max-width: 420px;
width:100%;
}

I usually don't specify a height when making elements responsive. Hope this helps

Answer 7

Just created a gist with my work: https://gist.github.com/ishahak/d76d46ce1423f86982366ac325f5b59d