Resizing & Scaling - Storm JS Player Core

Static Video Window Dimensions

In the following example, the dimensions of the player object are explicitly set to 1280x720 pixels. The player will maintain these dimensions regardless of the window or subpage size:

Static dimensions

javascript

Copy

const streamConfig = {
  stream: {
    ... // stream setttings
  },
  settings: {
    video: {
      containerID: "container",
      width: "1280px",
      height: "720px"
    },
  }
}

Dynamic Video Window Dimensions

If the parent element of the player object in the DOM tree has specified dimensions (width and height), we can use percentage values:

Percentage dimensions

javascript

Copy

const streamConfig = {
  stream: {
    ... // stream setttings
  },
  settings: {
    video: {
      containerID: "container",
      width: "100%",
      height: "100%"
    },
  }
}

From this moment on, whenever the size of the container element changes, the player object will automatically adapt to its parent.

If for any reason the parent element doesn't have a defined height, or the stream is meant to play in specific proportions, we can use the aspectRatio parameter. It is written as two numbers separated by a colon, e.g., "16:9", "9:16", "4:3":

Aspect ratio

javascript

Copy

const streamConfig = {
  stream: {
    ... // stream setttings
  },
  settings: {
    video: {
      containerID: "container",
      aspectRatio: "16:9",
      width: "100%"
    },
  }
}

In this case, the player object will automatically calculate the required height based on 100% of the container's width.

Manual Control Over Dimensions

The player object supports several methods that allow us to modify its size and override the previous configuration settings:

Size methods

javascript

Copy

storm.setSize("1280px", "720px");
storm.setSize("100%", "100%");

storm.setWidth("1280px");
storm.setWidth("100%");

storm.setHeight("720px");
storm.setHeight("100%");

When using animations where the window size changes dynamically, we can ensure the player object adjusts correctly by calling:

Update size

javascript

Copy

storm.updateToSize();

Video Scaling

In addition to setting the player's dimensions, we can also define how the video content inside it should scale in relation to the player. This is done using the scalingMode parameter:

Scaling mode configuration

javascript

Copy

const streamConfig = {
  stream: {
    ... // stream setttings
  },
  settings: {
    video: {
      containerID: "container",
      scalingMode: "fill",
      aspectRatio: "16:9",
      width: "100%"
    },
  }
}

The following scaling modes are available: