THEOplayer 2.X Demo: Changing default UI with CSS

This page demonstrates how to make changes to the default player UI using only CSS... no HTML or JavaScript required!

To change the styling of any of the elements appearing in the default player, you can overwrite their CSS. In the CSS snippet below we alter some of the most common elements.

Changed Player UI:

 

 

CSS code:

.theoplayer-skin .vjs-volume-level,.theoplayer-skin .vjs-play-progress{
    background: #000000 !important; // black slider/progress bar
}

.theoplayer-skin    {
    color: #11cefe !important; // aqua buttons/theme
}

.theoplayer-skin .vjs-icon-cog {
    display: none !important; // hide quality menu icon
}

.theoplayer-skin .vjs-icon-audio:before, .theoplayer-skin .vjs-audio-button:before {
    content: "\f10e" !important; // change audio menu icon
}