## `hb-card-video` — card-video

**Category:** media | **Tags:** media, video

### What it does

**Bulma** `card` with a 16:9 `image` frame: YouTube embed when `provider` is `youtube`, otherwise an HTML5 `<video>` with MP4 source. Optional title, truncated description, formatted `time` via Day.js (`dateformat`), “read more” `button is-primary`, and social share placeholders when `pageuri` is set. Bootstrap Icons for the clock in the footer.

### Custom element

`hb-card-video`

### Attributes / props (snake_case)

| Property | Type | Notes |
| --- | --- | --- |
| `id` | string (optional) | Element identifier. |
| `style` | string (optional) | Inline style string. |
| `title` | string (optional) | Card title. |
| `description` | string (optional) | Body text (truncated in UI). |
| `videosrc` | string (required) | Video URL or embed source. |
| `provider` | union (optional) | `"youtube"` or `""` for native video. |
| `pageuri` | string (optional) | Page URL for share widgets. |
| `linklabel` | string (optional) | Label for the “read more” style link. |
| `time` | Date (optional) | Publication or event time; pass parseable date string in HTML. |
| `dateformat` | string (optional) | Day.js format string for `time`. |

**Slot:** `card-footer`. No CSS vars in metadata.

### Events (`CustomEvent` names)

None declared in types (`Events` is an empty object).

### Usage notes

- Card layout follows Bulma `card` / `card-image` / `card-content` / `card-footer` patterns.
- YouTube vs file video is selected only via `provider`; ensure `videosrc` matches the mode.
- Shadow DOM contains the player and share UI; slot `card-footer` extends the card.
- No i18n in `docs.ts`.

### Minimal HTML example

```html
<hb-card-video
  videosrc="https://example.com/media/clip.mp4"
  title="Product tour"
  description="A short walkthrough of the dashboard."
  time="2026-03-01T12:00:00.000Z"
  dateformat="MMM D, YYYY"
></hb-card-video>
```