Conditional video transformations

You can define conditional expressions and then apply video transformations only if the specified condition is met, and otherwise either deliver the original video as-is or apply an alternative transformation.

On this page:

Conditional transformation overview
Multiple IF conditions with AND, OR
IF > THEN with chained transformations
Else branch transformations

Conditional transformation overview

A conditional transformation is one that is performed only if a specified condition is met. There are a variety of condition options you can use:

In the most basic form, you define a single condition and a single transformation result if the condition is met. No transformation occurs if the condition is not met.
You can create more complex expressions with multiple conditions using AND/OR conjunction operators in your IF condition.
You can include multiple chained transformations in your conditional transformation.
You can optionally define an ELSE transformation to use when the IF condition is false.
You can also include arithmetic operations or user-defined variables in the IF or THEN part of your conditional transformation, but only certain video parameters are supported with these expressions and additional limitations apply. For details, see User-defined video variables.

The basic syntax for a conditional transformation is:

if_<video parameter>_<operator>_<value>,<transformations to apply if true>

Where:

video parameter: A supported video parameter to evaluate in the IF statement, for example w (or width in SDKs).
comparison operator: The comparison operator for the IF statement, for example lt for 'less than' (or < in SDKs).
value: A specific value, a supported user-defined variable, or you can compare one parameter with another. For example, if you only want to apply a transformation to non-square videos, you could check if the width of your video is not equal to the height: if_w_ne_h,....
transformations to apply: For the simple syntax shown above, you can specify any supported video transformations within a single component.
If your 'THEN' transformation requires chaining, use the if_end syntax described in: IF > THEN with chained transformations.

Specify strings for a video parameter sub-element or value surrounded by ! !. For example, if_ if_ctx:!productType!_eq_!shoes!.

Tip

You can check whether a string parameter currently has no value using !!.
For example: if some-condition_eq_!!

Quick example

both of the videos below have the same conditional transformation applied: It checks if the video is wider than 400 pixels, and if so, overlays a thumbs-up icon at the top-right of the video. Since the first video is a full size HD video, it gets the icon. However, the second video is only 350 pixels wide, so it does not meet the condition and no icon is added.

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

URL:

https://res.cloudinary.com/demo/video/upload/if_w_gt_400,l_thumbs-up-small,w_150,g_north_east,x_10,y_10/w_400,c_limit/marmots.mp4

Ruby:

cl_video_tag("marmots", :transformation=>[
  {:if=>"w_gt_400", :overlay=>"thumbs-up-small", :width=>150, :gravity=>"north_east", :x=>10, :y=>10},
  {:width=>400, :crop=>"limit"}
  ])

PHP:

cl_video_tag("marmots", array("transformation"=>array(
  array("if"=>"w_gt_400", "overlay"=>"thumbs-up-small", "width"=>150, "gravity"=>"north_east", "x"=>10, "y"=>10),
  array("width"=>400, "crop"=>"limit")
  )))

Python:

CloudinaryVideo("marmots").video(transformation=[
  {'if': "w_gt_400", 'overlay': "thumbs-up-small", 'width': 150, 'gravity': "north_east", 'x': 10, 'y': 10},
  {'width': 400, 'crop': "limit"}
  ])

Node.js:

