hb-card-video — card-video

Category: media | Tags: media, video

What it does

Bootstrap card with a 16:9 media area: 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” link label, and social share placeholders when pageuri is set.

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 Bootstrap card 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

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