# Video

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
import { Video } from "@/components/starwind/video";
---

<Video src={navVideo} controls muted class="rounded-lg" />
```
  </div>
  <div slot="react">
```tsx
import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
    import { Video } from "@/components/starwind/video";

export function Example() {
  return (
    <>
      <Video src={navVideo} controls muted className="rounded-lg" />
    </>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add video
```

## Usage

### General Notes

The `Video` component automatically detects the video type from the source URL and renders either a native HTML5 `<video>` element or a YouTube `<iframe>` embed. It supports:

- **Native videos**: Local files, imported assets, or direct video URLs
- **YouTube videos**: Standard YouTube URLs, short URLs, and embed URLs
- **YouTube Shorts**: Automatically detected and rendered with appropriate settings

### YouTube Video

Pass a YouTube URL directly to the `src` prop. The component handles URL parsing and creates a privacy-enhanced embed using `youtube-nocookie.com`.

```astro
---
import { Video } from "@/components/starwind/video";
---

<Video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="YouTube video"
  class="rounded-lg"
/>
```

### YouTube Shorts

YouTube Shorts are automatically detected and rendered appropriately. Use custom aspect ratio classes to display them correctly.

```astro
---
import { Video } from "@/components/starwind/video";
---

<Video
  src="https://www.youtube.com/shorts/WVfUcdYugio"
  title="YouTube Shorts"
  class="aspect-square max-w-xs rounded-lg"
/>
```

## Framework Availability
Video is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Video
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `autoplay` | `boolean` | No | `false` | Wrapper prop | Starts media playback automatically when supported by the browser. |
| `controls` | `boolean` | No | `true` | Wrapper prop | Shows the browser's native media controls. |
| `loop` | `boolean` | No | `false` | Wrapper prop | Restarts media playback after it reaches the end. |
| `muted` | `boolean` | No | `false` | Wrapper prop | Starts or renders media with audio muted. |
| `poster` | `string` | No | - | Wrapper prop | Provides the image displayed before video playback starts. |
| `src` | `string` | Yes | - | Wrapper prop | Provides the media source URL. |
| `title` | `string` | No | `"Video"` | Wrapper prop | Provides an accessible title for embedded media. |
- Inherits iframe attributes.
- Inherits video attributes.

## Changelog

### v1.1.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v1.0.2 

- Refactor tailwind variants functions into separate `variants.ts` file

### v1.0.0

- Initial release with starwind v1.13.0