Responsive jplayer video

[mem]

I'm not even sure if this is possible.
Here's the quest.

We have a video that should be 100% wide.
However, in order for the user to see it all, it should never ever give a vertical scroll to the browser user.

(unfortunately, max-width seems to not be accepted) so:

size {
 width: 100%
 height: auto;
}

If the screen is to wide, the height will be to high as well, returning scroll.
If we do a overflow: hidden; on the video container, (not sure if we can do this trough overwriting), we cut the content. So, not good either.

The only option I can see is to be radical.
So, what if we distort the aspect ratio and we force the video to be:
size {
 width: 100%
 height: 100%;
}

I tried. But the problem is that it doesn't truly stays that way. On our test case, the width will NOT be = to the width of the container, but it will be a little less then that.

My question is:
Does the jplayer changes the video somehow, and that's the reason I can never see the width to be truly 100%, on the second case ?


Please advice with the best you have.

Cheers,
mem

[Mark Panaghiston]

Heh... I tried to figure that stuff out when doing the skins. Basically the jp-video-270p class just adds the height of the video area as 270px and -270px for a margin of the video (area) play button.

The width and height in CSS is seriously messed up. The height in % often goes by whatever the width is. So if 100% width is 1000px, then 100% height is 1000px as well. But I am probably bringing in some of the CSS evolution there, and recent browsers might be different. (I forget, sorry. I mainly do JS, not CSS.)

As for what jPlayer does to the video... It does very little other than apply the style width and height to the video element. So width:480px; height:270px is the default. It is 0px and 0px when hidden, since display:none; screws up some HTML browsers and most browsers if the Flash was used.

The browser does automatically fit the video to the area. So if you video is HDTV aspect ratio, then it fits just fine. If your video is the old 4:3 aspect ratio, then you need to correct the figures jPlayer uses otherwise you will get black space on the left and right. ie., pillarbox.

See these options in the docs:
http://jplayer.org/latest/developer-guide/#jPlayer-option-size
http://jplayer.org/latest/developer-guide/#jPlayer-option-sizeFull

The 1st jPlayer 2 release used the width and height read from the CSS, but this was flawed in that the value read in is always in the pixel unit. But maybe this can help your case, since width:100% got read in as whatever 100% was being displayed on the browser (at the time) in pixels. You could then correct the height to be appropriate aspect ratio. You'd also have to redo the caluclation whenever the window is resized. So it would not be responsive CSS, but a bit of JS might do the job for you.  Just an idea, so you'd need to investigate.

[Papa Orange]

Dunno if it will work. But yeah try using this in combination and see how it goes.

http://fitvidsjs.com/