Sizing

The following algorithm is used for calculating the size of the Player:

1

By default, the Player is as big as the composition height, defined by the compositionHeight and compositionWidth props.

2

If height and width is defined using the style property, the player will assume the dimensions you have passed.

3

If a height is passed using the style property, the player will assume that height, and calculate the width based on the aspect ratio of the video.

4

If width is passed using the style property, the player will assume that width and calculate the height based on the aspect ration of the video.

note

Before v3.3.43, if case

3

or

4

happened, a layout shift would occur during mounting because the element was measured. Using a newer version of Remotion will fix this, because it uses the aspect-ratio CSS property.

Full width

By setting the following style:

tsx
style={{ width: "100%" }}

tsx
style={{ width: "100%" }}

The video will scale to the full width of the parent container, while the height will be calculated based on the aspect ratio of the video.

Fitting to a container

You can use

tsx
style={{ width: "100%", height: "100%" }}

tsx
style={{ width: "100%", height: "100%" }}

to make the <Player /> fit the whole container. Note that if the player size does not match the video aspect ratio, the video gets scaled down and centered in the player.