colors

A collection of simple color schemes based on the base Video.js styles.

Getting Started

Using it via a CDN

Simply include the appropriate CSS file! Thanks to RawGit, you can simply include the CSS file directly from the Git repo based on the current version tag. 

<link href="//cdn.rawgit.com/mmcc/videojs-skin-colors/v1.0.3/dist/videojs-skin-colors.css" rel="stylesheet" type="text/css">

Download the stylesheet

If you prefer to host things yourself, you can simply download the stylesheet.

Download

Your own build pipeline

If you're already using Sass, you can simply import the skin's SCSS. First, install the skin via NPM. 

$ npm install --save-dev videojs-skin-colors

You can set any variables you'd like before importing (namely the $custom-colors map).

$custom-colors: (
  magenta: (
    background: #000000,
    color: #FF00FF
  )
);
@import "/path/to/node_modules/vjs-skin-colors/src/videojs-skin-colors";

Once you've got your CSS...

Simply create a video element as you normally would when using Video.js, but add the vjs-skin-colors class.

<video id="vid" class="video-js vjs-skin-colors-blue" controls width="640" height="264" data-setup='{}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
<track kind="captions" src="../build/demo-files/demo.captions.vtt" srclang="en" label="English"></track>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser
that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>