Programmable Media

Video transformations (video tutorial)

Last updated: May-08-2024


This tutorial shows how to build an e-commerce video using Node.js showing products being used in different ways. This step-by-step guide will show you how to chain the transformations, adding one transformation at a time.

Video tutorial

This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.


Jump to this spot in the video  0:14 In this video, you'll see some examples of how Cloudinary's transformations and AI capabilities can help you manage and edit your videos, programmatically and on the fly.

Get the delivery URL of a video stored in Cloudinary

Jump to this spot in the video  0:25 Use the url method of the Node.js SDK that takes an asset's public ID and returns its delivery URL. Specify the video's public ID and set the resource_type to video.

Step 1 - Add a transformation to trim and resize the video

Jump to this spot in the video  1:10 To trim and resize the video, add a transformation object. Specify a duration, for example, 5 seconds, and crop to width of 250 pixels with an aspect ratio of 3:4. Set the crop parameter to fill so that your video will be cropped to fit the specified dimensions without distortions.

Step 2 - Change the video focal point

Jump to this spot in the video  1:54 To center the face in the video, set the gravity parameter. In this case, we'll set it to north, to focus the video toward the top.

Step 3 - Concatenate another video

Jump to this spot in the video  2:23 To concatenate another video, specify its public ID as an overlay, and use the splice flag to indicate that it should be concatenated, and not overlaid. The concatenated video must be resized to the same dimensions as the base video. Add the duration parameter to trim the concatenated video. The layer_apply flag indicates the end of the overlay transformation.

Step 4 - Add captions

Jump to this spot in the video  3:01 Add an SRT file stored in Cloudinary as an overlay, specifying its public ID. Set the resource_type to subtitles, and end the overlay transformation with the layer apply flag.

Step 5 - Add background music

Jump to this spot in the video  3:16 Add a music clip stored in Cloudinary as an overlay, specifying its public ID. End the overlay transformation with the layer_apply flag.

Step 6 - Add a watermark

Jump to this spot in the video  3:39 Brand your video by overlaying an image saved in Cloudinary as a watermark. Place it in the top right corner by setting the gravity parameter to north_east, with right and top margins of 10 pixels (x:10, y:10). Size the watermark to a width of 40 pixels, and set its opacity to 80%. End the overlay transformation with the layer_apply flag. Here's the finished code:

More information

Jump to this spot in the video  4:44 Check out our Transformation reference for a listing of all the transformations you can apply to your videos. Filter the page to see only the transformations that are relevant to videos using the asset type filter on the top right of the page. See the Node.js SDK documentation, especially the quick start to get up and running in minutes.

Keep learning

Related topics

If you like this, you might also like...

Complex Transformations
Combine transformations to generate a 3D canvas
Named Transformations
Simplify & standardize complex delivery URLs
Optimization Tips
Tips for delivering optimized images


Cloudinary Academy


Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.


✔️ Feedback sent!

Rate this page: