Optimizing Background Videos

Highlighted
HubSpot Product Team

Speeding up page load times can have a great effect on your business - visitors are much more likely to stay on a website that is well optimized and loads quickly, which will encourage them to interact more with your content. Background videos are frequently the culprit behind slow-loading pages, so it's extremely important to optimize those videos for the best possible performance. With a few quick edits, you can find the right compression techniques for your purposes without sacrificing noticeable picture quality. In fact, our Academy team was able to greatly improve our Inbound Certification page by simply reducing the bitrate of the background video, bringing the file size down from 30MB to 4.1MB.

 

If you don't already have video editing software on your computer that can make these types of edits, HandBrake is a great, free option. To begin optimizing your background video in HandBrake:

 

1. Select the appropriate file from the Source Selection screen
2. Reduce the video resolution by lowering the height and width in the Picture tab (the highest recommended resolution for background videos is 720p - 1280x720)
3. In the Video tab, reduce the bitrate under the Quality section by either selecting a lower RF value for Constant Quality, or by entering an average bitrate. Note that manually entering an average bitrate can give you more control over the file size, but selecting a Constant Quality instead allows HandBrake to calculate the appropriate bitrate at different points in your video to achieve a consistent video quality.
4. If possible, reduce your framerate in the Video tab to 24 or 25 FPS. This is typically not recommended for video editing, as most videos look best when they keep the framerate at which they were filmed. You can experiment with this option to see if it works with your video, but simply combining steps 2 and 3 will likely have the best results.

5. Use the Browse button under Destination to choose the appropriate folder for your compressed video, and then click Start Encode


With a small amount of experimenting to find the right options for your specific background video, you can have great looking, fast loading, reduced bandwidth videos for your site.

6 Replies 6
Community Manager

Hey @Stevie this is an awesome post which I'm sure many will find useful Smiley Happy

 

 

New Contributor

Now, how to add that video as a hero banner video (i.e. background video) to a webpage?  

Occasional Contributor
Reply
0 Upvotes
Occasional Contributor
Community Manager

Hey @ENBertussi,

That link shares to something inside your portal, do you mind resending with a public version? 


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Occasional Contributor

Hi Jenny,

 

I wish i could but I'll admit I really don't know quite enough about how I would do that..

 

ENB..//

Reply
0 Upvotes