How to Add Videos as Background on Your Website
Background videos create dynamic visual effects by playing silently behind your website content. Here's how to effectively add and optimize them:
Key Requirements:
- Videos must be under 60 seconds for uploaded files (no limit for embedded)
- Use 1080p resolution with 3+ Mbps bitrate
- Frame rate around 60fps for smooth playback
- Horizontally-oriented (16:9) format recommended
- Limit to 2 background videos per page for optimal loading
Adding a Background Video:
- Prepare Your Video
- Upload to YouTube/Vimeo and get share URL, or
- Prepare video file meeting requirements
- Ensure video is set to public/unlisted with embedding enabled
- Add the Video For Section Backgrounds:
- Open Pages panel > Edit page
- Click section's pencil icon > Background
- Select Video > Choose source
- Customize settings & save
For Page Banners:
- Open Pages panel
- Click page settings icon
- Select Media tab > Video
- Paste video URL
- Optimize Your Video
- Add mobile fallback image
- Apply filters if desired
- Adjust playback speed
- Set background width (full-bleed or inset)
Best Practices:
- Use centered compositions with minimal movement
- Keep videos under 40 seconds for smoother looping
- Avoid flashy content or quick cuts
- Ensure text overlay colors contrast with video
- Add fallback images for mobile devices
- Test loading times across devices
Video Support Notes:
- YouTube videos may show brief branding
- Vimeo requires paid account
- Mobile playback depends on connection speed
- Videos don't play in device power-saving modes
To remove videos:
- Switch to image background, or
- Delete video to free storage space
- Each site allows 30 minutes total video storage
Follow these guidelines to create professional, engaging background videos that enhance your site without compromising performance.
Related Articles
How to Report Malware on Squarespace Developer Platform: FAQ Guide
