Video Player

Native <video> element. Built-in controls, captions support, zero dependencies.

Basic Video

Video: Product walkthrough

<figure>
  <video controls width="100%">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support video.
  </video>
  <figcaption>Video description</figcaption>
</figure>

With Poster and Captions

<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <!-- Captions for accessibility -->
  <track kind="captions"
         src="captions.vtt"
         srclang="en"
         label="English"
         default>
</video>

Attributes Reference

Attribute	Effect
`controls`	Show browser UI (required)
`poster`	Image shown before playback
`muted autoplay`	Autoplay only when muted
`loop`	Repeat playback
`playsinline`	Play inline on iOS (not fullscreen)

Accessibility

Always include controls — hidden video controls fail WCAG
Include <track kind="captions"> for all speech content
Use poster — shows a meaningful image before playback
Never autoplay video with sound — violates WCAG SC 1.4.2

Features

Semantic Structure - Built with native HTML5 elements for maximum reliability.
Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
Fully Responsive - Scales perfectly from mobile to desktop screens.
No JS Dependency - Core functionality relies on pure CSS for maximum performance.
Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Video Player component is designed for versatile implementation across modern web applications. Ideal scenarios include:

Dashboards & Admin Panels - Structured data presentation and interface control.
Content Management Systems - Organizing complex information hierarchies and media.
E-Commerce Platforms - Enhancing product discovery and user workflows.
Marketing Sites - Highlighting key product offerings cleanly and effectively.
SaaS Applications - Delivering native-feeling, responsive app experiences.