# 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>
  <div slot="vue">
```vue
<script setup lang="ts">
import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
import { Video } from "@/components/starwind/video";
</script>

<template>
  <Video :src="navVideo" controls muted class="rounded-lg" />
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add video --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add video --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add video --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<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>
  <div slot="vue">
```vue
<script setup lang="ts">
import navVideo from "@/assets/videos/starwind-pro_nav-3-responsive.mp4";
import { Video } from "@/components/starwind/video";
</script>

<template>
  <Video :src="navVideo" controls muted class="rounded-lg" />
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Source Handling

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`.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import { Video } from "@/components/starwind/video";
---

<Video
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="YouTube video"
  class="rounded-lg"
/>
```
  </div>
  <div slot="react">
```tsx
import { Video } from "@/components/starwind/video";

export function Example() {
  return (
    <>
      <Video
        src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        title="YouTube video"
        className="rounded-lg"
      />
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Video } from "@/components/starwind/video";
</script>

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

## YouTube Shorts

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

<FrameworkCodeSwitcher>
  <div slot="astro">
```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"
/>
```
  </div>
  <div slot="react">
```tsx
import { Video } from "@/components/starwind/video";

export function Example() {
  return (
    <>
      <Video
        src="https://www.youtube.com/shorts/WVfUcdYugio"
        title="YouTube Shorts"
        className="aspect-square max-w-xs rounded-lg"
      />
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { Video } from "@/components/starwind/video";
</script>

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

## 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