Video background size in Hero

Hi all,

I am editing some videos for a background in my Hero page. Its snippets of events we have done. On playing around this was quite a large file of around 120mb in 1080p, and I will trim this down and use Handbrake to lower this down.

which on testing i got this down to 9mb- but the video does look quite grainy on testing and would rather have this shorter and better quality.

Any advice? It does say 20mb is max size, but i want it to be around 5-8mb…but with todays standards of fast speed broadband and 4g and 5g, 20mb + should not be an issue.

A friend of mine has a huge website in wordpress and his video size on his Hero home page is around 140mb and he has had no issue.

I will have the video in desk top, and tablet mode and mobile will have a fixed image.

Thanks all.

1 Like

Hard to say without seeing the video file, however I have used Vimeo in the past to encode video with good results. Nice small file sizes with good quality.

1 Like

fab, thanks for the reply.

good thing is - I have full control over the edit, I want it use it as a background showcase, i noticed on lots of websites in my industry that i tend to watch the videos and they say so much more in 10 seconds that any slide show.

I will have a play and see where I get with it !

Video backgrounds are usually best kept to a duration of 5 - 10 seconds and looped. If you use handbrake, you should use the fast 720p30 preset. Select the web optimised option in the summary tab and select the fast decode option in the video tab. This creates a reasonably good quality video that should be about 3-9 mb. Unlike, normal videos displayed in your site, background videos are really impact elements and don’t need to tell a story, so trim a clip from your video (using Quicktime or iMovie) that symbolises the theme of your page, and then run it through handbrake to get it’s size down.

HERE IS AN EXAMPLE I made. The duration is 10 seconds and the file size is 3.1mb. The quality holds up fairly well.


thanks for sending. Yeah - handbrake is great for editing video files, such great software.

Hi @hendon52 - thanks for sending, good to see an example. thank you.

I love small clips like this - it really transforms the first time someone hits the home page.

I might on mine, keep the actual original menu at the top and not hot have the menu in the video - seems to keep it more uniformed in design.

This one video - I will probably drop it down to 720p or even lower as i want it to look a bit retro - I might add some effects to the video.

I have around 50 full size videos from my company and want to take sections of elements and chop them up to make a background - ill see how it goes.