SizeContainer, container and videoRef

Definitions and examples of video containers

<SizeContainer>
    <Container>
        <Video />
    </Container>
</SizeContainer>

<SizeContainer>

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

Example of <SizeContainer> with default configuration.

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.

If the forceVideoToFitContainer parameter is set to false, then the <Container> element will match the size of the video stream, regardless of the actual size of the container.

<Container>

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.

If the forceVideoToFitContainer parameter is set to true, then the smaller side will fit the <SizeContainer>