# XWUIVideoThumbnail

A single clickable video thumbnail tile: a lazy-loaded poster image with a bottom-right overlay that is a red LIVE badge when `data.isLive`, a SHORTS badge when `data.isShorts`, or a formatted duration (h:mm:ss / m:ss) when `data.durationSec` is set. Pass `data.src` (required) plus `data.alt`, one of the badge/duration fields, and an `onClick`; set the frame shape with `conf_comp.aspectRatio` (default '16 / 9'). This is the base tile composed by XWUIVideoListResult and XWUIPlaylistRow.

## Basic Usage

A 16:9 thumbnail with a 6:12 duration overlay derived from a 372-second runtime.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single video thumbnail tile showing a 6:12 duration overlay from a 372-second video.
```

## Live Thumbnail

A thumbnail whose isLive flag swaps the duration overlay for a red LIVE badge.

```example
file: examples/LiveThumbnail.ts
html: examples/LiveThumbnail.html
title: Live Thumbnail
description: A live thumbnail tile showing the red LIVE badge instead of a duration overlay.
```

## Shorts Thumbnail

A vertical Shorts tile with the SHORTS badge and a 9:16 aspect ratio.

```example
file: examples/ShortsThumbnail.ts
html: examples/ShortsThumbnail.html
title: Shorts Thumbnail
description: A portrait Shorts thumbnail with the SHORTS badge and a 9:16 aspect ratio set through the configuration.
```

```api
```
