Video backgrounds add dynamic visual effects to your site's content. Here's how to implement them effectively:

Video Requirements:

• Maximum duration: 60 seconds for uploaded videos (unlimited for embedded)
• Ideal frame rate: 60 fps
• Recommended resolution: 1080p with 3+ Mbps bitrate
• Optimal length: Less than 40 seconds
• Format: Horizontal/landscape (16:9 aspect ratio)

Adding Background Videos:

1. Prepare Your Video

• Upload to YouTube/Vimeo (ensure proper privacy settings)
• For direct upload, follow size and format guidelines
• Copy video URL if using YouTube/Vimeo

2. Add the Video For Section Backgrounds:
3. Open Pages panel
4. Click Edit
5. Select section's pencil icon
6. Click Background > Video
7. Choose video source
8. Customize settings
9. Save changes

For Page Banners:

1. Open Pages panel
2. Click page settings
3. Select Media tab
4. Enter video URL

Design Best Practices:

• Limit to 2 background videos per page
• Avoid flickering effects
• Use centered subjects with space for cropping
• Minimize movement for smoother playback
• Add mobile fallback images

Customization Options:

• Adjust playback speed
• Apply filters
• Add overlay colors
• Set background width (full or inset)
• Customize mobile fallback display

Mobile Considerations:

• Add fallback images for mobile devices
• Videos may not play in power-saving mode
• Loading times vary by connection speed

Performance Tips:

• Optimize video file size
• Center important content
• Consider loading times
• Use appropriate resolution and bitrate
• Test across different devices

Remember to follow platform-specific requirements for YouTube and Vimeo videos, and ensure proper privacy settings for embedded content.

Related Articles

Previous Articles