Resizing & Scaling - Storm JavaScript Library

A core feature of the Storm JavaScript Library is its ability to adapt its dimensions to the specific webpage and context in which it is displayed. The library object can be manually controlled in terms of dimensions, or it can automatically adjust itself to appropriate sizes.

Static Video Window Dimensions

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

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

Dynamic Video Window Dimensions

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

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

From this moment on, whenever the size of the container element changes, the library 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":

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

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

Manual Control Over Dimensions

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

                        
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 library object adjusts correctly by calling:

                        
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:

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

The following scaling modes are available: