Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.

Videojs Themes

Monorepo for Video.js themes πŸ’….


You can pull in the CSS via link tags

<!-- Video.js base CSS -->
<link href="" rel="stylesheet">

<!-- City -->
<link href="" rel="stylesheet">

<!-- Fantasy -->
<link href="" rel="stylesheet">

<!-- Forest -->
<link href="" rel="stylesheet">

<!-- Sea -->
<link href="" 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" ...>

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 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.