Video

Video renders a video thumbnail that opens an embedded video in an accessible modal dialog.

MDX@gaudi/design-system/mdx/VideoView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Video from '@gaudi/design-system/mdx/Video';

Usage

<Video  animationStyle='from-center'  videoSrc='/static/media/video-player.html'  thumbnailSrc='/static/images/og-card.jpg'  thumbnailAlt='Video preview'  title='Video walkthrough'/>

Examples

Playground

Storybook

API

10 props

Accessibility

Video uses a native button for the thumbnail trigger, an aria-modal dialog, Escape-to-close behavior, labelled close controls, and returns focus to the trigger when closed.

DialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examples AsideSupporting article content outside the main reading flow.CalloutHighlight an article note, tip, warning or error while preserving readable prose.ChartChart is the MDX adapter for the Charts collection: authors write <Chart type=…> (or a chart by name) in an article and get the same framed, accessible chart an application renders from @gaudi/design-system/charts.CitationCitation documents the blog citation authoring flow and the Gaudi runtime components that hydrate generated citation links.CitationTrackerKeep bibliography back-links associated with the last visited citation.