Video Component

The Video component allows AI agents to fetch videos using natural language descriptions or serve static video files from your CDN.

Basic Usage

AI-Generated Videos

Request videos using natural language descriptions:

import { Video } from 'assets-ai';

function MyComponent() {
  return (
    <Video 
      description="ocean waves crashing on beach" 
      width={800} 
      height={600}
      controls
    />
  );
}

Static Videos

Serve pre-existing videos without AI:

<Video name="product-demo.mp4" width={1280} height={720} controls />

Props

Prop	Type	Default	Description
`description`	string	-	AI prompt for generating the video
`name`	string	-	Static video filename (bypasses AI)
`width`	number \| string	-	Video width in pixels
`height`	number \| string	-	Video height in pixels
`controls`	boolean	true	Show video controls
`autoPlay`	boolean	false	Auto-play video on load
`loop`	boolean	false	Loop video playback
`muted`	boolean	false	Mute audio by default
`className`	string	-	Additional CSS classes
`fallback`	boolean \| ReactNode	-	Show skeleton loader or custom fallback

Video Controls

Basic Controls

Show standard video controls (play, pause, volume, fullscreen):

<Video 
  description="product demonstration" 
  width={800} 
  height={600}
  controls
/>

Autoplay

Auto-play video when component loads:

<Video 
  description="background animation" 
  width={800} 
  height={600}
  autoPlay
  muted // Required for autoplay in most browsers
/>

Looping

Loop video continuously:

<Video 
  description="ambient background" 
  width={1920} 
  height={1080}
  autoPlay
  loop
  muted
/>

Muted

Start video with audio muted:

<Video 
  description="tutorial video" 
  width={800} 
  height={600}
  controls
  muted
/>

Sizing

Fixed Dimensions

<Video 
  description="product demo" 
  width={1280} 
  height={720}
  controls
/>

Responsive Sizing

<Video 
  description="tutorial" 
  width="100%" 
  height="auto"
  controls
  className="max-w-4xl"
/>

Aspect Ratio

<div className="aspect-video w-full max-w-4xl">
  <Video 
    description="presentation" 
    width="100%" 
    height="100%"
    controls
    className="rounded-lg"
  />
</div>

Loading States

Default Loading

By default, an empty space is shown while loading:

<Video 
  description="demo video" 
  width={800} 
  height={600}
  controls
/>

Skeleton Loader

Show a skeleton placeholder while loading:

<Video 
  description="demo video" 
  width={800} 
  height={600}
  controls
  fallback={true}
/>

Custom Fallback

Provide a custom fallback component:

<Video 
  description="demo video" 
  width={800} 
  height={600}
  controls
  fallback={
    <div className="bg-gray-200 animate-pulse flex items-center justify-center">
      <span>Loading video...</span>
    </div>
  }
/>

Examples

Hero Video Background

function HeroSection() {
  return (
    <section className="relative h-screen">
      <Video 
        description="modern city timelapse" 
        width="100%" 
        height="100%"
        autoPlay
        loop
        muted
        className="absolute inset-0 w-full h-full object-cover"
      />
      <div className="relative z-10 flex items-center justify-center h-full">
        <h1 className="text-5xl font-bold text-white">Welcome</h1>
      </div>
    </section>
  );
}

Product Demo

function ProductDemo() {
  return (
    <div className="max-w-4xl mx-auto">
      <h2 className="text-3xl font-bold mb-6">See It In Action</h2>
      <Video 
        description="software product demonstration walkthrough" 
        width={1280} 
        height={720}
        controls
        className="w-full rounded-lg shadow-xl"
        fallback={true}
      />
    </div>
  );
}

Tutorial Section

function Tutorial({ steps }) {
  return (
    <div className="space-y-8">
      {steps.map((step, index) => (
        <div key={index} className="flex gap-6">
          <div className="flex-1">
            <h3 className="text-2xl font-bold mb-2">{step.title}</h3>
            <p className="text-gray-600">{step.description}</p>
          </div>
          <Video 
            description={step.videoDescription}
            width={640}
            height={360}
            controls
            className="rounded-lg"
            fallback={true}
          />
        </div>
      ))}
    </div>
  );
}

Video Gallery

function VideoGallery() {
  const videos = [
    "team collaboration meeting",
    "product feature showcase",
    "customer testimonial interview",
    "office tour walkthrough"
  ];

  return (
    <div className="grid grid-cols-2 gap-6">
      {videos.map((description, index) => (
        <div key={index} className="aspect-video">
          <Video 
            description={description}
            width="100%"
            height="100%"
            controls
            className="rounded-lg"
            fallback={true}
          />
        </div>
      ))}
    </div>
  );
}

Ambient Background

function AmbientSection() {
  return (
    <div className="relative min-h-screen">
      <Video 
        description="subtle particle animation" 
        width="100%" 
        height="100%"
        autoPlay
        loop
        muted
        className="absolute inset-0 w-full h-full object-cover opacity-30"
      />
      <div className="relative z-10 p-12">
        {/* Content */}
      </div>
    </div>
  );
}

function VideoModal({ isOpen, onClose, videoDescription }) {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
      <div className="max-w-4xl w-full p-4">
        <button onClick={onClose} className="text-white mb-4">
          Close
        </button>
        <Video 
          description={videoDescription}
          width="100%"
          height="auto"
          controls
          autoPlay
          className="rounded-lg"
        />
      </div>
    </div>
  );
}

Inline Video

function BlogPost() {
  return (
    <article className="prose max-w-4xl mx-auto">
      <h1>How to Use Our Product</h1>
      <p>Let me show you how easy it is...</p>
      
      <Video 
        description="step-by-step product tutorial" 
        width={800} 
        height={450}
        controls
        className="my-8 rounded-lg"
        fallback={true}
      />
      
      <p>As you can see in the video above...</p>
    </article>
  );
}

Best Practices

Descriptive Prompts

Use detailed, specific descriptions for better results:

// Good - specific and descriptive
<Video description="software demo showing main dashboard features" />
<Video description="customer interview discussing product benefits" />
<Video description="time-lapse of city street at sunset" />

// Less effective - too vague
<Video description="video" />
<Video description="demo" />
<Video description="background" />

Autoplay Considerations

Always mute autoplaying videos to comply with browser policies:

// Correct - autoplay with muted
<Video description="background" autoPlay loop muted />

// Won't work - autoplay without muted
<Video description="background" autoPlay loop />

Accessibility

Provide context for screen readers and consider users who can't view videos:

<div>
  <Video 
    description="product demo video"
    width={800}
    height={600}
    controls
    fallback={true}
  />
  <p className="text-sm text-gray-600 mt-2">
    This video demonstrates how to use our product's main features.
  </p>
</div>

Performance

Use appropriate video dimensions and consider lazy loading:

// Background video - lower quality acceptable
<Video description="background" width={1920} height={1080} autoPlay loop muted />

// Feature video - higher quality
<Video description="product demo" width={1280} height={720} controls />

Tips for AI Agents

When using Assets AI in AI-generated code:

Be Descriptive: Include details about content, style, and purpose
Set Controls: Always specify controls for user-facing videos
Handle Autoplay: Only autoplay muted videos, typically for backgrounds
Consider Performance: Use appropriate dimensions for the use case
Add Fallbacks: Enable skeleton loaders for better UX

// AI agent generated example
function AIGeneratedVideoSection() {
  return (
    <div className="space-y-8">
      {/* Hero background video */}
      <Video 
        description="abstract particle animation dark background" 
        width="100%" 
        height={600}
        autoPlay
        loop
        muted
        className="w-full object-cover"
      />
      
      {/* Product demo video */}
      <div className="max-w-4xl mx-auto">
        <Video 
          description="software interface walkthrough tutorial" 
          width={1280} 
          height={720}
          controls
          className="w-full rounded-lg shadow-xl"
          fallback={true}
        />
      </div>
      
      {/* Testimonial videos */}
      <div className="grid grid-cols-3 gap-4">
        <Video 
          description="customer testimonial interview" 
          width={400} 
          height={300}
          controls
          fallback={true}
        />
        <Video 
          description="user success story video" 
          width={400} 
          height={300}
          controls
          fallback={true}
        />
        <Video 
          description="case study presentation" 
          width={400} 
          height={300}
          controls
          fallback={true}
        />
      </div>
    </div>
  );
}

Common Use Cases

Background Videos

<Video 
  description="subtle animated gradient"
  autoPlay
  loop
  muted
/>

Product Demos

<Video 
  description="feature walkthrough"
  controls
/>

Testimonials

<Video 
  description="customer interview"
  controls
/>

Tutorials

<Video 
  description="step-by-step guide"
  controls
/>

On this page