Video transformations

Cloudinary is a cloud-based service that provides an end-to-end media management solution for images and videos, including upload, storage, administration, transformation, optimization and delivery.

Using Cloudinary's comprehensive API and easy to use transformation URLs, uploaded videos can be automatically transcoded to all relevant formats suitable for web viewing, optimized for web browsers and mobile devices, and normalized and transformed in real time to fit your graphic design. The videos can be easily embedded in your website using HTML5 video tags (or Flash) and then streamed to your users via a fast CDN. Get the most out of all the video functionality described on this page by embedding your videos using Cloudinary's video player.

The Transformation URL API Reference details all transformation parameters available for both images and videos. Icons indicate which parameters are supported for each asset type.

Note
Your account's pricing plan is in part dependent on the total number of transformation operations performed during a billing cycle. These are primarily counted when Cloudinary generates a new 'derived resource' from an asset based on a transformation URL. For complete details, see How are transformations counted?.

Tip
You can also create your transformations using the Transformation Editor, or take one of our Cookbook recipes as a starting point. The editor generates the URL and SDK code for the transformation you define so that you can copy it in the language you require.

On-the-fly video encoding and delivery

You deliver video using Cloudinary HTTP or HTTPS URLs. You can add transformations to any Cloudinary URL and deliver your video, encoded to the specified format, on-the-fly. Multiple users can then stream the video even while it is being encoded and delivered via CDN. You can also deliver videos that were encoded in advance with eager or explicit transformations. Furthermore Cloudinary supports HTTP progressive download for media players capable of progressive download playback.

Video URL structure

A default Cloudinary video delivery URL has the following structure:

https://res.cloudinary.com/<cloud_name>/video/<delivery_type>/<transformations>/<version>/<public_id>.<format>

For example, here's how you would deliver a video from Cloudinary’s demo account with a public ID of dog in mp4 format:

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4");
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >

</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >

</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4") 
}.generate()

Manipulation (transformation) instructions are added in the delivery URL before the public ID. The video delivery URL with transformation parameters takes the following structure:

https://res.cloudinary.com/<cloud name>/video/upload/<manipulation parameters>/<public ID>.<video format file extension>

An example of a URL with video transformation, where dog video is cropped to a width of 300 pixels and a height of 200 pixels, and encoded to mp4 format:

