Radiant Media Player offers flexible ways to set the size of the player.
Radiant Media Player is built with CSS Flexbox. This allows for a cross-device progressive, responsive design.
The player will automatically resize itself using the ResizeObserver API when the HTML layout surrounding the player changes.
All player sizing methods are based on width of the parent element of the player container so it is assumed the player is included in a HTML layout where the player container parent element width can be computed. In case the player container parent element width cannot be computed the player will use the default input width provided but may not be responsive.
More information on player CSS sizing classes can be found here.
Do not directly apply sizing in CSS or JavaScript (width, height ...) on the player container (wrapper div element with the .rmp-container class). Those are set internally based on the selected sizing option.
Unless specified this is the default player behaviour.
width: Number
The maximum width of the player in pixels. The player will automatically be
resized based on context but will never
exceed this width parameter. Default: 640
.
height: Number
The maximum height of the player in pixels. The player will automatically
be resized based on context but will never
exceed this height parameter. Default: 360
.
The width and
height values must be expressed in pixels. See the other sizing modes below for
alternative
sizing options.
autoHeightMode: Boolean
When set to true this setting will set the player width to 100% and its
height will automatically be computed based
on the aspect ratio defined in the
autoHeightModeRatio
setting. This mode can be used to
better fit specific
mobile and responsive designs. Default: false
.
autoHeightModeRatio: Number
Set the player aspect ratio when
autoHeightMode
is set to true. Default: 1.7777777778
(16:9
ratio).
The player does not directly support % values for width or height through player
settings. The reason is that when
it comes to video sizing aspect ratio considerations are critical. As such proper width or
height for the player
can only be computed based on a reference aspect ration value. However % value for the
width or height of the player
can easily be emulated using the
autoHeightMode
setting. To achieve this the % values
must be passed to the
parent element of the player container.
Example:
<script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script>
<div style="width:80%; height: auto;">
<div id="rmp"></div>
</div>
<script>
const src = {
hls: 'https://your-hls-url.m3u8'
};
const settings = {
licenseKey: 'your-license-key',
src,
autoHeightMode: true,
autoHeightModeRatio: 2.4,
contentMetadata: {
poster: [
'https://your-poster-url.jpg'
]
}
};
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>
Scope of support
As a rule of thumb we always recommend to NOT use iframes to present the player to your audience. iframe can cause accessibility issues, are more resources-taxing and can cause side issues difficult to debug. We want to make sure you explore other sizing options before using iframe - if you, however, have a business requirement to use iframe this is fine, you can proceed reading
This player sizing mode sets the player width and height to 100% and is best suited for iframe embedding. Iframe embedding can notably be used for sharing purposes, AMP or Facebook Instance articles. The below information should help to properly use our player in an iframe.
Notes for using the player in an iframe
iframeMode
setting must be set to true to avoid sizing issues
resize
method when dynamically resizing the iframe.
Player settings
iframeAllowed: Boolean
When set to false this setting will disable iframe embedding for the
player. Some users may want to use it as an
added security measure. Default: true
.
iframeMode: Boolean
When set to true this setting will force the player container to have a
100% width and a 100% height which better
fits iframe usage. Default: false
.
Autoplay policy
Please review the autoplay policy for iframes docs before enabling autoplay when the player is used in an iframe.
HTML5 audio player
You can use iframe with our audio-only player
as well. Just pass the audioOnly
setting.
Example
First prepare a page on your main domain for the content that will displayed through an iframe:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Radiant Media Player - Example Apple HLS</title> <style> /* This CSS is required to avoid layout issues */ html, body { height: 100%; width: 100%; background-color: #000; overflow: hidden; margin: 0; padding: 0; } </style> </head> <body> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script> <div id="rmp"></div> <script> // Set up player settings const src = { hls: 'https://your-hls-url.m3u8' }; const settings = { licenseKey: 'your-license-key', // Here are our iframe settings iframeMode: true, iframeAllowed: true, sharing: true, skin: 's1', src, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; 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> </body> </html>
For the purpose of this example let us say you host the above code at
https://www.mydomain.com/embedded-player.html where you have a valid license key for
mydomain.com. You want, for example, your users to be able share this player on
https://www.myblog.com
or https://www.myotherblog.com. The <iframe> code that needs to be provided to your
users would be (note the attributes sandbox
and allow
):
<iframe width="640" height="360" title="Video content" src="http://www.mydomain.com/embedded-player.html" style="border:none;" allowfullscreen sandbox="allow-scripts allow-presentation allow-same-origin allow-popups" allow="autoplay; fullscreen; picture-in-picture; xr-spatial-tracking; encrypted-media; clipboard-write"></iframe>
The player API exposes getPlayerSize
, setPlayerSize
and resize
methods
to programmatically control player sizing. Refer to our
player API documentation for more
information.
Background video with HTML5 video can be achieved with Radiant
Media Player through a combined use of the iframeMode
and scaleMode
settings. Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Radiant Media Player - Background video example</title> <style> /* This CSS is required to avoid layout issues */ html, body { height: 100%; width: 100%; background-color: #000; overflow: hidden; margin: 0; padding: 0; } </style> </head> <body> <script src="https://cdn.radiantmediatechs.com/rmp/10.1.1/js/rmp.min.js"></script> <div id="rmp"></div> <script> // Set up player settings const src = { hls: 'https://your-hls-url.m3u8' }; const settings = { licenseKey: 'your-license-key', // Magic happens here iframeMode: true, scaleMode: 'zoom', posterScaleMode: 'zoom', skin: 's1', src, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; 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> </body> </html>
©2015-2025 Radiant Media Player. All Rights Reserved.