CSS customisation
To test this feature and view the example code, please see the Browsers SDK 1 Example Code Quick Start guide.
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 increases the CSS specificity for the customisation. Use this as a guide to further customise your player.