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
1.7 KiB
Skins
The base Video.js skin is made using HTML and CSS (although we use the Sass preprocessor), 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 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!
.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, and adding a link on the Skins wiki page.