Conditional video transformations

Cloudinary supports conditional transformations for videos, where a transformation is only applied if a specified condition is met, for example, if a video's width is greater than 300 pixels, apply a certain transformation.

On this page:

Specifying conditions
Specifying transformations for a condition
Multiple AND | OR conditions
Else branch transformations
Conditional transformation examples

Specifying conditions

To specify a condition to be met before applying a transformation, use the if parameter (also if in URLs). The if parameter accepts a string value detailing the condition to evaluate, and is specified in the URL in the following format:

if_<video characteristic>_<operator>_<video characteristic value>

Where:

video characteristic: The video parameter representing the characteristic to evaluate, for example w (or width in SDKs).
operator: The comparison operator for the comparison, for example lt for 'less than' (or < in SDKs).
video characteristic value: A hard coded value to check against, a supported user-defined variable containing a value to check against, or a different video characteristic you want to compare to.
For example, if you only want to apply a transformation to non-square videos, you could check if the width characteristic of your video is not equal to its height characteristic: if_w_ne_h

Tips

Specify strings for a characteristic sub-element or value surrounded by ! !. For example, if_ if_ctx:!productType!_eq_!shoes!.
You can check whether a string characteristic currently has no value using !!.
For example: if some-condition_eq_!!

See examples below.

Supported video characteristics

Characteristic	Description
`w`	(also `width` in SDKs) The asset's current width.
`iw`	The asset's initial width.
`h`	(also `height` in SDKs) The asset's current height.
`ih`	The asset's initial height.
`ar`	(also `aspect_ratio` in SDKs) The aspect ratio of the asset. The compared value can be either decimal (e.g., 1.5) or a ratio (e.g., 3:4).
`iar`	The asset's initial aspect ratio.
`ctx`	A contextual metadata value assigned to an asset.
`md`	A structured metadata value assigned to an asset.
`tags`	The set of tags assigned to the asset.
`du`	(also `duration` in SDKs) The current duration of the video.
`idu`	The video's initial duration.

Supported operators

URL	SDK symbol	Description
`eq`	`=`	Equal to
`ne`	`!=`	Not equal to
`lt`	`<`	Less than
`gt`	`>`	Greater than
`lte`	`<=`	Less than or equal to
`gte`	`>=`	Greater than or equal to
`in`\|`nin`	`in`\|`nin`	Included in \| Not included in Compares a set of strings against another set of strings. See Using the in and nin operators for examples.

When working with the Cloudinary SDKs, you can specify the condition using the SDK characteristic names and operator symbols, or you can specify it using the URL format. For example, both of the following are valid:

{ if: "w_gt_1000"},...
{ if: "width > 1000"},...

Using the in and nin operators

The in and nin operators compare two sets of strings. The : delimiter between strings denotes AND. String sets can include tags, contextual metadata or structured metadata values, for example:

To determine if sale and in_stock are present in the tags of a particular asset, use:
if_!sale:in_stock!_in_tags.
To determine if the key named color exists in the contextual metadata of a particular asset, use:
if_!color!_in_ctx.
To determine if a structured metadata field with external ID, color-id, has been set for a particular asset, use:
if_!color-id!_in_md.
To determine if a list value with external ID, green-id, has been selected from a multiple-selection structured metadata field with external ID, colors-id, for a particular asset, use:
if_!green-id!_in_md:!colors-id!.

Supported conditional video transformation parameters and flags

All video transformation parameters can be assigned in conditions except:
- You cannot assign transformation parameters for the format, fetch_format, color_space, delay, video_codec, audio_codec, start_offset, end_offset, or duration parameters.
- The angle parameter cannot be set to ignore.
Only the following flags are supported inside conditional video transformations:
layer_apply, relative, attachment, awebp

Notes

For the w, h, and ar parameters, the values refer to the current video status in the transformation chain (i.e., if transformations have already been applied to the video), while iw, ih, iar always refer to the original video.
dpr is not supported as a conditional transformation with the ar characteristic. Additionally, w and h are supported with dpr as long as they are still equal to iw or ih when the condition is evaluated. If dpr is specified in the transformation as a whole, and one of the conditional branches includes a resizing transformation, you need to specify a resize transformation in all the other branches too.
The ar (aspect ratio) parameter should be compared using 'greater than' or 'less than' rather than with 'equals'. This is because the width and height values are given as integers and not floating point values, leading to an "almost exact" calculated aspect ratio.
Contextual metadata values are always stored as strings, even if the value is numeric, therefore you cannot use the lt, gt, lte and gte operators to compare contextual metadata values numerically. You can, however, use these operators with numeric structured metadata values - see an example.

Specifying transformations for a condition

The transformation for a condition should be specified between the condition component and an if_end component in the format:

if_condition/transformation/if_end

For example:

if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end

In the following transformation, both videos are are scaled to a width of 500px. Afterwards, the same conditional padded-resize transformation shown above is applied to both videos. However, since the condition applies only for portrait videos (those with an aspect ratio less than 1.0) the resizing and padding is only applied to the parrot video.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end/rafting.mp4

Ruby (cloudinary 1.x):

