jd_video_wrapper 4:3 Ratio container error

[treat2day]

I am having problems with making css changes in the jd_video_wrapper view for the download page in the component and the item view in the article.

The controls are not visible on SD sizes 4:3 Ratio but looks great on the HD sizes 16:9 Ratio

see screen shot 

jDownloads 3.2.42 
PHP 5.6.18 
Joomla 3.51

The configuration for the media player is on default and I tried making adjustments with no difference in showing controls on the 4:3 Ratio 

I tried changing the the container using different percetages and 25% worked on the 4:3 Ratio  view but had too much white space on the 16:9 Ratio  view

.jd_video_container {
    height: 25% !important;
}

The site is being developed and I would need to PM login if you need to a direct link.



Any suggestion on the correct CSS changes needed? 

[gelöscht durch Administrator]

[ColinM]

Hi
jD v42 has just been released.  Could you please upgrade to that and activate the corresponding v32 Files Layout.  this might solve the problem but if it does not then it will be easier to advise on the appropriate css.  See http://www.jdownloads.net/documentations/item/layouts-overview

Colin

[treat2day]

The v32 layout did not change the space or height to adjust for 4:3 Ratio either.

However, there is a new CSS added for padded-bottom and I increased it to

.jd_video_container {
        padding-bottom: 75.25%;
}

The white for the 16:9 Ratio videos is acceptable in v32 with this increase too versus the adjustment in the v2.5

Thank you.

[ColinM]

Hi
Glad that worked out.  I did not expect that the size would change as in the jD config Media tab there are settings for Player Width for HTML5 Video and Height.  These are now actually creating max-width and max-height CSS to get the self sizing on different devices.  Using the padding is a good way.  You might however try setting the jD width and height in a 16:12 ratio.

Colin

[treat2day]

I think this is a solution but I do not know how to add jdownloads javascript

Plus this script includes more than is needed in jdownloads.

They show video examples and how it fixes the ratio issue.

Fluid Width Video

When the page loads all videos are looked at and their aspect ratio is saved. Right away, and whenever the window is resized, all the videos are resized to fill the available width and maintain their aspect ratio. Using the jQuery JavaScript Library, that looks like this:
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php