├── .gitignore ├── .npmignore ├── README.md ├── city └── index.css ├── fantasy ├── icons │ └── nyan-cat.svg └── index.css ├── forest ├── icons │ ├── play-btn.svg │ └── play-small.svg └── index.css ├── index.html ├── now.json ├── package-lock.json ├── package.json ├── postcss.config.js └── sea └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | dist 3 | node_modules 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .cache 3 | node_modules 4 | index.html 5 | 6 | !dist 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Videojs Themes 2 | 3 | Monorepo for Video.js themes :nail_care:. 4 | 5 | ## Usage 6 | 7 | You can pull in the CSS via link tags 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ``` 25 | 26 | Or, if you're using CSS modules in JavaScript, you can install the NPM module: 27 | 28 | ```sh 29 | npm install --save video.js @videojs/themes 30 | ``` 31 | 32 | Then just import the files as you would other CSS. 33 | 34 | ```javascript 35 | import 'video.js/dist/video-js.css'; 36 | 37 | // City 38 | import '@videojs/themes/dist/city/index.css'; 39 | 40 | // Fantasy 41 | import '@videojs/themes/dist/fantasy/index.css'; 42 | 43 | // Forest 44 | import '@videojs/themes/dist/forest/index.css'; 45 | 46 | // Sea 47 | import '@videojs/themes/dist/sea/index.css'; 48 | ``` 49 | 50 | 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. 51 | 52 | 53 | ```html 54 |