https://github.com/webfactory/video-utils
Web Component with progressive enhancements for the HTML <video> element
https://github.com/webfactory/video-utils
web-component
Last synced: 12 months ago
JSON representation
Web Component with progressive enhancements for the HTML <video> element
- Host: GitHub
- URL: https://github.com/webfactory/video-utils
- Owner: webfactory
- Created: 2025-01-30T13:47:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-12T09:10:38.000Z (about 1 year ago)
- Last Synced: 2025-07-01T22:36:06.572Z (12 months ago)
- Topics: web-component
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <video-utils>
Web Component with progressive enhancements for the HTML <video> element
## Installation
```
npm install @webfactoryde/video-utils
```
## Usage
The `` Web Component is meant to be a lightweight wrapper and progressive accessibility enhancement for `` elements that autoplay muted background video.
It supports manual controls (pause and play buttons) so the video can meet [WCAG 2.1 SC 2.2.2: Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide).
It also implements a media query for `prefers-reduced-motion: reduced`, an OS level user preference option that signals that automatic movement should be limited, and prevents autoplay if the media query (and user preference) matches.
Background infos:
- https://github.com/w3c/wcag/issues/3766
- https://github.com/w3c/wcag/issues/3478
- https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html
### Steps to implement:
1. The JS file "video-utils.js" must be loaded. Depending on browser support requirements, transpilation for older browsers is recommended.
2. Wrap your `` with ``.
3. Add both a pause and a play `` with your desired markup (e.g. nested icon, attributes, translated text, etc.). The buttons need to be made identifiable with `data-video-utils-play` and `data-video-utils-pause` respectively. The Web Component leaves positioning and aesthetics of the buttons to the outside context.
### Example
```
Play
Pause
```