dab7914eab
* Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript (#265) * Trying a new github workflow to install javascript packages * Bump tailwindcss from 1.9.2 to 1.9.4 in /build/javascript (#266) Bumps [tailwindcss](https://github.com/tailwindlabs/tailwindcss) from 1.9.2 to 1.9.4. - [Release notes](https://github.com/tailwindlabs/tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/tailwindcss/blob/master/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/tailwindcss/compare/v1.9.2...v1.9.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Commit updated Javascript packages * Bump preact from 10.5.4 to 10.5.5 in /build/javascript Bumps [preact](https://github.com/preactjs/preact) from 10.5.4 to 10.5.5. - [Release notes](https://github.com/preactjs/preact/releases) - [Commits](https://github.com/preactjs/preact/compare/10.5.4...10.5.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Owncast <owncast@owncast.online> * Bump @justinribeiro/lite-youtube in /build/javascript Bumps [@justinribeiro/lite-youtube](https://github.com/justinribeiro/lite-youtube) from 0.9.0 to 0.9.1. - [Release notes](https://github.com/justinribeiro/lite-youtube/releases) - [Commits](https://github.com/justinribeiro/lite-youtube/commits) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Gabe Kangas <gabek@real-ity.com>
56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# Videojs Themes
|
|
|
|
Monorepo for Video.js themes :nail_care:.
|
|
|
|
## Usage
|
|
|
|
You can pull in the CSS via link tags
|
|
|
|
```html
|
|
<!-- 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:
|
|
|
|
```sh
|
|
npm install --save video.js @videojs/themes
|
|
```
|
|
|
|
Then just import the files as you would other CSS.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
|
|
```html
|
|
<video id="my-player" class="video-js vjs-theme-city" ...>
|
|
```
|