Overview
The Background Video Extension allows you to add video backgrounds to any WordPress block, creating stunning, dynamic visual experiences. Perfect for hero sections, feature areas, and modern website designs that need eye-catching motion backgrounds.
Key Features
- Video Backgrounds: Add MP4, WebM, or YouTube videos as backgrounds
- Auto-play Control: Videos play automatically on page load
- Loop Option: Continuous playback
- Mute Control: Sound on/off options
- Mobile Fallback: Use image instead of video on mobile
- Overlay Support: Add color overlays for text readability
- Performance Optimized: Lazy loading and mobile optimization
How to Use
- Select a Section, Group, or Cover block
- Navigate to Background settings
- Enable Background Video
- Upload video file or enter YouTube URL
- Configure autoplay, loop, and mute settings
- Add overlay for text readability
- Set mobile fallback image
- Preview and publish
Supported Video Formats
- MP4: Best browser support, recommended
- WebM: Better compression, modern browsers
- YouTube: Embed YouTube videos (limited control)
- Vimeo: Embed Vimeo videos (limited control)
Settings
Video Source
- Upload Video: Upload from media library
- YouTube URL: Paste YouTube video URL
- Vimeo URL: Paste Vimeo video URL
Playback Options
- Autoplay: Start playing automatically (required for background videos)
- Loop: Restart video when it ends
- Muted: Play without sound (required for autoplay in most browsers)
- Playback Rate: Speed up or slow down video
Mobile Settings
- Disable on Mobile: Show fallback image instead
- Fallback Image: Image to show when video not playing
- Mobile Breakpoint: Screen size to switch to image
Best Practices
- Keep videos under 5MB for fast loading
- Use 15-30 second clips on loop
- Optimize videos for web (compress, reduce quality)
- Always provide fallback image for mobile
- Add overlay (30-60% opacity) for text readability
- Mute videos – background videos should be silent
- Test on slow connections
- Use videos that loop seamlessly
Video Optimization
- Resolution: 1920×1080 max, 1280×720 recommended
- Length: 15-30 seconds is ideal
- File Size: Target 2-5MB maximum
- Compression: Use H.264 codec for MP4
- Frame Rate: 24-30fps is sufficient
Common Use Cases
- Hero Sections: Dynamic welcome areas
- Product Showcases: Product in action backgrounds
- About Pages: Company culture or team videos
- Event Pages: Event highlights or venue tours
- Portfolio: Creative work demonstrations
Accessibility
- Provide pause/play controls for accessibility
- Respect prefers-reduced-motion setting
- Ensure text over video has sufficient contrast
- Provide alternative content for screen readers
- Never auto-play videos with sound
Performance Tips
- Use lazy loading for below-fold videos
- Compress videos aggressively
- Disable on mobile to save bandwidth
- Use CDN for video hosting
- Limit to one video background per page
Troubleshooting
- Video not playing: Ensure muted is enabled, check autoplay settings
- Poor performance: Reduce video file size, disable on mobile
- Video not looping: Enable loop setting
- Mobile showing video: Enable disable on mobile, set fallback image