Video Templates
Video templates are designed to showcase video content prominently. Perfect for product demos, tutorials, testimonials, and promotional videos.
Overview
| Property | Value |
|---|---|
| Template Count | 21+ |
| Primary Content | YouTube/Vimeo embeds |
| Variations | Popup, fullscreen, sidebar |
| Best For | Demos, tutorials, promotions |
Common Use Cases
Product Demos
- Feature walkthroughs
- How-to guides
- Product tours
- Setup tutorials
Marketing
- Promotional videos
- Brand stories
- Customer testimonials
- Campaign videos
Education
- Course previews
- Tutorial content
- Webinar replays
- Training videos
Entertainment
- Trailers
- Music videos
- Event highlights
- Behind-the-scenes
Template Styles
Video-Centered
Video as primary focus:
┌─────────────────────────────────────┐
│ [X] │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ │ VIDEO PLAYER │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ [Optional caption or CTA] │
└─────────────────────────────────────┘
Video + Content
Video with supporting content:
┌─────────────────────────────────────┐
│ [Heading] [X] │
│ ┌─────────────────────────────────┐ │
│ │ VIDEO PLAYER │ │
│ └─────────────────────────────────┘ │
│ [Description text] │
│ [CTA Button] │
└─────────────────────────────────────┘
Side-by-Side
Video with adjacent content:
┌─────────────────────────────────────┐
│ ┌───────────────┐ ┌───────────────┐ │
│ │ │ │ [Heading] │ │
│ │ VIDEO │ │ [Text] │ │
│ │ │ │ [Button] │ │
│ └───────────────┘ └───────────────┘ │
└─────────────────────────────────────┘
Fullscreen Video
Maximum impact:
┌─────────────────────────────────────┐
│ [X] │
│ │
│ VIDEO PLAYER │
│ (large/fullscreen) │
│ │
│ [Overlay CTA] │
└─────────────────────────────────────┘
Video Settings
Supported Platforms
- YouTube
- Vimeo
Playback Options
| Setting | Description |
|---|---|
| Autoplay | Start automatically |
| Muted | Start without sound |
| Loop | Repeat continuously |
| Controls | Show player controls |
YouTube-Specific
- Start time
- Hide related videos
- Modest branding
- Privacy mode
Vimeo-Specific
- Player color
- Title/byline display
- Portrait visibility
Size Options
Video Dimensions
| Aspect Ratio | Use Case |
|---|---|
| 16:9 | Standard widescreen |
| 4:3 | Traditional format |
| 1:1 | Square (social) |
| 9:16 | Vertical/mobile |
Popup Sizes
| Size | Video Width | Best For |
|---|---|---|
| Small | 400-500px | Quick clips |
| Medium | 600-700px | Standard videos |
| Large | 800-900px | Detailed content |
| Fullscreen | 100% | Immersive |
Customization Tips
Video Quality
- Use high-quality source videos
- Ensure good lighting
- Clear audio
- Proper encoding
Popup Design
- Minimal distractions
- Dark backgrounds often work well
- Clear close button
- Supporting CTA below video
Performance
- Lazy load videos
- Use thumbnail until play
- Consider autoplay impact
- Mobile data considerations
Autoplay Considerations
Browser Restrictions
Most browsers require:
- Video must be muted for autoplay
- User interaction may be needed
- Mobile more restrictive
Best Practices
Autoplay: Yes
Muted: Yes (required for autoplay)
Controls: Yes (let users unmute)
Alternative: Thumbnail + Play
Show thumbnail, play on click:
- Better for mobile
- Respects user preference
- Clearer intent
Layout Patterns
Tutorial Video Popup
[X] Watch How It Works
[VIDEO: 16:9]
Get started in 3 simple steps.
[Try It Free]
Testimonial Video
[X] What Our Customers Say
[VIDEO: Customer testimonial]
"XBuilder saved us hours..."
- John Smith, CEO
[See More Reviews]
Product Demo
[X] See It In Action
[VIDEO: Product demo]
Features shown in this video:
• Feature 1
• Feature 2
• Feature 3
[Start Free Trial]
Course Preview
[X] Course Preview
[VIDEO: Intro lesson]
What you'll learn:
✓ Topic 1
✓ Topic 2
✓ Topic 3
[Enroll Now - $99]
Mobile Optimization
- Consider smaller video size
- Vertical videos for mobile
- Thumbnail with play button
- Don't autoplay on mobile
- Test touch interactions
Performance Tips
- Lazy loading — Load video when popup opens
- Thumbnails — Show image until user plays
- Optimize images — Compress poster images
- Consider file size — Video files are large
- Test connections — Verify on slow networks
Accessibility
- Provide captions/subtitles
- Include video description
- Allow keyboard control
- Don't auto-play audio
- Provide transcript option
Analytics
Track video engagement:
- Play rate
- Watch time
- Completion rate
- CTA clicks after video
Common Mistakes
❌ Autoplay with sound ❌ Too large for viewport ❌ No close button ❌ Poor video quality ❌ No supporting CTA ❌ Ignoring mobile
Best Practices
- Quality content — Video should be valuable
- Clear purpose — Know why you're showing it
- Appropriate length — 1-3 minutes ideal
- Good production — Professional quality
- Clear CTA — What should user do next?
- Test thoroughly — Check all devices