Hero Video Dialog
點擊播放的 hero 影片彈窗，帶縮圖、播放鍵脈衝與多種進出動畫。
點擊縮圖即以彈窗播放影片，支援多種進出動畫、背景模糊、Escape 與點擊背景關閉，並鎖住背景捲動。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<HeroVideoDialog />
安裝
npx shadcn@latest add https://webberui.com/r/hero-video-dialog.json或在 components.json 設定 registries 後，改用 @webberui/hero-video-dialog 安裝。
安裝依賴後，從 registry JSON（/r/hero-video-dialog.json 的 files[0].content）複製 hero-video-dialog.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
videoSrc 預設以 iframe 內嵌，適用 YouTube、Vimeo 等嵌入網址；thumbnailSrc 由你自行提供。
import { HeroVideoDialog } from "@/components/ui/hero-video-dialog";
<HeroVideoDialog
videoSrc="https://www.youtube.com/embed/VIDEO_ID"
thumbnailSrc="/thumbnail.jpg"
thumbnailAlt="Product overview"
animationStyle="from-center"
/>;若要放入自家播放器或完全自足的內容，改用 children 取代預設 iframe：
<HeroVideoDialog thumbnailSrc="/thumbnail.jpg">
<video src="/demo.mp4" controls autoPlay className="h-full w-full" />
</HeroVideoDialog>;動畫風格
animationStyle 可選：from-center、from-bottom、from-top、from-left、from-right、fade、top-in-bottom-out、left-in-right-out。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
videoSrc | string | — | 影片網址，預設以 iframe 內嵌 |
thumbnailSrc | string | — | 縮圖網址；未提供時顯示內建漸層佔位 |
thumbnailAlt | string | "Video thumbnail" | 縮圖替代文字，同時作為彈窗標籤 |
animationStyle | HeroVideoAnimationStyle | "from-center" | 彈窗進出動畫風格 |
playButtonLabel | string | "Play video" | 播放鍵的無障礙標籤 |
children | ReactNode | — | 自訂彈窗內容，提供時取代預設 iframe |
className | string | — | 透傳到縮圖外框的樣式 |
可及性
- 縮圖為
button，帶aria-label與可見的鍵盤 focus ring - 彈窗為
role="dialog"且aria-modal，支援 Escape 與點擊背景關閉 - 開啟時鎖住背景捲動，關閉後還原
- 使用者開啟「減少動態效果」時，僅以淡入淡出呈現，播放鍵脈衝停用