Background videos can enhance user engagement, bring energy to your page, and give a sense of your event. However, if not implemented carefully, they can slow down your site or distract from important foreground content. Background videos should support your site, not dominate it—subtle, smooth motion works best.
Recommended Video Specifications
-
Format: MP4
-
File Size: Up to 5MB
-
Duration: Maximum 15 seconds
-
Resolution: 720p, 24–25 fps
-
Dimensions: 1920 x 1080 pixels (if file size allows)
-
Audio: No sound
-
Content: Avoid text or logos within the video
Tip: Compress your video as much as possible. Smaller file sizes ensure faster loading, especially for mobile users or those on slower connections.
Performance Considerations
-
Background videos should load quickly to prevent buffering and slow page load times.
-
High-resolution 1080p videos may look great, but they can increase load times and impact mobile users. Prioritize balance between quality and performance.
-
Aim for the lowest bitrate possible without compromising visual appeal.
Layout and Cropping
-
Background videos will fill the container they are placed in.
-
If the container is not fixed in size (e.g., full-width browser), the video may crop on different screen sizes and devices.
-
Avoid placing text or logos in the video, as they may be cropped or obscured by other page elements.
-
Remember, other foreground elements (buttons, headings, banners) will overlay the video, so the background should enhance rather than distract.
Summary
When adding background videos to your Showoff site:
-
Keep them short, compressed, and subtle.
-
Avoid text or logos in the video.
-
Ensure they load quickly and adapt responsively to different devices.
Following these guidelines ensures your background videos enhance the user experience without affecting page performance or readability.
Comments
1 comment
To be clear : 5Mb is the maximum, not the recommended, I would try and make it a lot smaller.
Please sign in to leave a comment.