# VIDEO_EXT_RE

**Kind:** Constant

**Source:** [`atloria-monorepo/apps/web/src/components/Viewer/remarkDirectiveComponents.ts`](https://github.com/sherkety/atloria/blob/main/atloria-monorepo/apps/web/src/components/Viewer/remarkDirectiveComponents.ts#L22)

remarkDirectiveComponents — the reader-side directive pipeline (B3/B4).

Generalizes the old inline `remarkAdmonitions` plugin: every directive name
gets an explicit branch that tags the node with `data.hProperties` markers
(the same mechanism admonitions/`:::video` already used), and `CustomDiv` in
MarkdownRenderer dispatches on the class names. Runs AFTER `remark-directive`
and never emits raw HTML, so it is safe under rehypeRaw.

Handled directives:
- `:::video`          → chaptered player / safe embed (moved verbatim from MarkdownRenderer)
- `:::tabs` + `::tab-panel{label}`   → `.tabs-block` with `.tab-panel-block` groups (interactive)
- `:::steps`          → `.steps-block` (pure CSS step counters)
- `:::cards` + `::card{title icon href}` → `.cards-block` / `.card-block` grid (pure CSS)
- `:::code-group`     → `.code-group-block` with labels derived from fence meta (interactive)
- `::include{snippet}`→ `.snippet-include-block` graceful placeholder (content is normally
                         expanded server-side before it ever reaches the renderer)
- anything else       → the classic `admonition admonition-{name}` div