---
title: BgMedia
description: A full screen background media component for videos or images
component: true
links:
---

<ComponentPreview
  name="bg-media-demo"
  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
  description="All variations"
/>

## Installation

<Tabs defaultValue="manual">

<TabsList>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="bg-media" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx
import { BackgroundMedia } from "@/components/ui/bg-media"
```

```tsx
export default function BgMediaDemo() {
  return (
    <div className="w-full ">
      <div className="min-w-[20rem] md:min-w-[40rem] lg:md:min-w-[50rem]">
        <BackgroundMedia
          type="video"
          variant="light"
          src="https://openaicomproductionae4b.blob.core.windows.net/production-twill-01/c74791d0-75d2-48e6-acae-96d13bc97c56/paper-planes.mp4"
        />
      </div>
    </div>
  )
}
```
