Video

A Mantine-native video player for React built on the native HTML <video> element. Three layers in one package: a polished default <Video />, a composable compound API for the control bar, and a fully headless useVideo hook for 100% custom UIs.

Installation

yarn add @gfazioli/mantine-video

Overview

Mantine Video wraps the native HTML <video> element with three layers of abstraction, layered from “drop-in” to “fully custom”:

• <Video /> — polymorphic factory with four built-in variants (overlay, minimal, floating, bordered), full Mantine theme integration, and a sensible default control bar
• Compound API — nine sub-components (Video.Controls, Video.PlayButton, Video.SkipButton, Video.Timeline, Video.TimeDisplay, Video.MuteButton, Video.CaptionsButton, Video.PiPButton, Video.FullscreenButton) you can reorder and re-style
• useVideo headless hook — 16 state values plus 16 actions to drive a fully custom UI on top of a plain <video> element

Other highlights:

• asBackground mode — turns the same player into a hero / section background in one prop
• Live timeline scrubbing — drag the timeline and see the frame update in real time, YouTube-style
• Picture-in-Picture with onEnterPictureInPicture / onLeavePictureInPicture lifecycle callbacks
• Fullscreen, captions (via native <track>), and keyboard shortcuts (Space/K, J/L, ←/→, ↑/↓, M, F, P)
• Full Mantine Styles API (classNames, styles, vars, unstyled) on every part — theme-aware out of the box

Targets Mantine 9 and React 19. TypeScript-first.