Some API users are reporting some of their video preview thumbnails getting displayed on their side after they've been uploaded together with the video from a client device.

The cause for this issue is that when recording a video on a phone or tablet while holding the device sideways (i.e. in landscape mode), some devices (notably: iPhones and iPads) do not actually rotate the video data, but add a piece of metadata to the video that instructs players to rotate the file when playing it back.

The preview image of a video recorded in this way is a plain JPEG image that cannot contain any "rotation metadata". Hence, it gets displayed sideways for videos in landscape orientation.

There is an easy way for API users to compensate for this problem: The Clipchamp API offers an onMetadataAvailable parameter.

When adding a callback function, the API passes the video metadata (including the rotation metadata) to your website. Your client-side JavaScript code can then check for the rotation metadata and if present, counter-rotate the <img> tag that shows the preview image (using some simple CSS transformation).

Did this answer your question?