SizeContainer, container and videoRef

Definitions and examples of video containers

        <Video />


<SizeContainer> defines the boundary for inner containers. By default (C), the video will try to fit the space of <SizeContainer>.

However, if setting the forceVideoToFitContainer option to false, then the video will be limited by the stream size. For example, if the stream provides only 800x800 pixels and <SizeContainer> is 1920x1920, the video and container will be centered in the middle.


The <Container> and <Video> (or its reference videoRef) have the same size. The <Container> is necessary to contain the UI elements, which should be limited by the <Video> element's boundaries. The container will always adjust to the video's size.

If forceVideoToFitContainer is set to true, then the video will try to fit the <SizeContainer> by width and height. If the video resolution is dynamic, then it should perfectly fit the <SizeContainer>. If the video resolution is fixed, such as 1920x1080, then the smaller side will fit the <SizeContainer> , and the larger side will be aligned with the aspect ratio. You can see an example below.

Last updated