Jumbotron video pixel dimensions to avoid cropping


I am experimenting with using a video background for my Jumbotron. Ideally I would like the illdy theme to maintiain the aspect ratio of my video upon upload, however, on all devices it is being cropped. Is there a way to resolve this?

Can I use CSS styling to fix this? Otherwise what are the ideal video pixel dimensions that are closest to a 16:9 aspect ration that I can use?

Site: danedits.co.uk
Password: HolioTen

Screenshot attached of what the video should look like that’s placed in my jumbotron. In this animation the circles bounce of the edge of the video and the words 1920 are at the very edge of each corner.


hey Dan

Well, idea of the background video (or image) is to cover all visible part of the section of divice, in this case video is trying to cover visible part of the section, im afraid when its added as a background there is no way to resize or somehow fit it in the screen while you have content inside this section

Hope this makes sense :slight_smile:


Thanks for your help. I have managed to work around this by using unique media queries for popular devices.

I have worked out that a 1920x1080 (aspect ratio of 16:9) video needs 280px padding on the .bottom-header for a background video to appear to maintain the correct aspect ratio. An iPad needs 80px padding.

I’m slowly working through the top 10 most popular screen resolutions to ensure that users of my website are viewing the backgrond video correctly.


Thank you for sharing the solution :slight_smile:

Have a good day