Web Player iframe

If you are a white label customer and either want a simple way of implementing one single video player into any third-party website or doesn't have the knowledge or capability of implementing a JavaScript Player player implementation into your site or CMS, the iframe solution might be the simplest path as it replicates the common behaviour of implementing a video from Youtube and other common video platforms available.

Please note that we only officially support free to play videos in the iframe solution.

Usage

An iframe is more or less an HTML element that renders another website - i.e. you will specify to render our embedded player page into that said element. Everything that happens inside that element is rendered and handled by the logic on our side and the only thing you as the implementing part needs to consider is the size of the element as such.

Getting Started

To get the URL that you want to implement, you need to know your whitelabel domain and the asset ID. The whitelabel domain URL is availabe in the customer portal under SETTINGS > SERVICE SETTINGS > CUSTOM DOMAINS (example: bu-12345.redbee.live). The asset ID is available from the CMS on the asset details page. You can then construct the embed URL using the following structure: https://{domain}/embedded/{asset ID} (example: https://bu-12345.redbee.live/asset/3239747_E7EFE2).

As an alternative, you can visit the asset detail page on your white label web, for example, https://bu-12345.redbee.live/asset/3239747_E7EFE2. Change the word asset to embedded in the URL, which will give you https://bu-12345.redbee.live/embedded/3239747_E7EFE2 in this given example. As seen this looks more like a playable page.

Code

When you have the URL that you want to embed, it's time to implement the iframe element code into your website. The URL that you got above, will be used as the source for the element.

Example

<iframe
    src="https://bu-12345.redbee.live/embedded/3239747_E7EFE2"
    style="overflow: hidden; border: none; width: 100%; height: 100%;"
    scrolling="no"
    allow="autoplay; encrypted-media; fullscreen">
</iframe>

Available config

You may set some configuration of the player through adding query parameters to the url embedded in the iframe. The following parameters are available.

• t, to set a start time in seconds
• muted, boolean, default false, to set whether the video should start muted or not.
• autoplay, boolean, default true, to set whether the video shouldn't start play automatically

Responsive size

Since HTML elements don't keep ratio by default and you, as an end-user, would expect a video player to keep its aspect ratio according to the playing content, we have to handle its responsiveness by either CSS or JavaScript.

CSS

Here's an example how this can be handled in CSS.

<div class="your-video-wrapper">
  <!-- the iframe code -->
  <iframe
    src="https://redbeemediatv.enigmatv.io/embedded/3239747_E7EFE2"
    style="overflow: hidden; border: none; width: 100%; height: 100%;"
    scrolling="no"
    allow="autoplay; encrypted-media; fullscreen">
  </iframe>
  <!-- end iframe code -->
</div>

<style>
.your-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* ratio 16:9 */
}

.your-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Aspect Ratio	Padding-Bottom
1:1	100%
4:3	75%
16:9	56.25%

There is also an upcoming CSS standard, which is not yet that throughly supported, that will simplify the aspect ratio implementation.

JavaScript

Another way to handle this is, as mentioned, by JavaScript. Here is a simple example of how it can be accomplished.

window.addEventListener("resize", () => {
  var videoIframe = document.querySelector("iframe");
  var iframeWidth = videoIframe.clientWidth;
  var ratioComputedHeight = (iframeWidth / 16) * 9;
  videoIframe.style.height = ratioComputedHeight;
});

Even here there's a modern way of implementation, which is not yet fully supported though with available polyfill.

This will only run when the actual element resizes, and not each time the window as such resizes.

if (!ResizeObserver) return;
const iframe = document.querySelector("iframe");
const resizeObserver = new ResizeObserver(() => {
  const iframeWidth = iframe.clientWidth;
  const ratioComputedHeight = (iframeWidth / 16) * 9;
  iframe.style.height = ratioComputedHeight;
});
resizeObserver.observe(iframe);

Please consider all this example as examples and not proper production ready implementations without consideration.