> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Video transformations (video tutorial)

## Overview

This tutorial shows how to build an e-commerce video using [Node.js](node_integration) 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!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=0 :sec=14 :player=cld} | 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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=0 :sec=25 :player=cld} | 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`. |

```nodejs
(async () => {
let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video"
    }
})();
```

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

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=1 :sec=10 :player=cld} | 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. |

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", width: 250 },
        { duration: "5"}
      ],
    });
})();
```
 
### Step 2 - Change the video focal point  

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=1 :sec=54 :player=cld} | 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. |

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { duration: "5"},
      ],
    });
})();
```

### Step 3 - Concatenate another video

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=2 :sec=23 :player=cld} | 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.

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { duration: "5"},
        { duration: "5", flags: "splice", 
            overlay: "video:docs:video_features_tutorial:makeup"},
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { flags: "layer_apply" },
    });
})();
```

### Step 4 - Add captions

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=3 :sec=01 :player=cld} | 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. |

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { duration: "5"},
        { duration: "5", flags: "splice", 
            overlay: "video:docs:video_features_tutorial:makeup"},
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { overlay: {resource_type: "subtitles", 
            public_id: "docs/video_features_tutorial/captions.srt"}},
        { flag: "layer_apply" }
      ],
    });
})();
```

### Step 5 - Add background music

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=3 :sec=16 :player=cld} | Add a music clip stored in Cloudinary as an overlay, specifying its public ID. End the overlay transformation with the `layer_apply` flag. |

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { duration: "5"},
        { duration: "5", flags: "splice", 
            overlay: "video:docs:video_features_tutorial:makeup"},
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { flags: "layer_apply" },
        { overlay: "video:docs:video_features_tutorial:romeo_and_juliet" },
				{ flags: "layer_apply"},
        { overlay: {resource_type: "subtitles", 
            public_id: "docs/video_features_tutorial/captions.srt"}},
        { flag: "layer_apply" }
      ],
    });
})();
```

### Step 6 - Add a watermark

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=3 :sec=39 :player=cld} | 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: |

```nodejs
(async () => {
  let videoURL = cloudinary.url("docs/video_features_tutorial/hair", {
      resource_type: "video",
      transformation: [
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { duration: "5"},
        { duration: "5", flags: "splice", 
            overlay: "video:docs:video_features_tutorial:makeup"},
        { aspect_ratio: "3:4", crop: "fill", gravity: "north", width: 250 },
        { flags: "layer_apply" },
        { overlay: "video:docs:video_features_tutorial:romeo_and_juliet" },
				{ flags: "layer_apply"},
        { overlay: "cloudinary_icon"},
        { width: 40, x:10, y:10 },
				{ opacity: 80 },
        { flags: "layer_apply", gravity: "north_east"},
        { overlay: {resource_type: "subtitles", 
            public_id: "docs/video_features_tutorial/captions.srt"}},
        { flag: "layer_apply" }
      ],
    });
})();
```

### More information

{table:class=tutorial-bullets}|  |
| --- | ---|
| {videotime:id=videoTransformations :min=4 :sec=44 :player=cld} | Check out our [Transformation reference](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](node_integration), especially the [quick start](node_quickstart) to get up and running in minutes. |

## Keep learning

> **READING**: - Find out how to optimize your videos using [adaptive bitrate streaming](adaptive_bitrate_streaming).
- Get an in depth description of the [transformations](video_manipulation_and_delivery#landingpage) you can apply to videos, including many tips and examples.
- Review our [transformation reference](transformation_reference) to see all of the possibilities for transforming videos and images.

#### 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 
  

> **TIP**: Have a social media use case? Check out the [Social Media Videos guide](social_media_videos). 

 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.