# Video

Embed a video with built-in playback controls and lazy loading support.

---

## Default

```tsx
import { Video } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Video
      height={582}
      lazy={false}
      src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4"
      width={600}
    />
  );
}
```

## No Loop

```tsx
import { Video } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Video
      height={582}
      lazy={false}
      loop={false}
      src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4"
      width={600}
    />
  );
}
```

## No Controls

```tsx
import { Video } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <Video
      controls={false}
      height={582}
      lazy={false}
      src="https://k2mkucxia43oc7fa.public.blob.vercel-storage.com/front/geist-font-page/videos/dark/geist.mp4"
      width={600}
    />
  );
}
```