Video.js: how to change the width/height of an already existing videojs player?

[mlchai]

For some reason the vjs-fluid and vjs-16-9 isn't working for me (height is set to 0 all the time), so I have to manually make it responsive. All I need is the ability to set the width/height. Upon first initialization, by passing the width into the options, it does what I want perfectly. However, I need it to do that same thing on resize. So whatever videojs is doing to set the width/height when it's created, I want to call that on resize. What's the API I can use for that?

[helenjer]

Hi, @mlchai,
You can simply use .width() and .height() methods (or the .dimension('width', val) and .dimension('height', val) which first methods are alises for).
The API reference page: http://docs.videojs.com/docs/api/player.html

For example,

// create
var player = videojs('player_id', {width: 200; height: 150});
//...
// change
player.width(400);
player.height(300);

Or manage resize via css, setting width: 100%; height: 100% for player in css (cause percent values are not supported now by videojs in init options and methods above) and give appropriate resize behavior for its container.

Anyway it's better to fix initial problem with height 0 and use standart classes if you don't need any special behavior.
Css height:0 is normal, but if you visible size is 0, check that you don't affect padding-top rule

.player_id-dimensions.vjs-fluid { 
padding-top: 56.25%;
}

which used for visible sizing.

[hartman]

For some reason the vjs-fluid and vjs-16-9 isn't working for me (height is set to 0 all the time)

This probably means you are failing to understand the DOM structure + CSS combination that you are embedding your player into. If you link to an example people might be able to help you figure out how to fix it.

[mister-ben]

There's a change in 5.13 (currently prelease) which makes fluid mode default to 16:9 where the video dimensions aren't known. You can get it from npm with npm install video.js@next.

The ubiquitous responsive CSS solution works too: http://jsbin.com/faxayot/edit?html,output

[mlchai]

I think you guys are right, it's a CSS thing. The container dimensions are 0 so that explains why the videos aren't showing up, but I thought the videos would cause the container to size around the content. Setting the width and height in Javascript then initializing the videojs players didn't work though.

[mlchai]

Just tried the way @helenjer suggested (player = videojs('id'); player.width(100)) and it worked. I was trying to change the width with jquery and it wasn't working.

[rgaufman]

I am trying player = videojs('id'); player.width(100 but there is no effect on the latest version (7.2.4) :( - any ideas?