https://github.com/videojs/themes
Videojs themes 💅
https://github.com/videojs/themes
Last synced: 8 months ago
JSON representation
Videojs themes 💅
- Host: GitHub
- URL: https://github.com/videojs/themes
- Owner: videojs
- Created: 2019-08-18T07:31:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-04T19:02:46.000Z (about 3 years ago)
- Last Synced: 2025-06-08T07:44:09.181Z (about 1 year ago)
- Language: CSS
- Size: 516 KB
- Stars: 149
- Watchers: 18
- Forks: 56
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Videojs Themes
Monorepo for Video.js themes :nail_care:.
## Usage
You can pull in the CSS via link tags
```html
```
Or, if you're using CSS modules in JavaScript, you can install the NPM module:
```sh
npm install --save video.js @videojs/themes
```
Then just import the files as you would other CSS.
```javascript
import 'video.js/dist/video-js.css';
// City
import '@videojs/themes/dist/city/index.css';
// Fantasy
import '@videojs/themes/dist/fantasy/index.css';
// Forest
import '@videojs/themes/dist/forest/index.css';
// Sea
import '@videojs/themes/dist/sea/index.css';
```
Once you've got the theme pulled in, you can then add the relevant class to your player! The class names are structured as `vjs-theme-${THEME_NAME}`, so `vjs-theme-city` for the city theme or `vjs-theme-sea` for the sea theme.
```html
```
# Building these locally
If you want to use the CSS in this repo directly instead of using one of the CDNs or the NPM-hosted version, or just do some development, you'll need to clone the repo and `build` them.
```
$ git clone https://github.com/videojs/themes videojs-themes
$ cd videojs-themes
$ npm install
$ npm run build
```
This will create a `dist` folder with the post-processed CSS in them, which you can upload right to your site. If you want to develop against these locally, you can run `npm run dev` to get a local server running a demo of all the themes on it.