HeroVideoDialog
hero-video-dialogOpens a video from a thumbnail and play button in a modal player.
Usage
Basic usage
Pass the thumbnail + video address embed, click on the thumbnail to pop up the centered video layer (Esc / point mask off).
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
thumbnailAlt="Product Preview"
videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ"
/>Custom size
Use className to control the width of the thumbnail container, and the pop-up video is fixed at 16:9.
<HeroVideoDialog
thumbnailSrc="/cover.jpg"
thumbnailAlt="Cover"
videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ"
className="w-full max-w-md"
/>When to use
Use HeroVideoDialog on a landing or marketing page to present a video thumbnail and play button that opens an embedded YouTube or Bilibili video in a Portal modal. It closes on Escape or overlay click and locks background scrolling. Use Dialog for arbitrary modal content or the Video component for native playback controls such as progress, speed, and picture-in-picture.
Import
import { HeroVideoDialog } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| thumbnailSrc* | string | — | Thumbnail URL. |
| thumbnailAlt | string | "" | Thumbnail alternative text; empty by default, so provide meaningful text unless the thumbnail is decorative. |
| videoSrc* | string | — | iframe source, such as a YouTube or Bilibili embed URL. |
| className | string | — | Additional class name, including thumbnail sizing. |
The built-in Chinese labels are "\u64ad\u653e\u89c6\u9891" (“Play video”) on the play control, "\u5173\u95ed" (“Close”) on the dismiss control, and "\u89c6\u9891" (“Video”) as the iframe title.
Example
<HeroVideoDialog thumbnailSrc="/cover.jpg" thumbnailAlt="Preview" videoSrc="https://www.youtube.com/embed/dQw4w9WgXcQ" className="w-80" />Usage guidelines
videoSrcmust be an iframe embed URL such as.../embed/..., not a normal watch-page URL, or the iframe can fail to load.- Size the thumbnail through
className, for examplew-80; the component sets no fixed width.