Radiant Media Player offers 4 different player skins. They can be customised through skin-colorization or CSS to better fit your project requirements.
A player skin is set with the
skin setting (String, default to 's1'). Available values are: 's1', 's2', 's3' or 's4'.
Radiant Media Player Flash fallback also supports 4 different skins (also set with 's1', 's2', 's3' or 's4'). The
flashSkin setting can be used to target a specific Flash skin.
Since Radiant Media Player 3.10 a new skin colorization mechanism with transparency support and 3 different color zones is available. As Flash fades away all future developments for skinning the player will be provided for the HTML5 player.
The 4 player skins can easily be colorized using the following player settings. This will only affect the HTML5 rendition of the player.
skinBackgroundColor: this setting will colorize the background of the skin (String, default to '')
skinButtonColor: this setting will colorize the buttons and texts of the skin (String, default to '')
skinAccentColor: this setting will colorize some secondary UI elements of the skin - like the hover state for buttons (String, default to '')
The above parameters accept either HEX color code (example 'FF0000') or rgba color code (example 'rgba(0, 255, 0, 0.8)').
Colorized player example:
Player code for the above example:
Radiant Media Player HTML5 rendition can be customised through CSS. Source CSS and Less files are available for each customer in our back-end within the self-hosting player files package (download section).
When tuning the player CSS you must self-host the player files or use a specific version of the cloud player - example for current version:
In all cases you will need to self-host the player files and minify your output CSS file to rmp-s1.min.css in place of the former rmp-s1.min.css file (or another rmp-s*.min.css file for the other skins). The player will then automatically pick up the CSS changes.
General player structure
This is not an exhaustive list of CSS classes for the player but rather some high-level information about the player structure. If you want to customize the player UI with CSS you are going to need to use a DOM inspector at some point (this is generally under the inspect menu in your browser developer tools) to better understand the player layout.
When the player is resized (for example on player load, orientation change or window resizing) the player will add resizing classes. Those resizing classes change the layout of the player to better fit the current player size and are applied at common break points for devices currently available on the market:
Other player classes