Background video makes a website feel alive. But when it weighs 40 MB and takes four seconds to load, visitors leave before they see your content.

According to HTTP Archive data for 2025, video accounts for up to 20% of the total weight of media-heavy pages. Google factors loading speed into rankings, and Core Web Vitals penalize slow LCP. Heavy background video hurts both users and SEO.

Below is a step-by-step algorithm for compressing background video to 5 MB without visible quality loss. Using free tools, no registration, no watermarks.

💡 Quick overview:

• Formats: prepare MP4 (H.264) + WebM (VP9), two files cover all modern browsers
• Tool: HandBrake, free, open-source, with precise bitrate and resolution control
• For Mac: built-in QuickTime export, no third-party software installation
• YouTube trick: upload, YouTube recompresses, download the optimized MP4 back
• Online services: CloudConvert, VideoSmaller, Clipchamp, when you don't want to install software
• WordPress: mb.YTPlayer and Video Background plugins, background video without editing the theme

Formats: why you need two files

Background video must play smoothly across all browsers. A single format won't cut it.

MP4 (H.264), the primary format. Works in Safari, Chrome, Edge, Opera, and on all mobile devices. This is the baseline that every browser understands without exception.

WebM (VP9), the supplementary format. The file is noticeably smaller at the same quality. Chrome and Firefox prioritize WebM, saving user bandwidth. According to Google Developers, VP9 delivers up to 50% bitrate savings compared to H.264 at identical visual quality.

For mobile, a static JPG poster. If the browser refuses autoplay (bandwidth saving, slow network), users see an image rather than empty space.

Resolution above 720p is rarely justified for backgrounds. A width of 1280 pixels covers an entire laptop screen, and the file weighs several times less than Full HD. Check on your mockup: 720p will likely meet your needs with room to spare.

Step 1: HandBrake, the primary tool

HandBrake is a free, open-source video converter for Windows, Mac, and Linux. It gives full control over codec, bitrate, and resolution. No watermarks, no registration, no file size limits.

Algorithm for compressing background video:

• Download HandBrake from the official website and open your source video file.
• On the Summary tab, select the MP4 format and check Web Optimized. This moves metadata to the beginning of the file, so the video starts playing immediately without waiting for a full download.
• On the Dimensions tab, set the width to 1280. Height adjusts automatically. Leave the Anamorphic filter set to Automatic.
• On the Video tab, select the H.264 (x264) codec. Set the Constant Quality slider in the 22-26 RF range. Higher numbers mean smaller files. Optimal: 24 RF.
• Remove the audio track. Background video is silent by default; uncheck the box on the Audio tab.
• Click Start Encode. A 30-50 MB file compresses to 3-8 MB. Quality remains acceptable for backgrounds.

For the WebM version, repeat the same steps, but in step 2 select the WebM format, and in step 4 select the VP9 codec.

In practice, a single pass through HandBrake reduces background video size by 5-10 times. Visitors don't notice the difference, and the page loads 2-3 seconds faster. This is the first thing we do with any video before uploading it to a website.

Step 2: Compression on Mac using built-in tools

If you're on macOS, you don't need to install anything. Built-in QuickTime export handles basic compression.

• Open the video file in QuickTime Player.
• Select File → Export → 720p.
• Specify the name and folder. The file saves as MP4 with H.264 codec.

This method doesn't offer fine-grained bitrate control, but it's sufficient for quick results. A 60 MB source file becomes 8-12 MB without additional effort.

A more advanced built-in option is iMovie. Import the video, select File → Share → File, choose 720p resolution and "Medium" quality. iMovie gives slightly better control over final size than QuickTime. For fine-tuned work, HandBrake is still better, but when you need something "right here, right now," Mac tools suffice.

Step 3: Compression via YouTube, a quick trick

The laziest way to get optimized video is to run it through YouTube.

• Upload the video to YouTube. You can set it to "Unlisted" so it won't appear in public search.
• Wait for processing to complete. YouTube automatically transcodes the video into all modern formats and resolutions.
• Download the optimized MP4 back using a converter, for example, CloudConvert.

