1.0 KiB
Skins
The default Video.js skin is made using HTML and CSS, so there's no need to learn a complicated skinning language to update colors or even create an entirely new skin.
New in version 4.0 is the use of font icons. All of the icons (play, pause, etc.) use the new custom font, which allows the icons to be scaled and colored just like any other text font.
The easiest way to try this out is by using the player skin designer.
When you create a new skin, you can either override styles in the default skin:
.vjs-default-skin .vjs-play-progress { background: #900; }
Or remove the 'vjs-default-skin' class from the video tag and create a new skin from scratch.
<video class="video-js my-custom-skin" ...>
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.