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


Use transition effects when concatenating videos or combining videos with images. This page covers cross fade transitions and the deprecated custom transition workflow. For basic concatenation syntax, see [Video concatenation](video_concatenation).

## Cross fade transitions

You can cross fade between videos or between videos and images, by adding a transition to the `splice` flag. The transition takes the name of a [supported cross fade transition](transformation_reference#syntax_fl_splice) and a duration. Try out each of the transitions using the [interactive demo](#cross_fade_transitions_interactive_demo).

> **TIP**: Make sure you've read the [important notes](video_concatenation#before_you_start) regarding concatenating media.

Cross fading overlaps the assets for the duration of the transition. Therefore, the total video length is less than the sum of the concatenated parts. The duration of the transition that you specify must be less than the length of each of the videos that you're concatenating.

![Explaining cross fade](https://cloudinary-res.cloudinary.com/image/upload/b_white/f_auto/q_auto/docs/cross-fade.png "thumb:c_scale,h_340/dpr_2.0, height:340, popup:true")

In the following example, the living space video cross fades into the kitchen video using a transition called `circleopen` for two seconds (`fl_splice:transition_(name_circleopen;du_2)`):

![Cross fade between living space and kitchen](https://res.cloudinary.com/demo/video/upload/du_8/fl_splice:transition_%28name_circleopen;du_2%29,l_video:docs:kitchen/du_8/fl_layer_apply/docs/livingspace.mp4 "thumb:c_scale,h_225")

```nodejs
cloudinary.video("docs/livingspace", {transformation: [
  {duration: "8"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: "video:docs:kitchen"},
  {duration: "8"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
      )
    )
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
      )
    )
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
      )
    )
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
      )
    )
  );
```

```python
CloudinaryVideo("docs/livingspace").video(transformation=[
  {'duration': "8"},
  {'flags': "splice:transition_(name_circleopen;du_2)", 'overlay': "video:docs:kitchen"},
  {'duration': "8"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Concatenate;

(new VideoTag('docs/livingspace.mp4'))
	->videoEdit(VideoEdit::trim()->duration(8.0))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("docs/kitchen")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_circleopen;du_2)"))
	->videoEdit(VideoEdit::trim()->duration(8.0)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("8").chain()
  .flags("splice:transition_(name_circleopen;du_2)").overlay(new Layer().publicId("video:docs:kitchen")).chain()
  .duration("8").chain()
  .flags("layer_apply")).videoTag("docs/livingspace");
```

```ruby
cl_video_tag("docs/livingspace", transformation: [
  {duration: "8"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: "video:docs:kitchen"},
  {duration: "8"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("8").Chain()
  .Flags("splice:transition_(name_circleopen;du_2)").Overlay(new Layer().PublicId("video:docs:kitchen")).Chain()
  .Duration("8").Chain()
  .Flags("layer_apply")).BuildVideoTag("docs/livingspace")
```

```dart
cloudinary.video('docs/livingspace.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	.videoEdit(VideoEdit.trim().duration('8.0')))
	)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("8").chain()
  .setFlags("splice:transition_(name_circleopen;du_2)").setOverlay("video:docs:kitchen").chain()
  .setDuration("8").chain()
  .setFlags("layer_apply")).generate("docs/livingspace.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("8").chain()
  .flags("splice:transition_(name_circleopen;du_2)").overlay(new Layer().publicId("video:docs:kitchen")).chain()
  .duration("8").chain()
  .flags("layer_apply")).resourceType("video").generate("docs/livingspace.mp4");
```

```flutter
cloudinary.video('docs/livingspace.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	.videoEdit(VideoEdit.trim().duration('8.0')))
	)));
```

```kotlin
cloudinary.video {
	publicId("docs/livingspace.mp4")
	 videoEdit(VideoEdit.trim() { duration(8.0F) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	 videoEdit(VideoEdit.trim() { duration(8.0F) }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.video("docs/livingspace", {transformation: [
  {duration: "8"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: new cloudinary.Layer().publicId("video:docs:kitchen")},
  {duration: "8"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
      )
    )
  );
```

> **NOTE**: In this example, both videos are the same dimensions so there is no need to add a resize transformation to either video.

In this next example, the video cross fades into an image of a house using the `fade` transition for three seconds (`fl_splice:transition_(name_fade;du_3)`):

![Cross fade between video of living space and image of house](https://res.cloudinary.com/demo/video/upload/du_8/c_fill,h_225,w_400/fl_splice:transition_%28name_circleopen;du_2%29,l_video:docs:kitchen/du_8/c_fill,h_225,w_400/fl_layer_apply/fl_splice:transition_%28name_fade;du_3%29,l_docs:house-exterior/du_8/c_fill,h_225,w_400/fl_layer_apply/docs/livingspace.mp4)

```nodejs
cloudinary.video("docs/livingspace", {transformation: [
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: "video:docs:kitchen"},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_fade;du_3)", overlay: "docs:house-exterior"},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { videoSource, imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .resize(fill().width(400).height(225))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/house-exterior").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_fade;du_3)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { videoSource, imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .resize(fill().width(400).height(225))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/house-exterior").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_fade;du_3)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { videoSource, imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .resize(fill().width(400).height(225))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/house-exterior").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_fade;du_3)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { videoSource, imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .resize(fill().width(400).height(225))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/house-exterior").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_fade;du_3)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  );
```

```python
CloudinaryVideo("docs/livingspace").video(transformation=[
  {'duration': "8"},
  {'height': 225, 'width': 400, 'crop': "fill"},
  {'flags': "splice:transition_(name_circleopen;du_2)", 'overlay': "video:docs:kitchen"},
  {'duration': "8"},
  {'height': 225, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"},
  {'flags': "splice:transition_(name_fade;du_3)", 'overlay': "docs:house-exterior"},
  {'duration': "8"},
  {'height': 225, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Concatenate;

(new VideoTag('docs/livingspace.mp4'))
	->videoEdit(VideoEdit::trim()->duration(8.0))
	->resize(Resize::fill()->width(400)
->height(225))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("docs/kitchen")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_circleopen;du_2)"))
	->videoEdit(VideoEdit::trim()->duration(8.0))
	->resize(Resize::fill()->width(400)
->height(225)))
	))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::imageSource("docs/house-exterior")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_fade;du_3)"))
	->videoEdit(VideoEdit::trim()->duration(8.0))
	->resize(Resize::fill()->width(400)
->height(225)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("splice:transition_(name_circleopen;du_2)").overlay(new Layer().publicId("video:docs:kitchen")).chain()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_fade;du_3)").overlay(new Layer().publicId("docs:house-exterior")).chain()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("layer_apply")).videoTag("docs/livingspace");
```

```ruby
cl_video_tag("docs/livingspace", transformation: [
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: "video:docs:kitchen"},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_fade;du_3)", overlay: "docs:house-exterior"},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("8").Chain()
  .Height(225).Width(400).Crop("fill").Chain()
  .Flags("splice:transition_(name_circleopen;du_2)").Overlay(new Layer().PublicId("video:docs:kitchen")).Chain()
  .Duration("8").Chain()
  .Height(225).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice:transition_(name_fade;du_3)").Overlay(new Layer().PublicId("docs:house-exterior")).Chain()
  .Duration("8").Chain()
  .Height(225).Width(400).Crop("fill").Chain()
  .Flags("layer_apply")).BuildVideoTag("docs/livingspace")
```

```dart
cloudinary.video('docs/livingspace.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/house-exterior")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_fade;du_3)"))
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225)))
	)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("8").chain()
  .setHeight(225).setWidth(400).setCrop("fill").chain()
  .setFlags("splice:transition_(name_circleopen;du_2)").setOverlay("video:docs:kitchen").chain()
  .setDuration("8").chain()
  .setHeight(225).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice:transition_(name_fade;du_3)").setOverlay("docs:house-exterior").chain()
  .setDuration("8").chain()
  .setHeight(225).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply")).generate("docs/livingspace.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("splice:transition_(name_circleopen;du_2)").overlay(new Layer().publicId("video:docs:kitchen")).chain()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_fade;du_3)").overlay(new Layer().publicId("docs:house-exterior")).chain()
  .duration("8").chain()
  .height(225).width(400).crop("fill").chain()
  .flags("layer_apply")).resourceType("video").generate("docs/livingspace.mp4");
```

```flutter
cloudinary.video('docs/livingspace.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/house-exterior")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_fade;du_3)"))
	.videoEdit(VideoEdit.trim().duration('8.0'))
	.resize(Resize.fill().width(400)
.height(225)))
	)));
```

```kotlin
cloudinary.video {
	publicId("docs/livingspace.mp4")
	 videoEdit(VideoEdit.trim() { duration(8.0F) })
	 resize(Resize.fill() { width(400)
 height(225) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("docs/kitchen") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_circleopen;du_2)"))
	 videoEdit(VideoEdit.trim() { duration(8.0F) })
	 resize(Resize.fill() { width(400)
 height(225) }) })
	 }))
	 videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/house-exterior") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_fade;du_3)"))
	 videoEdit(VideoEdit.trim() { duration(8.0F) })
	 resize(Resize.fill() { width(400)
 height(225) }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.video("docs/livingspace", {transformation: [
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "splice:transition_(name_circleopen;du_2)", overlay: new cloudinary.Layer().publicId("video:docs:kitchen")},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_fade;du_3)", overlay: new cloudinary.Layer().publicId("docs:house-exterior")},
  {duration: "8"},
  {height: 225, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { videoSource, imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/livingspace.mp4")
  .videoEdit(trim().duration("8.0"))
  .resize(fill().width(400).height(225))
  .videoEdit(
    concatenate(
      videoSource("docs/kitchen").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_circleopen;du_2)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/house-exterior").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_fade;du_3)"))
          .videoEdit(trim().duration("8.0"))
          .resize(fill().width(400).height(225))
      )
    )
  );
```

You can also create a slideshow out of images, using an underlying blank video. The blank video fades into the first image with a default transition of one second:

![Four interior images spliced together with transitions](https://res.cloudinary.com/demo/video/upload/du_1.1/c_fill,h_300,w_400/fl_splice:transition,l_docs:room1/du_6/c_fill,h_300,w_400/fl_layer_apply/fl_splice:transition_%28name_pixelize%29,l_docs:room2/du_6/c_fill,h_300,w_400/fl_layer_apply/fl_splice:transition_%28name_hlslice%29,l_docs:room3/du_6/c_fill,h_300,w_400/fl_layer_apply/fl_splice:transition_%28name_vertopen%29,l_docs:room4/du_6/c_fill,h_300,w_400/fl_layer_apply/docs/empty.mp4)

```nodejs
cloudinary.video("docs/empty", {transformation: [
  {duration: "1.1"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "splice:transition", overlay: "docs:room1"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_pixelize)", overlay: "docs:room2"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_hlslice)", overlay: "docs:room3"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_vertopen)", overlay: "docs:room4"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/empty.mp4")
  .videoEdit(trim().duration(1.1))
  .resize(fill().width(400).height(300))
  .videoEdit(
    concatenate(
      imageSource("docs/room1").transformation(
        new Transformation()
          .addFlag(splice("transition"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room2").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_pixelize)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room3").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_hlslice)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room4").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_vertopen)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/empty.mp4")
  .videoEdit(trim().duration(1.1))
  .resize(fill().width(400).height(300))
  .videoEdit(
    concatenate(
      imageSource("docs/room1").transformation(
        new Transformation()
          .addFlag(splice("transition"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room2").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_pixelize)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room3").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_hlslice)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room4").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_vertopen)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/empty.mp4")
  .videoEdit(trim().duration(1.1))
  .resize(fill().width(400).height(300))
  .videoEdit(
    concatenate(
      imageSource("docs/room1").transformation(
        new Transformation()
          .addFlag(splice("transition"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room2").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_pixelize)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room3").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_hlslice)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room4").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_vertopen)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/empty.mp4")
  .videoEdit(trim().duration(1.1))
  .resize(fill().width(400).height(300))
  .videoEdit(
    concatenate(
      imageSource("docs/room1").transformation(
        new Transformation()
          .addFlag(splice("transition"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room2").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_pixelize)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room3").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_hlslice)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room4").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_vertopen)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  );
```

```python
CloudinaryVideo("docs/empty").video(transformation=[
  {'duration': "1.1"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "splice:transition", 'overlay': "docs:room1"},
  {'duration': "6"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"},
  {'flags': "splice:transition_(name_pixelize)", 'overlay': "docs:room2"},
  {'duration': "6"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"},
  {'flags': "splice:transition_(name_hlslice)", 'overlay': "docs:room3"},
  {'duration': "6"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"},
  {'flags': "splice:transition_(name_vertopen)", 'overlay': "docs:room4"},
  {'duration': "6"},
  {'height': 300, 'width': 400, 'crop': "fill"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Concatenate;

(new VideoTag('docs/empty.mp4'))
	->videoEdit(VideoEdit::trim()->duration(1.1))
	->resize(Resize::fill()->width(400)
->height(300))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::imageSource("docs/room1")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition"))
	->videoEdit(VideoEdit::trim()->duration(6.0))
	->resize(Resize::fill()->width(400)
->height(300)))
	))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::imageSource("docs/room2")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_pixelize)"))
	->videoEdit(VideoEdit::trim()->duration(6.0))
	->resize(Resize::fill()->width(400)
->height(300)))
	))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::imageSource("docs/room3")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_hlslice)"))
	->videoEdit(VideoEdit::trim()->duration(6.0))
	->resize(Resize::fill()->width(400)
->height(300)))
	))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::imageSource("docs/room4")
	->transformation((new Transformation())
	->addFlag(
	Flag::splice("transition_(name_vertopen)"))
	->videoEdit(VideoEdit::trim()->duration(6.0))
	->resize(Resize::fill()->width(400)
->height(300)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("1.1").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("splice:transition").overlay(new Layer().publicId("docs:room1")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_pixelize)").overlay(new Layer().publicId("docs:room2")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_hlslice)").overlay(new Layer().publicId("docs:room3")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_vertopen)").overlay(new Layer().publicId("docs:room4")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply")).videoTag("docs/empty");
```

```ruby
cl_video_tag("docs/empty", transformation: [
  {duration: "1.1"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "splice:transition", overlay: "docs:room1"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_pixelize)", overlay: "docs:room2"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_hlslice)", overlay: "docs:room3"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_vertopen)", overlay: "docs:room4"},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("1.1").Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("splice:transition").Overlay(new Layer().PublicId("docs:room1")).Chain()
  .Duration("6").Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice:transition_(name_pixelize)").Overlay(new Layer().PublicId("docs:room2")).Chain()
  .Duration("6").Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice:transition_(name_hlslice)").Overlay(new Layer().PublicId("docs:room3")).Chain()
  .Duration("6").Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice:transition_(name_vertopen)").Overlay(new Layer().PublicId("docs:room4")).Chain()
  .Duration("6").Chain()
  .Height(300).Width(400).Crop("fill").Chain()
  .Flags("layer_apply")).BuildVideoTag("docs/empty")
```

```dart
cloudinary.video('docs/empty.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration(1.1))
	.resize(Resize.fill().width(400)
.height(300))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room1")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room2")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_pixelize)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room3")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_hlslice)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room4")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_vertopen)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("1.1").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("splice:transition").setOverlay("docs:room1").chain()
  .setDuration("6").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice:transition_(name_pixelize)").setOverlay("docs:room2").chain()
  .setDuration("6").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice:transition_(name_hlslice)").setOverlay("docs:room3").chain()
  .setDuration("6").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice:transition_(name_vertopen)").setOverlay("docs:room4").chain()
  .setDuration("6").chain()
  .setHeight(300).setWidth(400).setCrop("fill").chain()
  .setFlags("layer_apply")).generate("docs/empty.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("1.1").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("splice:transition").overlay(new Layer().publicId("docs:room1")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_pixelize)").overlay(new Layer().publicId("docs:room2")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_hlslice)").overlay(new Layer().publicId("docs:room3")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply").chain()
  .flags("splice:transition_(name_vertopen)").overlay(new Layer().publicId("docs:room4")).chain()
  .duration("6").chain()
  .height(300).width(400).crop("fill").chain()
  .flags("layer_apply")).resourceType("video").generate("docs/empty.mp4");
```

```flutter
cloudinary.video('docs/empty.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration(1.1))
	.resize(Resize.fill().width(400)
.height(300))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room1")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room2")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_pixelize)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room3")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_hlslice)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room4")
	.transformation(new Transformation()
	.addFlag(
	Flag.splice("transition_(name_vertopen)"))
	.videoEdit(VideoEdit.trim().duration('6.0'))
	.resize(Resize.fill().width(400)
.height(300)))
	)));
```

```kotlin
cloudinary.video {
	publicId("docs/empty.mp4")
	 videoEdit(VideoEdit.trim() { duration(1.1F) })
	 resize(Resize.fill() { width(400)
 height(300) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room1") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition"))
	 videoEdit(VideoEdit.trim() { duration(6.0F) })
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 }))
	 videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room2") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_pixelize)"))
	 videoEdit(VideoEdit.trim() { duration(6.0F) })
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 }))
	 videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room3") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_hlslice)"))
	 videoEdit(VideoEdit.trim() { duration(6.0F) })
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 }))
	 videoEdit(VideoEdit.concatenate(
	Concatenate.imageSource("docs/room4") {
	 transformation(Transformation {
	 addFlag(
	Flag.splice("transition_(name_vertopen)"))
	 videoEdit(VideoEdit.trim() { duration(6.0F) })
	 resize(Resize.fill() { width(400)
 height(300) }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.video("docs/empty", {transformation: [
  {duration: "1.1"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "splice:transition", overlay: new cloudinary.Layer().publicId("docs:room1")},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_pixelize)", overlay: new cloudinary.Layer().publicId("docs:room2")},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_hlslice)", overlay: new cloudinary.Layer().publicId("docs:room3")},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"},
  {flags: "splice:transition_(name_vertopen)", overlay: new cloudinary.Layer().publicId("docs:room4")},
  {duration: "6"},
  {height: 300, width: 400, crop: "fill"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fill } from "@cloudinary/url-gen/actions/resize";
import { imageSource } from "@cloudinary/url-gen/qualifiers/concatenate";

new CloudinaryVideo("docs/empty.mp4")
  .videoEdit(trim().duration(1.1))
  .resize(fill().width(400).height(300))
  .videoEdit(
    concatenate(
      imageSource("docs/room1").transformation(
        new Transformation()
          .addFlag(splice("transition"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room2").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_pixelize)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room3").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_hlslice)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  )
  .videoEdit(
    concatenate(
      imageSource("docs/room4").transformation(
        new Transformation()
          .addFlag(splice("transition_(name_vertopen)"))
          .videoEdit(trim().duration("6.0"))
          .resize(fill().width(400).height(300))
      )
    )
  );
```

### Cross fade transitions interactive demo

Use this interactive demo to see how the different transitions look.

Choose a cross fade transition, then click the button to generate the new video.

Transition:

  fade
  wipeleft
  wiperight
  wipeup
  wipedown
  slideleft
  slideright
  slideup
  slidedown
  circlecrop
  rectcrop
  distance
  fadeblack
  fadewhite
  radial
  smoothleft
  smoothright
  smoothup
  smoothdown
  circleopen
  circleclose
  vertopen
  vertclose
  horzopen
  horzclose
  dissolve
  pixelize
  diagtl
  diagtr
  diagbl
  diagbr
  hlslice
  hrslice
  vuslice
  vdslice
  hblur
  fadegrays
  wipetl
  wipetr
  wipebl
  wipebr
  squeezeh
  squeezev

Generate video

 https://res.cloudinary.com/demo/video/upload/du_4/fl_splice:transition_(name_fade;du_2),l_video:docs:kitchen/du_4/fl_layer_apply/docs/livingspace.mp4

**Try it out on other videos**: [Splicing and transition](https://console.cloudinary.com/app/image/home/splicing-and-transition?media=video&back_url=https%3A%2F%2Fconsole.cloudinary.com%2Fvideo%2Fhome&sample=me%2Ffashion-1.mp4&effectDuration=2&transition=fade).

## Custom transitions

> **INFO**: Cloudinary has deprecated the custom transitions functionality and replaced it with [cross fade transitions](#cross_fade_transitions).

Cloudinary supports the concatenation of videos with a custom transition by including a transition video as an additional layer and specifying the `transition` effect (`e_transition` in URLs).

> **NOTE**: Don't use the `splice` flag when concatenating with a custom transition.

To add a custom transition:

1. Add your base video as usual.
1. Add the second video using the overlay video parameter (`l_video`: in URLs), ensuring height and width are the same as the base video.
1. Specify the transition video as follows:
   1. Add a [luma matte](#luma_matte) transition video using the overlay video parameter (`l_video`: in URLs).
   1. Specify the `transition` effect to use this video overlay as a transition between the base and second video.
   1. Add the `layer_apply` flag (`fl_layer_apply`) to close the transition layer.
1. Add a second `layer_apply` flag to close the second video layer. For more information, see the documentation on [layer_apply](transformation_reference#fl_layer_apply).

Here's an example showing the `walking` video transitioning to the `sunglasses` video:

![walking.mp4 transitioning to sunglasses.mp4](https://res.cloudinary.com/demo/video/upload/du_5.0/c_fit,h_200,w_300/l_video:sunglasses/c_fit,h_200,w_300/du_5.0/e_transition,l_video:transition1/fl_layer_apply/fl_layer_apply/walking.mp4)

```nodejs
cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
```

```python
CloudinaryVideo("walking").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'overlay': "video:sunglasses"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Concatenate;
use Cloudinary\Transformation\Transition;

(new VideoTag('walking.mp4'))
	->videoEdit(VideoEdit::trim()->duration(5.0))
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("sunglasses")
	->transformation((new Transformation())
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::trim()->duration(5.0)))
	)
	->transition(
	Transition::videoSource("transition1"))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).videoTag("walking");
```

```ruby
cl_video_tag("walking", transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Overlay(new Layer().PublicId("video:sunglasses")).Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Duration("5.0").Chain()
  .Effect("transition").Overlay(new Layer().PublicId("video:transition1")).Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply")).BuildVideoTag("walking")
```

```dart
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1"))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setOverlay("video:sunglasses").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition1").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply")).generate("walking.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).resourceType("video").generate("walking.mp4");
```

```flutter
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1"))
	));
```

```kotlin
cloudinary.video {
	publicId("walking.mp4")
	 videoEdit(VideoEdit.trim() { duration(5.0F) })
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses") {
	 transformation(Transformation {
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.trim() { duration(5.0F) }) })
	 }) {
	 transition(
	Transition.videoSource("transition1"))
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: new cloudinary.Layer().publicId("video:sunglasses")},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
```

### Transition videos with luma matte
A luma matte transition video is a grayscale video that uses lightness values to indicate the transparency (alpha channel) of two transitioning videos. For example, the base video will be transparent in the completely white areas and opaque in the completely black areas of the matte. The second video will then be visible in the areas of transparency of the base video; anywhere between will show both videos with the opacity of each determined by the lightness values.

You need to upload your own luma matte transition videos to your Cloudinary product environment. The examples in this section use luma matte videos from the Cloudinary `demo` product environment:

![Example of a luma matte transition](https://res.cloudinary.com/demo/video/upload/c_scale,w_300/transition1.mp4)

```nodejs
cloudinary.video("transition1", {width: 300, crop: "scale"})
```

```react
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
```

```vue
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
```

```angular
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
```

```js
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
```

```python
CloudinaryVideo("transition1").video(width=300, crop="scale")
```

```php
use Cloudinary\Transformation\Resize;

(new VideoTag('transition1.mp4'))
	->resize(Resize::scale()->width(300));
```

```java
cloudinary.url().transformation(new Transformation().width(300).crop("scale")).videoTag("transition1");
```

```ruby
cl_video_tag("transition1", width: 300, crop: "scale")
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Crop("scale")).BuildVideoTag("transition1")
```

```dart
cloudinary.video('transition1.mp4').transformation(Transformation()
	.resize(Resize.scale().width(300)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(300).setCrop("scale")).generate("transition1.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().width(300).crop("scale")).resourceType("video").generate("transition1.mp4");
```

```flutter
cloudinary.video('transition1.mp4').transformation(Transformation()
	.resize(Resize.scale().width(300)));
```

```kotlin
cloudinary.video {
	publicId("transition1.mp4")
	 resize(Resize.scale() { width(300) }) 
}.generate()
```

```jquery
$.cloudinary.video("transition1", {width: 300, crop: "scale"})
```

```react_native
import { scale } from "@cloudinary/url-gen/actions/resize";

new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
```

The transition you see above starts black and adds increasing areas of white. When applied as a transition video, the base video will display first and the second video will take up increasing space until none of the base video is visible.

As the luma matte is a video itself, you can also add transformations in the same way you would with any other uploaded video. For example, you can use the `accelerate` effect (`e_accelerate`) to adjust the speed of the transition or flip the transition using the `angle` parameter (`a` in URLs). You'll need to be careful when applying transformations to the matte as this could cause issues with the transition, particularly if you change the aspect ratio. Here's the same video as above with the transition slowed to 5 seconds and flipped 180 degrees:

![walking.mp4 transitioning to sunglasses.mp4 with longer rotated transition](https://res.cloudinary.com/demo/video/upload/du_5.0/c_fit,h_200,w_300/l_video:sunglasses/c_fit,h_200,w_300/du_5.0/e_transition,l_video:transition1/a_180/e_accelerate:5s/fl_layer_apply/fl_layer_apply/walking.mp4)

```nodejs
cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { accelerate } from "@cloudinary/url-gen/actions/effect";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new Transformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { accelerate } from "@cloudinary/url-gen/actions/effect";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new Transformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { accelerate } from "@cloudinary/url-gen/actions/effect";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new Transformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { accelerate } from "@cloudinary/url-gen/actions/effect";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new Transformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
```

```python
CloudinaryVideo("walking").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'overlay': "video:sunglasses"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'angle': 180},
  {'effect': "accelerate:5s"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Rotate;
use Cloudinary\Transformation\Effect;
use Cloudinary\Transformation\Concatenate;
use Cloudinary\Transformation\Transition;

(new VideoTag('walking.mp4'))
	->videoEdit(VideoEdit::trim()->duration(5.0))
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("sunglasses")
	->transformation((new Transformation())
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::trim()->duration(5.0)))
	)
	->transition(
	Transition::videoSource("transition1")
	->transformation((new Transformation())
	->rotate(Rotate::byAngle(180))
	->effect(Effect::accelerate()->rate("5s")))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .angle(180).chain()
  .effect("accelerate:5s").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).videoTag("walking");
```

```ruby
cl_video_tag("walking", transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Overlay(new Layer().PublicId("video:sunglasses")).Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Duration("5.0").Chain()
  .Effect("transition").Overlay(new Layer().PublicId("video:transition1")).Chain()
  .Angle(180).Chain()
  .Effect("accelerate:5s").Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply")).BuildVideoTag("walking")
```

```dart
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1")
	.transformation(new Transformation()
	.rotate(Rotate.byAngle(180))
	.effect(Effect.accelerate().rate("5s")))
	)
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setOverlay("video:sunglasses").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition1").chain()
  .setAngle(180).chain()
  .setEffect("accelerate:5s").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply")).generate("walking.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .angle(180).chain()
  .effect("accelerate:5s").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).resourceType("video").generate("walking.mp4");
```

```flutter
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1")
	.transformation(new Transformation()
	.rotate(Rotate.byAngle(180))
	.effect(Effect.accelerate().rate("5s")))
	)
	));
```

```kotlin
cloudinary.video {
	publicId("walking.mp4")
	 videoEdit(VideoEdit.trim() { duration(5.0F) })
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses") {
	 transformation(Transformation {
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.trim() { duration(5.0F) }) })
	 }) {
	 transition(
	Transition.videoSource("transition1") {
	 transformation(Transformation {
	 rotate(Rotate.byAngle(180))
	 effect(Effect.accelerate() { rate("5s") }) })
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: new cloudinary.Layer().publicId("video:sunglasses")},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { byAngle } from "@cloudinary/url-gen/actions/rotate";
import { accelerate } from "@cloudinary/url-gen/actions/effect";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new Transformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
```

You can concatenate multiple videos with (and without) transitions by chaining additional videos and transition overlays. Here's an example of two transitions followed by a standard `fl_splice` concatenation (with no transition):

![walking.mp4 transitioning to sunglasses.mp4 transitioning to dresses.mp4 with sunglasses.mp4 concatenated to the end](https://res.cloudinary.com/demo/video/upload/du_5.0/c_fit,h_200,w_300/l_video:sunglasses/c_fit,h_200,w_300/du_5.0/e_transition,l_video:transition1/fl_layer_apply/fl_layer_apply/l_video:dresses/c_fit,h_200,w_300/du_5.0/e_transition,l_video:transition2/fl_layer_apply/fl_layer_apply/fl_splice,l_video:sunglasses/c_fit,h_200,w_300/du_5.0/fl_layer_apply/walking.mp4)

```nodejs
cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: "video:dresses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition2"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ]})
```

```react
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("dresses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
```

```vue
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("dresses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
```

```angular
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("dresses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
```

```js
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("dresses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
```

```python
CloudinaryVideo("walking").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'overlay': "video:sunglasses"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"},
  {'overlay': "video:dresses"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition2"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"},
  {'flags': "splice", 'overlay': "video:sunglasses"},
  {'height': 200, 'width': 300, 'crop': "fit"},
  {'duration': "5.0"},
  {'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\VideoEdit;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Concatenate;
use Cloudinary\Transformation\Transition;

(new VideoTag('walking.mp4'))
	->videoEdit(VideoEdit::trim()->duration(5.0))
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("sunglasses")
	->transformation((new Transformation())
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::trim()->duration(5.0)))
	)
	->transition(
	Transition::videoSource("transition1"))
	)
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("dresses")
	->transformation((new Transformation())
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::trim()->duration(5.0)))
	)
	->transition(
	Transition::videoSource("transition2"))
	)
	->videoEdit(VideoEdit::concatenate(
	Concatenate::videoSource("sunglasses")
	->transformation((new Transformation())
	->resize(Resize::fit()->width(300)
->height(200))
	->videoEdit(VideoEdit::trim()->duration(5.0)))
	));
```

```java
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:dresses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition2")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").chain()
  .flags("splice").overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .flags("layer_apply")).videoTag("walking");
```

```ruby
cl_video_tag("walking", transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: "video:dresses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition2"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: "video:sunglasses"},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Overlay(new Layer().PublicId("video:sunglasses")).Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Duration("5.0").Chain()
  .Effect("transition").Overlay(new Layer().PublicId("video:transition1")).Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("video:dresses")).Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Duration("5.0").Chain()
  .Effect("transition").Overlay(new Layer().PublicId("video:transition2")).Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply").Chain()
  .Flags("splice").Overlay(new Layer().PublicId("video:sunglasses")).Chain()
  .Height(200).Width(300).Crop("fit").Chain()
  .Duration("5.0").Chain()
  .Flags("layer_apply")).BuildVideoTag("walking")
```

```dart
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1"))
	)
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("dresses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition2"))
	)
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setOverlay("video:sunglasses").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition1").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("video:dresses").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition2").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice").setOverlay("video:sunglasses").chain()
  .setHeight(200).setWidth(300).setCrop("fit").chain()
  .setDuration("5.0").chain()
  .setFlags("layer_apply")).generate("walking.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("fit").chain()
  .overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:dresses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition2")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").chain()
  .flags("splice").overlay(new Layer().publicId("video:sunglasses")).chain()
  .height(200).width(300).crop("fit").chain()
  .duration("5.0").chain()
  .flags("layer_apply")).resourceType("video").generate("walking.mp4");
```

```flutter
cloudinary.video('walking.mp4').transformation(Transformation()
	.videoEdit(VideoEdit.trim().duration('5.0'))
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition1"))
	)
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("dresses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)
	.transition(
	Transition.videoSource("transition2"))
	)
	.videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses")
	.transformation(new Transformation()
	.resize(Resize.fit().width(300)
.height(200))
	.videoEdit(VideoEdit.trim().duration('5.0')))
	)));
```

```kotlin
cloudinary.video {
	publicId("walking.mp4")
	 videoEdit(VideoEdit.trim() { duration(5.0F) })
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses") {
	 transformation(Transformation {
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.trim() { duration(5.0F) }) })
	 }) {
	 transition(
	Transition.videoSource("transition1"))
	 })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("dresses") {
	 transformation(Transformation {
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.trim() { duration(5.0F) }) })
	 }) {
	 transition(
	Transition.videoSource("transition2"))
	 })
	 videoEdit(VideoEdit.concatenate(
	Concatenate.videoSource("sunglasses") {
	 transformation(Transformation {
	 resize(Resize.fit() { width(300)
 height(200) })
	 videoEdit(VideoEdit.trim() { duration(5.0F) }) })
	 })) 
}.generate()
```

```jquery
$.cloudinary.video("walking", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "fit"},
  {overlay: new cloudinary.Layer().publicId("video:sunglasses")},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:dresses")},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition2")},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:sunglasses")},
  {height: 200, width: 300, crop: "fit"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ]})
```

```react_native
import { trim, concatenate } from "@cloudinary/url-gen/actions/videoEdit";
import { fit } from "@cloudinary/url-gen/actions/resize";
import { videoSource } from "@cloudinary/url-gen/qualifiers/concatenate";
import { videoSource } from "@cloudinary/url-gen/qualifiers/transition";

new CloudinaryVideo("walking.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(fit().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("dresses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("sunglasses").transformation(
        new Transformation()
          .resize(fit().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
```

> **NOTE**: Total video duration equals the combined duration of all videos minus the duration of the transitions (as two videos are playing during the transition).

## Related topics

* [Video trimming](video_trimming)
* [Video concatenation](video_concatenation)
* [Video resizing and cropping](video_resizing_and_cropping)
* [Video layers](video_layers)