cl_video_tag("rafting", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:if=>"ar_lt_1.0"},
  {:background=>"darkorange", :height=>300, :width=>500, :crop=>"pad"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('rafting.mp4'))
  ->resize(Resize::scale()->width(500))
  ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation())
  ->resize(Resize::pad()->width(500)
->height(300)
  ->background(
  Background::color(Color::DARKORANGE))
  )));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("rafting", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("if"=>"ar_lt_1.0"),
  array("background"=>"darkorange", "height"=>300, "width"=>500, "crop"=>"pad"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("rafting").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'if': "ar_lt_1.0"},
  {'background': "darkorange", 'height': 300, 'width': 500, 'crop': "pad"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("rafting", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("darkorange").height(300).width(500).crop("pad").chain()
  .if("end")).videoTag("rafting");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("rafting.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('rafting', {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("rafting", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("rafting.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

React (cloudinary-react 1.x):

<Video publicId="rafting" >
  <Transformation width="500" crop="scale" />
  <Transformation if="ar_lt_1.0" />
  <Transformation background="darkorange" height="300" width="500" crop="pad" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="rafting" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="ar_lt_1.0" />
  <cld-transformation background="darkorange" height="300" width="500" crop="pad" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("rafting.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="rafting" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation if="ar_lt_1.0">
  </cl-transformation>
  <cl-transformation background="darkorange" height="300" width="500" crop="pad">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .If("ar_lt_1.0").Chain()
  .Background("darkorange").Height(300).Width(500).Crop("pad").Chain()
  .If("end")).BuildVideoTag("rafting")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setIf("ar_lt_1.0").chain()
  .setBackground("darkorange").setHeight(300).setWidth(500).setCrop("pad").chain()
  .setIf("end")).generate("rafting.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("darkorange").height(300).width(500).crop("pad").chain()
  .if("end")).resourceType("video").generate("rafting.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/if_ar_lt_1.0/b_darkorange,c_pad,h_300,w_500/if_end/docs/parrot.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/parrot", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:if=>"ar_lt_1.0"},
  {:background=>"darkorange", :height=>300, :width=>500, :crop=>"pad"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/parrot.mp4'))
  ->resize(Resize::scale()->width(500))
  ->conditional(Conditional::ifCondition("aspect_ratio < 1.0",(new Transformation())
  ->resize(Resize::pad()->width(500)
->height(300)
  ->background(
  Background::color(Color::DARKORANGE))
  )));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/parrot", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("if"=>"ar_lt_1.0"),
  array("background"=>"darkorange", "height"=>300, "width"=>500, "crop"=>"pad"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/parrot").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'if': "ar_lt_1.0"},
  {'background': "darkorange", 'height': 300, 'width': 500, 'crop': "pad"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/parrot", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("darkorange").height(300).width(500).crop("pad").chain()
  .if("end")).videoTag("docs/parrot");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/parrot.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/parrot', {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/parrot", {transformation: [
  {width: 500, crop: "scale"},
  {if: "ar_lt_1.0"},
  {background: "darkorange", height: 300, width: 500, crop: "pad"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

React (cloudinary-react 1.x):

<Video publicId="docs/parrot" >
  <Transformation width="500" crop="scale" />
  <Transformation if="ar_lt_1.0" />
  <Transformation background="darkorange" height="300" width="500" crop="pad" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/parrot" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="ar_lt_1.0" />
  <cld-transformation background="darkorange" height="300" width="500" crop="pad" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "aspect_ratio < 1.0",
      new Transformation().resize(
        pad().width(500).height(300).background(color("darkorange"))
      )
    )
  );

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/parrot" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation if="ar_lt_1.0">
  </cl-transformation>
  <cl-transformation background="darkorange" height="300" width="500" crop="pad">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .If("ar_lt_1.0").Chain()
  .Background("darkorange").Height(300).Width(500).Crop("pad").Chain()
  .If("end")).BuildVideoTag("docs/parrot")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setIf("ar_lt_1.0").chain()
  .setBackground("darkorange").setHeight(300).setWidth(500).setCrop("pad").chain()
  .setIf("end")).generate("docs/parrot.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("ar_lt_1.0").chain()
  .background("darkorange").height(300).width(500).crop("pad").chain()
  .if("end")).resourceType("video").generate("docs/parrot.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Note

Transformation URLs technically support defining both the condition and a single resulting transformation inside a single transformation component (without the need for a closing end_if). However, to avoid ambiguity, the best practice is to always use if and if_end components in your URL as shown above.

Some SDKs require this separation and automatically generate URLs in the if...end_if format.
A named transformation cannot be placed in the same transformation component as its condition (e.g., if_w_eq_h,t_trans is not supported) and must be specified using the if...if_end format.
If you do include both the if condition and the resulting transformation parameters within a single component of the URL, the if condition is evaluated first, regardless of its location within the component and (only) when the condition is true, all transformation parameters specified in that component are applied.

Conditions with chained transformations

You can apply multiple chained transformations to your condition by including the entire chained transformation in between the if and if_end components.

The example below checks whether the video asset's tags include a 'cloudinary' tag. Only in that case, a chained transformation including an image overlay (Cloudinary logo) and a text overlay ('By Cloudinary') are applied. If 'cloudinary' is not one of the tags, no image or text overlay is applied.

Note that this example also includes a scale-down transformation before the beginning of the conditional transformation and a duration trim after the end of the conditional transformation. Those transformations are applied regardless of the true or false result of the condition.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/if_!cloudinary!_in_tags/l_cloudinary_icon_white/c_scale,w_100/o_50/e_brightness:100/fl_layer_apply,g_north_east/l_text:arial_15:By%20Cloudinary/fl_layer_apply,g_north_east,x_10,y_80/if_end/du_5.0/snow_horses.mp4

Ruby (cloudinary 1.x):

cl_video_tag("snow_horses", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:if=>"!cloudinary!_in_tags"},
  {:overlay=>"cloudinary_icon_white"},
  {:width=>100, :crop=>"scale"},
  {:opacity=>50},
  {:effect=>"brightness:100"},
  {:flags=>"layer_apply", :gravity=>"north_east"},
  {:overlay=>{:font_family=>"arial", :font_size=>15, :text=>"By%2520Cloudinary"}},
  {:flags=>"layer_apply", :gravity=>"north_east", :x=>10, :y=>80},
  {:if=>"end"},
  {:duration=>"5.0"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('snow_horses.mp4'))
  ->resize(Resize::scale()->width(500))
  ->conditional(Conditional::ifCondition("!cloudinary! in tags",(new Transformation())
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(100))
  ->adjust(Adjust::opacity(50))
  ->adjust(Adjust::brightness()->level(100)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  )
  ->overlay(Overlay::source(
  Source::text("By%20Cloudinary",(new TextStyle("arial",15))))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
->offsetX(10)
->offsetY(80))
  )))
  ->videoEdit(VideoEdit::trim()->duration(5.0));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("snow_horses", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("if"=>"!cloudinary!_in_tags"),
  array("overlay"=>"cloudinary_icon_white"),
  array("width"=>100, "crop"=>"scale"),
  array("opacity"=>50),
  array("effect"=>"brightness:100"),
  array("flags"=>"layer_apply", "gravity"=>"north_east"),
  array("overlay"=>array("font_family"=>"arial", "font_size"=>15, "text"=>"By%2520Cloudinary")),
  array("flags"=>"layer_apply", "gravity"=>"north_east", "x"=>10, "y"=>80),
  array("if"=>"end"),
  array("duration"=>"5.0")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("snow_horses").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'if': "!cloudinary!_in_tags"},
  {'overlay': "cloudinary_icon_white"},
  {'width': 100, 'crop': "scale"},
  {'opacity': 50},
  {'effect': "brightness:100"},
  {'flags': "layer_apply", 'gravity': "north_east"},
  {'overlay': {'font_family': "arial", 'font_size': 15, 'text': "By%2520Cloudinary"}},
  {'flags': "layer_apply", 'gravity': "north_east", 'x': 10, 'y': 80},
  {'if': "end"},
  {'duration': "5.0"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("snow_horses", {transformation: [
  {width: 500, crop: "scale"},
  {if: "!cloudinary!_in_tags"},
  {overlay: "cloudinary_icon_white"},
  {width: 100, crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: {font_family: "arial", font_size: 15, text: "By%2520Cloudinary"}},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 80},
  {if: "end"},
  {duration: "5.0"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("!cloudinary!_in_tags").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .width(100).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(15).text("By%2520Cloudinary")).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(80).chain()
  .if("end").chain()
  .duration("5.0")).videoTag("snow_horses");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("snow_horses.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "!cloudinary! in tags",
      new Transformation()
        .overlay(
          source(
            image("cloudinary_icon_white").transformation(
              new Transformation()
                .resize(scale().width(100))
                .adjust(opacity(50))
                .adjust(brightness().level(100))
            )
          ).position(new Position().gravity(compass("north_east")))
        )
        .overlay(
          source(text("By%20Cloudinary", new TextStyle("arial", 15))).position(
            new Position()
              .gravity(compass("north_east"))
              .offsetX(10)
              .offsetY(80)
          )
        )
    )
  )
  .videoEdit(trim().duration("5.0"));

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('snow_horses', {transformation: [
  {width: 500, crop: "scale"},
  {if: "!cloudinary!_in_tags"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {width: 100, crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(15).text("By%2520Cloudinary")},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 80},
  {if: "end"},
  {duration: "5.0"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("snow_horses", {transformation: [
  {width: 500, crop: "scale"},
  {if: "!cloudinary!_in_tags"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {width: 100, crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(15).text("By%2520Cloudinary")},
  {flags: "layer_apply", gravity: "north_east", x: 10, y: 80},
  {if: "end"},
  {duration: "5.0"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("snow_horses.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "!cloudinary! in tags",
      new Transformation()
        .overlay(
          source(
            image("cloudinary_icon_white").transformation(
              new Transformation()
                .resize(scale().width(100))
                .adjust(opacity(50))
                .adjust(brightness().level(100))
            )
          ).position(new Position().gravity(compass("north_east")))
        )
        .overlay(
          source(text("By%20Cloudinary", new TextStyle("arial", 15))).position(
            new Position()
              .gravity(compass("north_east"))
              .offsetX(10)
              .offsetY(80)
          )
        )
    )
  )
  .videoEdit(trim().duration("5.0"));

React (cloudinary-react 1.x):

<Video publicId="snow_horses" >
  <Transformation width="500" crop="scale" />
  <Transformation if="!cloudinary!_in_tags" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation width="100" crop="scale" />
  <Transformation opacity="50" />
  <Transformation effect="brightness:100" />
  <Transformation flags="layer_apply" gravity="north_east" />
  <Transformation overlay={{fontFamily: "arial", fontSize: 15, text: "By%2520Cloudinary"}} />
  <Transformation flags="layer_apply" gravity="north_east" x="10" y="80" />
  <Transformation if="end" />
  <Transformation duration="5.0" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="snow_horses" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="!cloudinary!_in_tags" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation width="100" crop="scale" />
  <cld-transformation opacity="50" />
  <cld-transformation effect="brightness:100" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
  <cld-transformation :overlay="{fontFamily: 'arial', fontSize: 15, text: 'By%2520Cloudinary'}" />
  <cld-transformation flags="layer_apply" gravity="north_east" x="10" y="80" />
  <cld-transformation if="end" />
  <cld-transformation duration="5.0" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("snow_horses.mp4")
  .resize(scale().width(500))
  .conditional(
    ifCondition(
      "!cloudinary! in tags",
      new Transformation()
        .overlay(
          source(
            image("cloudinary_icon_white").transformation(
              new Transformation()
                .resize(scale().width(100))
                .adjust(opacity(50))
                .adjust(brightness().level(100))
            )
          ).position(new Position().gravity(compass("north_east")))
        )
        .overlay(
          source(text("By%20Cloudinary", new TextStyle("arial", 15))).position(
            new Position()
              .gravity(compass("north_east"))
              .offsetX(10)
              .offsetY(80)
          )
        )
    )
  )
  .videoEdit(trim().duration("5.0"));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="snow_horses" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation if="!cloudinary!_in_tags">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation width="100" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="50">
  </cl-transformation>
  <cl-transformation effect="brightness:100">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
  <cl-transformation overlay="text:arial_15:By%2520Cloudinary">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east" x="10" y="80">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation duration="5.0">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .If("!cloudinary!_in_tags").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Width(100).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Effect("brightness:100").Chain()
  .Flags("layer_apply").Gravity("north_east").Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(15).Text("By%2520Cloudinary")).Chain()
  .Flags("layer_apply").Gravity("north_east").X(10).Y(80).Chain()
  .If("end").Chain()
  .Duration("5.0")).BuildVideoTag("snow_horses")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setIf("!cloudinary!_in_tags").chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setWidth(100).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setEffect("brightness:100").chain()
  .setFlags("layer_apply").setGravity("north_east").chain()
  .setOverlay("text:arial_15:By%2520Cloudinary").chain()
  .setFlags("layer_apply").setGravity("north_east").setX(10).setY(80).chain()
  .setIf("end").chain()
  .setDuration("5.0")).generate("snow_horses.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .if("!cloudinary!_in_tags").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .width(100).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(15).text("By%2520Cloudinary")).chain()
  .flags("layer_apply").gravity("north_east").x(10).y(80).chain()
  .if("end").chain()
  .duration("5.0")).resourceType("video").generate("snow_horses.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Multiple AND | OR conditions

You can specify multiple conditions to evaluate by joining the conditions with AND or OR conjunction operators.

Note

'AND' operators are evaluated before 'OR' operators.

The example below checks whether the video's aspect ratio is larger than a standard mobile portrait orientation AND if it has a large width. Only in this case, it crops the video to a portrait orientation with a width of 500. If the video already has a portrait orientation (condition 1 is false) or if the original width is less than 500 (condition 2 is false), the conditional transformation is ignored and the video is delivered in its original shape and size.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_ar_gt_0.65_and_w_gt_500/ar_0.65,c_fill,w_500/if_end/snow_horses.mp4

Ruby (cloudinary 1.x):

cl_video_tag("snow_horses", :transformation=>[
  {:if=>"ar_gt_0.65_and_w_gt_500"},
  {:aspect_ratio=>"0.65", :width=>500, :crop=>"fill"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('snow_horses.mp4'))
  ->conditional(Conditional::ifCondition("aspect_ratio > 0.65 && width > 500",(new Transformation())
  ->resize(Resize::fill()->width(500)
->aspectRatio(0.65))));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("snow_horses", array("transformation"=>array(
  array("if"=>"ar_gt_0.65_and_w_gt_500"),
  array("aspect_ratio"=>"0.65", "width"=>500, "crop"=>"fill"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("snow_horses").video(transformation=[
  {'if': "ar_gt_0.65_and_w_gt_500"},
  {'aspect_ratio': "0.65", 'width': 500, 'crop': "fill"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("snow_horses", {transformation: [
  {if: "ar_gt_0.65_and_w_gt_500"},
  {aspect_ratio: "0.65", width: 500, crop: "fill"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("ar_gt_0.65_and_w_gt_500").chain()
  .aspectRatio("0.65").width(500).crop("fill").chain()
  .if("end")).videoTag("snow_horses");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("snow_horses.mp4").conditional(
  ifCondition(
    "aspect_ratio > 0.65 && width > 500",
    new Transformation().resize(fill().width(500).aspectRatio(0.65))
  )
);

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('snow_horses', {transformation: [
  {if: "ar_gt_0.65_and_w_gt_500"},
  {aspectRatio: "0.65", width: 500, crop: "fill"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("snow_horses", {transformation: [
  {if: "ar_gt_0.65_and_w_gt_500"},
  {aspect_ratio: "0.65", width: 500, crop: "fill"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("snow_horses.mp4").conditional(
  ifCondition(
    "aspect_ratio > 0.65 && width > 500",
    new Transformation().resize(fill().width(500).aspectRatio(0.65))
  )
);

React (cloudinary-react 1.x):

<Video publicId="snow_horses" >
  <Transformation if="ar_gt_0.65_and_w_gt_500" />
  <Transformation aspectRatio="0.65" width="500" crop="fill" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="snow_horses" >
  <cld-transformation if="ar_gt_0.65_and_w_gt_500" />
  <cld-transformation aspect-ratio="0.65" width="500" crop="fill" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("snow_horses.mp4").conditional(
  ifCondition(
    "aspect_ratio > 0.65 && width > 500",
    new Transformation().resize(fill().width(500).aspectRatio(0.65))
  )
);

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="snow_horses" >
  <cl-transformation if="ar_gt_0.65_and_w_gt_500">
  </cl-transformation>
  <cl-transformation aspect-ratio="0.65" width="500" crop="fill">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("ar_gt_0.65_and_w_gt_500").Chain()
  .AspectRatio("0.65").Width(500).Crop("fill").Chain()
  .If("end")).BuildVideoTag("snow_horses")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("ar_gt_0.65_and_w_gt_500").chain()
  .setAspectRatio("0.65").setWidth(500).setCrop("fill").chain()
  .setIf("end")).generate("snow_horses.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("ar_gt_0.65_and_w_gt_500").chain()
  .aspectRatio("0.65").width(500).crop("fill").chain()
  .if("end")).resourceType("video").generate("snow_horses.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Note

It's also possible to define multiple separate conditions, each with its own transformation result by using multiple if...end_if chained components in the URL.

Else branch transformations

You can specify a transformation that is applied in the case that the initial condition is evaluated as false (and hence the transformations associated with the condition are not applied), by using the if_else parameter to specify this fallback transformation.

For example, the following conditional transformation checks whether a video's aspect ratio is close to the desired aspect ratio, if it is close, then when the video is resized, any necessary padding is black. But if the aspect ratio is much smaller (for example, if it is a square or portrait video), then a blurred video padding is added.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_ar_gt_1.2/b_black,c_pad,h_320,w_480/if_else/b_blurred:400:15,c_pad,h_320,w_480/if_end/docs/parrot.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/parrot", :transformation=>[
  {:if=>"ar_gt_1.2"},
  {:background=>"black", :height=>320, :width=>480, :crop=>"pad"},
  {:if=>"else"},
  {:background=>"blurred:400:15", :height=>320, :width=>480, :crop=>"pad"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/parrot.mp4'))
  ->conditional(Conditional::ifCondition("aspect_ratio > 1.2",(new Transformation())
  ->resize(Resize::pad()->width(480)
->height(320)
  ->background(
  Background::color(Color::BLACK))
  ))
  ->otherwise((new Transformation())
  ->resize(Resize::pad()->width(480)
->height(320)
  ->background(
  Background::blurred()->intensity(400)
->brightness(15))
  ))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/parrot", array("transformation"=>array(
  array("if"=>"ar_gt_1.2"),
  array("background"=>"black", "height"=>320, "width"=>480, "crop"=>"pad"),
  array("if"=>"else"),
  array("background"=>"blurred:400:15", "height"=>320, "width"=>480, "crop"=>"pad"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/parrot").video(transformation=[
  {'if': "ar_gt_1.2"},
  {'background': "black", 'height': 320, 'width': 480, 'crop': "pad"},
  {'if': "else"},
  {'background': "blurred:400:15", 'height': 320, 'width': 480, 'crop': "pad"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/parrot", {transformation: [
  {if: "ar_gt_1.2"},
  {background: "black", height: 320, width: 480, crop: "pad"},
  {if: "else"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("ar_gt_1.2").chain()
  .background("black").height(320).width(480).crop("pad").chain()
  .if("else").chain()
  .background("blurred:400:15").height(320).width(480).crop("pad").chain()
  .if("end")).videoTag("docs/parrot");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "aspect_ratio > 1.2",
    new Transformation().resize(
      pad().width(480).height(320).background(color("black"))
    )
  ).otherwise(
    new Transformation().resize(
      pad()
        .width(480)
        .height(320)
        .background(blurred().intensity(400).brightness(15))
    )
  )
);

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/parrot', {transformation: [
  {if: "ar_gt_1.2"},
  {background: "black", height: 320, width: 480, crop: "pad"},
  {if: "else"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/parrot", {transformation: [
  {if: "ar_gt_1.2"},
  {background: "black", height: 320, width: 480, crop: "pad"},
  {if: "else"},
  {background: "blurred:400:15", height: 320, width: 480, crop: "pad"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "aspect_ratio > 1.2",
    new Transformation().resize(
      pad().width(480).height(320).background(color("black"))
    )
  ).otherwise(
    new Transformation().resize(
      pad()
        .width(480)
        .height(320)
        .background(blurred().intensity(400).brightness(15))
    )
  )
);

React (cloudinary-react 1.x):

<Video publicId="docs/parrot" >
  <Transformation if="ar_gt_1.2" />
  <Transformation background="black" height="320" width="480" crop="pad" />
  <Transformation if="else" />
  <Transformation background="blurred:400:15" height="320" width="480" crop="pad" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/parrot" >
  <cld-transformation if="ar_gt_1.2" />
  <cld-transformation background="black" height="320" width="480" crop="pad" />
  <cld-transformation if="else" />
  <cld-transformation background="blurred:400:15" height="320" width="480" crop="pad" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "aspect_ratio > 1.2",
    new Transformation().resize(
      pad().width(480).height(320).background(color("black"))
    )
  ).otherwise(
    new Transformation().resize(
      pad()
        .width(480)
        .height(320)
        .background(blurred().intensity(400).brightness(15))
    )
  )
);

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/parrot" >
  <cl-transformation if="ar_gt_1.2">
  </cl-transformation>
  <cl-transformation background="black" height="320" width="480" crop="pad">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation background="blurred:400:15" height="320" width="480" crop="pad">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("ar_gt_1.2").Chain()
  .Background("black").Height(320).Width(480).Crop("pad").Chain()
  .If("else").Chain()
  .Background("blurred:400:15").Height(320).Width(480).Crop("pad").Chain()
  .If("end")).BuildVideoTag("docs/parrot")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("ar_gt_1.2").chain()
  .setBackground("black").setHeight(320).setWidth(480).setCrop("pad").chain()
  .setIf("else").chain()
  .setBackground("blurred:400:15").setHeight(320).setWidth(480).setCrop("pad").chain()
  .setIf("end")).generate("docs/parrot.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("ar_gt_1.2").chain()
  .background("black").height(320).width(480).crop("pad").chain()
  .if("else").chain()
  .background("blurred:400:15").height(320).width(480).crop("pad").chain()
  .if("end")).resourceType("video").generate("docs/parrot.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

In cases where the if condition is not in the preceding transformation component, then the if_else parameter also acts as an if_end parameter: all chained transformation components until the one with if_else are only applied if the previous condition holds true. Multiple conditional transformations can also be applied by adding an if_end parameter to the last transformation component in the chain, and to avoid ambiguity, the component with the if_else parameter should not have additional transformation instructions.

For example, if the video is shorter than or equal to 10 seconds, fade in for one second and fade out for one second, else if the video is longer than 10 seconds, fade in for two seconds and fade out for two seconds:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_du_lte_10/e_fade:1000/e_fade:-1000/if_else/e_fade:2000/e_fade:-2000/if_end/docs/parrot.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/parrot", :transformation=>[
  {:if=>"du_lte_10"},
  {:effect=>"fade:1000"},
  {:effect=>"fade:-1000"},
  {:if=>"else"},
  {:effect=>"fade:2000"},
  {:effect=>"fade:-2000"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/parrot.mp4'))
  ->conditional(Conditional::ifCondition("du_lte_10",(new Transformation())
  ->effect(Effect::fadeIn()->duration(1000))
  ->effect(Effect::fadeOut()->duration(1000)))
  ->otherwise((new Transformation())
  ->effect(Effect::fadeIn()->duration(2000))
  ->effect(Effect::fadeOut()->duration(2000)))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/parrot", array("transformation"=>array(
  array("if"=>"du_lte_10"),
  array("effect"=>"fade:1000"),
  array("effect"=>"fade:-1000"),
  array("if"=>"else"),
  array("effect"=>"fade:2000"),
  array("effect"=>"fade:-2000"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/parrot").video(transformation=[
  {'if': "du_lte_10"},
  {'effect': "fade:1000"},
  {'effect': "fade:-1000"},
  {'if': "else"},
  {'effect': "fade:2000"},
  {'effect': "fade:-2000"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/parrot", {transformation: [
  {if: "du_lte_10"},
  {effect: "fade:1000"},
  {effect: "fade:-1000"},
  {if: "else"},
  {effect: "fade:2000"},
  {effect: "fade:-2000"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("du_lte_10").chain()
  .effect("fade:1000").chain()
  .effect("fade:-1000").chain()
  .if("else").chain()
  .effect("fade:2000").chain()
  .effect("fade:-2000").chain()
  .if("end")).videoTag("docs/parrot");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "du_lte_10",
    new Transformation()
      .effect(fadeIn().duration(1000))
      .effect(fadeOut().duration(1000))
  ).otherwise(
    new Transformation()
      .effect(fadeIn().duration(2000))
      .effect(fadeOut().duration(2000))
  )
);

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/parrot', {transformation: [
  {if: "du_lte_10"},
  {effect: "fade:1000"},
  {effect: "fade:-1000"},
  {if: "else"},
  {effect: "fade:2000"},
  {effect: "fade:-2000"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/parrot", {transformation: [
  {if: "du_lte_10"},
  {effect: "fade:1000"},
  {effect: "fade:-1000"},
  {if: "else"},
  {effect: "fade:2000"},
  {effect: "fade:-2000"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "du_lte_10",
    new Transformation()
      .effect(fadeIn().duration(1000))
      .effect(fadeOut().duration(1000))
  ).otherwise(
    new Transformation()
      .effect(fadeIn().duration(2000))
      .effect(fadeOut().duration(2000))
  )
);

React (cloudinary-react 1.x):

<Video publicId="docs/parrot" >
  <Transformation if="du_lte_10" />
  <Transformation effect="fade:1000" />
  <Transformation effect="fade:-1000" />
  <Transformation if="else" />
  <Transformation effect="fade:2000" />
  <Transformation effect="fade:-2000" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/parrot" >
  <cld-transformation if="du_lte_10" />
  <cld-transformation effect="fade:1000" />
  <cld-transformation effect="fade:-1000" />
  <cld-transformation if="else" />
  <cld-transformation effect="fade:2000" />
  <cld-transformation effect="fade:-2000" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/parrot.mp4").conditional(
  ifCondition(
    "du_lte_10",
    new Transformation()
      .effect(fadeIn().duration(1000))
      .effect(fadeOut().duration(1000))
  ).otherwise(
    new Transformation()
      .effect(fadeIn().duration(2000))
      .effect(fadeOut().duration(2000))
  )
);

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/parrot" >
  <cl-transformation if="du_lte_10">
  </cl-transformation>
  <cl-transformation effect="fade:1000">
  </cl-transformation>
  <cl-transformation effect="fade:-1000">
  </cl-transformation>
  <cl-transformation if="else">
  </cl-transformation>
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="fade:-2000">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("du_lte_10").Chain()
  .Effect("fade:1000").Chain()
  .Effect("fade:-1000").Chain()
  .If("else").Chain()
  .Effect("fade:2000").Chain()
  .Effect("fade:-2000").Chain()
  .If("end")).BuildVideoTag("docs/parrot")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("du_lte_10").chain()
  .setEffect("fade:1000").chain()
  .setEffect("fade:-1000").chain()
  .setIf("else").chain()
  .setEffect("fade:2000").chain()
  .setEffect("fade:-2000").chain()
  .setIf("end")).generate("docs/parrot.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("du_lte_10").chain()
  .effect("fade:1000").chain()
  .effect("fade:-1000").chain()
  .if("else").chain()
  .effect("fade:2000").chain()
  .effect("fade:-2000").chain()
  .if("end")).resourceType("video").generate("docs/parrot.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Conditional transformation examples

Conditional text overlay based on width: This example limits a video size to a width of 300 pixels using the limit crop mode, and then uses a conditional transformation to add a text caption only to videos whose initial width was wider than 300 and were scaled down (if_iw_gt_300):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/c_limit,w_300/if_iw_gt_300/co_white,l_text:Arial_15_bold:Video scaled down to 300px/fl_layer_apply,g_north_west,x_5,y_5/if_end/marmots.mp4

Ruby (cloudinary 1.x):

cl_video_tag("marmots", :transformation=>[
  {:width=>300, :crop=>"limit"},
  {:if=>"iw_gt_300"},
  {:color=>"white", :overlay=>{:font_family=>"Arial", :font_size=>15, :font_weight=>"bold", :text=>"Video%20scaled%20down%20to%20300px"}},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>5, :y=>5},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('marmots.mp4'))
  ->resize(Resize::limitFit()->width(300))
  ->conditional(Conditional::ifCondition("initial_width > 300",(new Transformation())
  ->overlay(Overlay::source(
  Source::text("Video scaled down to 300px",(new TextStyle("Arial",15))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textColor(Color::WHITE)
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northWest()))
->offsetX(5)
->offsetY(5))
  )));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("marmots", array("transformation"=>array(
  array("width"=>300, "crop"=>"limit"),
  array("if"=>"iw_gt_300"),
  array("color"=>"white", "overlay"=>array("font_family"=>"Arial", "font_size"=>15, "font_weight"=>"bold", "text"=>"Video%20scaled%20down%20to%20300px")),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>5, "y"=>5),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("marmots").video(transformation=[
  {'width': 300, 'crop': "limit"},
  {'if': "iw_gt_300"},
  {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 15, 'font_weight': "bold", 'text': "Video%20scaled%20down%20to%20300px"}},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 5, 'y': 5},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("marmots", {transformation: [
  {width: 300, crop: "limit"},
  {if: "iw_gt_300"},
  {color: "white", overlay: {font_family: "Arial", font_size: 15, font_weight: "bold", text: "Video%20scaled%20down%20to%20300px"}},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 5},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(300).crop("limit").chain()
  .if("iw_gt_300").chain()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")).chain()
  .flags("layer_apply").gravity("north_west").x(5).y(5).chain()
  .if("end")).videoTag("marmots");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("marmots.mp4")
  .resize(limitFit().width(300))
  .conditional(
    ifCondition(
      "initial_width > 300",
      new Transformation().overlay(
        source(
          text(
            "Video scaled down to 300px",
            new TextStyle("Arial", 15).fontWeight("bold")
          ).textColor("white")
        ).position(
          new Position().gravity(compass("north_west")).offsetX(5).offsetY(5)
        )
      )
    )
  );

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('marmots', {transformation: [
  {width: 300, crop: "limit"},
  {if: "iw_gt_300"},
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 5},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("marmots", {transformation: [
  {width: 300, crop: "limit"},
  {if: "iw_gt_300"},
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")},
  {flags: "layer_apply", gravity: "north_west", x: 5, y: 5},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("marmots.mp4")
  .resize(limitFit().width(300))
  .conditional(
    ifCondition(
      "initial_width > 300",
      new Transformation().overlay(
        source(
          text(
            "Video scaled down to 300px",
            new TextStyle("Arial", 15).fontWeight("bold")
          ).textColor("white")
        ).position(
          new Position().gravity(compass("north_west")).offsetX(5).offsetY(5)
        )
      )
    )
  );

React (cloudinary-react 1.x):

<Video publicId="marmots" >
  <Transformation width="300" crop="limit" />
  <Transformation if="iw_gt_300" />
  <Transformation color="white" overlay={{fontFamily: "Arial", fontSize: 15, fontWeight: "bold", text: "Video%20scaled%20down%20to%20300px"}} />
  <Transformation flags="layer_apply" gravity="north_west" x="5" y="5" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="marmots" >
  <cld-transformation width="300" crop="limit" />
  <cld-transformation if="iw_gt_300" />
  <cld-transformation color="white" :overlay="{fontFamily: 'Arial', fontSize: 15, fontWeight: 'bold', text: 'Video%20scaled%20down%20to%20300px'}" />
  <cld-transformation flags="layer_apply" gravity="north_west" x="5" y="5" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("marmots.mp4")
  .resize(limitFit().width(300))
  .conditional(
    ifCondition(
      "initial_width > 300",
      new Transformation().overlay(
        source(
          text(
            "Video scaled down to 300px",
            new TextStyle("Arial", 15).fontWeight("bold")
          ).textColor("white")
        ).position(
          new Position().gravity(compass("north_west")).offsetX(5).offsetY(5)
        )
      )
    )
  );

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="marmots" >
  <cl-transformation width="300" crop="limit">
  </cl-transformation>
  <cl-transformation if="iw_gt_300">
  </cl-transformation>
  <cl-transformation color="white" overlay="text:Arial_15_bold:Video%20scaled%20down%20to%20300px">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_west" x="5" y="5">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(300).Crop("limit").Chain()
  .If("iw_gt_300").Chain()
  .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(15).FontWeight("bold").Text("Video%20scaled%20down%20to%20300px")).Chain()
  .Flags("layer_apply").Gravity("north_west").X(5).Y(5).Chain()
  .If("end")).BuildVideoTag("marmots")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(300).setCrop("limit").chain()
  .setIf("iw_gt_300").chain()
  .setColor("white").setOverlay("text:Arial_15_bold:Video%20scaled%20down%20to%20300px").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(5).setY(5).chain()
  .setIf("end")).generate("marmots.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(300).crop("limit").chain()
  .if("iw_gt_300").chain()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(15).fontWeight("bold").text("Video%20scaled%20down%20to%20300px")).chain()
  .flags("layer_apply").gravity("north_west").x(5).y(5).chain()
  .if("end")).resourceType("video").generate("marmots.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Conditional resize based on a contextual metadata value: This example resizes a video to a 200*200 square video if it has a contextual metadata key named 'productType' with the value 'shoes'.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_ctx:!productType!_eq_!shoes!/ar_1:1,c_fill,w_200/if_end/docs/walking.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/walking", :transformation=>[
  {:if=>"ctx:!productType!_eq_!shoes!"},
  {:aspect_ratio=>"1:1", :width=>200, :crop=>"fill"},
  {:if=>"end"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/walking.mp4'))
  ->conditional(Conditional::ifCondition("ctx:!productType! = !shoes!",(new Transformation())
  ->resize(Resize::fill()->width(200)
  ->aspectRatio(
  AspectRatio::ar1X1())
  )));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/walking", array("transformation"=>array(
  array("if"=>"ctx:!productType!_eq_!shoes!"),
  array("aspect_ratio"=>"1:1", "width"=>200, "crop"=>"fill"),
  array("if"=>"end")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/walking").video(transformation=[
  {'if': "ctx:!productType!_eq_!shoes!"},
  {'aspect_ratio': "1:1", 'width': 200, 'crop': "fill"},
  {'if': "end"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/walking", {transformation: [
  {if: "ctx:!productType!_eq_!shoes!"},
  {aspect_ratio: "1:1", width: 200, crop: "fill"},
  {if: "end"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("ctx:!productType!_eq_!shoes!").chain()
  .aspectRatio("1:1").width(200).crop("fill").chain()
  .if("end")).videoTag("docs/walking");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/walking.mp4").conditional(
  ifCondition(
    "ctx:!productType! = !shoes!",
    new Transformation().resize(fill().width(200).aspectRatio(ar1X1()))
  )
);

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/walking', {transformation: [
  {if: "ctx:!productType!_eq_!shoes!"},
  {aspectRatio: "1:1", width: 200, crop: "fill"},
  {if: "end"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/walking", {transformation: [
  {if: "ctx:!productType!_eq_!shoes!"},
  {aspect_ratio: "1:1", width: 200, crop: "fill"},
  {if: "end"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/walking.mp4").conditional(
  ifCondition(
    "ctx:!productType! = !shoes!",
    new Transformation().resize(fill().width(200).aspectRatio(ar1X1()))
  )
);

React (cloudinary-react 1.x):

<Video publicId="docs/walking" >
  <Transformation if="ctx:!productType!_eq_!shoes!" />
  <Transformation aspectRatio="1:1" width="200" crop="fill" />
  <Transformation if="end" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/walking" >
  <cld-transformation if="ctx:!productType!_eq_!shoes!" />
  <cld-transformation aspect-ratio="1:1" width="200" crop="fill" />
  <cld-transformation if="end" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/walking.mp4").conditional(
  ifCondition(
    "ctx:!productType! = !shoes!",
    new Transformation().resize(fill().width(200).aspectRatio(ar1X1()))
  )
);

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/walking" >
  <cl-transformation if="ctx:!productType!_eq_!shoes!">
  </cl-transformation>
  <cl-transformation aspect-ratio="1:1" width="200" crop="fill">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("ctx:!productType!_eq_!shoes!").Chain()
  .AspectRatio("1:1").Width(200).Crop("fill").Chain()
  .If("end")).BuildVideoTag("docs/walking")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("ctx:!productType!_eq_!shoes!").chain()
  .setAspectRatio("1:1").setWidth(200).setCrop("fill").chain()
  .setIf("end")).generate("docs/walking.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("ctx:!productType!_eq_!shoes!").chain()
  .aspectRatio("1:1").width(200).crop("fill").chain()
  .if("end")).resourceType("video").generate("docs/walking.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Conditional image overlay based on tags: This example adds a sale icon to a product video if both the strings ‘sale’ and ‘in_stock” are among the tags assigned to the video:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_!sale:in_stock!_in_tags/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300/docs/sunglasses.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/sunglasses", :transformation=>[
  {:if=>"!sale:in_stock!_in_tags"},
  {:overlay=>"sale_icon"},
  {:width=>200, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>30, :y=>30},
  {:if=>"end"},
  {:width=>300, :crop=>"scale"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/sunglasses.mp4'))
  ->conditional(Conditional::ifCondition("!sale:in_stock! in tags",(new Transformation())
  ->overlay(Overlay::source(
  Source::image("sale_icon")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(200)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northWest()))
->offsetX(30)
->offsetY(30))
  )))
  ->resize(Resize::scale()->width(300));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/sunglasses", array("transformation"=>array(
  array("if"=>"!sale:in_stock!_in_tags"),
  array("overlay"=>"sale_icon"),
  array("width"=>200, "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>30, "y"=>30),
  array("if"=>"end"),
  array("width"=>300, "crop"=>"scale")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/sunglasses").video(transformation=[
  {'if': "!sale:in_stock!_in_tags"},
  {'overlay': "sale_icon"},
  {'width': 200, 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30},
  {'if': "end"},
  {'width': 300, 'crop': "scale"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/sunglasses", {transformation: [
  {if: "!sale:in_stock!_in_tags"},
  {overlay: "sale_icon"},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("!sale:in_stock!_in_tags").chain()
  .overlay(new Layer().publicId("sale_icon")).chain()
  .width(200).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30).chain()
  .if("end").chain()
  .width(300).crop("scale")).videoTag("docs/sunglasses");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "!sale:in_stock! in tags",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/sunglasses', {transformation: [
  {if: "!sale:in_stock!_in_tags"},
  {overlay: new cloudinary.Layer().publicId("sale_icon")},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/sunglasses", {transformation: [
  {if: "!sale:in_stock!_in_tags"},
  {overlay: new cloudinary.Layer().publicId("sale_icon")},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "!sale:in_stock! in tags",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

React (cloudinary-react 1.x):

<Video publicId="docs/sunglasses" >
  <Transformation if="!sale:in_stock!_in_tags" />
  <Transformation overlay="sale_icon" />
  <Transformation width="200" crop="scale" />
  <Transformation flags="layer_apply" gravity="north_west" x="30" y="30" />
  <Transformation if="end" />
  <Transformation width="300" crop="scale" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/sunglasses" >
  <cld-transformation if="!sale:in_stock!_in_tags" />
  <cld-transformation :overlay="sale_icon" />
  <cld-transformation width="200" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="north_west" x="30" y="30" />
  <cld-transformation if="end" />
  <cld-transformation width="300" crop="scale" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "!sale:in_stock! in tags",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/sunglasses" >
  <cl-transformation if="!sale:in_stock!_in_tags">
  </cl-transformation>
  <cl-transformation overlay="sale_icon">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_west" x="30" y="30">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("!sale:in_stock!_in_tags").Chain()
  .Overlay(new Layer().PublicId("sale_icon")).Chain()
  .Width(200).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("north_west").X(30).Y(30).Chain()
  .If("end").Chain()
  .Width(300).Crop("scale")).BuildVideoTag("docs/sunglasses")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("!sale:in_stock!_in_tags").chain()
  .setOverlay("sale_icon").chain()
  .setWidth(200).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30).chain()
  .setIf("end").chain()
  .setWidth(300).setCrop("scale")).generate("docs/sunglasses.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("!sale:in_stock!_in_tags").chain()
  .overlay(new Layer().publicId("sale_icon")).chain()
  .width(200).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30).chain()
  .if("end").chain()
  .width(300).crop("scale")).resourceType("video").generate("docs/sunglasses.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

* Conditional image overlay based on structured metadata value: This example adds a sale icon to a product video if the stock level of the product is less than 50 (as determined by the value of the numeric structured metadata field with external ID, stock-level, here set as 30):

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .NET iOS Android Kotlin All

url:

https://res.cloudinary.com/demo/video/upload/if_md:!stock-level!_lt_50/l_sale_icon/c_scale,w_200/fl_layer_apply,g_north_west,x_30,y_30/if_end/c_scale,w_300/docs/sunglasses.mp4

Ruby (cloudinary 1.x):

cl_video_tag("docs/sunglasses", :transformation=>[
  {:if=>"md:!stock-level!_lt_50"},
  {:overlay=>"sale_icon"},
  {:width=>200, :crop=>"scale"},
  {:flags=>"layer_apply", :gravity=>"north_west", :x=>30, :y=>30},
  {:if=>"end"},
  {:width=>300, :crop=>"scale"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('docs/sunglasses.mp4'))
  ->conditional(Conditional::ifCondition("md:!stock-level! < 50",(new Transformation())
  ->overlay(Overlay::source(
  Source::image("sale_icon")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(200)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northWest()))
->offsetX(30)
->offsetY(30))
  )))
  ->resize(Resize::scale()->width(300));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("docs/sunglasses", array("transformation"=>array(
  array("if"=>"md:!stock-level!_lt_50"),
  array("overlay"=>"sale_icon"),
  array("width"=>200, "crop"=>"scale"),
  array("flags"=>"layer_apply", "gravity"=>"north_west", "x"=>30, "y"=>30),
  array("if"=>"end"),
  array("width"=>300, "crop"=>"scale")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("docs/sunglasses").video(transformation=[
  {'if': "md:!stock-level!_lt_50"},
  {'overlay': "sale_icon"},
  {'width': 200, 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "north_west", 'x': 30, 'y': 30},
  {'if': "end"},
  {'width': 300, 'crop': "scale"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("docs/sunglasses", {transformation: [
  {if: "md:!stock-level!_lt_50"},
  {overlay: "sale_icon"},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .if("md:!stock-level!_lt_50").chain()
  .overlay(new Layer().publicId("sale_icon")).chain()
  .width(200).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30).chain()
  .if("end").chain()
  .width(300).crop("scale")).videoTag("docs/sunglasses");

JS (@cloudinary/url-gen 1.x):

new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "md:!stock-level! < 50",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

JS (cloudinary-core 2.x (legacy)):

cloudinary.videoTag('docs/sunglasses', {transformation: [
  {if: "md:!stock-level!_lt_50"},
  {overlay: new cloudinary.Layer().publicId("sale_icon")},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("docs/sunglasses", {transformation: [
  {if: "md:!stock-level!_lt_50"},
  {overlay: new cloudinary.Layer().publicId("sale_icon")},
  {width: 200, crop: "scale"},
  {flags: "layer_apply", gravity: "north_west", x: 30, y: 30},
  {if: "end"},
  {width: 300, crop: "scale"}
  ]})

React (@cloudinary/react 1.x):

//React SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "md:!stock-level! < 50",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

React (cloudinary-react 1.x):

<Video publicId="docs/sunglasses" >
  <Transformation if="md:!stock-level!_lt_50" />
  <Transformation overlay="sale_icon" />
  <Transformation width="200" crop="scale" />
  <Transformation flags="layer_apply" gravity="north_west" x="30" y="30" />
  <Transformation if="end" />
  <Transformation width="300" crop="scale" />
</Video>

Vue.js (cloudinary-vue 1.x):

<cld-video public-id="docs/sunglasses" >
  <cld-transformation if="md:!stock-level!_lt_50" />
  <cld-transformation :overlay="sale_icon" />
  <cld-transformation width="200" crop="scale" />
  <cld-transformation flags="layer_apply" gravity="north_west" x="30" y="30" />
  <cld-transformation if="end" />
  <cld-transformation width="300" crop="scale" />
</cld-video>

Angular (@cloudinary/ng 1.x):

//Angular SDK transformations are created using @cloudinary/url-gen.
new CloudinaryVideo("docs/sunglasses.mp4")
  .conditional(
    ifCondition(
      "md:!stock-level! < 50",
      new Transformation().overlay(
        source(
          image("sale_icon").transformation(
            new Transformation().resize(scale().width(200))
          )
        ).position(
          new Position().gravity(compass("north_west")).offsetX(30).offsetY(30)
        )
      )
    )
  )
  .resize(scale().width(300));

Angular (@cloudinary/angular-5.x 1.x (legacy)):

<cl-video public-id="docs/sunglasses" >
  <cl-transformation if="md:!stock-level!_lt_50">
  </cl-transformation>
  <cl-transformation overlay="sale_icon">
  </cl-transformation>
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_west" x="30" y="30">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation width="300" crop="scale">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("md:!stock-level!_lt_50").Chain()
  .Overlay(new Layer().PublicId("sale_icon")).Chain()
  .Width(200).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("north_west").X(30).Y(30).Chain()
  .If("end").Chain()
  .Width(300).Crop("scale")).BuildVideoTag("docs/sunglasses")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("md:!stock-level!_lt_50").chain()
  .setOverlay("sale_icon").chain()
  .setWidth(200).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("north_west").setX(30).setY(30).chain()
  .setIf("end").chain()
  .setWidth(300).setCrop("scale")).generate("docs/sunglasses.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .if("md:!stock-level!_lt_50").chain()
  .overlay(new Layer().publicId("sale_icon")).chain()
  .width(200).crop("scale").chain()
  .flags("layer_apply").gravity("north_west").x(30).y(30).chain()
  .if("end").chain()
  .width(300).crop("scale")).resourceType("video").generate("docs/sunglasses.mp4");

Kotlin (kotlin-url-gen 1.x):

// This code example is not currently available.

Note

When you use variable or conditional expressions that include the tags, ctx or md parameters, their values are exposed publicly in the URL. If you want to prevent such values from being exposed, you can disable the Usage of tags/context/metadata in transformation URLs option in the Security tab of your account settings (enabled by default). When this setting is disabled, any URL that exposes tags, contextual metadata or structured metadata values will return an error.

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: