Player Sizing And Responsiveness

Player responsiveness inner workings

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.

Responsive player with maximum width and maximum height set in pixels

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.

Auto-height mode (100% width)

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

Using percent for player width and height

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.2.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,
    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>

iframe mode

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
• iframes are not responsive. In order to make the player within an iframe responsive you must first make the iframe itself responsive. You may need to use the player API 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.2.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,
        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>

Setting player size with the player API

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

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.2.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,
        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>