Demo THEOplayer
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
}
Still wasting time debugging video playback problems?
Welcome to cutting-edge video, delivered efficiently and on any platform. We think you're going to like it.
