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/10.1.1/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,
    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');
  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</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",
    "volume": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
    "volume-half": "https://cdn.radiantmediatechs.com/rmp/svg/volume.svg",
    "volume-off": "https://cdn.radiantmediatechs.com/rmp/svg/volume-off.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/10.1.1/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,
    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');
  // Initialization ... and done!
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);
    } catch(error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();
</script>

Player Spinners

iconSpinner: String

Player spinner is displayed when the player is in waiting mode. For example player will enter waiting mode when it needs to fetch content from a server but that content has become unavailable due to network outage or congestion. You can choose between 2 player spinners: 'classic' for a classic circling spinner and 'rmp' for a more modern spinner. Default: 'classic'. See src/less/import-less/spinner/spinner.less in self-hosted package for CSS specific to player spinners.

Player CSS

Get started with player CSS customisation

Radiant Media Player CSS and fonts are inlined in player JavaScript library file (as such there is no separated CSS or icons files). 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 (see 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. Those files are:
  • 360/360.less
  • accessibility/accessibility.less
  • ads/ad-blocker.less
  • ads/ads.less
  • ads/rmp-vast.less
  • ads/ssai.less
  • ads/vpaid.less
  • audio-only/audio-only.less
  • cast/airplay.less
  • cast/google-cast.less
  • control-bar/auto-hide.less
  • control-bar/control-bar.less
  • control-bar/cue-point.less
  • control-bar/hide-controls.less
  • helpers/colors.less
  • helpers/fonts.less
  • helpers/mixins.less
  • helpers/reset.less
  • helpers/scrollbar.less
  • icons/common-icons.less
  • icons/icons-font-awesome.less
  • icons/icons-material.less
  • icons/icons-size.less
  • list/playlist.less
  • list/related.less
  • live/dvr.less
  • live/live.less
  • misc/central-ui.less
  • misc/container.less
  • misc/error.less
  • misc/floating.less
  • misc/fullscreen.less
  • misc/logo.less
  • misc/poster.less
  • misc/title-description.less
  • misc/transcripts.less
  • modules/fcc.less
  • modules/modules.less
  • modules/sharing.less
  • modules/vtt-js.less
  • skins/outstream.less
  • skins/s1.less
  • skins/s2.less
  • skins/tv.less
  • spinner/spinner.less

Additionally the player also inlines its icons and font:

  • fonts/rmp-font.woff2: player icons in WOFF2 format
  • fonts/Roboto-Regular.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;
}

Flexbox support

Radiant Media Player v10 is built with CSS Flexbox. This allows for a cross-device progressive, responsive design.

For example below are the default order for player icons within the control bar:

.rmp-play-pause {
  order: 1;
}

.rmp-related-skip-next {
  order: 2;
}

.rmp-quick {
  order: 3;
}

.rmp-quick-both {
  order: 4;
}

.rmp-volume {
  order: 5;
}

.rmp-volume-bar {
  order: 6;
}

.rmp-time {
  order: 7;
}

.rmp-seek-bar {
  order: 8;
}

.rmp-captions-ui .rmp-captions {
  order: 9;
}

.rmp-audio-ui .rmp-audio {
  order: 10;
}

.rmp-quality {
  order: 11;
}

.rmp-fullscreen {
  order: 12;
}

If I wanted to swap the play/pause icon with the fullscreen icon this is the CSS that would need to be added:

#rmp .rmp-play-pause {
  order: 12;
}

#rmp .rmp-fullscreen {
  order: 1;
}

Player container level CSS classes

The following CSS 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-medium" tabindex="0" role="application" aria-label="Welcome to Radiant Media Player!">...</div>
  • .rmp-chrome: when player controls are visible
  • .rmp-no-chrome: when player controls are not visible
  • .rmp-fullscreen-on: when fullscreen is engaged
  • .rmp-fullscreen-ipad-os: when fullscreen is engaged 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)
  • .rmp-live: when player is in live mode
  • .rmp-dvr: when player is in DVR mode
  • .rmp-dvr-vod: when player is playing DVR recorded content (e.g. not at live edge)
  • .rmp-dvr-live: when player is playing DVR live content (e.g. not recorded)
  • .rmp-mobile: when player is rendered on mobile devices (iOS, iPadOS or Android)
  • .rmp-audio-only: when player is in audio-only mode
  • .rmp-audio-only-use-video-layout: when player displays audio-only content with our video player
  • .rmp-pip-on: when player is engaged in PiP mode
  • .rmp-linear-ad-ui: when player is displaying a linear video ad
  • .rmp-ad-no-ui: when player is displaying a linear video ad but the ad UI is not shown (typically some VPAID or SIMID ads that have their own UI)
  • .rmp-quick: when quick rewind OR fast forward is available
  • .rmp-quick-both: when quick rewind AND fast forward is available
  • .rmp-focus: when player is interacted with a keyboard
  • .rmp-error-ui: when player is in error mode
  • .rmp-playlist-audio-only: when player is in audio-only playlist mode
  • .rmp-related-audio-only: when player is in audio-only related mode
  • .rmp-s1: when player is displayed with the s1 skin
  • .rmp-s2: when player is displaying with the s2 skin
  • .rmp-tv: when player is displayed with the TV skin
  • .rmp-outstream: when player is displaying outstream video ads
  • .rmp-font-awesome: when player is using the font-awesome icons kit
  • .rmp-font-material: when player is using the material icons kit
  • .rmp-360-ui: when player is showing the 360° UI
  • .rmp-casting: when Google Cast casting is engaged
  • .rmp-airplay-engaged-ui: when player is AirPlay casting
  • .rmp-title-ui: when player is showing a contentMetadata.title
  • .rmp-title-description-ui: when player is showing a contentMetadata.title and a a contentMetadata.description
  • .rmp-module-open-ui: when player is showing an open module overlay UI

Player sizing CSS classes

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-xs: when playerWidth is playerWidth < 320px
  • .rmp-sm: when playerWidth >= 320px && playerWidth < 480px
  • .rmp-md: when playerWidth >= 480px && playerWidth < 640px
  • .rmp-lg: when playerWidth >= 640px && playerWidth < 1024px
  • .rmp-xl: when playerWidth >= 1024px

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, seekTo ...).

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

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