Embedding the Player - Storm Streaming Cloud

In this guide, we will show you how to easily embed the Storm JavaScript Player on your website. We will present several ways to do this.

Method 1: JavaScript Embed Code

This is a direct method to embed the player on a WWW page. The embed code itself can be downloaded directly from the subpage of our stream in the "Sharing" section of the Storm Stream Cloud panel.

Below is an example code:

                        
<div id="container"></div>
<script src="https://cdn-scripts.stormstreaming.com/stormplayer/4-latest.min.js" type="application/javascript"></script>
<script>
  const streamConfig = {
      stream: {
          serverList: [
              {
                  host: "edge.stormstreaming.com",
                  application: "live",
              }
          ],
          streamKey: "6b2fe38802c1b1cba754236f625b835846bf407f"
      },
      settings: {
          autoStart: true,
      },
  };

  const playerConfig = {
      containerID: "container",
      width: "100%",
      aspectRatio: "16:9",
      style: {
          loaderColor: "#ffffff"
      }
  };

  const player = stormPlayer(playerConfig, streamConfig);
</script>
                    

The first thing we need to pay attention to is the link to the JavaScript player library:

                        
<script src="https://cdn-scripts.stormstreaming.com/stormplayer/4-latest.min.js" type="application/javascript"></script>
                    

This library is hosted on our servers and is always up-to-date. This also ensures full compatibility with the latest version of our software.

The second element of this subpage is the container in which the player is located. It is a div with an assigned ID named "container".

                        
<div id="container"></div>
                    

You can change this name by also applying it to the name of the containerID field in the playerConfig object:

                        
const playerConfig = {
    containerID: "container",
    ...
};
                    

By default, the player will have a width of 100% of its container and will maintain a 16:9 aspect ratio. You can change this value and specify, for example, the number of pixels for its width and height in this way:

                        
const playerConfig = {
    ...
    width: "720px",
    height: "360px",
    ...
};
                    

If you would like to learn more about the Storm JavaScript Player, we encourage you to check out the Getting Started guide – Storm JavaScript.

Method 2: Iframe Embed Code

The simplest way to add the player to your site is by pasting the iframe code in the appropriate place. This code is also available for copying from the subpage of a given broadcast (Sharing section).

                        
<iframe src="https://iframe.stormstreaming.com/6b2fe38802c1b1cba754236f625b835846bf407f?background_color=000000&loader_color=FFFFFF&autostart=1" width="854" height="480" style="border:0;border-radius:10px;"></iframe>
                    

Here, we can also change the dimensions of the player by editing the width and height parameters. Values can be specified as a percentage (by adding a "%" sign at the end) or as a number of pixels (by adding "px" at the end, or just leaving the number alone). Example:

                        
<iframe width="100%" height="100%" …></iframe>
                    

or

                        
<iframe width="640" height="360" …></iframe>