Skip to content
Videojs themes πŸ’…
CSS HTML JavaScript
Branch: master
Clone or download
Latest commit c3ba14a Sep 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
city moving to index naming to avoid the double theme name Sep 21, 2019
fantasy moving to index naming to avoid the double theme name Sep 21, 2019
forest moving to index naming to avoid the double theme name Sep 21, 2019
sea moving to index naming to avoid the double theme name Sep 21, 2019
.gitignore initial commit Aug 18, 2019
.npmignore share the same dist directory between ZEIT and npm Sep 20, 2019
README.md time to go 1.0 Sep 25, 2019
index.html moving to index naming to avoid the double theme name Sep 21, 2019
now.json
package-lock.json
package.json time to go 1.0 Sep 25, 2019
postcss.config.js initial commit Aug 18, 2019

README.md

Videojs Themes

Monorepo for Video.js themes πŸ’….

Usage

You can pull in the CSS via link tags

<!-- Video.js base CSS -->
<link href="https://unpkg.com/video.js@7/dist/video-js.min.css" rel="stylesheet">

<!-- City -->
<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet">

<!-- Fantasy -->
<link href="https://unpkg.com/@videojs/themes@1/dist/fantasy/index.css" rel="stylesheet">

<!-- Forest -->
<link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">

<!-- Sea -->
<link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet">

Or, if you're using CSS modules in JavaScript, you can install the NPM module:

npm install --save video.js @videojs/themes

Then just import the files as you would other CSS.

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.

<video id="my-player" class="video-js vjs-theme-city" ...>
You can’t perform that action at this time.