Skip to main content

Rotate a video

You can rotate a video in the browser using the @remotion/webcodecs package to fix a video that has a bad orientation.

💼 Important License Disclaimer
This package is licensed under the Remotion License.
We consider a team of 4 or more people a "company".

For "companies": A Remotion Company license needs to be obtained to use this package.
In a future version of @remotion/webcodecs, this package will also require the purchase of a newly created "WebCodecs Conversion Seat". Get in touch with us if you are planning to use this package.

For individuals and teams up to 3: You can use this package for free.

This is a short, non-binding explanation of our license. See the License itself for more details.
🚧 Unstable API
This package is experimental.
We might change the API at any time, until we remove this notice.

Simple Example​

Rotate 90 degrees clockwise
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
  rotate: 90,
});
Rotate 90 degrees clockwise
tsx
import {convertMedia} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
  rotate: 90,
});

All rotation values that are multiples of 90 are supported. The video will be rotated clockwise.

Videos with rotation​

Videos that have rotation metadata embedded will by default be rotated when re-encoded in order to produce a video with the correct orientation.
This means you should not try to detect rotation metadata and apply the correction yourself, because it will be done automatically.

If you supply a rotation, it will be in addition to the automatic rotation correction that convertMedia() applies by default.

Disabling automatic rotation​

If you want the video to not automatically be rotated, you need to re-apply the rotation that is the same as the rotation metadata in the video.
The rotations will negate each other, and convertMedia() will not execute any code to apply rotation.

Prevent automatic video rotation
tsx
import {convertMedia, defaultOnVideoTrackHandler} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
  onVideoTrack: async (params) => {
    const action = await defaultOnVideoTrackHandler(params);
 
    if (action.type !== 'reencode') {
      return action;
    }
 
    return {
      ...action,
      rotate: params.track.rotation,
    };
  },
});
Prevent automatic video rotation
tsx
import {convertMedia, defaultOnVideoTrackHandler} from '@remotion/webcodecs';
 
await convertMedia({
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  container: 'webm',
  onVideoTrack: async (params) => {
    const action = await defaultOnVideoTrackHandler(params);
 
    if (action.type !== 'reencode') {
      return action;
    }
 
    return {
      ...action,
      rotate: params.track.rotation,
    };
  },
});

See Track Transformation for more information on how to customize the video track transformation.

Order of operations​

If you apply both a rotate and a resize operation, the rotate operation will be applied first.

Reference implementation​

Use remotion.dev/rotate to rotate a video online using WebCodecs.
See the source code for a reference on how to implement it.

See also​