e8-video
Updated on Aug 14, 2025 4 minutes to readProvide a video player with custom controls, responsive sizing, autoplay by viewport visibility, and optional mobile-friendly download action.
Overview
e8-video renders a video from a file or direct URL using the native HTML5 <video> element. It includes a custom minimal control panel with play/pause, seek backward/forward, mute/unmute, progress bar, fullscreen, loading state, error state, and optional download/save action.
<e8-video
source=""
source-type="file"
width="320px"
height="200px"
radius="rounded"
:responsive="false"
:loop="true"
:show-download-button="true"
:seek-seconds="15"
:show-progress-bar="true"
></e8-video>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| autoplay | Automatically plays the video when it is fully visible inside the configured autoplay boundary, and pauses it when it leaves that boundary. Only one e8-video instance can play at the same time. | boolean | false |
| autoplay-boundary | Boundary used to detect full visibility for autoplay. Accepts 'window', a CSS selector, an HTMLElement, or a bounds object with { top, left, bottom, right }. | string | HTMLElement | object | 'window' |
| height | Desired CSS height (e.g. '320px', '100%'). When both width and height are set and responsive is false, the video is centered inside the fixed container while preserving its aspect ratio. | string | — |
| loop | Replays the video automatically after it ends. | boolean | false |
| radius | Corner rounding. | E8VideoRadiusVariants | 'none' |
| responsive | Makes the video scale with its parent. When true, the video uses full available width and automatic height. | boolean | true |
| seek-seconds | Number of seconds used by the backward and forward seek buttons. | number | 15 |
| show-download-button | Shows a button for downloading the video in the browser or saving it to the gallery in the mobile app. Hidden while the video is loading. | boolean | false |
| show-progress-bar | Shows the progress/timeline bar with current time and duration. | boolean | true |
| source | The video source. Meaning depends on source-type. | string | — |
| source-type | Controls how source is interpreted. Supported values are file and url. | E8VideoSourceTypes | 'file' |
| video-class | Extra classes to apply to the <video> element. | E8CssClassType | — |
| video-style | Extra styles to apply to the <video> element. | E8CssStyleType | — |
| width | Desired CSS width (e.g. '320px', '100%'). | string | — |