Whether you are on MacOS, Windows, or Linux, use FFmpeg to create optimized, full-width background videos for websites. Transform large, slow-loading video files into fast, web-ready formats that work seamlessly across all browsers and devices. The following snippets are to be run on the command line in your computer’s terminal application:
Step 1: Install FFmpeg Using Homebrew
For reference, see the Homebrew site: https://brew.sh/
Install Homebrew (if you don’t have it)
First, check if Homebrew is already installed:
brew --version
If you see a version number, Homebrew is installed. Skip to the FFmpeg installation.
If you get “command not found,” install Homebrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Follow the installation prompts:
- Press Enter when prompted
- Enter your password when asked
- Wait for the installation to complete (this may take several minutes)
Install FFmpeg with Homebrew
For reference, see the FFmpeg site: https://ffmpeg.org/
Now install FFmpeg:
brew install ffmpeg
This will install FFmpeg with all the necessary codecs for video optimization.
Verify FFmpeg Installation
Check that FFmpeg is properly installed:
ffmpeg -version
You should see output similar to:
ffmpeg version 7.1.1 Copyright (c) 2000-2025 the FFmpeg developers built with Apple clang version 17.0.0 (clang-1700.0.13.3)
Step 2: Set Up Your Project Workspace
Create a dedicated folder for your video optimization project:
mkdir background-video-project
Change directory (cd) into your new folder:
cd background-video-project
Now, add your video files into to this new “background-video-project” folder
Step 3: Create the Three Optimized Video Files (1920×1080)
From within your project folder, run the following commands in your terminal. Be sure to use the correct filename in your command that matches the video file you need to convert.
Your original video file must be located within the “background-video-project” folder, or whichever folder you intend to run the commands in:
A. Create Optimized MP4 (Primary Format)
ffmpeg -i your-original-video.mp4 \
-vf "scale=1920:1080" \
-c:v libx264 \
-crf 28 \
-preset slow \
-an \
-movflags +faststart \
your-optimized-video.mp4
B. Create WebM Version (Smallest File Size)
ffmpeg -i your-video-compressed.mp4 \
-c:v libvpx-vp9 \
-crf 30 \
-b:v 0 \
-vf "scale=1920:1080" \
your-optimized-video.webm
C. Create OGV Version (Legacy Support)
ffmpeg -i your-video-compressed.mp4 \
-c:v libtheora \
-q:v 7 \
-vf "scale=1920:1080" \
your-optimized-video.ogv
MP4 Optimization – Command References:
-vf “scale=1920:1080”
- -vf = Video filter
- scale=1920:1080 = Resize video to exactly 1920×1080 pixels (Full HD)
- Forces the output to this resolution regardless of input size
-c:v libx264
- -c:v = Video codec
- libx264 = H.264 encoder (most compatible format)
- Creates MP4 files that work on virtually all devices/browsers
- Industry standard for web video
-crf 28
- CRF = Constant Rate Factor (quality control)
- 28 = Quality level (lower = better quality, larger file)
- Scale: 0-51 (0 = lossless, 23 = default, 28 = good web quality)
-preset slow
- Encoding speed vs compression efficiency
- slow = Takes longer to encode but produces smaller files
- Affects encoding time, not playback speed
-an
- -an = Audio None
- Removes all audio tracks from the output
- Perfect for background videos that don’t need sound
- Significantly reduces file size
-movflags +faststart
- Optimizes MP4 for web streaming
- Moves metadata to the beginning of the file
- Enables progressive download (video starts playing before fully downloaded)
- Essential for web videos
- What it does:
- Without: Video must download completely before playing
- With: Video can start playing immediately while downloading
your-video-compressed.mp4
- Output filename
- Where the processed video will be saved
- Replace with your desired filename
WebM conversion – Command References:
-c:v libvpx-vp9
- -c:v = Video codec
- libvpx-vp9 = VP9 encoder (Google’s modern codec)
- Creates WebM files with excellent compression
- Benefits: 30-50% smaller than H.264, high quality
- Supported by: Chrome, Firefox, Edge, Opera
-crf 30
- CRF = Constant Rate Factor (quality control)
- 30 = Quality level for VP9 codec
- VP9 scale: 0-63 (lower = better quality, larger file)
- Note: VP9 uses different scale than H.264
-b:v 0
- -b:v = Video bitrate
- 0 = Use CRF mode instead of bitrate targeting
- Tells FFmpeg to ignore bitrate and use CRF for quality control
- Essential for VP9 to get optimal compression
- Without this flag:
- FFmpeg might use both CRF and bitrate, causing conflicts
- Results in suboptimal compression
-vf “scale=1920:1080”
- -vf = Video filter
- scale=1920:1080 = Resize video to 1920×1080 pixels
- Same as H.264 command – forces Full HD resolution
your-video-compressed.webm
- Output filename with .webm extension
- WebM container format (optimized for web)
- Contains VP9 video codec
OGV conversion – Command References:
-c:v libtheora
- -c:v = Video codec
- libtheora = Theora encoder (open-source codec)
- Creates OGV files for maximum compatibility
- Legacy support for older browsers (Firefox < 28)
- Less efficient than modern codecs but very compatible
-q:v 7
- -q:v = Video quality (different from CRF)
- 7 = Quality level for Theora codec
- Theora scale: 0-10 (higher = better quality, larger file)
- Note: Opposite direction from CRF
-vf “scale=1920:1080”
- Same video filter as other commands
- Resizes to Full HD resolution
your-video-file.ogv
- Output filename with .ogv extension
- OGV container format with Theora video codec