Radiant Media Player offers flexible ways to set the size of the player. All sizing methods are responsive 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.
The player will automatically resize itself using the ResizeObserver API when the HTML layout surrounding the player changes.
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.
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
.
The minimum supported width for the player is 272px at a 16:9 ratio.
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/9.12.0/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: src, autoHeightMode: true, autoHeightModeRatio: 2.4, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script>
Scope of support
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, Facebook Instance articles or background video. The below information should help to properly use the 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.
As such we recommend using iframe only when needed to support a specific use-case.
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/9.12.0/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: src, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script> </body> </html>
For the purpose of this example let us say you host the above code at http://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 http://www.myblog.com
or http://www.myotherblog.com. The <iframe> code that needs to be provided to your user would be (note the attributes sandbox
and allow
):
<iframe width="640" height="360" src="http://www.mydomain.com/embedded-player.html" style="border:none;" allowfullscreen sandbox="allow-scripts allow-presentation allow-same-origin" allow="autoplay; fullscreen; picture-in-picture; xr-spatial-tracking; encrypted-media; clipboard-write"></iframe>
If you intend to use the sharing module or any custom module that requires opening links through an iframe, please add "allow-popups" to your iframe sandbox attribute.
The player exposes setPlayerSize, getPlayerWidth, getPlayerHeight and resize methods in order to programmatically control its 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/9.12.0/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: src, contentMetadata: { poster: [ 'https://your-poster-url.jpg' ] } }; const rmp = new RadiantMP('rmp'); rmp.init(settings); </script> </body> </html>
©2015-2023 Radiant Media Player. All Rights Reserved.