Radiant Media Player

Player sizing and responsiveness



Player sizing and responsiveness documentation sections


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/CSS layout where the player container parent element width can be computed: technically this means that either the offsetWidth property or getComputedStyle/getPropertyValue must be available for this player container parent element. 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 when:

  • Player CSS is loaded after init method is called
  • ready event fires
  • orientationchange or resize event fire on window object
  • API resize method is called

As such you could want to only call init on player when your application main CSS files are loaded.

In order to boost performance, updates in player size are throttled and only applied when an actual change in size is required.

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 280px 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).
An example of using autoHeightMode setting can be found here.


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/4.6.11/js/rmp.min.js" 
  integrity="sha384-9iFjOzbzaBqrr5wIQcHNGTcOU9sD/6mtFwlc8RIZS2yh8+dAD3Qobk3VxloK+us8"
  crossorigin="anonymous"></script>
<div style="width:80%; height: auto">
  <div id="rmpPlayer"></div>
</div>
<script>
  var bitrates = {
    hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:tos-v2.smil/playlist.m3u8'
  };
  var settings = {
    licenseKey: 'your-license-key',
    bitrates: bitrates,
    autoHeightMode: true,
    autoHeightModeRatio: 2.4,
    poster: 'https://www.radiantmediaplayer.com/images/poster-rmp.jpg'
  };
  var elementID = 'rmpPlayer';
  var rmp = new RadiantMP(elementID);
  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 may be present on a 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.
Setting added with version 4.0.14

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.

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,minimum-scale=1,initial-scale=1">
    <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/4.6.11/js/rmp.min.js" 
      integrity="sha384-9iFjOzbzaBqrr5wIQcHNGTcOU9sD/6mtFwlc8RIZS2yh8+dAD3Qobk3VxloK+us8"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        // Here are our iframe settings
        iframeMode: true,
        iframeAllowed: true,
        sharing: true,
        sharingCode: '<iframe width="640" height="266" src="https://www.rmp-streaming.com/iframe/iframe-content.html" style="border:none;" allowfullscreen></iframe>',
        skin: 's1',
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      var elementID = 'rmpPlayer';
      var rmp = new RadiantMP(elementID);
      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:

<iframe
  width="640"
  height="360"
  src="http://www.mydomain.com/embedded-player.html"
  style="border:none;"
  allowfullscreen></iframe>

An example of using iframeMode setting can be found here.

As explained in the autoplay article from the Chromium Projects - autoplay of iframes require (or will require) autoplay permissions from the site owner. To do so we need to add gesture="media" to our iframe code.


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,minimum-scale=1,initial-scale=1">
    <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/4.6.11/js/rmp.min.js" 
      integrity="sha384-9iFjOzbzaBqrr5wIQcHNGTcOU9sD/6mtFwlc8RIZS2yh8+dAD3Qobk3VxloK+us8"
      crossorigin="anonymous"></script>
    <div id="rmpPlayer"></div>
    <script>
      // Set up player settings
      var bitrates = {
        hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
      };
      var settings = {
        licenseKey: 'your-license-key',
        // Magic happens here
        iframeMode: true,
        scaleMode: 'zoom',
        posterScaleMode: 'zoom',
        skin: 's1',
        bitrates: bitrates,
        poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg'
      };
      // Reference to the player container (id)
      var elementID = 'rmpPlayer';
      // New Radiant Media Player object
      var rmp = new RadiantMP(elementID);
      // Initialize player ... and done!
      rmp.init(settings);
    </script>
  </body>
</html>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.