Documentation

Player Skins & CSS

Built-in player skins

Radiant Media Player offers 2 different player skins each with a different look and feel and optimised for cross-device rendering. Additionally, dedicated player skins are available for our TV and outstream player. Player skins can be customised with player settings or CSS for more advanced use-cases.

A player skin is set with the skin player setting:

skin: String

The name of the skin to be used - available values are: 's1', 's2', 'outstream', 'tv'. Default: 's1'.
If you have multiple players on the same page, all players will have the same skin: the first skin loaded.
You can see a demo of player skins live here.
The 'outstream' should be used in the context of using outstream video ads.
The 'tv' skin should be used in the context of developing a TV app.

hideControls: Boolean

Hide player controls. Default: false. You can build your own user interface as such through our JavaScript API. Note that all UI elements (including loading icons) are hidden in this mode.

hideSeekBar: Boolean

Hide player seek bar. This effectively prevents seeking into a video. This should only be used for on-demand video content. This also disables keyboard control for seeking. Default: false.

hideFullscreen: Boolean

Hide player fullscreen button. This effectively prevents entering into fullscreen mode. This also disables keyboard control for fullscreen. Default: false.

hideVolume: Boolean

Hide player volume button. This also disables keyboard control for volume. Default: false.

hideCentralPlayButton: Boolean

Permanently hide the player central play button. Default: false, which means the player central play button is displayed.

hideCentralBuffering: Boolean

Permanently hide the player central buffering overlay (animated wave or spinner depending on skin when player is buffering data). Default: false, which means the player central buffering overlay is displayed when buffering happens.

backgroundColor: String

Set the player background colour in hex colour format (typically shown in certain aspect-ratio configuration or when no poster setting is provided). Default: '000000'.

fullWindowSkin: Boolean

Set the skin (s1, s2, outstream) to be having a full window layout. Default: false.

Skin colorization

The 4 player skins ('s1', 's2', 'outstream', 'tv') can easily be colorized using the following player settings.

skinBackgroundColor: String

This setting will colorize the background of the skin. Default to ''.

skinButtonColor: String

This setting will colorize the buttons and texts of the skin. Default to ''.

skinAccentColor: String

This setting will colorize secondary UI elements of the skin - like hover state for buttons. Default to ''.

The above parameters accept either HEX color code (example: 'FF0000') or rgba color code (example: 'rgba(0, 255, 0, 0.8)') for transparency support.

Player code example - see this example here

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.13.2/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Your streaming source - HLS in this example
const src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  skin: 's1',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  },
  // Here starts our colorization settings
  skinBackgroundColor: '01579B',
  skinButtonColor: 'FFD180',
  skinAccentColor: 'FF9100'
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Player icons

Player icons set

iconsSet: String

Sets the player icons theme. Default: 'font-awesome' for icons based on the font-awesome project. You can also opt for 'material' for player icons based on Google Material Icons project.

Player icons size

iconsSize: Number

Modify player icons size. Sane values are between 0.75 (smaller icons) and 1.25 (larger icons). Default: 1.

Custom icons

Player setting

customIconsLoc: String

URI to JSON file holding the SVG icons. Default: ''.

Input JSON file

You can easily customise player icons by submitting a JSON file holding URIs to SVG files (one SVG for each icon). If you only pass some custom player icons, player default icons will be used for icons that are not defined in the JSON file. Example:

