# VideoPlayer

> Optimized video player with lazy loading for product demos

Canonical URL: https://fa7e86e3d553:3005/islands/content/video-player

> Optimized video player with lazy loading. Use for product demos, brand stories, testimonials.

## Preview

**Category**: Content

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| src | string | yes | - | Video URL (mp4, webm, ogg, YouTube, Vimeo) |
| media | object | no | - | Adaptive video object with `poster` and ordered `sources[]`; preferred for HLS/DASH with file fallbacks |
| poster | string | no | - | Poster image URL shown before play |
| autoplay | boolean | no | false | Autoplay video on load (muted required for autoplay to work) |
| muted | boolean | no | - | Start muted |
| loop | boolean | no | false | Loop video continuously |
| aspectRatio | string | no | 16/9 | Aspect ratio (e.g. "16/9", "4/3", "1/1") |

For direct adaptive playback, use:

```html
<lx-island name="VideoPlayer">
  <script type="application/json">
    {
      "media": {
        "poster": "https://cdn.example.com/poster.jpg",
        "sources": [
          {
            "url": "https://cdn.example.com/demo.m3u8",
            "type": "application/x-mpegURL"
          },
          {
            "url": "https://cdn.example.com/demo.mp4",
            "type": "video/mp4"
          }
        ]
      },
      "autoplay": true,
      "muted": true,
      "loop": true,
      "aspectRatio": "16/9"
    }
  </script>
</lx-island>
```

For multiple images or videos in one surface, use
[MediaCarousel](/islands/content/media-carousel) instead.

## Customisation Examples

### 1. Horizontal Carousel (Testimonials)

Wrap multiple VideoPlayer islands in a flex container with `overflow-x-auto` and `snap-x`:

```html
<lx-island name="VideoPlayer">
  <script type="application/json">
{}
  </script>
</lx-island>
```

### 2. Hero Split — Image Left, Video Right (Full Bleed)

Use CSS Grid to create a 50/50 split hero with branding on the left and a full-bleed video on the right:

```html
<lx-island name="VideoPlayer">
  <script type="application/json">
{}
  </script>
</lx-island>
```

### 3. Square Grid (UGC / Social-Style 1:1)

```html
<lx-island name="VideoPlayer">
  <script type="application/json">
{}
  </script>
</lx-island>
```

### 4. YouTube / Vimeo Embed

```html
<lx-island name="VideoPlayer">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Tips

- Lazy-loaded by default — video loads only when in viewport
- autoplay requires muted:true (browser policy)
- poster image improves perceived performance (shows instantly)
- Use 16:9 for standard video, 1:1 for social-first content, 9:16 for vertical mobile video
- Compress videos heavily — aim for under 5MB (use Handbrake or similar)
- Host on CDN (Shopify CDN, Cloudflare R2, etc.) for fast delivery
- YouTube/Vimeo URLs auto-detected and rendered as iframes

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `root` | Outermost container |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [BeforeAfter](/islands/content/before-after) — For static comparison, use BeforeAfter slider instead
- [ImageZoom](/islands/content/image-zoom) — For high-res product shots