Video

The built-in video tag — a video player with Picture-in-Picture, a scrubbable timeline, captions, keyboard shortcuts, and fullscreen. A Community Component wrapping @gfazioli/mantine-video.

{% video %} is a Mantine-native video player built on the native <video> element — a play/pause transport, a scrubbable timeline, a mute toggle and volume slider, captions, Picture-in-Picture, keyboard shortcuts, and a fullscreen control. Point it at a file with src, set a poster thumbnail, and frame it with aspectRatio.

A Community Component — wraps Video by gfazioli, MIT licensed, npm @gfazioli/mantine-video.

Good to know. The player is built in the browser — the page ships an empty frame and the player fills it on load — so a reader with JavaScript turned off sees nothing where the video would be. When a clip has to reach every reader, link the file as well as embedding it.

Use it as {% video %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'video', …).

Demonstrations

Basic player

Set src to the video URL and poster to a thumbnail shown before playback.

Source: Markdown

Source: Python

Aspect ratio

aspectRatio sizes the frame — pass a number such as 1.777 for 16:9 or 1.333 for 4:3. The frame holds that ratio from the moment it appears, so the surrounding text doesn’t shift as the clip’s own dimensions become known.

Source: Markdown

Source: Python

Variants and auto-hiding controls

variant (overlay, minimal, floating, bordered) sets the layout; autoHideControls takes a number of milliseconds — the control bar fades after that much inactivity during playback so it stays out of the way (use 0 to disable auto-hide).

Source: Markdown

Source: Python

With other components

Frame a clip in a Card with a heading and description.

Product tour

A two-minute walkthrough of the editor.

Source: Markdown

Attributes

Omit any attribute to take its default. Bare flags (e.g. asBackground) become =True.

Attribute	Valid values	Description
`src`	A video file URL (string)	The video source to play.
`poster`	An image URL (string)	Thumbnail shown before playback.
`aspectRatio`	A positive number (e.g. `1.777`)	Frame aspect ratio (width ÷ height).
`variant`	`overlay` (default) / `minimal` / `floating` / `bordered`	The player layout style.
`radius`	A Mantine radius token or any CSS length (default `md`)	Corner rounding.
`controls`	`true` / `false` (default `true`)	Show or hide the control bar.
`shortcuts`	`true` / `false` (default `true`)	Enable keyboard controls (Space, arrows, M, F, P).
`autoHideControls`	A number of milliseconds (default `3000`; `0` disables)	Inactivity delay before the control bar fades during playback.
`asBackground`	`true` / `false` (default `false`)	Render as a section background: the player fills its nearest positioned parent and crops to cover, and `controls`, `shortcuts` and `autoHideControls` switch off unless you set them yourself. Give that parent a size.
`fallbackSrc`	A video file URL (string)	Loaded if `src` fails at runtime (404, decode error). Tried once per page load.
`attr={…}`	An object of HTML attributes	Forwards raw HTML attributes onto the rendered element (see below).

CSS Selector

The island wrapper carries a stable hook you can target from your own CSS:

[data-aardvark-video] {
  /* your overrides */
}

The player’s inner chrome is styled by the upstream @gfazioli/mantine-video stylesheet (bundled automatically via a CSS @import), so its own Mantine-style class names apply too.

Injecting Attributes

attr={…} forwards raw HTML attributes straight onto the rendered element — anything Mantine doesn’t model as a prop (ARIA, data-*, analytics hooks). It rides a separate channel from the component props, so it never collides with them.

A common use is tagging the player with a data-onboarding-tour-id so the Onboarding tour can spotlight it:

Source: Markdown

Source: Python