{
  "icons": {
    "airplay": "https://cdn.radiantmediatechs.com/rmp/svg/airplay.svg",
    "audio": "https://cdn.radiantmediatechs.com/rmp/svg/audio.svg",
    "captions": "https://cdn.radiantmediatechs.com/rmp/svg/captions.svg",
    "chapters": "https://cdn.radiantmediatechs.com/rmp/svg/chapters.svg",
    "code": "https://cdn.radiantmediatechs.com/rmp/svg/code.svg",
    "copy": "https://cdn.radiantmediatechs.com/rmp/svg/copy.svg",
    "close": "https://cdn.radiantmediatechs.com/rmp/svg/close.svg",
    "quick-forward": "https://cdn.radiantmediatechs.com/rmp/svg/quick-forward.svg",
    "quick-rewind": "https://cdn.radiantmediatechs.com/rmp/svg/quick-rewind.svg",
    "quick-forward-tv": "https://cdn.radiantmediatechs.com/rmp/svg/quick-forward-tv.svg",
    "quick-rewind-tv": "https://cdn.radiantmediatechs.com/rmp/svg/quick-rewind-tv.svg",
    "link": "https://cdn.radiantmediatechs.com/rmp/svg/link.svg",
    "minus": "https://cdn.radiantmediatechs.com/rmp/svg/minus.svg",
    "next": "https://cdn.radiantmediatechs.com/rmp/svg/next.svg",
    "off-volume": "https://cdn.radiantmediatechs.com/rmp/svg/off-volume.svg",
    "volume": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
    "volume-half": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
    "pause": "https://cdn.radiantmediatechs.com/rmp/svg/pause.svg",
    "pip": "https://cdn.radiantmediatechs.com/rmp/svg/pip.svg",
    "play": "https://cdn.radiantmediatechs.com/rmp/svg/play.svg",
    "plus": "https://cdn.radiantmediatechs.com/rmp/svg/plus.svg",
    "previous": "https://cdn.radiantmediatechs.com/rmp/svg/previous.svg",
    "quality": "https://cdn.radiantmediatechs.com/rmp/svg/quality.svg",
    "related": "https://cdn.radiantmediatechs.com/rmp/svg/related.svg",
    "replay": "https://cdn.radiantmediatechs.com/rmp/svg/replay.svg",
    "resize-full": "https://cdn.radiantmediatechs.com/rmp/svg/resize-full.svg",
    "resize-small": "https://cdn.radiantmediatechs.com/rmp/svg/resize-small.svg",
    "sharing": "https://cdn.radiantmediatechs.com/rmp/svg/sharing.svg",
    "skip-next": "https://cdn.radiantmediatechs.com/rmp/svg/skip-next.svg",
    "speed": "https://cdn.radiantmediatechs.com/rmp/svg/speed.svg"
  }
}
Player code example
<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.13.2/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Your streaming source - HLS in this example
const src = {
  hls: 'https://your-hls-url.m3u8'
};
// Your player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  skin: 's1',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  },
  // Custom icon URI
  customIconsLoc: 'https://cdn.radiantmediatechs.com/rmp/svg/icons.json'
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Player CSS

Get started with player CSS customisation

With Radiant Media Player 8, all CSS and fonts for the player are now built-in our JavaScript library. This means that independent CSS/font files are no longer available, instead all player CSS/font are inlined with JavaScript. This allows for faster styling and printing of player on page load and better SEO. We are providing with our self-hosted package the complete player CSS as LESS files for reference ( src/less folder - these LESS files can be used as a reference to customise player skins). You can modify the player CSS by overriding the default CSS values found in those LESS files - see below for an example. Below is a break down of LESS files you will find in our self-hosted package.

  • rmp.less: LESS base file to reference other LESS files needed by the player
  • import-less/ads/
    • ads.less: holds CSS for the ad UI (common for IMA and rmp-vast parsers)
  • import-less/audio-only/
    • audio-only.less: holds CSS for the audio-only UI
  • import-less/core-skin/
    • 360.less: holds CSS for the 360° UI
    • accessibility.less: holds CSS for accessibility UI
    • auto-hide.less: holds CSS for auto-hide UI
    • captions.less: holds CSS for the captions rendering area and module
    • cast.less: holds player CSS for Google Cast and AirPlay
    • central-ui.less: holds player CSS for central UI (central play and buffering icons)
    • container.less: holds player CSS for player container
    • control-bar.less: holds player CSS for player bottom control bar
    • error.less: holds error UI CSS
    • fullscreen.less: holds CSS when player is in fullscreen or full window (360° video in iOS) mode
    • hide-controls.less: holds CSS to hide player controls
    • live-dvr.less: holds CSS for live and DVR UI
    • logo.less: holds logo UI CSS
    • modules.less: holds CSS common to all player modules
    • playlist.less: holds CSS for the playlist UI
    • floating.less: holds CSS for the floating feature
    • poster.less: holds CSS for poster UI
    • related.less: holds CSS for the related UI
    • title-description.less: holds CSS for contentMetadata.title and contentMetadata.description settings
    • transcripts.less: holds CSS for transcripts UI
  • import-less/helpers/
    • colors.less: holds CSS for player colors
    • fonts.less: holds CSS for player fonts
    • mixins.less: holds Less mixins (helper functions)
    • reset.less: holds CSS for resetting accessible button UI
    • scrollbar.less: holds CSS for the player custom scroll bar (webkit-based browsers only)
  • import-less/icons/
    • common-icons.less: holds CSS for common icons
    • icons-font-awesome.less: holds CSS for font-awesome icons
    • icons-material.less: holds CSS for material icons
    • spinner.less: holds CSS for waiting UI
  • import-less/skins/
    • outstream.less: outstream skin specific CSS
    • s1.less: s1 skin specific CSS
    • s2.less: s2 skin specific CSS
    • tv.less: TV skin specific CSS
  • fonts/rmp-font.woff2: player font in WOFF2 format

