Video.js: Video is not rendering correctly and controls are not showing when using fluid

[rodrigopavezi]

Description

When configuring video js with fluid into a fixed container. It will not resize the video to fit the container properly and the controls will not be visible.

See here two examples of the issue with 2 different videos

https://jsfiddle.net/qxv81akt/24/

https://jsfiddle.net/qa71ryb8/1/

Results

Expected

We expect that the video will resize to fill the placeholder container, where it does not need to keep aspect ratio, and the controls will be visible.

[misteroneill]

Thanks for the report. It looks like the video is being resized properly, but there is definitely an odd issue with the padding used to create vertical space.

[rodrigopavezi]

@misteroneill

I can confirm that videojs cannot deal with a div container that has an aspect ratio greater than the video aspect ration when using the fluid option. See below for a video with aspect ration 16:9 = 1.77777

• 400px/200px = 2 - https://jsfiddle.net/qa71ryb8/1/
• 400px/225px = 1.77777 - https://jsfiddle.net/5qk8nt98/1/
• 400px/300px = 1.33333 - https://jsfiddle.net/374e0tj8/1/

I hope this can be of help.

Cheers

[gkatsev]

I think there's a bit of mis-understanding of fluid mode and that's definitely our fault since our documentation in that area is lacking.
I believe fluid mode is designed to flow the video but only in a specific aspect ratio. By default, videojs uses the 16:9 aspect ratio, if it can't read the the videoWidth and videoHeight of the video itself.
You can set an aspect ratio with the aspectRatio property, for example: https://jsfiddle.net/qa71ryb8/2/.
I think we used to have a mode where it just stretched to fit the parent but I can't remember what it was. I'll try to look it up, in the mean time, setting the aspect ratio should work too.

[rodrigopavezi]

@gkatsev thanks for looking at this and the aspect ratio setting suggestion. I would like to explain better what we are trying to achieve which is what we can do with jwplayer in the follow example

http://jsfiddle.net/nokjkucm/1/

If you see in the example, jwplayer has an option to stretch the video to be shown on any size of container no matter if the aspect ratio is different.

Do you know if there is any way I could achieve similar thing with videojs?

Cheers

[gkatsev]

Yup, I figured that's the case. As I mentioned, I think we had this previously when you set width and height to auto but it doesn't seem to be working right now. I'm going to take a look and see what used to work and whether we have something now. It makes sense to have something like it.

[gkatsev]

I can't find anything specific in videojs for making it fit to the parent. We should consider adding one. In the mean time, what you can do is remove the width and height attributes from videojs, remove the the fluid option and then using css set the width and height of videojs to 100% and it should work.
Here's an example: https://jsfiddle.net/gkatsev/oqbjxyv6/1/

[gkatsev]

We should also consider clamping the fluid mode into the parent object.