We have built-in support for "float-on-scroll" feature. This feature keeps the player visible when the original player location is scrolled out of view, by minimizing it to a corner of the screen. A close button within the player allows viewer to dismiss the floating player upon interaction.
floating: Boolean
Enables floating feature in the player. Default: false
.
floatingThreshold: Number
Sets the threshold point for floating/unfloating of player. Value of 0 means the anchored player has to be
completely scrolled out of view, before the floating player appears. Value of 1 means the anchored player will
enter floating player as soon as it begins to become out of view. Default: 0.5
.
floatingStatus
getter|setter (Boolean)
const floatingStatus = rmp.floatingStatus;
rmp.floatingStatus = true;
get|set the current floating status of the player.
floating
This event fires when player floating status changes to floating.
unfloating
This event fires when player floating status changes to anchored.
<!-- Include Radiant Media Player - here we use the optimised build for hls.js --> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.4/js/rmp-hlsjs.min.js"></script> <!-- !!! Player anchor element --> <div id="rmp-anchor-element"> <!-- Player container element, child of anchor element --> <div id="rmp"></div> </div> <!-- Set up player configuration options --> <script> const src = { hls: 'https://your-live-hls-url.m3u8' }; const settings = { licenseKey: 'your-license-key', src, width: 640, height: 360, floating: true, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const elementID = 'rmp'; const rmp = new RadiantMP(elementID); async function initRmpPlayer() { try { await rmp.init(settings); } catch (error) { console.error('Radiant Media Player failed to initialize', error); } } initRmpPlayer(); </script>
The floating player (when detached from its anchor) uses default sizing values. Those values can be overridden with CSS and can be found in floating.less file in our self-hosted package. Those values are also presented below:
.rmp-container.rmp-detach { width: 240px !important; height: 135px !important; position: fixed; bottom: 8px; right: 8px; z-index: 999999; box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.3); } @media (min-width: 400px) { .rmp-container.rmp-detach { width: 320px !important; height: 180px !important; } } @media (min-width: 576px) { .rmp-container.rmp-detach { width: 480px !important; height: 270px !important; } }
©2015-2025 Radiant Media Player. All Rights Reserved. ✝