The Title Video is a powerful page builder component that allows you to create stunning, full-screen video backgrounds with text overlays. This feature is perfect for creating immersive, cinematic experiences that capture your visitors' attention and communicate your brand story in a dynamic way.
This article will cover:
Benefits of the Title Video Component
Visual Impact: Full-screen video backgrounds create an immediate, memorable impression
Versatile Video Support: Use YouTube, Vimeo, or self-hosted videos
Customizable Overlays: Add headings, descriptions, and call-to-action buttons over your video
Professional Appearance: Automatic video formatting ensures your content looks great on all devices
Engagement: Video content increases visitor engagement and time spent on your site
Brand Storytelling: Perfect for showcasing your brand story, products, events, or services
Easy to Use: No coding required—simply paste your video URL and customize
Configuration Options
Video URL (Required)
Enter the URL of your video. The system supports three types of videos:
YouTube Videos
or
Vimeo Videos
Self-Hosted Videos
Upload your video to your server and use the direct URL:
Supported formats: .mp4, .webm, .ogg, .mov
Heading (Optional)
Create an attention-grabbing headline that appears over your video.
- Enter compelling text that communicates your key message
- Keep it concise for maximum impact
- Best practice: 3-8 words work best
Heading Text Size
Choose the size of your heading text:
Small: Subtle, understated headlines
Medium: Balanced, versatile size (recommended for most uses)
Large: Bold, dramatic statements (default)
Description
Add supporting text below your heading to provide additional context or details.
Maximum flexibility for explaining your message
Automatically formatted for readability
Line breaks are preserved
Button (Optional)
Add a call-to-action button to drive user engagement:
Button Label
Enter the text that appears on the button (max 200 characters)
Examples:
Shop Now
Learn More
Watch Video
Get Started
View Collection
Book Now
Button URL
Enter the destination link when users click the button (max 200 characters)
Button Icon
Select an icon to enhance your button:
Arrow Icon: General navigation (default)
Shop Icon: Shopping/product pages
Sale Icon: Promotional offers
Event Icon: Events or announcements
Thumbs Up Icon: Positive messages, reviews
Pencil Icon: Registration, sign-ups, forms
Alert Icon: Important notices
None: Text-only button
Video Settings
Mute Video
Control the audio playback of your video:
Yes (default): Video plays without sound—recommended for auto-playing background videos
No: Video plays with sound—use cautiously, as unexpected audio can surprise visitors
For a better user experience and to comply with browser autoplay policies, muted videos are more reliable. If unmuted, some browsers may prevent autoplay.
Dark Overlay
Add a semi-transparent dark overlay to improve text readability:
Yes (default): Adds a dark layer between the video and text, making text easier to read
No: No overlay—use when your video has suitable contrast or natural dark areas
If your video is bright or busy, always use the dark overlay to ensure your text is legible.
Video Height
Choose how much of the screen the video section occupies:
Half: 50% of viewport height—compact, allows more content below
Three Quarter: 75% of viewport height—substantial presence without dominating
Full (default): 100% of viewport height—maximum impact, full-screen hero section
Best Practices and Technical Recommendations
Video Selection
Length: Use videos 10-60 seconds long; longer videos work well as loops
Content: Choose footage that relates to your message or brand
Quality: Use high-quality videos (1080p or higher) for professional appearance
Action: Select videos with movement—static shots don't showcase the video feature well
Safe zones: Ensure important video action stays away from edges where text may overlay
Technical Recommendations
Video Specifications for Self-Hosted Videos:
Resolution: 1920x1080 (Full HD) minimum
Format: MP4 (H.264) for best browser compatibility
File Size: Keep under 10MB for faster loading (compress if needed)
Bitrate: 3-8 Mbps for good quality/performance balance
Aspect Ratio: 16:9 widescreen
Text Overlay
Contrast: Always test text readability against your video
Length: Keep headings short (3-8 words)
Description: Limit to 2-3 sentences for better readability
Testing: Preview on both desktop and mobile devices