CSS customisation

CSS customisation provides the ability to personalise your player.

Modifying colours

The CSS style uses custom properties to define the elements' colours. These can be modified in the given CSS file to give your player a personalised colour scheme. Each property and its effect is described in the table below.

Variable Name Affected Element
--bpb-color Big play button colour
--bpb-color-hover Big play button colour on hover
--spinner-color Loading Spinner colour
--control-bar-color Control bar colour
--control-bar-icons-color Control bar icon colour
--volume-color Volume slider colour
--progress-color Progress bar colour
--menu-color Menu background colour
--menu-selected-color Selected element text colour
--menu-selected-background-color Selected element background colour
--pip-control-bar-color Control bar colour while in pip mode
--chapter-title-color Chapters title colour
--chapter-marker-color Chapter marker colour
--chapter-highlight-color Chapter highlight colour

Advanced customisation

To change more than the player colours, by examining the CSS in standalone-style.css, you will see the additional css class opy-standalone which is used to increase the CSS specificity for the customisation. Use this as a guide to further customise your player.