Video Demo Project

Video Hero Example

This project demonstrates how to use a video as the hero media instead of a static image.

How It Works

The video will:

• Autoplay when the page loads (muted for browser compatibility)
• Loop continuously
• Show a poster image while loading
• Fall back to the hero image if video isn’t supported

Usage in Your Projects

To add a video hero to any project, add this to your frontmatter:

video:
  hero: "https://example.com/your-video.mp4"
  poster: "/images/video-poster.jpg"
  autoplay: true
  loop: true
  muted: true

If you don’t include the video field, it will use the images.hero as a fallback.

Best Practices

• Keep videos short (under 30 seconds)
• Compress videos for web (use H.264 codec)
• Always provide a poster image
• Keep videos muted for autoplay to work
• Consider file size (aim for under 5MB)