Result: YouTube's compression algorithms, some of the best in the industry. The file comes out small and visually clean. This method helps when HandBrake isn't available and you need compression right now.

An alternative approach is to not upload the video file to your hosting at all. Embed the YouTube video as a background via the mb.YTPlayer plugin (section below). This saves server space and bandwidth, though it gives less control over playback.

Online tools: when you don't want to install software

If you don't want to install HandBrake and the file is small, browser-based compressors work fine.

CloudConvert is a universal workhorse. It supports over 200 formats and converts MP4 to WebM with one click. The free limit is enough for occasional optimization. Downside: speed depends on server queue.

VideoSmaller is a minimalist service for one task: compressing MP4. Two-button interface: upload and download. No registration required. Doesn't work with WebM or MOV, only MP4.

Clipchamp is a video editor from Microsoft with built-in export. The free version allows export up to 1080p without watermarks on your content. Watermarks only appear when using Clipchamp's stock assets. For compressing your own video, it's a working option.

Note: online services upload video to third-party servers. For private or confidential materials, use HandBrake locally.

WordPress plugins for background video

If your site runs on WordPress, embedding background video is easier with plugins. No need to edit the theme or write CSS.

mb.YTPlayer embeds YouTube video as a page or section background. The advantage is that the video itself is stored on YouTube's servers and doesn't load your hosting. The plugin adds a shortcode; insert it where needed, and the video plays as background. On mobile devices, the video starts on the first screen tap. The plugin has 1,000+ active installations and a 4.1 rating on WordPress.org.

🔗 mb.YTPlayer on WordPress.org

Video Background is a solution for your own video files. You specify the container, a link to MP4, and a link to WebM. The plugin automatically detects the browser and serves the appropriate format. Compatible with WPBakery and SiteOrigin. Minimal configuration.

🔗 Video Background on WordPress.org

Easy Video Background WP on CodeCanyon is a paid option with extended features: autoplay timer, customizable overlay, volume control. One-time payment.

If your video is already on YouTube, use mb.YTPlayer. If you have your own MP4 and WebM files on your hosting, use Video Background. Need fine-tuned display settings? Easy Video Background WP.

A visual demonstration of the compression process, from format selection to final export:

⁉️🤔 Frequently asked questions

Does background video have to be silent?

Yes. Autoplay with sound is annoying and prohibited by most browser policies. Chrome and Safari have blocked autoplay with sound since 2018. Remove the audio track during export, and the file becomes noticeably lighter.

How big should a background video be?

A good benchmark is up to 5 MB for 10-15 seconds of 720p background. Anything heavier than 8 MB noticeably slows loading on mobile networks. HandBrake with RF 24 at 720p typically stays within this range.

MP4 or WebM: which is better for backgrounds?

Both. MP4 is for Safari and iOS (they don't understand WebM). WebM is for Chrome and Firefox (smaller file at the same quality). Proper markup with the video tag automatically selects the appropriate format. Always prepare both files.

Can you use YouTube video as a background directly?

Technically yes, via YouTube IFrame API or the mb.YTPlayer plugin. But there are drawbacks: YouTube controls are visible on hover, ads may interrupt the background, preloading is slower than with your own files. For backgrounds without compromises, it's better to upload your own MP4 and WebM.

What should be shown on mobile if video doesn't load?

A static JPG poster: the first frame of the video or a specially prepared image. Set via the poster attribute in the video tag. Most WordPress plugins add a poster automatically from the first frame.

Is optimization worth the effort?

The difference between a raw 40-megabyte MOV and a compressed 4-megabyte MP4 is 2-3 seconds of page load time. For visitors on mobile networks, those seconds determine whether they stay or leave.

Free HandBrake, built-in Mac export, or five minutes in CloudConvert: minimal effort, immediate results. The page flies, Google is happy, visitors see video instead of a preloader.

If you're on WordPress, install mb.YTPlayer or Video Background and forget about manual coding. If you have your own files, always prepare MP4 + WebM and keep the final size under 5 MB. This is the baseline that works on any site, from landing pages to online stores.