Ruby:
Copy to clipboard
cl_video_tag("dog", :height=>200, :width=>300, :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::crop()->width(300)
->height(200));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("height"=>200, "width"=>300, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(height=200, width=300, crop="crop")
Node.js:
Copy to clipboard
cloudinary.video("dog", {height: 200, width: 300, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(200).width(300).crop("crop")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(crop().width(300).height(200));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {height: 200, width: 300, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {height: 200, width: 300, crop: "crop"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="200" width="300" crop="crop" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="200" width="300" crop="crop" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="200" width="300" crop="crop">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(300).Crop("crop")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setWidth(300).setCrop("crop")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(200).width(300).crop("crop")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.crop() { width(300)
 height(200) }) 
}.generate()

Notes

  • For details about other potential elements of the delivery URL, see Delivering media assets using dynamic URLs
  • You can deliver the video in other supported video formats by simply changing the video format file extension. For details, see Transcoding video to other formats.
  • You can append an SEO-friendly suffix to your URL by replacing the video/upload element of the URL with /videos and then appending the desired suffix with a slash (/) after the public ID. For example, if you have an instructional cooking video with a random public ID like: abc1def2, you can deliver your video as:
    https://res.cloudinary.com/<cloud name>/videos/abc1def2/my_cooking_video.mp4.
    For more details, see Dynamic SEO suffixes.
  • For customers with a Custom Domain Name (CNAME - available for Cloudinary's Advanced plan and above), the video delivery URL becomes: https://<custom domain name>/video/upload/<public ID>.<video format file extension>

Embedding videos in web pages

Cloudinary's video player is a JavaScript-based HTML5 video player bundled with many valuable customization and integration capabilities. If you use this video player to embed your videos, you'll define the source video or the playlist for your player as part of that process, and the video tags with all relevant video formats and other relevant settings are automatically generated. For details, see Video Player.

The easiest way to embed videos in your page without the Cloudinary video player is by using the video tag helper method available in the Cloudinary SDKs (e.g. cl_video_tag in Ruby on Rails). This method automatically generates an HTML5 video tag including the video source URLs of all relevant formats supported by web browsers (webm, mp4 and ogv), as well as a poster thumbnail image. The browser then automatically selects the video format it supports, while the video files are created dynamically and immediately streamed when first accessed by your users.

You can optionally control the generation of the HTML5 video tag and specify transformation parameters to transform the video to match your graphic design. The video tag helper method uses the following structure:

Copy to clipboard
cl_video_tag(public_id, options = {})

public_id: (required) the unique identifier of the uploaded video.

Where possible options are:

  • source_types: an ordered array of the video source types to include in the HTML5 tag, where the type is mapped to the mime type. Default: ['webm', 'mp4', 'ogv']
  • transformation params: the transformation(s) to perform on the video, such as cropping, resizing, etc (see the Transformation URL API Reference for more details on possible parameters and values)
  • source_transformation: to override the default transformation instructions for each specific video format. The source_type is mapped to a transformation struct. e.g., { mp4: { quality: 70}}
  • poster: a URI to an image to be shown while the video is downloading or until the user hits the play button. The URI can be one of the following:
    • The URL to an image.
    • A struct including the transformations to apply to the default image (you can include the public_id of an uploaded image to use instead of the default image).
    • Set to nil or false to use no poster.
    • Default: the middle frame of the source video in jpg format.
  • fallback_content: an HTML string to display in the case that the browser does not support any of the video formats included.
  • Any attribute of the HTML5 video tag. e.g., autoplay, controls, height, loop, muted, preload (see w3schools for details on HTML5 attributes).
    Note
    autoplay behaves differently on different browsers and devices. See the relevant browser documentation for more information.
  • version: the asset version that is added to the delivery URL as explained in Asset versions.
  • Any Configuration parameters. Configuration parameters that you specify in the video tag override any that you have set globally.

Example 1: Simply creating an HTML5 video tag for the uploaded mp4 video named dog:

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP (cloudinary_php v2.x):
Copy to clipboard
VideoTag::fromParams("dog");
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog");
Python:
Copy to clipboard
cloudinary.CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
<cl:video src="dog"/>

Generates the following HTML5 video tag:

Copy to clipboard
<video poster="https://res.cloudinary.com/demo/video/upload/dog.jpg">
  <source src="https://res.cloudinary.com/demo/video/upload/dog.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/demo/video/upload/dog.mp4" type="video/mp4"/>
  <source src="https://res.cloudinary.com/demo/video/upload/dog.ogv" type="video/ogg"/>
</video>

Example 2: Creating an HTML5 video tag for the uploaded mp4 video named dog, where the video is resized to a width of 300 pixels, a height of 300 pixels, padded with a blue background to fill the new dimensions, given a fallback string in the case that the video tag is not supported, specified that controls should be displayed and that the file should not be preloaded:

Ruby:
Copy to clipboard
cl_video_tag("dog", :width => 300, :height => 300, 
  :crop => :pad, :background => "blue", 
  :preload => "none", :controls => true,
  :fallback_content => "Your browser does not support HTML5 video tags" )
PHP (cloudinary_php v2.x):
Copy to clipboard
VideoTag::fromParams("dog", 
  ["width" => 300, "height" => 300, 
    "crop" => "pad", "background" => "blue", 
    "preload" => "none", "controls" => true,
    "fallback_content" => "Your browser does not support HTML5 video tags"]);
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", 
  ["width" => 300, "height" => 300, 
    "crop" => "pad", "background" => "blue", 
    "preload" => "none", "controls" => true,
    "fallback_content" => "Your browser does not support HTML5 video tags"]);
Python:
Copy to clipboard
cloudinary.CloudinaryVideo("dog").video( 
  width = 300, height = 300, 
  crop = "pad", background = "blue", 
  preload = "none", controls = True,
  fallback_content = "Your browser does not support HTML5 video tags")
Node.js:
Copy to clipboard
cloudinary.video("dog" { width: 300, height: 300, 
  crop: "pad", background: "blue", 
  preload: "none", controls: true,
  fallback_content: "Your browser does not support HTML5 video tags" })
Java:
Copy to clipboard
<cl:video src="dog" width = "300", height = "300", 
  crop = "pad", background = "blue", 
  preload = "none", controls = "true",
  fallback_content = "Your browser does not support HTML5 video tags"/>

Generates the following HTML5 video tag:

Copy to clipboard
<video poster="https://res.cloudinary.com/demo/video/upload/dog.jpg" preload="none" controls>
  <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.mp4" type="video/mp4"/>
  <source src="https://res.cloudinary.com/demo/video/upload/b_blue,c_pad,h_300,w_300/dog.ogv" type="video/ogg"/>
   Your browser does not support HTML5 video tags
</video>

Example 3: Creating an HTML5 video tag for the uploaded mp4 video named dog, where the video is cropped to a width of 200 pixels and a height of 150 pixels, given a fallback string in the case that the video tag is not supported, not to use a poster image and that the file should autoplay in a loop:

Ruby:
Copy to clipboard
cl_video_tag("dog", :width => 200, :height => 150, :crop => :crop,  
  :loop => true, :autoplay => true, :poster => false,
  :fallback_content => "Your browser does not support HTML5 video tags" )
PHP (cloudinary_php v2.x):
Copy to clipboard
VideoTag::fromParams("dog", 
  ["width" => 200, "height" => 150, 
    "crop" => "crop", "loop" => true, 
    "autoplay" => true, "poster" => false,
    "fallback_content" => "Your browser does not support HTML5 video tags"]);
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", 
  ["width" => 200, "height" => 150, 
    "crop" => "crop", "loop" => true, 
    "autoplay" => true, "poster" => false,
    "fallback_content" => "Your browser does not support HTML5 video tags"]);
Python:
Copy to clipboard
cloudinary.CloudinaryVideo("dog").video( 
  width = 200, height = 150, 
  crop = "crop", loop = True, 
  autoplay = True, poster = False,
  fallback_content = "Your browser does not support HTML5 video tags")
Node.js:
Copy to clipboard
cloudinary.video("dog" { width: 200, height: 150, 
  crop: "crop", loop: true, 
  autoplay: true, poster: false,
  fallback_content: "Your browser does not support HTML5 video tags" })
Java:
Copy to clipboard
<cl:video src="dog" width = "200", height = "150", 
  crop = "crop", loop = "true", 
  autoplay = "true", poster = "false",
  fallback_content = "Your browser does not support HTML5 video tags"/>

Generates the following HTML5 video tag:

Copy to clipboard
<video loop autoplay>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.mp4" type="video/mp4"/>
  <source src="https://res.cloudinary.com/demo/video/upload/c_crop,h_150,w_200/dog.ogv" type="video/ogg"/>
   Your browser does not support HTML5 video tags
</video>

Tip
In general, when using an SDK, you will probably take advantage of the SDK parameter names for improved readability and maintenance of your code. However, you can also optionally pass a raw transformation parameter, whose value is a literal URL transformation definition. Note that the string you pass as the raw transformation value will be appended as is (with no processing or validation) to the end of any other transformation parameters passed in the same component of the transformation chain.

For example:

Ruby:
Copy to clipboard
cl_video_tag("dog", 
  :transformation=>[{:raw_transformation=> "c_pad,w_400"}])
PHP:
Copy to clipboard
cl_video_tag("dog", 
  ["raw_transformation" => "c_pad,w_400"]);
Python:
Copy to clipboard
CloudinaryVideo("dog").video(
  transformation=[{"raw_transformation":"c_pad,w_400"}])
Node.js:
Copy to clipboard
cloudinary.video("dog", { transformation: { raw_transformation: "c_pad,w_400" }})
Java:
Copy to clipboard
<cl:video src="dog" raw_transformation="c_pad,w_400"/>

Transcoding video to other formats

Videos (and audio files) can be uploaded to Cloudinary in various formats (upload formats), and you can easily transcode these videos to other formats for displaying in your web site or application (delivery formats). Examples of situations where you might want to change the delivered video format:

  • Delivering a video where the original format is not supported for delivery by the browser. For example, you could deliver a 3PG (.3pg) video as an MPEG-4 (.mp4).
  • Delivering WebM if your users are on a Chrome browser or on a mobile app you control.

Transcoding the video to another format is done by simply specifying the new format as the file extension of the URL (client libraries can also use the format parameter to specify the new format). Furthermore, video files can be converted to audio files by stipulating a supported audio format.

For example, transcoding the format of the uploaded mp4 video named dog to WebM format by changing the file extension to .webm:

As a URL:

Via our SDKs:

Ruby:
Copy to clipboard
cl_video_tag("dog.webm")
PHP (cloudinary_php v2.x):
Copy to clipboard
VideoTag::fromParams("dog.webm")
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog.webm")
Python:
Copy to clipboard
CloudinaryVideo("dog.webm").video()
Node.js:
Copy to clipboard
cloudinary.video("dog.webm")
Java:
Copy to clipboard
script
cloudinary.videoTag('dog.webm').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog.webm")
React:
Copy to clipboard
<Video publicId="dog.webm" >

</Video>
Angular:
Copy to clipboard
<cl-video public-id="dog.webm" >

</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("dog.webm")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("dog.webm")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("dog.webm");

Another way to transcode the format of an uploaded video is to use the format parameter (f for URLs). For example, transcoding the uploaded mp4 video named dog to WebM with a parameter:

Ruby:
Copy to clipboard
cl_video_tag("dog", :fetch_format=>"webm")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->delivery(Delivery::format(
  Format::videoWebm()));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("fetch_format"=>"webm"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(fetch_format="webm")
Node.js:
Copy to clipboard
cloudinary.video("dog", {fetch_format: "webm"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().fetchFormat("webm")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").delivery(format(videoWebm()));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {fetchFormat: "webm"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {fetch_format: "webm"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation fetchFormat="webm" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation fetch-format="webm" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation fetch-format="webm">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().FetchFormat("webm")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setFetchFormat("webm")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().fetchFormat("webm")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   delivery(Delivery.format(
  Format.videoWebm())) 
}.generate()

Supported video formats

The table below summarizes the supported video formats. See also supported audio formats.

Notes

  • If a format is only supported for upload, then the delivery URL enables a user to download the original file in its original format, but you cannot apply transformation parameters. If you want to apply transformations, you can transcode the video to a different format for delivery.
  • For adaptive streaming manifest files (m3u8 and mpd), only those generated using Cloudinary can be used for delivery. See Adaptive Bitrate streaming for more information.

Format Extensions Supported for Upload Supported for Delivery Default Codec
3G2 3g2 Yes
3GP (3rd Generation Partnership) 3gp Yes
AVI (Audio Video Interleave) avi Yes
FLV (Flash Video) flv Yes Yes
HLS adaptive streaming m3u8 Yes (as raw file only) Yes Defined by streaming profile
MPEG-2 Transport Stream ts, m2ts, mts Yes Yes Defined by streaming profile
MOV mov Yes Yes h264
MKV (Matroska Multimedia Container) mkv Yes Yes
MP4 mp4 Yes Yes h264
MPEG-2 mpeg Yes
MPEG-DASH adaptive streaming mpd Yes (as raw file only) Yes Defined by streaming profile
MXF (Material eXchange Format) mxf Yes
OGV (Ogg Video) ogv Yes Yes
WebM webm Yes Yes VP9
WMV (Windows Media Video) wmv Yes

Note
The default codec for WebM is VP9. For older accounts the default is VP8, submit a support request to change this default.

See also: Supported audio formats

Automatic format selection (f_auto)

Automatic format selection delivers the best video format according to the browser used by each of your visitors. For more information on how to optimize delivery of your videos using automatic format selection, see the video optimization guide.

Resizing and cropping videos

You can resize and crop videos in order to match the graphic design of your web site or mobile app. Whether videos are uploaded in your server-side code or by your users, the originals are stored in the cloud. You can then dynamically create multiple resized, cropped and transformed videos on-the-fly and deliver them via dynamic URLs or use code to either add video tags or build the URLs.

Change the size of a video with the width and height parameters (w and h in URLs). You can resize the video by using both the width and height parameters or with only one of them (the other dimension is automatically updated to maintain the aspect ratio).

  • Using an integer value sets the new dimension to that number in pixels. For example, c_scale,w_150 sets the width to exactly 150 pixels.
  • Using a decimal value sets the new dimension as a multiple of the original dimension. For example, c_scale,w_0.5 sets the width to half the original width.

Examples of resizing the uploaded mp4 video named dog:

  1. Resizing to a width of 150 pixels and a height of 100 pixels:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :height=>100, :width=>150, :crop=>"scale")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::scale()->width(150)
    ->height(100));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("height"=>100, "width"=>150, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(height=100, width=150, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {height: 100, width: 150, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(100).width(150).crop("scale")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").resize(scale().width(150).height(100));
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {height: 100, width: 150, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {height: 100, width: 150, crop: "scale"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation height="100" width="150" crop="scale" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation height="100" width="150" crop="scale" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation height="100" width="150" crop="scale">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(100).Width(150).Crop("scale")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(100).setWidth(150).setCrop("scale")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(100).width(150).crop("scale")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       resize(Resize.scale() { width(150)
     height(100) }) 
    }.generate()

  2. Resizing the width to half the original width, maintaining the aspect ratio:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :width=>0.5, :crop=>"scale")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::scale()->width(0.5));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("width"=>"0.5", "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(width="0.5", crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {width: "0.5", crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").resize(scale().width(0.5));
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {width: "0.5", crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {width: "0.5", crop: "scale"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation width="0.5" crop="scale" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation width="0.5" crop="scale" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation width="0.5" crop="scale">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       resize(Resize.scale() { width(0.5F) }) 
    }.generate()

  3. Resizing the height to 200 pixels, maintaining the aspect ratio:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :height=>200, :crop=>"scale")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::scale()->height(200));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("height"=>200, "crop"=>"scale"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(height=200, crop="scale")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {height: 200, crop: "scale"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().height(200).crop("scale")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").resize(scale().height(200));
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {height: 200, crop: "scale"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {height: 200, crop: "scale"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation height="200" crop="scale" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation height="200" crop="scale" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation height="200" crop="scale">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Crop("scale")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       resize(Resize.scale() { height(200) }) 
    }.generate()

When changing the dimensions of an uploaded video by transforming the video's height and/or width, you need to decide how to adapt or "crop" the video to fit into the requested size. Use the crop parameter for selecting the crop mode (c in URLs). Cloudinary supports the following video cropping modes: scale, fit, fill, limit, pad, lpad and crop.

scale

Change the size of the video exactly to the given width and height without necessarily retaining the original aspect ratio: all original video parts are visible but might be stretched or shrunk. If only the width or height is given, then the video is scaled to the new dimension while retaining the original aspect ratio (the other dimension is also scaled proportionately). This is the default cropping mode for resizing videos if the crop mode is not specified.

For example, the uploaded mp4 video named dog scaled to a width of 150 pixels while maintaining aspect ratio:

Ruby:
Copy to clipboard
cl_video_tag("dog", :width=>150, :crop=>"scale")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(150));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("width"=>150, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(width=150, crop="scale")
Node.js:
Copy to clipboard
cloudinary.video("dog", {width: 150, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(150).crop("scale")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(scale().width(150));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {width: 150, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {width: 150, crop: "scale"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="150" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation width="150" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="150" crop="scale">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(150).Crop("scale")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(150).setCrop("scale")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(150).crop("scale")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(150) }) 
}.generate()

fit

Change video size to fit in the given width and height while retaining the original aspect ratio with all the original video parts visible. The new dimensions of the transformed video must not exceed the specified width and/or height, but may be enlarged if the video is smaller than the new dimensions. However, the video may be smaller than the specified values in order to keep the original proportions.

For example, the uploaded mp4 video named dog fitted to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
Copy to clipboard
cl_video_tag("dog", :height=>250, :width=>250, :crop=>"fit")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::fit()->width(250)
->height(250));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("height"=>250, "width"=>250, "crop"=>"fit"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(height=250, width=250, crop="fit")
Node.js:
Copy to clipboard
cloudinary.video("dog", {height: 250, width: 250, crop: "fit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fit")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(fit().width(250).height(250));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {height: 250, width: 250, crop: "fit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {height: 250, width: 250, crop: "fit"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="250" width="250" crop="fit" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="250" width="250" crop="fit" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="250" width="250" crop="fit">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(250).Crop("fit")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fit")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("fit")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.fit() { width(250)
 height(250) }) 
}.generate()

fill

Create a video with the exact given width and height while retaining original proportions. This option first scales up or down as much as needed to at least fill both of the given dimensions. If the requested aspect ratio is different than the original, cropping will occur on the dimension that exceeds the requested size after scaling. You can specify which part of the original video you want to keep if cropping occurs using the gravity parameter. Specify the gravity manually or use auto-gravity to automatically show the most interesting area.

For example, the uploaded mp4 video named dog filled to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
Copy to clipboard
cl_video_tag("dog", :height=>250, :width=>250, :crop=>"fill")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::fill()->width(250)
->height(250));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("height"=>250, "width"=>250, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(height=250, width=250, crop="fill")
Node.js:
Copy to clipboard
cloudinary.video("dog", {height: 250, width: 250, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("fill")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(fill().width(250).height(250));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {height: 250, width: 250, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {height: 250, width: 250, crop: "fill"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="250" width="250" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="250" width="250" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="250" width="250" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(250).Crop("fill")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("fill")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("fill")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

limit

The limit mode is used for creating a video that does not exceed the given width and height. If the original video is smaller than the given limits, the generated video uses the same dimensions as the original one. If the original is bigger than the given limits, it will be scaled down to fit the given dimensions while retaining original proportions (similar to the fit mode in this case).

For example, the uploaded mp4 video named dog limited to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
Copy to clipboard
cl_video_tag("dog", :height=>250, :width=>250, :crop=>"limit")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::limitFit()->width(250)
->height(250));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("height"=>250, "width"=>250, "crop"=>"limit"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(height=250, width=250, crop="limit")
Node.js:
Copy to clipboard
cloudinary.video("dog", {height: 250, width: 250, crop: "limit"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(250).width(250).crop("limit")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(limitFit().width(250).height(250));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {height: 250, width: 250, crop: "limit"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {height: 250, width: 250, crop: "limit"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="250" width="250" crop="limit" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="250" width="250" crop="limit" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="250" width="250" crop="limit">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(250).Width(250).Crop("limit")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(250).setWidth(250).setCrop("limit")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(250).width(250).crop("limit")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.limitFit() { width(250)
 height(250) }) 
}.generate()

pad

Resize the video to fill the given width and height while retaining the original aspect ratio.

If the proportions of the original video do not match the required ones, padding is added to the video to reach the required size. You can also specify which part of the original video to use for filling the required dimensions in case the proportions do not match by using the gravity parameter, and specify the color of the background in the case that padding is added.

For example, the uploaded mp4 video named dog padded with a black background to a width and height of 250 pixels while retaining the aspect ratio:

Ruby:
Copy to clipboard
cl_video_tag("dog", :background=>"black", :height=>250, :width=>250, :crop=>"pad")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::pad()->width(250)
->height(250)
  ->background(
  Background::color(Color::BLACK))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("background"=>"black", "height"=>250, "width"=>250, "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(background="black", height=250, width=250, crop="pad")
Node.js:
Copy to clipboard
cloudinary.video("dog", {background: "black", height: 250, width: 250, crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("black").height(250).width(250).crop("pad")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(250)
    .height(250)
    .background(color("black"))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {background: "black", height: 250, width: 250, crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {background: "black", height: 250, width: 250, crop: "pad"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation background="black" height="250" width="250" crop="pad" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation background="black" height="250" width="250" crop="pad" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation background="black" height="250" width="250" crop="pad">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("black").Height(250).Width(250).Crop("pad")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("black").setHeight(250).setWidth(250).setCrop("pad")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("black").height(250).width(250).crop("pad")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.pad() { width(250)
 height(250)
   background(
  Background.color(Color.BLACK))
   }) 
}.generate()

pad with blurred video background

You may sometimes need to deliver a video with an aspect ratio very different than the target video player dimensions, for example delivering a portrait video in a landscape-oriented video player. In these cases, you can use a blurred version of the same video as the padding background. To do this, specify the blurred value instead of a color as the background. You can also optionally specify the intensity of the blur effect (range: 1-2000, default 100) and the brightness of the background video (range: -300-100, default 0).

For example, deliver this video of a talented kid solving a rubiks cube in a 320*480 HTML5 video player by padding the portrait video with a blurred version of the same video at an intensity of 400 and a brightness of 15.

Ruby:
Copy to clipboard
cl_video_tag("cld_rubiks_guy", :background=>"blurred:400:15", :height=>320, :width=>480, :crop=>"pad")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('cld_rubiks_guy.mp4'))
  ->resize(Resize::pad()->width(480)
->height(320)
  ->background(
  Background::blurred()->intensity(400)
->brightness(15))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("cld_rubiks_guy", array("background"=>"blurred:400:15", "height"=>320, "width"=>480, "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryVideo("cld_rubiks_guy").video(background="blurred:400:15", height=320, width=480, crop="pad")
Node.js:
Copy to clipboard
cloudinary.video("cld_rubiks_guy", {background: "blurred:400:15", height: 320, width: 480, crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("blurred:400:15").height(320).width(480).crop("pad")).videoTag("cld_rubiks_guy");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("cld_rubiks_guy.mp4").resize(
  pad()
    .width(480)
    .height(320)
    .background(blurred().intensity(400).brightness(15))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('cld_rubiks_guy', {background: "blurred:400:15", height: 320, width: 480, crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("cld_rubiks_guy", {background: "blurred:400:15", height: 320, width: 480, crop: "pad"})
React:
Copy to clipboard
<Video publicId="cld_rubiks_guy" >
  <Transformation background="blurred:400:15" height="320" width="480" crop="pad" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="cld_rubiks_guy" >
  <cld-transformation background="blurred:400:15" height="320" width="480" crop="pad" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="cld_rubiks_guy" >
  <cl-transformation background="blurred:400:15" height="320" width="480" crop="pad">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("blurred:400:15").Height(320).Width(480).Crop("pad")).BuildVideoTag("cld_rubiks_guy")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("blurred:400:15").setHeight(320).setWidth(480).setCrop("pad")).generate("cld_rubiks_guy.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("blurred:400:15").height(320).width(480).crop("pad")).resourceType("video").generate("cld_rubiks_guy.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("cld_rubiks_guy.mp4")
   resize(Resize.pad() { width(480)
 height(320)
   background(
  Background.blurred() { intensity(400)
 brightness(15) })
   }) 
}.generate()

lpad

Same as the pad mode above, but doesn't scale the video up if your requested dimensions are larger than the original video's.

For example, the uploaded mp4 video named dog lpadded with a black background to a width and height of 250 pixels while retaining the aspect ratio and limiting the size to no larger than the original video:

Ruby:
Copy to clipboard
cl_video_tag("dog", :background=>"black", :height=>250, :width=>250, :crop=>"lpad")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::limitPad()->width(250)
->height(250)
  ->background(
  Background::color(Color::BLACK))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("background"=>"black", "height"=>250, "width"=>250, "crop"=>"lpad"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(background="black", height=250, width=250, crop="lpad")
Node.js:
Copy to clipboard
cloudinary.video("dog", {background: "black", height: 250, width: 250, crop: "lpad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("black").height(250).width(250).crop("lpad")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  limitPad()
    .width(250)
    .height(250)
    .background(color("black"))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {background: "black", height: 250, width: 250, crop: "lpad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {background: "black", height: 250, width: 250, crop: "lpad"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation background="black" height="250" width="250" crop="lpad" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation background="black" height="250" width="250" crop="lpad" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation background="black" height="250" width="250" crop="lpad">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("black").Height(250).Width(250).Crop("lpad")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("black").setHeight(250).setWidth(250).setCrop("lpad")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("black").height(250).width(250).crop("lpad")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.limitPad() { width(250)
 height(250)
   background(
  Background.color(Color.BLACK))
   }) 
}.generate()

fill_pad

Tries to prevent a "bad crop" by adding padding to any frames where interesting content is lost if the standard fill mode is applied. This is especially useful if the aspect ratio of the delivered video is considerably different from the original's aspect ratio. It is only supported in conjunction with Automatic cropping (g_auto).

For example, below, the video on the left is delivered at 9:16 aspect ratio using the fill crop mode, and the video on the right using the fill_pad crop mode. You'll see the beginning of the video is cropped the same, but the video on the right then pads the video to ensure all of the subjects are shown.

c_fill c_fill_pad

crop

Extract only part of a given width and height out of the original video. The original proportions are retained and you can also specify which part of the original video to use for filling the required dimensions by giving the x and y coordinates of the top left corner, or by using the gravity parameter.

For example, cropping the uploaded mp4 video named dog to a width of 350 pixels and a height of 200 pixels, starting at the x = 230 pixels and y = 20 pixels coordinate:

Ruby:
Copy to clipboard
cl_video_tag("dog", :height=>200, :width=>350, :x=>230, :y=>20, :crop=>"crop")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::crop()->width(350)
->height(200)
->x(230)
->y(20));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("height"=>200, "width"=>350, "x"=>230, "y"=>20, "crop"=>"crop"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(height=200, width=350, x=230, y=20, crop="crop")
Node.js:
Copy to clipboard
cloudinary.video("dog", {height: 200, width: 350, x: 230, y: 20, crop: "crop"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().height(200).width(350).x(230).y(20).crop("crop")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  crop().width(350).height(200).x(230).y(20)
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {height: 200, width: 350, x: 230, y: 20, crop: "crop"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {height: 200, width: 350, x: 230, y: 20, crop: "crop"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation height="200" width="350" x="230" y="20" crop="crop" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation height="200" width="350" x="230" y="20" crop="crop" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation height="200" width="350" x="230" y="20" crop="crop">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Height(200).Width(350).X(230).Y(20).Crop("crop")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setHeight(200).setWidth(350).setX(230).setY(20).setCrop("crop")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().height(200).width(350).x(230).y(20).crop("crop")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.crop() { width(350)
 height(200)
 x(230)
 y(20) }) 
}.generate()

Aspect ratio

Use the aspect_ratio parameter (ar in URLs) to resize the video to a new aspect ratio. This parameter is used together with a specified crop mode that determines how the video is adjusted to the new dimensions. This parameter can also be used when changing the dimensions of a video with only the width or height parameters (w and h in URLs) - the other dimension is then automatically updated to maintain the given aspect ratio.

The aspect_ratio parameter accepts a value in one of the following forms:

  • a:b where a signifies the relative width and b the relative height (e.g., 4:3 or 16:9).
  • a decimal value representing the ratio of the width divided by the height (e.g., 1.33 or 2.5).

Examples with the uploaded mp4 video named dog:

  1. Cropped to an aspect ratio of 2.5:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :aspect_ratio=>"2.5", :crop=>"crop")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::crop()->aspectRatio(2.5));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("aspect_ratio"=>"2.5", "crop"=>"crop"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(aspect_ratio="2.5", crop="crop")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {aspect_ratio: "2.5", crop: "crop"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().aspectRatio("2.5").crop("crop")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").resize(crop().aspectRatio(2.5));
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {aspectRatio: "2.5", crop: "crop"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {aspect_ratio: "2.5", crop: "crop"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation aspectRatio="2.5" crop="crop" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation aspect-ratio="2.5" crop="crop" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation aspect-ratio="2.5" crop="crop">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("2.5").Crop("crop")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("2.5").setCrop("crop")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().aspectRatio("2.5").crop("crop")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       resize(Resize.crop() { aspectRatio(2.5F) }) 
    }.generate()

  2. Filled to a width of 400 pixels with an aspect ratio of 4:3:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :aspect_ratio=>"4:3", :width=>400, :crop=>"fill")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->resize(Resize::fill()->width(400)
      ->aspectRatio(
      AspectRatio::ar4X3())
      );
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("aspect_ratio"=>"4:3", "width"=>400, "crop"=>"fill"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(aspect_ratio="4:3", width=400, crop="fill")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {aspect_ratio: "4:3", width: 400, crop: "fill"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().aspectRatio("4:3").width(400).crop("fill")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").resize(
      fill()
        .width(400)
        .aspectRatio(ar4X3())
    );
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {aspectRatio: "4:3", width: 400, crop: "fill"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {aspect_ratio: "4:3", width: 400, crop: "fill"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation aspectRatio="4:3" width="400" crop="fill" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation aspect-ratio="4:3" width="400" crop="fill" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation aspect-ratio="4:3" width="400" crop="fill">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("4:3").Width(400).Crop("fill")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("4:3").setWidth(400).setCrop("fill")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().aspectRatio("4:3").width(400).crop("fill")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    // This code example is not currently available.

Set Device Pixel Ratio (DPR)

Different devices support different DPR values, which is defined as the ratio between physical pixels and logical pixels. This means that a device with support for a higher DPR uses more physical pixels for displaying a video, resulting in a clearer, sharper video.

DPR illustration

Use the dpr parameter to set the DPR value of the delivered video. The parameter accepts a float value specifying the DPR multiplier.

For example, the following URL dynamically generates the video named dog scaled to a width of 100 pixels. Setting the dpr value to 1.0, 2.0 (as in the code example) or 3.0 generates the following videos, while resizing the video to match the required DPR.

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:width=>100, :crop=>"scale"},
  {:dpr=>2.0}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(100))
  ->delivery(Delivery::dpr(2.0));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>100, "crop"=>"scale"),
  array("dpr"=>"2.0")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'width': 100, 'crop': "scale"},
  {'dpr': "2.0"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {width: 100, crop: "scale"},
  {dpr: "2.0"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .dpr(2.0)).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(scale().width(100)).delivery(dpr("2.0"));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {width: 100, crop: "scale"},
  {dpr: "2.0"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {width: 100, crop: "scale"},
  {dpr: "2.0"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="100" crop="scale" />
  <Transformation dpr="2.0" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation width="100" crop="scale" />
  <cld-transformation dpr="2.0" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation dpr="2.0">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(100).Crop("scale").Chain()
  .Dpr(2.0)).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(100).setCrop("scale").chain()
  .setDpr(2.0)).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(100).crop("scale").chain()
  .dpr(2.0)).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(100) })
   delivery(Delivery.dpr(2.0F)) 
}.generate()

    DPR 1.0                                        DPR 2.0                                                               DPR 3.0

Now you can create a HTML video tag with the required dimensions and deliver a video with the resolution that best matches the specified pixel density of your users' devices. The three videos below are all displayed with a width of 200 pixels using the <video> tag width attribute, while you see more details and a better visual result for the last two videos (dpr 2 and dpr 3 respectively) if you view this documentation using a device that supports a higher DPR.

Copy to clipboard
<video poster="https://res.cloudinary.com/demo/video/upload/w_200/dpr_2.0/dog.jpg" width="200">
  <source src="https://res.cloudinary.com/demo/video/upload/w_200/dpr_2.0/dog.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/demo/video/upload/w_200/dpr_2.0/dog.mp4" type="video/mp4"/>
  <source src="https://res.cloudinary.com/demo/video/upload/w_200/dpr_2.0/dog.ogv" type="video/ogg"/>
</video>

   DPR 1.0 (200 width, 331KB)              DPR 2.0 (400 width, 437KB)               DPR 3.0 (600 width, 474KB)

Gravity

Gravity specifies which part of the original video to use for certain cropping modes, for filling the required dimensions in case the proportions do not match. This is accomplished by using the gravity parameter (g in URLs). The supported fixed location gravity values are: north_east, north, north_west, west, south_west, south, south_east, east, or center (the default value). You can also specify a gravity value of auto to automatically crop your video.

For example, the uploaded mp4 video named dog filled to a width and height of 250 pixels while retaining the aspect ratio, with gravity set to north:

Ruby:
Copy to clipboard
cl_video_tag("dog", :gravity=>"north", :height=>250, :width=>250, :crop=>"fill")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::fill()->width(250)
->height(250)
  ->gravity(
  Gravity::compass(
  Compass::north()))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("gravity"=>"north", "height"=>250, "width"=>250, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(gravity="north", height=250, width=250, crop="fill")
Node.js:
Copy to clipboard
cloudinary.video("dog", {gravity: "north", height: 250, width: 250, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().gravity("north").height(250).width(250).crop("fill")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  fill()
    .width(250)
    .height(250)
    .gravity(compass("north"))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {gravity: "north", height: 250, width: 250, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {gravity: "north", height: 250, width: 250, crop: "fill"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation gravity="north" height="250" width="250" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation gravity="north" height="250" width="250" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation gravity="north" height="250" width="250" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Gravity("north").Height(250).Width(250).Crop("fill")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setGravity("north").setHeight(250).setWidth(250).setCrop("fill")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().gravity("north").height(250).width(250).crop("fill")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

Automatic Cropping

Automatic gravity selection ensures that the most interesting areas are selected as the main focus throughout the duration of each video. Each video is analyzed to find the optimal region, allowing you to adjust the size or aspect ratio to fit all of your requirements. As the optimal region of the video could be moving from frame to frame, the cropped area will adjust accordingly. To adjust the behavior of the automatic cropping algorithm to focus on faces within a video, you can also specify an additional focal preference.

Notes and tips

  • The automatic cropping algorithm analyzes the entire video to determine the areas to focus on, which means it can take several seconds or minutes, depending on the length of the original video (an HTTP 423 error will be returned until the analysis is complete). Therefore, it's recommended to generate the transformation eagerly during upload or using an explicit method call for existing videos, along with an eager_notification_url parameter to notify your application when the content aware cropping transformation is ready for delivery.
  • Once a video has been analyzed by the automatic cropping algorithm, any subsequent transformations happen on-the-fly as usual. This includes adjusting the size and aspect ratio.
  • You can only use automatic gravity once per transformation and not within a layer.
  • You can add the getinfo flag (fl_getinfo in URLs) in your transformation to return the proposed g_auto cropping results, including confidence scores in JSON, instead of delivering the transformed video. You can then integrate the g_auto results into an external workflow.

Apply automatic content-aware gravity by cropping your video with either the fill or fill pad crop modes and setting the gravity transformation parameter to auto (g_auto in URLs).

For example, to crop this video to a square aspect ratio whilst keeping the ship as the main focus throughout, using the fill crop mode:

Ruby:
Copy to clipboard
cl_video_tag("ship", :aspect_ratio=>"1:1", :gravity=>"auto", :width=>300, :crop=>"fill")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('ship.mp4'))
  ->resize(Resize::fill()->width(300)
  ->aspectRatio(
  AspectRatio::ar1X1())
  ->gravity(
  Gravity::autoGravity())
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("ship", array("aspect_ratio"=>"1:1", "gravity"=>"auto", "width"=>300, "crop"=>"fill"))
Python:
Copy to clipboard
CloudinaryVideo("ship").video(aspect_ratio="1:1", gravity="auto", width=300, crop="fill")
Node.js:
Copy to clipboard
cloudinary.video("ship", {aspect_ratio: "1:1", gravity: "auto", width: 300, crop: "fill"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().aspectRatio("1:1").gravity("auto").width(300).crop("fill")).videoTag("ship");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("ship.mp4").resize(
  fill()
    .width(300)
    .aspectRatio(ar1X1())
    .gravity(autoGravity())
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('ship', {aspectRatio: "1:1", gravity: "auto", width: 300, crop: "fill"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("ship", {aspect_ratio: "1:1", gravity: "auto", width: 300, crop: "fill"})
React:
Copy to clipboard
<Video publicId="ship" >
  <Transformation aspectRatio="1:1" gravity="auto" width="300" crop="fill" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="ship" >
  <cld-transformation aspect-ratio="1:1" gravity="auto" width="300" crop="fill" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="ship" >
  <cl-transformation aspect-ratio="1:1" gravity="auto" width="300" crop="fill">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1:1").Gravity("auto").Width(300).Crop("fill")).BuildVideoTag("ship")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1:1").setGravity("auto").setWidth(300).setCrop("fill")).generate("ship.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().aspectRatio("1:1").gravity("auto").width(300).crop("fill")).resourceType("video").generate("ship.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

In some cases, you may find that cropping to a different aspect ratio cuts out interesting parts of the content. If this is the case, consider using the fill pad crop mode with automatic cropping, which uses padding where necessary to keep more of the interesting content in the crop.

For example, this rollercoaster video automatically adjusts the aspect ratio and padding to keep the two people in the frame as much as possible:

Ruby:
Copy to clipboard
cl_video_tag("docs/Roller_Coaster", :aspect_ratio=>"1.0", :gravity=>"auto", :width=>400, :crop=>"fill_pad")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('docs/Roller_Coaster.mp4'))
  ->resize(Resize::fillPad()->width(400)
->aspectRatio(1.0)
  ->gravity(
  Gravity::autoGravity())
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("docs/Roller_Coaster", array("aspect_ratio"=>"1.0", "gravity"=>"auto", "width"=>400, "crop"=>"fill_pad"))
Python:
Copy to clipboard
CloudinaryVideo("docs/Roller_Coaster").video(aspect_ratio="1.0", gravity="auto", width=400, crop="fill_pad")
Node.js:
Copy to clipboard
cloudinary.video("docs/Roller_Coaster", {aspect_ratio: "1.0", gravity: "auto", width: 400, crop: "fill_pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().aspectRatio("1.0").gravity("auto").width(400).crop("fill_pad")).videoTag("docs/Roller_Coaster");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("docs/Roller_Coaster.mp4").resize(
  fillPad()
    .width(400)
    .aspectRatio("1.0")
    .gravity(autoGravity())
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('docs/Roller_Coaster', {aspectRatio: "1.0", gravity: "auto", width: 400, crop: "fill_pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("docs/Roller_Coaster", {aspect_ratio: "1.0", gravity: "auto", width: 400, crop: "fill_pad"})
React:
Copy to clipboard
<Video publicId="docs/Roller_Coaster" >
  <Transformation aspectRatio="1.0" gravity="auto" width="400" crop="fill_pad" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="docs/Roller_Coaster" >
  <cld-transformation aspect-ratio="1.0" gravity="auto" width="400" crop="fill_pad" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="docs/Roller_Coaster" >
  <cl-transformation aspect-ratio="1.0" gravity="auto" width="400" crop="fill_pad">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().AspectRatio("1.0").Gravity("auto").Width(400).Crop("fill_pad")).BuildVideoTag("docs/Roller_Coaster")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setAspectRatio("1.0").setGravity("auto").setWidth(400).setCrop("fill_pad")).generate("docs/Roller_Coaster.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().aspectRatio("1.0").gravity("auto").width(400).crop("fill_pad")).resourceType("video").generate("docs/Roller_Coaster.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

Adjusting the automatic gravity focal preference

By default, the automatic cropping algorithm uses a gaze prediction algorithm to identify the most interesting areas of the video. To adjust the algorithm that is used and detect a single face or multiple faces, specify the focal preference. The available options are:

  • g_auto:face: Focuses the crop on the largest face detected in the video.
  • g_auto:faces: Focuses the crop on all the detected faces in the video.

The examples below show the difference between the two face detection options.

g_auto:faces g_auto:face

Comparison with default gravity

Below is a comparison between the original video of a dog catching a frisbee, and the same video with the aspect ratio inverted. The left video was cropped using default center gravity and the other using automatic gravity. Watch how the auto cropped (right-hand) video keeps the main subject (the dog) in view at all times, even as it moves across the frame in the original video.

Click any video below to see the comparison in action or use our automatic cropping demo to try it on a variety of samples or on your own videos.

Original video
Default crop
(Center gravity)
Auto-gravity

Changing source based on orientation

You could also use automatic cropping to show the correct video depending on the device orientation. If the user lands on the page whilst browsing in portrait orientation, you could set the HTML5 video source to a vertical video that has been automatically cropped. If the user switches to landscape then the source reverts back to the original landscape video. The codepen below is a very simple example of how you could do this. Use the "Change Orientation" button to simulate rotating a device, or try it out on mobile.

See the Pen Orientation switch demo by Cloudinary (@Cloudinary) on CodePen.


Background color

Use the background parameter (b in URLs) to set the color in the case of padding added with the “pad” crop mode. The color can be set as an RGB hex triplet (e.g. b_rgb:3e2222), a 3 character RGB hex (e.g. b_rgb:777) or a named color (e.g. b_green). Cloudinary's client libraries also support a # shortcut for RGB (e.g. setting background to #3e2222 which is then translated to b_rgb:3e2222).

For example, the uploaded mp4 video named dog padded to a width and height of 300 pixels with a green background:

Ruby:
Copy to clipboard
cl_video_tag("dog", :background=>"green", :height=>300, :width=>300, :crop=>"pad")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::pad()->width(300)
->height(300)
  ->background(
  Background::color(Color::GREEN))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("background"=>"green", "height"=>300, "width"=>300, "crop"=>"pad"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(background="green", height=300, width=300, crop="pad")
Node.js:
Copy to clipboard
cloudinary.video("dog", {background: "green", height: 300, width: 300, crop: "pad"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().background("green").height(300).width(300).crop("pad")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").resize(
  pad()
    .width(300)
    .height(300)
    .background(color("green"))
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {background: "green", height: 300, width: 300, crop: "pad"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {background: "green", height: 300, width: 300, crop: "pad"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation background="green" height="300" width="300" crop="pad" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation background="green" height="300" width="300" crop="pad" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation background="green" height="300" width="300" crop="pad">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Background("green").Height(300).Width(300).Crop("pad")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setBackground("green").setHeight(300).setWidth(300).setCrop("pad")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().background("green").height(300).width(300).crop("pad")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.pad() { width(300)
 height(300)
   background(
  Background.color(Color.GREEN))
   }) 
}.generate()

Trimming videos

Trim a video (and discard the rest) by using a combination of the following 3 parameters to specify the section of video to keep after trimming:

  • start_offset (so in URLs) specifies the start.
  • end_offset (eo in URLs) specifies the end.
  • duration (du in URLs) specifies the duration.

Possible values:

  • A float representing the time in seconds e.g. 5.44 (5 seconds and 440 milliseconds)
  • A string representing the percentage of the video length. This string consists of a number with a p appended e.g. 35p (0p is the first frame and 100p is the last frame). The client libraries also support appending a % instead of a p.

Examples with the uploaded mp4 video named dog:

  1. Trimming the video to the section that starts at 6.5 seconds and ends at 10 seconds:

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :end_offset=>"10", :start_offset=>"6.5")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->videoEdit(VideoEdit::trim()->startOffset(6.5)
    ->endOffset(10.0));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("end_offset"=>"10", "start_offset"=>"6.5"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(end_offset="10", start_offset="6.5")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {end_offset: "10", start_offset: "6.5"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().endOffset("10").startOffset("6.5")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").videoEdit(
      trim().startOffset(6.5).endOffset("10.0")
    );
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {endOffset: "10", startOffset: "6.5"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {end_offset: "10", start_offset: "6.5"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation endOffset="10" startOffset="6.5" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation end-offset="10" start-offset="6.5" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation end-offset="10" start-offset="6.5">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("10").StartOffset("6.5")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("10").setStartOffset("6.5")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().endOffset("10").startOffset("6.5")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       videoEdit(VideoEdit.trim() { startOffset(6.5F)
     endOffset(10.0F) }) 
    }.generate()

  2. Trimming the video to the section that starts at 10 percent with a duration of 30 percent (effectively from the 10 percent mark to the 40 percent mark):

    Ruby:
    Copy to clipboard
    cl_video_tag("dog", :duration=>"30p", :start_offset=>"10p")
    PHP (cloudinary_php v2.x):
    Copy to clipboard
    (new VideoTag('dog.mp4'))
      ->videoEdit(VideoEdit::trim()->startOffset("10%")
    ->duration("30%"));
    PHP (cloudinary_php v1.x (legacy)):
    Copy to clipboard
    cl_video_tag("dog", array("duration"=>"30p", "start_offset"=>"10p"))
    Python:
    Copy to clipboard
    CloudinaryVideo("dog").video(duration="30p", start_offset="10p")
    Node.js:
    Copy to clipboard
    cloudinary.video("dog", {duration: "30p", start_offset: "10p"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().duration("30p").startOffset("10p")).videoTag("dog");
    JS (js-url-gen v1.x):
    Copy to clipboard
    new CloudinaryVideo("dog.mp4").videoEdit(
      trim().startOffset("10%").duration("30%")
    );
    JS (cloudinary-core v2.x (legacy)):
    Copy to clipboard
    cloudinary.videoTag('dog', {duration: "30p", startOffset: "10p"}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.video("dog", {duration: "30p", start_offset: "10p"})
    React:
    Copy to clipboard
    <Video publicId="dog" >
      <Transformation duration="30p" startOffset="10p" />
    </Video>
    Vue.js:
    Copy to clipboard
    <cld-video public-id="dog" >
      <cld-transformation duration="30p" start-offset="10p" />
    </cld-video>
    Angular:
    Copy to clipboard
    <cl-video public-id="dog" >
      <cl-transformation duration="30p" start-offset="10p">
      </cl-transformation>
    </cl-video>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlVideoUp.Transform(new Transformation().Duration("30p").StartOffset("10p")).BuildVideoTag("dog")
    iOS:
    Copy to clipboard
    cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setDuration("30p").setStartOffset("10p")).generate("dog.mp4")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().duration("30p").startOffset("10p")).resourceType("video").generate("dog.mp4");
    Kotlin:
    Copy to clipboard
    cloudinary.video {
      publicId("dog.mp4")
       videoEdit(VideoEdit.trim() { startOffset("10%")
     duration("30%") }) 
    }.generate()

Client libraries also support the offset shortcut parameter to combine the 2 values representing the start and end of the video to keep e.g. [2.5, 9.5] or ['10p', '30p']. In frameworks that support ranges you can use: 2.66..3.21 or '35%..70%'. An equivalent of the offset shortcut is not available for URLs.

For example, trimming the uploaded mp4 video named dog to the section that starts at 6.5 seconds and ends at 10 seconds:

Ruby:
Copy to clipboard
cl_video_tag("dog", :end_offset=>"10.0", :start_offset=>"6.5")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->videoEdit(VideoEdit::trim()->startOffset(6.5)
->endOffset(10.0));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("end_offset"=>"10.0", "start_offset"=>"6.5"))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(end_offset="10.0", start_offset="6.5")
Node.js:
Copy to clipboard
cloudinary.video("dog", {end_offset: "10.0", start_offset: "6.5"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().endOffset("10.0").startOffset("6.5")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4").videoEdit(
  trim().startOffset(6.5).endOffset("10.0")
);
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {endOffset: "10.0", startOffset: "6.5"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {end_offset: "10.0", start_offset: "6.5"})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation endOffset="10.0" startOffset="6.5" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation end-offset="10.0" start-offset="6.5" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation end-offset="10.0" start-offset="6.5">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().EndOffset("10.0").StartOffset("6.5")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setEndOffset("10.0").setStartOffset("6.5")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().endOffset("10.0").startOffset("6.5")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   videoEdit(VideoEdit.trim() { startOffset(6.5F)
 endOffset(10.0F) }) 
}.generate()

Tip
If you want a video to play at a certain position but not trim the rest of the video out, you can make use of the HTML5 t parameter in the video source.

For example, this URL starts playback of the dog video at 6.5 seconds and stops it again at 10 seconds:

Concatenating videos

Cloudinary supports the concatenation of videos by using the overlay video parameter (l_video: in URLs) to specify the name of another uploaded video and then the splice flag (fl_splice in URLs) to indicate that the video should be concatenated on to the container video and not added as an overlay.

You can also concatenate videos with custom transitions using the transition effect (e_transition in URLs).

Note
Videos spliced together or concatenated with a custom transition must be the same width and height. You can use size transformation parameters to ensure that both videos match in size (w and h). If using a transition video, this will be automatically scaled to the same size.

For example, to concatenate the video named dog on to the end of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

Ruby:
Copy to clipboard
cl_video_tag("kitten_fighting", :transformation=>[
  {:height=>200, :width=>300, :crop=>"fill"},
  {:flags=>"splice", :overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"fill"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('kitten_fighting.mp4'))
  ->resize(Resize::fill()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::fill()->width(300)
->height(200)))
  ));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("flags"=>"splice", "overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("kitten_fighting").video(transformation=[
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'flags': "splice", 'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("kitten_fighting", {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: "video:dog"},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(200).width(300).crop("fill").chain()
  .flags("splice").overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply")).videoTag("kitten_fighting");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("kitten_fighting.mp4")
  .resize(fill().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation().resize(fill().width(300).height(200))
      )
    )
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('kitten_fighting', {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_fighting", {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="kitten_fighting" >
  <Transformation height="200" width="300" crop="fill" />
  <Transformation flags="splice" overlay="video:dog" />
  <Transformation height="200" width="300" crop="fill" />
  <Transformation flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="kitten_fighting" >
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation flags="splice" :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_fighting" >
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation flags="splice" overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(200).Width(300).Crop("fill").Chain()
  .Flags("splice").Overlay(new Layer().PublicId("video:dog")).Chain()
  .Height(200).Width(300).Crop("fill").Chain()
  .Flags("layer_apply")).BuildVideoTag("kitten_fighting")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setFlags("splice").setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setFlags("layer_apply")).generate("kitten_fighting.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(200).width(300).crop("fill").chain()
  .flags("splice").overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply")).resourceType("video").generate("kitten_fighting.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

By default, the video is spliced on to the end of the container video: to splice the video on to the beginning, add the start_offset parameter and set it to 0 (so_0 in URLs). For example, to concatenate the video named dog on to the beginning of the video named kitten_fighting, with both videos set to a width of 300 pixels and a height of 200 pixels:

Ruby:
Copy to clipboard
cl_video_tag("kitten_fighting", :transformation=>[
  {:height=>200, :width=>300, :crop=>"fill"},
  {:flags=>"splice", :overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"fill"},
  {:flags=>"layer_apply", :start_offset=>"0"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('kitten_fighting.mp4'))
  ->resize(Resize::fill()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::fill()->width(300)
->height(200)))
  )
  ->prepend()
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("flags"=>"splice", "overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("flags"=>"layer_apply", "start_offset"=>"0")
  )))
Python:
Copy to clipboard
CloudinaryVideo("kitten_fighting").video(transformation=[
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'flags': "splice", 'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'flags': "layer_apply", 'start_offset': "0"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("kitten_fighting", {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: "video:dog"},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply", start_offset: "0"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .height(200).width(300).crop("fill").chain()
  .flags("splice").overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply").startOffset("0")).videoTag("kitten_fighting");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("kitten_fighting.mp4")
  .resize(fill().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation().resize(fill().width(300).height(200))
      )
    ).prepend()
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('kitten_fighting', {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply", startOffset: "0"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_fighting", {transformation: [
  {height: 200, width: 300, crop: "fill"},
  {flags: "splice", overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply", start_offset: "0"}
  ]})
React:
Copy to clipboard
<Video publicId="kitten_fighting" >
  <Transformation height="200" width="300" crop="fill" />
  <Transformation flags="splice" overlay="video:dog" />
  <Transformation height="200" width="300" crop="fill" />
  <Transformation flags="layer_apply" startOffset="0" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="kitten_fighting" >
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation flags="splice" :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation flags="layer_apply" start-offset="0" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_fighting" >
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation flags="splice" overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply" start-offset="0">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Height(200).Width(300).Crop("fill").Chain()
  .Flags("splice").Overlay(new Layer().PublicId("video:dog")).Chain()
  .Height(200).Width(300).Crop("fill").Chain()
  .Flags("layer_apply").StartOffset("0")).BuildVideoTag("kitten_fighting")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setFlags("splice").setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setFlags("layer_apply").setStartOffset("0")).generate("kitten_fighting.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .height(200).width(300).crop("fill").chain()
  .flags("splice").overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply").startOffset("0")).resourceType("video").generate("kitten_fighting.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

To concatenate only a section of a video to the end of another video use the offset parameters (see Trimming videos for more information on the parameters and their possible values) together with the layer_apply flag (fl_layer_apply in URLs). For example, to splice the first 5 seconds of the video named kitten_fighting to the end of the video named dog rotated by 180 degrees, with both videos set to a width of 300 pixels and a height of 200 pixels.

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:angle=>180},
  {:height=>200, :width=>300, :crop=>"fill"},
  {:duration=>"5", :flags=>"splice", :overlay=>"video:kitten_fighting", :start_offset=>"0"},
  {:height=>200, :width=>300, :crop=>"fill"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->rotate(Rotate::byAngle(180))
  ->resize(Resize::fill()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("kitten_fighting")
  ->transformation((new MediaTransformation())
  ->videoEdit(VideoEdit::trim()->startOffset(0.0)
->duration(5.0))
  ->resize(Resize::fill()->width(300)
->height(200)))
  ));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("angle"=>180),
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("duration"=>"5", "flags"=>"splice", "overlay"=>"video:kitten_fighting", "start_offset"=>"0"),
  array("height"=>200, "width"=>300, "crop"=>"fill"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'angle': 180},
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'duration': "5", 'flags': "splice", 'overlay': "video:kitten_fighting", 'start_offset': "0"},
  {'height': 200, 'width': 300, 'crop': "fill"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {angle: 180},
  {height: 200, width: 300, crop: "fill"},
  {duration: "5", flags: "splice", overlay: "video:kitten_fighting", start_offset: "0"},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .angle(180).chain()
  .height(200).width(300).crop("fill").chain()
  .duration("5").flags("splice").overlay(new Layer().publicId("video:kitten_fighting")).startOffset("0").chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4")
  .rotate(byAngle(180))
  .resize(fill().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("kitten_fighting").transformation(
        new MediaTransformation()
          .videoEdit(trim().startOffset("0.0").duration("5.0"))
          .resize(fill().width(300).height(200))
      )
    )
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {angle: 180},
  {height: 200, width: 300, crop: "fill"},
  {duration: "5", flags: "splice", overlay: new cloudinary.Layer().publicId("video:kitten_fighting"), startOffset: "0"},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {angle: 180},
  {height: 200, width: 300, crop: "fill"},
  {duration: "5", flags: "splice", overlay: new cloudinary.Layer().publicId("video:kitten_fighting"), start_offset: "0"},
  {height: 200, width: 300, crop: "fill"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation angle="180" />
  <Transformation height="200" width="300" crop="fill" />
  <Transformation duration="5" flags="splice" overlay="video:kitten_fighting" startOffset="0" />
  <Transformation height="200" width="300" crop="fill" />
  <Transformation flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation angle="180" />
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation duration="5" flags="splice" :overlay="video:kitten_fighting" start-offset="0" />
  <cld-transformation height="200" width="300" crop="fill" />
  <cld-transformation flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation angle="180">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation duration="5" flags="splice" overlay="video:kitten_fighting" start-offset="0">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="fill">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Angle(180).Chain()
  .Height(200).Width(300).Crop("fill").Chain()
  .Duration("5").Flags("splice").Overlay(new Layer().PublicId("video:kitten_fighting")).StartOffset("0").Chain()
  .Height(200).Width(300).Crop("fill").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAngle(180).chain()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setDuration("5").setFlags("splice").setOverlay("video:kitten_fighting").setStartOffset("0").chain()
  .setHeight(200).setWidth(300).setCrop("fill").chain()
  .setFlags("layer_apply")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .angle(180).chain()
  .height(200).width(300).crop("fill").chain()
  .duration("5").flags("splice").overlay(new Layer().publicId("video:kitten_fighting")).startOffset("0").chain()
  .height(200).width(300).crop("fill").chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

The layer_apply flag in the above example instructs Cloudinary to apply the so_0 parameter in the layer component as a regular start offset transformation parameter applied to the layer, and not in its special concatenate-to-beginning usage for fl_splice. To use the so_0 with fl_splice for concatenating to the beginning, in a case where fl_layer_apply is also used, specify the so_0 in the fl_layer_apply component: /l_...../fl_layer_apply,so_0).

Concatenate videos with images

Cloudinary also supports the concatenation of videos with images by using the following combination of parameters:

  • overlay (l: in URLs) to specify the name of an uploaded image,
  • splice flag (fl_splice in URLs) to indicate that the image should be concatenated on to the container video and not added as an overlay,
  • duration parameter (du in URLs) to specify the amount of time in seconds to display the image.
  • start_offset (optional) set to 0 (so_0 in URLs) to concatenate the image at the beginning of the video instead of at the end.
  • layer_apply flag (fl_layer_apply) to indicate that the above parameters are applied to the image (with the overlay parameter) and not the base video.

For example, to concatenate the image named sample to the start of the video named dog for a duration of 3 seconds (both the video and image are scaled to a width of 300 pixels and a height of 200 pixels):

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:width=>300, :height=>200, :crop=>"scale"},
  {:width=>300, :height=>200, :overlay=>"sample", :flags=>"splice", :duration=>"3"},
  {:start_offset=>"0", :flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::imageSource("sample")
  ->transformation((new MediaTransformation())
  ->videoEdit(VideoEdit::trim()->duration(3.0))
  ->resize(Resize::scale()->width(300)
->height(200)))
  )
  ->prepend()
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>300, "height"=>200, "crop"=>"scale"),
  array("width"=>300, "height"=>200, "overlay"=>"sample", "flags"=>"splice", "duration"=>"3"),
  array("start_offset"=>"0", "flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'width': 300, 'height': 200, 'crop': "scale"},
  {'width': 300, 'height': 200, 'overlay': "sample", 'flags': "splice", 'duration': "3"},
  {'start_offset': "0", 'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: "sample", flags: "splice", duration: "3"},
  {start_offset: "0", flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(300).height(200).crop("scale").chain()
  .width(300).height(200).overlay(new Layer().publicId("sample")).flags("splice").duration("3").chain()
  .startOffset("0").flags("layer_apply")).videoTag("dog");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("dog.mp4")
  .resize(scale().width(300).height(200))
  .videoEdit(
    concatenate(
      imageSource("sample").transformation(
        new MediaTransformation()
          .videoEdit(trim().duration("3.0"))
          .resize(scale().width(300).height(200))
      )
    ).prepend()
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: new cloudinary.Layer().publicId("sample"), flags: "splice", duration: "3"},
  {startOffset: "0", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {width: 300, height: 200, crop: "scale"},
  {width: 300, height: 200, overlay: new cloudinary.Layer().publicId("sample"), flags: "splice", duration: "3"},
  {start_offset: "0", flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="300" height="200" crop="scale" />
  <Transformation width="300" height="200" overlay="sample" flags="splice" duration="3" />
  <Transformation startOffset="0" flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="dog" >
  <cld-transformation width="300" height="200" crop="scale" />
  <cld-transformation width="300" height="200" :overlay="sample" flags="splice" duration="3" />
  <cld-transformation start-offset="0" flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="300" height="200" crop="scale">
  </cl-transformation>
  <cl-transformation width="300" height="200" overlay="sample" flags="splice" duration="3">
  </cl-transformation>
  <cl-transformation start-offset="0" flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Height(200).Crop("scale").Chain()
  .Width(300).Height(200).Overlay(new Layer().PublicId("sample")).Flags("splice").Duration("3").Chain()
  .StartOffset("0").Flags("layer_apply")).BuildVideoTag("dog")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setHeight(200).setCrop("scale").chain()
  .setWidth(300).setHeight(200).setOverlay("sample").setFlags("splice").setDuration("3").chain()
  .setStartOffset("0").setFlags("layer_apply")).generate("dog.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(300).height(200).crop("scale").chain()
  .width(300).height(200).overlay(new Layer().publicId("sample")).flags("splice").duration("3").chain()
  .startOffset("0").flags("layer_apply")).resourceType("video").generate("dog.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(300)
 height(200) })
   videoEdit(VideoEdit.concatenate(
  Concatenate.imageSource("sample") {
   transformation(Transformation {
   videoEdit(VideoEdit.trim() { duration(3.0F) })
   resize(Resize.scale() { width(300)
 height(200) }) })
   }) {
   prepend()
   }) 
}.generate()

Concatenate videos with custom 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
The splice flag should not be used when concatenating with a custom transition.

To add a custom transition:

  1. Add your base video as normal.
  2. Add the second video using the overlay video parameter (l_video: in URLs), ensuring height and width are the same as the base video.
  3. Specify the video to use as a transition as follows:
    1. Add a luma matte transition video using the overlay video parameter (l_video: in URLs).
    2. Specify the transition effect to indicate that this video overlay is to be used as a transition between the base and second video.
    3. Add the layer_apply flag (fl_layer_apply) to close the transition layer.
  4. Add a second layer_apply flag to close the second video layer. For more information, see the documentation on layer_apply.

Here's an example showing the kitten_fighting video transitioning to the dog video:

Ruby:
Copy to clipboard
cl_video_tag("kitten_fighting", :transformation=>[
  {:duration=>"5.0"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:duration=>"5.0"},
  {:effect=>"transition", :overlay=>"video:transition1"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('kitten_fighting.mp4'))
  ->videoEdit(VideoEdit::trim()->duration(5.0))
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::trim()->duration(5.0)))
  )
  ->transition(
  Transition::videoSource("transition1"))
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("duration"=>"5.0"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("duration"=>"5.0"),
  array("effect"=>"transition", "overlay"=>"video:transition1"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("kitten_fighting").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: "video:dog"},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).videoTag("kitten_fighting");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("kitten_fighting.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(scale().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation()
          .resize(scale().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('kitten_fighting', {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="kitten_fighting" >
  <Transformation duration="5.0" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation overlay="video:dog" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation duration="5.0" />
  <Transformation effect="transition" overlay="video:transition1" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="kitten_fighting" >
  <cld-transformation duration="5.0" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation duration="5.0" />
  <cld-transformation effect="transition" :overlay="video:transition1" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_fighting" >
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation effect="transition" overlay="video:transition1">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:dog")).Chain()
  .Height(200).Width(300).Crop("scale").Chain()
  .Duration("5.0").Chain()
  .Effect("transition").Overlay(new Layer().PublicId("video:transition1")).Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply")).BuildVideoTag("kitten_fighting")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition1").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply")).generate("kitten_fighting.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").chain()
  .duration("5.0").chain()
  .effect("transition").overlay(new Layer().publicId("video:transition1")).chain()
  .flags("layer_apply").chain()
  .flags("layer_apply")).resourceType("video").generate("kitten_fighting.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

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 add your own luma matte transition videos to your account. The example below has been uploaded to the Cloudinary demo account (and used in the example above):

Ruby:
Copy to clipboard
cl_video_tag("transition1", :width=>300, :crop=>"scale")
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('transition1.mp4'))
  ->resize(Resize::scale()->width(300));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("transition1", array("width"=>300, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryVideo("transition1").video(width=300, crop="scale")
Node.js:
Copy to clipboard
cloudinary.video("transition1", {width: 300, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(300).crop("scale")).videoTag("transition1");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("transition1.mp4").resize(scale().width(300));
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('transition1', {width: 300, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("transition1", {width: 300, crop: "scale"})
React:
Copy to clipboard
<Video publicId="transition1" >
  <Transformation width="300" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="transition1" >
  <cld-transformation width="300" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="transition1" >
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Width(300).Crop("scale")).BuildVideoTag("transition1")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setWidth(300).setCrop("scale")).generate("transition1.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(300).crop("scale")).resourceType("video").generate("transition1.mp4");
Kotlin:
Copy to clipboard
cloudinary.video {
  publicId("transition1.mp4")
   resize(Resize.scale() { width(300) }) 
}.generate()

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:

Ruby:
Copy to clipboard
cl_video_tag("kitten_fighting", :transformation=>[
  {:duration=>"5.0"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:duration=>"5.0"},
  {:effect=>"transition", :overlay=>"video:transition1"},
  {:angle=>180},
  {:effect=>"accelerate:5s"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('kitten_fighting.mp4'))
  ->videoEdit(VideoEdit::trim()->duration(5.0))
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::trim()->duration(5.0)))
  )
  ->transition(
  Transition::videoSource("transition1")
  ->transformation((new MediaTransformation())
  ->rotate(Rotate::byAngle(180))
  ->effect(Effect::accelerate()->rate("5s")))
  )
  );
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("duration"=>"5.0"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("duration"=>"5.0"),
  array("effect"=>"transition", "overlay"=>"video:transition1"),
  array("angle"=>180),
  array("effect"=>"accelerate:5s"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("kitten_fighting").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'angle': 180},
  {'effect': "accelerate:5s"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: "video:dog"},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").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("kitten_fighting");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("kitten_fighting.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(scale().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation()
          .resize(scale().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(
      videoSource("transition1").transformation(
        new MediaTransformation()
          .rotate(byAngle(180))
          .effect(accelerate().rate("5s"))
      )
    )
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('kitten_fighting', {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {angle: 180},
  {effect: "accelerate:5s"},
  {flags: "layer_apply"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="kitten_fighting" >
  <Transformation duration="5.0" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation overlay="video:dog" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation duration="5.0" />
  <Transformation effect="transition" overlay="video:transition1" />
  <Transformation angle="180" />
  <Transformation effect="accelerate:5s" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="kitten_fighting" >
  <cld-transformation duration="5.0" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation duration="5.0" />
  <cld-transformation effect="transition" :overlay="video:transition1" />
  <cld-transformation angle="180" />
  <cld-transformation effect="accelerate:5s" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_fighting" >
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation effect="transition" overlay="video:transition1">
  </cl-transformation>
  <cl-transformation angle="180">
  </cl-transformation>
  <cl-transformation effect="accelerate:5s">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:dog")).Chain()
  .Height(200).Width(300).Crop("scale").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("kitten_fighting")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("scale").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("kitten_fighting.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").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("kitten_fighting.mp4");
Kotlin:
Copy to clipboard
// This code example is not currently available.

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):

Ruby:
Copy to clipboard
cl_video_tag("kitten_fighting", :transformation=>[
  {:duration=>"5.0"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:duration=>"5.0"},
  {:effect=>"transition", :overlay=>"video:transition1"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply"},
  {:overlay=>"video:snow_deer"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:duration=>"5.0"},
  {:effect=>"transition", :overlay=>"video:transition2"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply"},
  {:flags=>"splice", :overlay=>"video:dog"},
  {:height=>200, :width=>300, :crop=>"scale"},
  {:duration=>"5.0"},
  {:flags=>"layer_apply"}
  ])
PHP (cloudinary_php v2.x):
Copy to clipboard
(new VideoTag('kitten_fighting.mp4'))
  ->videoEdit(VideoEdit::trim()->duration(5.0))
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::trim()->duration(5.0)))
  )
  ->transition(
  Transition::videoSource("transition1"))
  )
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("snow_deer")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::trim()->duration(5.0)))
  )
  ->transition(
  Transition::videoSource("transition2"))
  )
  ->videoEdit(VideoEdit::concatenate(
  Concatenate::videoSource("dog")
  ->transformation((new MediaTransformation())
  ->resize(Resize::scale()->width(300)
->height(200))
  ->videoEdit(VideoEdit::trim()->duration(5.0)))
  ));
PHP (cloudinary_php v1.x (legacy)):
Copy to clipboard
cl_video_tag("kitten_fighting", array("transformation"=>array(
  array("duration"=>"5.0"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("duration"=>"5.0"),
  array("effect"=>"transition", "overlay"=>"video:transition1"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"video:snow_deer"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("duration"=>"5.0"),
  array("effect"=>"transition", "overlay"=>"video:transition2"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply"),
  array("flags"=>"splice", "overlay"=>"video:dog"),
  array("height"=>200, "width"=>300, "crop"=>"scale"),
  array("duration"=>"5.0"),
  array("flags"=>"layer_apply")
  )))
Python:
Copy to clipboard
CloudinaryVideo("kitten_fighting").video(transformation=[
  {'duration': "5.0"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition1"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"},
  {'overlay': "video:snow_deer"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'duration': "5.0"},
  {'effect': "transition", 'overlay': "video:transition2"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply"},
  {'flags': "splice", 'overlay': "video:dog"},
  {'height': 200, 'width': 300, 'crop': "scale"},
  {'duration': "5.0"},
  {'flags': "layer_apply"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: "video:dog"},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition1"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: "video:snow_deer"},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: "video:transition2"},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {flags: "splice", overlay: "video:dog"},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").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:snow_deer")).chain()
  .height(200).width(300).crop("scale").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:dog")).chain()
  .height(200).width(300).crop("scale").chain()
  .duration("5.0").chain()
  .flags("layer_apply")).videoTag("kitten_fighting");
JS (js-url-gen v1.x):
Copy to clipboard
new CloudinaryVideo("kitten_fighting.mp4")
  .videoEdit(trim().duration("5.0"))
  .resize(scale().width(300).height(200))
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation()
          .resize(scale().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition1"))
  )
  .videoEdit(
    concatenate(
      videoSource("snow_deer").transformation(
        new MediaTransformation()
          .resize(scale().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    ).transition(videoSource("transition2"))
  )
  .videoEdit(
    concatenate(
      videoSource("dog").transformation(
        new MediaTransformation()
          .resize(scale().width(300).height(200))
          .videoEdit(trim().duration("5.0"))
      )
    )
  );
JS (cloudinary-core v2.x (legacy)):
Copy to clipboard
cloudinary.videoTag('kitten_fighting', {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:snow_deer")},
  {height: 200, width: 300, crop: "scale"},
  {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:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("kitten_fighting", {transformation: [
  {duration: "5.0"},
  {height: 200, width: 300, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {effect: "transition", overlay: new cloudinary.Layer().publicId("video:transition1")},
  {flags: "layer_apply"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:snow_deer")},
  {height: 200, width: 300, crop: "scale"},
  {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:dog")},
  {height: 200, width: 300, crop: "scale"},
  {duration: "5.0"},
  {flags: "layer_apply"}
  ]})
React:
Copy to clipboard
<Video publicId="kitten_fighting" >
  <Transformation duration="5.0" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation overlay="video:dog" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation duration="5.0" />
  <Transformation effect="transition" overlay="video:transition1" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="video:snow_deer" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation duration="5.0" />
  <Transformation effect="transition" overlay="video:transition2" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" />
  <Transformation flags="splice" overlay="video:dog" />
  <Transformation height="200" width="300" crop="scale" />
  <Transformation duration="5.0" />
  <Transformation flags="layer_apply" />
</Video>
Vue.js:
Copy to clipboard
<cld-video public-id="kitten_fighting" >
  <cld-transformation duration="5.0" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation duration="5.0" />
  <cld-transformation effect="transition" :overlay="video:transition1" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation :overlay="video:snow_deer" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation duration="5.0" />
  <cld-transformation effect="transition" :overlay="video:transition2" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="splice" :overlay="video:dog" />
  <cld-transformation height="200" width="300" crop="scale" />
  <cld-transformation duration="5.0" />
  <cld-transformation flags="layer_apply" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="kitten_fighting" >
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation effect="transition" overlay="video:transition1">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="video:snow_deer">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation effect="transition" overlay="video:transition2">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="splice" overlay="video:dog">
  </cl-transformation>
  <cl-transformation height="200" width="300" crop="scale">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>
.NET:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Duration("5.0").Chain()
  .Height(200).Width(300).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:dog")).Chain()
  .Height(200).Width(300).Crop("scale").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:snow_deer")).Chain()
  .Height(200).Width(300).Crop("scale").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:dog")).Chain()
  .Height(200).Width(300).Crop("scale").Chain()
  .Duration("5.0").Chain()
  .Flags("layer_apply")).BuildVideoTag("kitten_fighting")
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setDuration("5.0").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition1").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("video:snow_deer").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setDuration("5.0").chain()
  .setEffect("transition").setOverlay("video:transition2").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").chain()
  .setFlags("splice").setOverlay("video:dog").chain()
  .setHeight(200).setWidth(300).setCrop("scale").chain()
  .setDuration("5.0").chain()
  .setFlags("layer_apply")).generate("kitten_fighting.mp4")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .duration("5.0").chain()
  .height(200).width(300).crop("scale").chain()
  .overlay(new Layer().publicId("video:dog")).chain()
  .height(200).width(300).crop("scale").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:snow_deer")).chain()
  .height(200).width(300).crop("scale").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:dog")).chain()
  .height(200).width(300).crop("scale").chain()
  .duration(