How to set width and height to jPlayer

Question

I am using jPlayer library but i don't know how to set width and height

My code is :

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(event){
                        // $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v"

                });

Please help me.

Solution 1

Untested, I think your code should look something like this:

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(){
                         $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v",
                    size: {
                         width: "400px",
                         height: "30px"
                    }
                });

I noticed that you were trying to loop the file? I changed the function call since it doesn't seem like you need the (event).

You should read this: http://jplayer.org/latest/developer-guide/#jPlayer-size
The sizes change according to the file types given.

Solution 2

the width and height constructor options mentioned in the previous answers will only affect the dimensions of the #jquery_jplayer_1 element itself which contains the poster image (if audio) or video content..

those options do not affect your GUI (everything else - controls, playlist etc.), the size of which is controlled by CSS.

If you are using one of the demo jPlayer skins (e.g. "Blue Monday") you need very specific CSS selectors to override their rules, or to use the !important flag..

Solution 3

The manual says:

Set the width and height of jPlayer using the jPlayer({size:Object}) constructor option.

The full-screen size is set using the jPlayer({sizeFull:Object}) constructor option.

whereas

width
String : (Default: [Video:"480px"] [Audio:"0px"])

height
String : (Default: [Video:"270px"] [Audio:"0px"])

That means something like

jPlayer({size:{width: "200px", height: "200px"}})

and complete:

 $("#jquery_jplayer_1").jPlayer({
                    ready: function(){
                        $(this).jPlayer("setMedia", {
                            m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
                        }).jPlayer("play");
                    },
                    ended: function(event){
                        // $(this).jPlayer("play");
                    },
                    swfPath: "../../common/assets/jplayer/js",
                    supplied: "m4v",
                    size: {width: "200px", height: "200px"}
                });