cloudinary.video("marmots", {transformation: [
  {if: "w_gt_400", overlay: "thumbs-up-small", width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .if("w_gt_400").overlay(new Layer().publicId("thumbs-up-small")).width(150).gravity("north_east").x(10).y(10).chain()
  .width(400).crop("limit")).videoTag("marmots");

JS:

cloudinary.videoTag('marmots', {transformation: [
  {if: "w_gt_400", overlay: new cloudinary.Layer().publicId("thumbs-up-small"), width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("marmots", {transformation: [
  {if: "w_gt_400", overlay: new cloudinary.Layer().publicId("thumbs-up-small"), width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]})

React:

<Video publicId="marmots" >
  <Transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10" />
  <Transformation width="400" crop="limit" />
</Video>

Vue.js:

<cld-video publicId="marmots" >
  <cld-transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10" />
  <cld-transformation width="400" crop="limit" />
</cld-video>

Angular:

<cl-video public-id="marmots" >
  <cl-transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10">
  </cl-transformation>
  <cl-transformation width="400" crop="limit">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("w_gt_400").Overlay(new Layer().PublicId("thumbs-up-small")).Width(150).Gravity("north_east").X(10).Y(10).Chain()
  .Width(400).Crop("limit")).BuildVideoTag("marmots")

Android:

MediaManager.get().url().transformation(new Transformation()
  .if("w_gt_400").overlay(new Layer().publicId("thumbs-up-small")).width(150).gravity("north_east").x(10).y(10).chain()
  .width(400).crop("limit")).resourceType("video").generate("marmots.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("w_gt_400").setOverlay("thumbs-up-small").setWidth(150).setGravity("north_east").setX(10).setY(10).chain()
  .setWidth(400).setCrop("limit")).generate("marmots.mp4")

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

URL:

https://res.cloudinary.com/demo/video/upload/if_w_gt_400,l_thumbs-up-small,w_150,g_north_east,x_10,y_10/w_400,c_limit/docs/pencil_sketch_sm.mp4

Ruby:

cl_video_tag("docs/pencil_sketch_sm", :transformation=>[
  {:if=>"w_gt_400", :overlay=>"thumbs-up-small", :width=>150, :gravity=>"north_east", :x=>10, :y=>10},
  {:width=>400, :crop=>"limit"}
  ])

PHP:

cl_video_tag("docs/pencil_sketch_sm", array("transformation"=>array(
  array("if"=>"w_gt_400", "overlay"=>"thumbs-up-small", "width"=>150, "gravity"=>"north_east", "x"=>10, "y"=>10),
  array("width"=>400, "crop"=>"limit")
  )))

Python:

CloudinaryVideo("docs/pencil_sketch_sm").video(transformation=[
  {'if': "w_gt_400", 'overlay': "thumbs-up-small", 'width': 150, 'gravity': "north_east", 'x': 10, 'y': 10},
  {'width': 400, 'crop': "limit"}
  ])

Node.js:

cloudinary.video("docs/pencil_sketch_sm", {transformation: [
  {if: "w_gt_400", overlay: "thumbs-up-small", width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .if("w_gt_400").overlay(new Layer().publicId("thumbs-up-small")).width(150).gravity("north_east").x(10).y(10).chain()
  .width(400).crop("limit")).videoTag("docs/pencil_sketch_sm");

JS:

cloudinary.videoTag('docs/pencil_sketch_sm', {transformation: [
  {if: "w_gt_400", overlay: new cloudinary.Layer().publicId("thumbs-up-small"), width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("docs/pencil_sketch_sm", {transformation: [
  {if: "w_gt_400", overlay: new cloudinary.Layer().publicId("thumbs-up-small"), width: 150, gravity: "north_east", x: 10, y: 10},
  {width: 400, crop: "limit"}
  ]})

React:

<Video publicId="docs/pencil_sketch_sm" >
  <Transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10" />
  <Transformation width="400" crop="limit" />
</Video>

Vue.js:

<cld-video publicId="docs/pencil_sketch_sm" >
  <cld-transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10" />
  <cld-transformation width="400" crop="limit" />
</cld-video>

Angular:

<cl-video public-id="docs/pencil_sketch_sm" >
  <cl-transformation if="w_gt_400" overlay="thumbs-up-small" width="150" gravity="north_east" x="10" y="10">
  </cl-transformation>
  <cl-transformation width="400" crop="limit">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .If("w_gt_400").Overlay(new Layer().PublicId("thumbs-up-small")).Width(150).Gravity("north_east").X(10).Y(10).Chain()
  .Width(400).Crop("limit")).BuildVideoTag("docs/pencil_sketch_sm")

Android:

MediaManager.get().url().transformation(new Transformation()
  .if("w_gt_400").overlay(new Layer().publicId("thumbs-up-small")).width(150).gravity("north_east").x(10).y(10).chain()
  .width(400).crop("limit")).resourceType("video").generate("docs/pencil_sketch_sm.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setIf("w_gt_400").setOverlay("thumbs-up-small").setWidth(150).setGravity("north_east").setX(10).setY(10).chain()
  .setWidth(400).setCrop("limit")).generate("docs/pencil_sketch_sm.mp4")

Supported video condition parameters

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 context 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 comparison 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", crop: "scale", width: 500}
{ if: "width > 1000", crop: "scale", width: 500}

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!.

Multiple IF conditions with AND, OR

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 1000. If the video is already has a portrait orientation (condition 1 is false) or if the original width is less than 1000 (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 Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/if_ar_gt_0.65_and_w_gt_1000,ar_0.65,h_1000,c_fill/snow_horses.mp4

Ruby:

cl_video_tag("snow_horses", :if=>"ar_gt_0.65_and_w_gt_1000", :aspect_ratio=>"0.65", :height=>1000, :crop=>"fill")

PHP:

cl_video_tag("snow_horses", array("if"=>"ar_gt_0.65_and_w_gt_1000", "aspect_ratio"=>"0.65", "height"=>1000, "crop"=>"fill"))

Python:

CloudinaryVideo("snow_horses").video(if="ar_gt_0.65_and_w_gt_1000", aspect_ratio="0.65", height=1000, crop="fill")

Node.js:

cloudinary.video("snow_horses", {if: "ar_gt_0.65_and_w_gt_1000", aspect_ratio: "0.65", height: 1000, crop: "fill"})

Java:

cloudinary.url().transformation(new Transformation().if("ar_gt_0.65_and_w_gt_1000").aspectRatio("0.65").height(1000).crop("fill")).videoTag("snow_horses");

JS:

cloudinary.videoTag('snow_horses', {if: "ar_gt_0.65_and_w_gt_1000", aspectRatio: "0.65", height: 1000, crop: "fill"}).toHtml();

jQuery:

$.cloudinary.video("snow_horses", {if: "ar_gt_0.65_and_w_gt_1000", aspect_ratio: "0.65", height: 1000, crop: "fill"})

React:

<Video publicId="snow_horses" >
  <Transformation if="ar_gt_0.65_and_w_gt_1000" aspectRatio="0.65" height="1000" crop="fill" />
</Video>

Vue.js:

<cld-video publicId="snow_horses" >
  <cld-transformation if="ar_gt_0.65_and_w_gt_1000" aspectRatio="0.65" height="1000" crop="fill" />
</cld-video>

Angular:

<cl-video public-id="snow_horses" >
  <cl-transformation if="ar_gt_0.65_and_w_gt_1000" aspect-ratio="0.65" height="1000" crop="fill">
  </cl-transformation>
</cl-video>

.Net:

cloudinary.Api.UrlVideoUp.Transform(new Transformation().If("ar_gt_0.65_and_w_gt_1000").AspectRatio("0.65").Height(1000).Crop("fill")).BuildVideoTag("snow_horses")

Android:

MediaManager.get().url().transformation(new Transformation().if("ar_gt_0.65_and_w_gt_1000").aspectRatio("0.65").height(1000).crop("fill")).resourceType("video").generate("snow_horses.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setIf("ar_gt_0.65_and_w_gt_1000").setAspectRatio("0.65").setHeight(1000).setCrop("fill")).generate("snow_horses.mp4")

IF > THEN with chained transformations

If your conditional transformation (the THEN part of your IF-THEN condition) requires chaining, you can use the end_if syntax to indicate where the IF>THEN condition ends. In this case, only your condition should appear in the first component of the chain, followed by all chained transformations to apply if the condition is true, followed by an if_end component:

if_<video parameter>_<operator>_<value>/<If true transformation1>/<If true chained transformation2>/<if_end>

You can optionally add additional chained transformations after the if_end to apply additional transformations to the result of the conditional transformation. However, you cannot append another conditional transformation after the end_if, nor can you nest If conditions.

The example below checks whether the video asset's tags include a 'cloudinary' tag. If so, a chained transformation including an image overlay (Cloudinary logo) and a text overlay are applied. If 'cloudinary' is not one of the tags, no transformation would be 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 Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/w_500/if_!cloudinary!_in_tags/l_cloudinary_icon_white,w_100,g_north_east,o_50,e_brightness:100/l_text:arial_15:By Cloudinary,g_north_east,y_10,x_105/if_end/du_5/snow_horses.mp4

Ruby:

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

PHP:

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

Python:

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

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Vue.js:

<cld-video publicId="snow_horses" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation if="!cloudinary!_in_tags" />
  <cld-transformation overlay="cloudinary_icon_white" width="100" gravity="north_east" opacity="50" effect="brightness:100" />
  <cld-transformation overlay={{fontFamily: "arial", fontSize: 15, text: "By%20Cloudinary"}} gravity="north_east" y="10" x="105" />
  <cld-transformation if="end" />
  <cld-transformation duration="5" />
</cld-video>

Angular:

<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" width="100" gravity="north_east" opacity="50" effect="brightness:100">
  </cl-transformation>
  <cl-transformation overlay="text:arial_15:By%20Cloudinary" gravity="north_east" y="10" x="105">
  </cl-transformation>
  <cl-transformation if="end">
  </cl-transformation>
  <cl-transformation duration="5">
  </cl-transformation>
</cl-video>

.Net:

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

Android:

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

iOS:

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

Notes

When your conditional transformation also includes an if_else branch, then the if_else component also behaves as an if_end, and therefore no if_end component is necessary.
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, context or metadata values will return an error.

Else branch transformations

You can specify an alternative transformation to apply if the initial condition evaluates as false (and hence the transformations associated with the condition are not applied). To do this, use the if_else parameter to specify the 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 Android iOS All

URL:

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

Ruby:

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

PHP:

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

Python:

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

Node.js:

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

Java:

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

JS:

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

jQuery:

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

React:

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

Vue.js:

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

Angular:

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

.Net:

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

Android:

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

iOS:

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

✔️ Feedback sent!

✖️

Error

Unfortunately there's been an error sending your feedback.

Rate this page: