Player Sizing And Responsiveness

Player responsiveness inner workings

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.

Responsive player with maximum width and maximum height set in pixels

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.

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/9.3.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>

iframe mode

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
• iframes can be slower to load and render as they add overhead to the browser processing. This becomes especially true as multiple iframes become present on a web page.
• 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.
• iframes (Frames in general) can be problematic on an accessibility point of view

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

Setting width and height with the player API

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

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