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
tsx
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
tsx
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.