Hero Video Background

Heroes

About

Hero Video Background A full-screen, responsive hero component that plays a video in the background. It features a customizable, animated title and a call-to-action button, designed to be theme-adaptive and accessible.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Video Background to your project and fits it to your theme.

Code

How Hero Video Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { HeroVideoBackground } from "@/components/ui/hero-video-background"; // Adjust path as needed

export default function HeroVideoDemo() {
  return (
    <HeroVideoBackground
      // A placeholder video from Pexels. Replace with your own video URL.
      videoSrc="https://www.pexels.com/download/video/854696/"
      heading="Creative innovation for a regenerative future"
      buttonText="Explore our work"
      buttonHref="#work"
    />
  );
}