# VideoNode

Video player node dùng `react-player`. Hỗ trợ nhiều nguồn video: YouTube, Vimeo, file MP4, v.v.

## Resolved name

`Video`

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `src` | `string` | URL video (YouTube, Vimeo, MP4, v.v.) |
| `light` | `string \| boolean` | URL thumbnail hiển thị trước khi play |

### `sx` props

```ts
sx?: {
  // size
  width?: number | string
  aspectRatio?: string  // ví dụ: '16 / 9', '1 / 1'

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { VideoNode } from '@janbox/storefront-builder';

// YouTube video
<VideoNode
  src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  sx={{ width: '100%', aspectRatio: '16 / 9' }}
/>

// MP4 video với thumbnail
<VideoNode
  src="https://example.com/video.mp4"
  light="https://example.com/thumbnail.jpg"
  sx={{ width: '100%', aspectRatio: '16 / 9' }}
/>

// Responsive width, aspect ratio cố định
<VideoNode
  src="https://vimeo.com/123456789"
  sx={{
    width: '100%',
    aspectRatio: '16 / 9',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    md: { width: '80%' },
  }}
/>
```

## Rules

- **Canvas**: no — không chứa node con.
- Dùng `react-player` bên dưới — hỗ trợ YouTube, Vimeo, Twitch, SoundCloud, Streamable, Wistia, Facebook, file video, v.v.