This article covers everything you need to optimize and upload video to your Finalsite CMS website, from file specs and compression tools to connecting your video in Composer and ensuring you meet WCAG 2.1 compliance with captions displaying on any videos.
💡What this covers
Here you can find recommended video specs (.mp4, H.264, 720p/1080p, bitrate, and frame rate), a step-by-step workflow for compressing, uploading, and connecting video in Composer, and best practices for background video, audio removal, .vtt captions for WCAG 2.1 compliance, and mobile focal point protection.
In this article
- Video specification standards
- Step 1: Define the purpose
- Step 2: Compress your video
- Step 3: Upload to Resources and add captions
- Step 4: Connect your video in Composer
- Step 5: Follow best practices
Before you start
This article is part of our media guidelines series. Looking for something else? Check out the full set:
- Media guide 1: Setting up your site's branding and global standards
- Media guide 2: Image specs for every module
- Media guide 3: Building hero areas, banners, and sliders
- Media guide 4: Optimizing and uploading video (this article)
This article is meant to outline general recommended guidelines. Every site is unique, however, and exact dimensions for your site's custom treatments, enhancements, and directions can be found in these places in your page tree:
Video specification standards
| Setting | Recommended standard | Why it matters |
|---|---|---|
| File type | .mp4 (H.264) | Best balance of quality and universal browser compatibility |
| Resolution | 720p or 1080p | 720p works for most; reserve 1080p for full-screen heroes |
| Aspect ratio | 16:9 | Standard widescreen format for desktop and mobile players |
| Duration | 15–30 seconds | Keeps attention, loads quickly, and respects mobile data limits |
| Ideal file size | Under 50 MB | Enables browser caching and instant playback on repeat visits |
| Maximum upload | 3.91 GB | System limit; smaller files are strongly recommended |
| Bitrate | 2000–5000 kbps | The key to file size; keeping bitrate low prevents buffering |
| Frame rate | 24 or 30 fps | Standard web playback; avoid 60 fps to reduce file size |
| Audio | AAC or none | Strip audio from background heroes to save bandwidth |
Step 1: Define the purpose
Clarify what your video needs to accomplish before editing. Homepage heroes should be short and cinematic. Interior page videos can be story-driven.
Step 2: Compress your video
Resources automatically transcodes and compresses most videos after upload, creating optimized versions for mobile and desktop. Pre-upload compression is not required for the majority of videos.
Pre-upload compression is recommended when:
- The source file is 4K or very large
- The goal is to keep the upload well under the 50 MB recommended size
- The footage is unlikely to compress efficiently through transcoding alone, such as very long recordings
If the video falls into one of these categories, use one of the tools in the table below before uploading.
| Tool | Best for | How it works |
|---|---|---|
| Handbrake | Maximum compression with quality control | Free desktop app; provides most significant file-size reduction |
| VideoCandy | Quick, one-button compression | Browser-based; upload and compress without installing software |
| Adobe Express | Cropping to a specific aspect ratio | Ideal for fitting video to a 16:9 hero without distortion |
Step 3: Upload to Resources and add captions
Finalsite's transcoding engine automatically creates optimized versions for mobile and desktop, but captions must be added manually to the resource file.
Upload to Resources: Drop your compressed
.mp4into your chosen folder.Attach Captions: Click the video file to open the Quick Actions Panel on the right.
Find Closed Captions: Locate the section for captions.
Upload
.vtt: Upload your WebVTT.vttfile.Save: This ensures the captions are "baked into" the resource globally.
⚠️ Important Note
If you have a .srt file, convert your file to .vtt format first. Here are some recommended tools for transcript generation:
Step 4: Connect your video in Composer
With your video in Resources, you're ready to display it on your page:
- Select element: In Compose mode, open your Resource element settings and browse for your video.
-
Browse for file: Select your optimized video from Resources.
- The version inserted into your page will automatically be the optimized version served by the system.
- The system detects each visitor's screen size and serves the most efficient version for their device.
Enable captions: Within the element settings, expand the Audio (or Video) tab. Check the box next to Closed Captions before clicking Save.
⚠️ Important Note
Even when using a Video Element, the settings window may still be labeled Resource Element Settings.
Step 5: Follow best practices
| Practice | Why it matters |
|---|---|
| Remove audio | Saves bandwidth; most browsers mute background video by default |
| Custom poster image | Prevents "black frame" starts while the video loads |
| No embedded text | Accessibility barrier; text gets clipped during mobile cropping |
| Center focal point | Ensures visibility when video crops for mobile screens |
| Add .vtt captions | Required for WCAG 2.1 accessibility compliance |
| Save narrative for interior | Homepage heroes should be atmospheric, not story-driven |
🌐 Accessibility tip: Avoid embedded text in video
Do not bake text, titles, or "lower thirds" directly into your video files. This creates significant accessibility barriers and often leads to unreadable content when the video is automatically cropped to fit different mobile screen sizes. Always use Composer's built-in text overlay options instead.
Comments
Please Sign in to leave a comment if you don't see the comment box below.