mirror of
https://github.com/videojs/video.js.git
synced 2025-01-25 11:13:52 +02:00
4ac762cf48
- removed old less style. no going back now. - switched back to video-js.scss naming and added a base-style injection class - cleaned up and simplified big play btn - Flexbox straight flexin. - move to using variables for text and icon font families - use table layout for IE 8 and 9 - moved to using extend for icons - Switched to SASS, added a new default theme, updated the html - added horizontal classes - added connect-watch grunt task - show all the things in the control bar so everything is available by default (and hidden via css - reignore dist for now - removing trailing comma to get the tests passing - Switched to using libsass and removed incompatible "black magic" - updating to es6 syntax - removed old separator, added grunt task for dev, and updated example - singular time-control and live-control. remove playing class on pause - updated separator control styles - Show full control bar when a player goes to fullscreen. Also added a grunt task specifically for skin development (only watches sass file changes and runs sass) - allow poster image to toggle playback - This allows the poster image to toggle play / pause on audio-only sources - fixed issue with scrollbars in Chrome on Linux - make the control bar not-quite-black - added back some focus highlights until we decide on another path
30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
Skins
|
|
=====
|
|
|
|
The base Video.js skin is made using HTML and CSS (although we use the [Sass preprocessor](http://sass-lang.com)), and by default these styles are added to the dom for you! That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding
|
|
the styles you'd like to change.
|
|
|
|
If you don't want Video.js to inject the base styles for you, you can disable it by setting `window.VIDEOJS_NO_BASE_THEME = false` before Video.js is loaded. Keep in mind that without these base styles
|
|
enabled, you'll need to manually include them.
|
|
|
|
## Icons
|
|
|
|
You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory.
|
|
|
|
## Customization
|
|
|
|
When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. You should include a new class matching the
|
|
name of your theme, then just start overriding!
|
|
|
|
```css
|
|
.vjs-skin-hotdog-stand { color: #FF0000; }
|
|
.vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; }
|
|
.vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; }
|
|
```
|
|
|
|
This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), but you can skin any other aspect.
|
|
Our suggestion is to use a browser such as Firefox and Chrome, and use the developer tools to inspect the different elements and see what you'd like to change and what classes
|
|
to target when you do so.
|
|
|
|
More custom skins will be available for download soon. If you have one you like you can share it by forking [this example on CodePen.io](http://codepen.io/heff/pen/EarCt), and adding a link on the [Skins wiki page](https://github.com/videojs/video.js/wiki/Skins).
|