Example for tuning player CSS

Since player CSS is appended dynamically to page you will have to use CSS specificity to enable overriding of default values. This is done by targeting the player container id (#rmp in this case):

#rmp .rmp-button {
  outline: dashed red;
}

See below for a list of CSS classes that are container-level classes

Player container level CSS classes

All the following classes are set on player container (div with .rmp-container class that will also have the id the player is initialized with) based on player settings or modes. Example:

<div id="rmp" class="rmp-container rmp-color-button rmp-chrome rmp-s1 rmp-font-awesome rmp-native-captions rmp-title-ui rmp-medium rmp-quick-rewind-or-forward-ui" tabindex="0" role="complementary" aria-label="Welcome to Radiant Media Player!" style="width: 960px; height: 540px;">...</div>
  • .rmp-chrome: when player controls are visible, player container has this class on
  • .rmp-no-chrome: when player controls are not visible, player container has this class on
  • .rmp-fullscreen-on: when fullscreen is engaged, player container has this class on
  • .rmp-fullscreen-ipad-os: when fullscreen is engaged on iPadOS player container has this class on
  • .rmp-fullscreen-ios: when fullscreen is engaged on iOS, player container has this class on
  • .rmp-ipad-os: when player is rendered on iPadOS, player container has this class on
  • .rmp-full-window-on: when full window mode is engaged (no native fullscreen support - iOS for 360° video for example), player container has this class on
  • .rmp-live: when player is in live mode, player container has this class on
  • .rmp-dvr: when player is in DVR mode, player container has this class on
  • .rmp-dvr-vod: when player is playing DVR recorded content (e.g. not at live edge), player container has this class on
  • .rmp-dvr-live: when player is playing DVR live content (e.g. not recorded), player container has this class on
  • .rmp-mobile: when player is rendered on mobile devices (iOS, iPadOS or Android), player container has this class on
  • .rmp-cast-ui: when Google Cast is available, player container has this class on
  • .rmp-casting: when Google Cast casting is engaged, player container has this class on
  • .rmp-airplay-ui: when AirPlay is available, player container has this class on
  • .rmp-audio-only: when player is in audio-only mode, player container has this class on
  • .rmp-audio-only-use-video-layout: when player displays audio-only content with our video player, player container has this class on
  • .rmp-pip-on: when player is engaged in PiP mode, player container has this class on
  • .rmp-linear-ad-ui: when player is displaying a linear video ad, player container has this class on
  • .rmp-quick-rewind-or-forward-ui: when quick rewind OR fast forward is available, player container has this class on
  • .rmp-quick-rewind-and-forward-ui: when quick rewind AND fast forward is available, player container has this class on
  • .rmp-error-ui: when player is in error mode, player container has this class on
  • .rmp-playlist-ui: when player is in playlist mode, player container has this class on
  • .rmp-playlist-audio-only: when player is in audio-only playlist mode, player container has this class on
  • .rmp-related-ui: when player is in related mode, player container has this class on
  • .rmp-related-audio-only: when player is in audio-only related mode, player container has this class on
  • .rmp-module-overlay-open: when a player module is open, player container has this class on
  • .rmp-s1: when player is displayed with the s1 skin, player container has this class on
  • .rmp-s2: when player is displaying with the s2 skin, player container has this class on
  • .rmp-tv: when player is displayed with the TV skin, player container has this class on
  • .rmp-outstream: when player is displaying outstream video ads, player container has this class on
  • .rmp-font-awesome: when player is using the font-awesome icons kit, player container has this class on
  • .rmp-font-material: when player is using the material icons kit, player container has this class on
  • .rmp-360-ui: when player is showing the 360° UI, player container has this class on

Player responsiveness

When the player is resized (for example on player load, orientation change or window resizing) the player will add resizing classes to its container based on its current width. 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 available on the market:

  • .rmp-doubleextrasmall: when playerWidth > 0 && playerWidth < 280, player container has this class on
  • .rmp-extrasmall: when playerWidth >= 280 && playerWidth < 375, player container has this class on
  • .rmp-small: when playerWidth >= 375 && playerWidth < 480, player container has this class on
  • .rmp-medium: when playerWidth >= 480 && playerWidth < 1024, player container has this class on
  • .rmp-large: when playerWidth >= 1024, player container has this class on

Player API

Eventually you may want to go one step further and build your own set of player controls from scratch. You can do this by setting hideControls to true and using our player API to command the player (play/pause, volume, seek ...).

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2024 Radiant Media Player. All Rights Reserved.