videojs / themes

Videojs themes 💅

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

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.

themes's Issues

Invalid CSS for big play button

The themes for the big play buttons contain invalid CSS syntax like this:

background: svg-load('icons/play-btn.svg', fill=#6fb04e);

I guess this is meant to be transformed by this post-processor:
https://github.com/TrySound/postcss-inline-svg
but it isn't.

Custom Skins

If we are using video js on Wordpress how can we change the skins to make it look better than the default one.

Positon of liveui button (in all themes)

npm Reports 1 high severity vulnerability

                   === npm audit security report ===                        
                                                                            
                                                                            
                             Manual Review                                  
         Some vulnerabilities require your attention to resolve             
                                                                            
      Visit https://go.npm.me/audit-guide for additional guidance           

High Inefficient Regular Expression Complexity in nth-check

Package nth-check

Patched in >=2.0.1

Dependency of @videojs/themes

Path @videojs/themes > postcss-inline-svg > css-select >
nth-check

More info GHSA-rp65-9cf3-cjxr

found 1 high severity vulnerability in 65 scanned packages
1 vulnerability requires manual review. See the full report for details.

NPM reports 2 moderate vulnerabilities

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Inefficient Regular Expression Complexity in nth-check       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ nth-check                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.0.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @videojs/themes                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @videojs/themes > postcss-inline-svg > css-select >          │
│               │ nth-check                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-rp65-9cf3-cjxr            │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service in postcss              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ postcss                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=8.2.13                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @videojs/themes                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @videojs/themes > postcss-inline-svg > postcss               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://github.com/advisories/GHSA-566m-qj78-rww5            │
└───────────────┴──────────────────────────────────────────────────────────────┘

I can't fix them on my own (I can't force a newer dependency version). It would be nice for them to be fixed! :)

forest theme does not display play button; sea does not display volume control

The play button issue with forest does not occur on your website:

But it occurs for me regardless of browser (Chrome, Firefox, or Brave):

I am using 7.18.0 in case that is relevant here.