Placing layers on videos

Last updated: Dec-28-2022

Cloudinary allows you to dynamically add layers to specific locations within your videos, where the new layers are added over the base video as overlays, and can also be easily transformed to suit your needs. There are multiple options for adding a new layer to a base video, either an asset uploaded to Cloudinary, a remote asset, or a text string.

Video layers can also be added as underlays instead, and there are special layer applications for using layers in combination with other Cloudinary transformations.

Here are examples of some popular use cases that you can accomplish using layers (combined with other transformations):

Add video overlays
l_video:

Add image overlays
l_

Add text overlays
l_text:

On this page:

Layer transformation syntax
Layer placement
Layer transformations
Text layer options
Image underlays
Watermarking
Special layer applications

Layer transformation syntax

In its most simple form, adding a layer over the base video takes following URL syntax:

l_<public id of overlay>/fl_layer_apply

The layer parameter is in its own URL component and starts the overlay definition (similar to an open bracket). The layer_apply flag is in a separate component that closes the definition (similar to a closing bracket) and instructs Cloudinary to place it.

You can enhance your layer both by controlling where and how it is placed on the base video using gravity, offset and other placement qualifiers, and by applying transformations to the layered asset, using the following general URL syntax.

l_<public_id of layer>/<optional layer transformations>/fl_layer_apply,<optional placement qualifiers>

Image overlays

The default overlay type is an image. For example, adding an overlay of the image called cloudinary_icon_blue to a base video (l_cloudinary_icon_blue/fl_layer_apply):

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

url:

https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon_blue/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(image("cloudinary_icon_blue")));

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(image("cloudinary_icon_blue")));

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(image("cloudinary_icon_blue")));

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(image("cloudinary_icon_blue")));

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

<cl-video public-id="dog" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue"))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue"))));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue"))));

Important

If the public ID of an image includes slashes (e.g., the public ID of an image is animals/dog), replace the slashes with colons when using the image as an overlay (e.g., the public ID of the overlay image becomes animals:dog when used as an overlay).
When delivering public videos, you can only add images overlays that are also set as public assets. Assets set to authenticated or private using the access_mode parameter can also only use public images as overlays. See the Media access control documentation for more details on delivering private and authenticated assets.

Remote image overlays

Use a remote image (an image not stored in your Cloudinary product environment) as an overlay by adding the fetch (or url for some SDKs) property of the layer parameter ( l_fetch: in URLs) and the base64 encoded URL of the remote image. The general URL syntax for adding a remote image as an overlay takes the following form:

l_fetch:<URL of overlay>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

For example, adding an overlay of the remote image https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png to the base image.

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

url:

https://res.cloudinary.com/demo/video/upload/l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>{:url=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::fetch("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>array("url"=>"https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': {'url': "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: {url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay={{url: "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="{url: 'https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    fetch(
      "https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"
    )
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new FetchLayer("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGVtby9pbWFnZS91cGxvYWQvbG9nb3MvY2xvdWRpbmFyeV9mdWxsX2xvZ29fd2hpdGVfc21hbGwucG5n").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new FetchLayer().url("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.fetch("https://res.cloudinary.com/demo/image/upload/logos/cloudinary_full_logo_white_small.png"))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Note

The Cloudinary SDKs automatically generate a base64 encoded URL for a given HTTP/S URL, but if you generate the delivery URL in your own code, then you'll need to supply the fetch URL in base64 encoding with padding.

Video overlays

Add another video as an overlay over the base video by using the overlay video parameter (l_video: in URLs) and the public ID of a previously uploaded video (e.g. l_video:dog for a video with the public ID of dog).

You can enhance your layer both by controlling when the video overlay is displayed by using any combination of the 3 offset parameters (see Trimming videos for more information on the parameters and their possible values). You can also decide where and how it is placed on the base video using gravity, offset and other placement qualifiers, and by applying transformations to the layered asset, with the following general syntax.

l_video:<public_id of layer>/<optional layer transformations>/fl_layer_apply,<optional placement qualifiers>

For example, adding an overlay of a video named dog to the same mp4 video named dog, that appears after 4.5 seconds and disappears at the 8 second mark. The overlay is also rotated by 90 degrees, set with a gravity of 'east' and scaled to a width of 500 pixels.

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

url:

https://res.cloudinary.com/demo/video/upload/l_video:dog/c_scale,w_500/a_90/eo_8.0,fl_layer_apply,g_east,so_4.5/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"video:dog"},
  {:width=>500, :crop=>"scale"},
  {:angle=>90},
  {:end_offset=>"8.0", :flags=>"layer_apply", :gravity=>"east", :start_offset=>"4.5"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::video("dog")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(500))
  ->rotate(Rotate::byAngle(90)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::east()))
  )
  ->timeline(
  Timeline::position()->startOffset(4.5)
->endOffset(8.0))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"video:dog"),
  array("width"=>500, "crop"=>"scale"),
  array("angle"=>90),
  array("end_offset"=>"8.0", "flags"=>"layer_apply", "gravity"=>"east", "start_offset"=>"4.5")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "video:dog"},
  {'width': 500, 'crop': "scale"},
  {'angle': 90},
  {'end_offset': "8.0", 'flags': "layer_apply", 'gravity': "east", 'start_offset': "4.5"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "video:dog"},
  {width: 500, crop: "scale"},
  {angle: 90},
  {end_offset: "8.0", flags: "layer_apply", gravity: "east", start_offset: "4.5"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:dog")).chain()
  .width(500).crop("scale").chain()
  .angle(90).chain()
  .endOffset("8.0").flags("layer_apply").gravity("east").startOffset("4.5")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    video("dog").transformation(
      new Transformation().resize(scale().width(500)).rotate(byAngle(90))
    )
  )
    .position(new Position().gravity(compass("east")))
    .timeline(position().startOffset(4.5).endOffset("8.0"))
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {width: 500, crop: "scale"},
  {angle: 90},
  {endOffset: "8.0", flags: "layer_apply", gravity: "east", startOffset: "4.5"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:dog")},
  {width: 500, crop: "scale"},
  {angle: 90},
  {end_offset: "8.0", flags: "layer_apply", gravity: "east", start_offset: "4.5"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    video("dog").transformation(
      new Transformation().resize(scale().width(500)).rotate(byAngle(90))
    )
  )
    .position(new Position().gravity(compass("east")))
    .timeline(position().startOffset(4.5).endOffset("8.0"))
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="video:dog" />
  <Transformation width="500" crop="scale" />
  <Transformation angle="90" />
  <Transformation endOffset="8.0" flags="layer_apply" gravity="east" startOffset="4.5" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    video("dog").transformation(
      new Transformation().resize(scale().width(500)).rotate(byAngle(90))
    )
  )
    .position(new Position().gravity(compass("east")))
    .timeline(position().startOffset(4.5).endOffset("8.0"))
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="video:dog" />
  <cld-transformation width="500" crop="scale" />
  <cld-transformation angle="90" />
  <cld-transformation end-offset="8.0" flags="layer_apply" gravity="east" start-offset="4.5" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    video("dog").transformation(
      new Transformation().resize(scale().width(500)).rotate(byAngle(90))
    )
  )
    .position(new Position().gravity(compass("east")))
    .timeline(position().startOffset(4.5).endOffset("8.0"))
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="video:dog">
  </cl-transformation>
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation angle="90">
  </cl-transformation>
  <cl-transformation end-offset="8.0" flags="layer_apply" gravity="east" start-offset="4.5">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("video:dog")).Chain()
  .Width(500).Crop("scale").Chain()
  .Angle(90).Chain()
  .EndOffset("8.0").Flags("layer_apply").Gravity("east").StartOffset("4.5")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("video:dog").chain()
  .setWidth(500).setCrop("scale").chain()
  .setAngle(90).chain()
  .setEndOffset("8.0").setFlags("layer_apply").setGravity("east").setStartOffset("4.5")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:dog")).chain()
  .width(500).crop("scale").chain()
  .angle(90).chain()
  .endOffset("8.0").flags("layer_apply").gravity("east").startOffset("4.5")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.video("dog") {
   transformation(Transformation {
   resize(Resize.scale() { width(500) })
   rotate(Rotate.byAngle(90)) })
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.east()))
   })
   timeline(
  Timeline.position() { startOffset(4.5F)
 endOffset(8.0F) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.video("dog")
  .transformation(new Transformation()
  .resize(Resize.scale().width(500))
  .rotate(Rotate.byAngle(90)))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.east()))
  )
  .timeline(
  Timeline.position().startOffset(4.5)
.endOffset('8.0'))
  ));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.video("dog")
  .transformation(new Transformation()
  .resize(Resize.scale().width(500))
  .rotate(Rotate.byAngle(90)))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.east()))
  )
  .timeline(
  Timeline.position().startOffset(4.5)
.endOffset('8.0'))
  ));

Important

If the public ID of a video includes slashes (e.g., the public ID of a video is animals/cat), replace the slashes with colons when using the video as an overlay (e.g., the public ID of the video becomes animals:cat when used as an overlay).
When delivering public videos, you can only add other public videos as overlays. See the Media access control documentation for more details on delivering private and authenticated assets.

Audio overlays

Add an additional audio track over the existing video using the video overlay parameter (l_video in URLs) and the public ID of an audio file stored in your product environment.

You can add audio tracks alongside the existing audio, such as adding a voiceover or music. You can also control which parts of the layered audio file to play using the 3 timing offset parameters (see Trimming videos). You can also control the volume using the volume effect.

Here's an example of adding an MP3 music file with the public ID, electronic to the hourglass_timer base video:

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

url:

https://res.cloudinary.com/demo/video/upload/l_video:electronic/fl_layer_apply/hourglass_timer.mp4

Ruby (cloudinary 1.x):

cl_video_tag("hourglass_timer", :transformation=>[
  {:overlay=>"video:electronic"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('hourglass_timer.mp4'))
  ->overlay(Overlay::source(
  Source::video("electronic")));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("hourglass_timer", array("transformation"=>array(
  array("overlay"=>"video:electronic"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("hourglass_timer").video(transformation=[
  {'overlay': "video:electronic"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("hourglass_timer", {transformation: [
  {overlay: "video:electronic"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:electronic")).chain()
  .flags("layer_apply")).videoTag("hourglass_timer");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("hourglass_timer.mp4").overlay(source(video("electronic")));

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

cloudinary.videoTag('hourglass_timer', {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:electronic")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("hourglass_timer", {transformation: [
  {overlay: new cloudinary.Layer().publicId("video:electronic")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("hourglass_timer.mp4").overlay(source(video("electronic")));

React (cloudinary-react 1.x):

<Video publicId="hourglass_timer" >
  <Transformation overlay="video:electronic" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("hourglass_timer.mp4").overlay(source(video("electronic")));

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

<cld-video public-id="hourglass_timer" >
  <cld-transformation :overlay="video:electronic" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("hourglass_timer.mp4").overlay(source(video("electronic")));

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

<cl-video public-id="hourglass_timer" >
  <cl-transformation overlay="video:electronic">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("video:electronic")).Chain()
  .Flags("layer_apply")).BuildVideoTag("hourglass_timer")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("video:electronic").chain()
  .setFlags("layer_apply")).generate("hourglass_timer.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("video:electronic")).chain()
  .flags("layer_apply")).resourceType("video").generate("hourglass_timer.mp4");

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

cloudinary.video {
  publicId("hourglass_timer.mp4")
   overlay(Overlay.source(
  Source.video("electronic"))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('hourglass_timer.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.video("electronic"))));

Dart (cloudinary_dart 0.x):

cloudinary.video('hourglass_timer.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.video("electronic"))));

It's also possible to remove or replace the existing audio track from the base video. To remove the existing audio track, set the audio codec to none (ac_none in URLs). You can then replace this with your own audio by adding it as an audio overlay as shown above.

Here's an example of replacing the original audio from the dog video with the electronic MP3 file and reducing the volume by 50%:

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

url:

https://res.cloudinary.com/demo/video/upload/ac_none/l_video:electronic/e_volume:-50/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:audio_codec=>"none"},
  {:overlay=>"video:electronic"},
  {:effect=>"volume:-50"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->transcode(Transcode::audioCodec(
  AudioCodec::none()))
  ->overlay(Overlay::source(
  Source::video("electronic")
  ->transformation((new Transformation())
  ->videoEdit(VideoEdit::volume(-50)))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("audio_codec"=>"none"),
  array("overlay"=>"video:electronic"),
  array("effect"=>"volume:-50"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'audio_codec': "none"},
  {'overlay': "video:electronic"},
  {'effect': "volume:-50"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {audio_codec: "none"},
  {overlay: "video:electronic"},
  {effect: "volume:-50"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .audioCodec("none").chain()
  .overlay(new Layer().publicId("video:electronic")).chain()
  .effect("volume:-50").chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .transcode(audioCodec("none"))
  .overlay(
    source(
      video("electronic").transformation(
        new Transformation().videoEdit(volume(-50))
      )
    )
  );

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

cloudinary.videoTag('dog', {transformation: [
  {audioCodec: "none"},
  {overlay: new cloudinary.Layer().publicId("video:electronic")},
  {effect: "volume:-50"},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {audio_codec: "none"},
  {overlay: new cloudinary.Layer().publicId("video:electronic")},
  {effect: "volume:-50"},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .transcode(audioCodec("none"))
  .overlay(
    source(
      video("electronic").transformation(
        new Transformation().videoEdit(volume(-50))
      )
    )
  );

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation audioCodec="none" />
  <Transformation overlay="video:electronic" />
  <Transformation effect="volume:-50" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .transcode(audioCodec("none"))
  .overlay(
    source(
      video("electronic").transformation(
        new Transformation().videoEdit(volume(-50))
      )
    )
  );

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

<cld-video public-id="dog" >
  <cld-transformation audio-codec="none" />
  <cld-transformation :overlay="video:electronic" />
  <cld-transformation effect="volume:-50" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .transcode(audioCodec("none"))
  .overlay(
    source(
      video("electronic").transformation(
        new Transformation().videoEdit(volume(-50))
      )
    )
  );

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

<cl-video public-id="dog" >
  <cl-transformation audio-codec="none">
  </cl-transformation>
  <cl-transformation overlay="video:electronic">
  </cl-transformation>
  <cl-transformation effect="volume:-50">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .AudioCodec("none").Chain()
  .Overlay(new Layer().PublicId("video:electronic")).Chain()
  .Effect("volume:-50").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setAudioCodec("none").chain()
  .setOverlay("video:electronic").chain()
  .setEffect("volume:-50").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .audioCodec("none").chain()
  .overlay(new Layer().publicId("video:electronic")).chain()
  .effect("volume:-50").chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   transcode(Transcode.audioCodec(
  AudioCodec.none()))
   overlay(Overlay.source(
  Source.video("electronic") {
   transformation(Transformation {
   videoEdit(VideoEdit.volume(-50)) })
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .transcode(Transcode.audioCodec(
  AudioCodec.none()))
  .overlay(Overlay.source(
  Source.video("electronic")
  .transformation(new Transformation()
  .videoEdit(VideoEdit.volume(-50)))
  )));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .transcode(Transcode.audioCodec(
  AudioCodec.none()))
  .overlay(Overlay.source(
  Source.video("electronic")
  .transformation(new Transformation()
  .videoEdit(VideoEdit.volume(-50)))
  )));

Text overlays

Add a text overlay over the base video with the text property of the layer parameter ( l_text: in URLs). The parameter also requires specifying font family and size (separated with an underscore and followed by a colon), and the text string to display. The general URL syntax for adding a text layer takes the following form:

l_text:<text styling options>/<optional transformations>/fl_layer_apply,<optional placement qualifiers>

In addition to the required font and size styling values, you can optionally specify a variety of other CSS-like styling parameters and to further customize your text layers by specifying text color, adding line breaks, emojis and other special characters, and other text layer options.

Cloudinary first generates an image from the text definition and then overlays it like any other image overlay, and thus supports all the same transformations that any image overlay supports.

For example, to overlay the text string "Flowers" in the Arial font with a size of 80 pixels (l_text:Arial_80:Flowers/fl_layer_apply):

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

url:

https://res.cloudinary.com/demo/video/upload/l_text:Arial_80:Flowers/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>{:font_family=>"Arial", :font_size=>80, :text=>"Flowers"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::text("Flowers",(new TextStyle("Arial",80)))));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>80, "text"=>"Flowers")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': {'font_family': "Arial", 'font_size': 80, 'text': "Flowers"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: {font_family: "Arial", font_size: 80, text: "Flowers"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 80, text: "Flowers"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="{fontFamily: 'Arial', fontSize: 80, text: 'Flowers'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Flowers", new TextStyle("Arial", 80)))
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="text:Arial_80:Flowers">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(80).Text("Flowers")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("text:Arial_80:Flowers").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(80).text("Flowers")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.text("Flowers",TextStyle("Arial",80)))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Subtitles

You can add subtitles to videos as an embedded layer based on SRT or WebVTT files that were previously uploaded to Cloudinary as raw files. To do this, use the subtitles: property of the overlay parameter ( l_subtitles: in URLs), followed by the public ID (including the .srt or .vtt extension).

For example, to overlay the subtitles in the sample_sub_en.srt file to the MP4 video named dog:

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

url:

https://res.cloudinary.com/demo/video/upload/l_subtitles:sample_sub_en.srt/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>{:resource_type=>"subtitles", :public_id=>"sample_sub_en.srt"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::subtitles("sample_sub_en.srt")));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>array("resource_type"=>"subtitles", "public_id"=>"sample_sub_en.srt")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': {'resource_type': "subtitles", 'public_id': "sample_sub_en.srt"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: {resource_type: "subtitles", public_id: "sample_sub_en.srt"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new SubtitlesLayer().publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(subtitles("sample_sub_en.srt")));

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.SubtitlesLayer().publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.SubtitlesLayer().publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(subtitles("sample_sub_en.srt")));

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay={{publicId: "sample_sub_en.srt", resourceType: "subtitles"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(subtitles("sample_sub_en.srt")));

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="{publicId: 'sample_sub_en.srt', resourceType: 'subtitles'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(source(subtitles("sample_sub_en.srt")));

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

<cl-video public-id="dog" >
  <cl-transformation overlay="subtitles:sample_sub_en.srt">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new SubtitlesLayer().PublicId("sample_sub_en.srt")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("subtitles:sample_sub_en.srt").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new SubtitlesLayer().publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt"))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt"))));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt"))));

You can optionally include font and size settings (separated with an underscore) before the subtitles file name. For example, to overlay the subtitles in the sample_sub_en.srt file to the MP4 video named dog, using the Arial font with a size of 20 pixels:

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

url:

https://res.cloudinary.com/demo/video/upload/l_subtitles:arial_20:sample_sub_en.srt/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>{:font_family=>"arial", :font_size=>20, :resource_type=>"subtitles", :public_id=>"sample_sub_en.srt"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::subtitles("sample_sub_en.srt")
  ->textStyle((new TextStyle("arial",20)))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"arial", "font_size"=>20, "resource_type"=>"subtitles", "public_id"=>"sample_sub_en.srt")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': {'font_family': "arial", 'font_size': 20, 'resource_type': "subtitles", 'public_id': "sample_sub_en.srt"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: {font_family: "arial", font_size: 20, resource_type: "subtitles", public_id: "sample_sub_en.srt"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new SubtitlesLayer().fontFamily("arial").fontSize(20).publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(subtitles("sample_sub_en.srt").textStyle(new TextStyle("arial", 20)))
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.SubtitlesLayer().fontFamily("arial").fontSize(20).publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.SubtitlesLayer().fontFamily("arial").fontSize(20).publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(subtitles("sample_sub_en.srt").textStyle(new TextStyle("arial", 20)))
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay={{fontFamily: "arial", fontSize: 20, publicId: "sample_sub_en.srt", resourceType: "subtitles"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(subtitles("sample_sub_en.srt").textStyle(new TextStyle("arial", 20)))
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="{fontFamily: 'arial', fontSize: 20, publicId: 'sample_sub_en.srt', resourceType: 'subtitles'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(subtitles("sample_sub_en.srt").textStyle(new TextStyle("arial", 20)))
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="subtitles:arial_20:sample_sub_en.srt">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new SubtitlesLayer().FontFamily("arial").FontSize(20).PublicId("sample_sub_en.srt")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("subtitles:arial_20:sample_sub_en.srt").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new SubtitlesLayer().fontFamily("arial").fontSize(20).publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt") {
   textStyle(TextStyle("arial",20))
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt")
  .textStyle(TextStyle("arial",20))
  )));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt")
  .textStyle(TextStyle("arial",20))
  )));

You can also control the color of the text by adding the color property (co in URLs) to change the fill color of the text, and adding the background property (b in URLs) to change the color of the text background. Colors can be set as an RGB hex triplet (e.g. b_rgb:3e2222), a 3 character RGB hex (e.g. co_rgb:777), a named color (e.g. b_green), or an RGB hex quadruplet, where the 4th value represents the opacity (e.g. b_rgb:3e222266).

For example, to overlay the subtitles in the sample_sub_en.srt file in the MP4 video named dog, using the Arial font with a size of 70 pixels, in yellow text (FFFF00) with a black background:

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

url:

https://res.cloudinary.com/demo/video/upload/b_black,co_rgb:ffff00,l_subtitles:arial_70:sample_sub_en.srt/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:background=>"black", :color=>"#ffff00", :overlay=>{:font_family=>"arial", :font_size=>70, :resource_type=>"subtitles", :public_id=>"sample_sub_en.srt"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::subtitles("sample_sub_en.srt")
  ->textStyle((new TextStyle("arial",70)))
  ->textColor(Color::rgb("ffff00"))
  ->backgroundColor(Color::BLACK)
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("background"=>"black", "color"=>"#ffff00", "overlay"=>array("font_family"=>"arial", "font_size"=>70, "resource_type"=>"subtitles", "public_id"=>"sample_sub_en.srt")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'background': "black", 'color': "#ffff00", 'overlay': {'font_family': "arial", 'font_size': 70, 'resource_type': "subtitles", 'public_id': "sample_sub_en.srt"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {background: "black", color: "#ffff00", overlay: {font_family: "arial", font_size: 70, resource_type: "subtitles", public_id: "sample_sub_en.srt"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .background("black").color("#ffff00").overlay(new SubtitlesLayer().fontFamily("arial").fontSize(70).publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    subtitles("sample_sub_en.srt")
      .textStyle(new TextStyle("arial", 70))
      .textColor("#ffff00")
      .backgroundColor("black")
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {background: "black", color: "#ffff00", overlay: new cloudinary.SubtitlesLayer().fontFamily("arial").fontSize(70).publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {background: "black", color: "#ffff00", overlay: new cloudinary.SubtitlesLayer().fontFamily("arial").fontSize(70).publicId("sample_sub_en.srt")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    subtitles("sample_sub_en.srt")
      .textStyle(new TextStyle("arial", 70))
      .textColor("#ffff00")
      .backgroundColor("black")
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation background="black" color="#ffff00" overlay={{fontFamily: "arial", fontSize: 70, publicId: "sample_sub_en.srt", resourceType: "subtitles"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    subtitles("sample_sub_en.srt")
      .textStyle(new TextStyle("arial", 70))
      .textColor("#ffff00")
      .backgroundColor("black")
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation background="black" color="#ffff00" :overlay="{fontFamily: 'arial', fontSize: 70, publicId: 'sample_sub_en.srt', resourceType: 'subtitles'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    subtitles("sample_sub_en.srt")
      .textStyle(new TextStyle("arial", 70))
      .textColor("#ffff00")
      .backgroundColor("black")
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation background="black" color="#ffff00" overlay="subtitles:arial_70:sample_sub_en.srt">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Background("black").Color("#ffff00").Overlay(new SubtitlesLayer().FontFamily("arial").FontSize(70).PublicId("sample_sub_en.srt")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setBackground("black").setColor("#ffff00").setOverlay("subtitles:arial_70:sample_sub_en.srt").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .background("black").color("#ffff00").overlay(new SubtitlesLayer().fontFamily("arial").fontSize(70).publicId("sample_sub_en.srt")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt") {
   textStyle(TextStyle("arial",70))
   textColor(Color.rgb("ffff00"))
   backgroundColor(Color.BLACK)
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt")
  .textStyle(TextStyle("arial",70))
  .textColor(Color.rgb("ffff00"))
  .backgroundColor(Color.BLACK)
  )));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.subtitles("sample_sub_en.srt")
  .textStyle(TextStyle("arial",70))
  .textColor(Color.rgb("ffff00"))
  .backgroundColor(Color.BLACK)
  )));

Layer placement

The fl_layer_apply component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base video, and any details regarding the relationship between the overlay element and the base video.

Note

Some Cloudinary SDKs use layer apply flags as described, and any placement qualifiers must also be the last component of the layer transformation. However some of the Cloudinary SDKs do not use a specific layer apply flag. Instead, when the SDK generates the transformation URL from your code, it automatically adds the fl_layer_apply flag together with placement qualifiers based on the transformation hierarchy in your SDK code.

Positioning layers with gravity

To determine the position of the new layer, you can add the gravity parameter to define the location to place the layer within the base video ('center' by default). The gravity parameter is added in the same component as the layer_apply flag.

For example, to add an overlay of the image called cloudinary_icon_white to the base video with gravity set to west (l_cloudinary_icon_white/fl_layer_apply,g_west):

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

url:

https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon_white/fl_layer_apply,g_west/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"layer_apply", :gravity=>"west"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white"))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::west()))
  )
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"layer_apply", "gravity"=>"west")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "cloudinary_icon_white"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "cloudinary_icon_white"},
  {flags: "layer_apply", gravity: "west"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "layer_apply", gravity: "west"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="layer_apply" gravity="west" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="layer_apply" gravity="west" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(image("cloudinary_icon_white")).position(
    new Position().gravity(compass("west"))
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("layer_apply").Gravity("west")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("layer_apply").setGravity("west")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("layer_apply").gravity("west")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_white")) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.west()))
   })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_white"))
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.west()))
  )
  ));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_white"))
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.west()))
  )
  ));

To fine tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the x and y coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing video (e.g., 0.2 for an offset of 20%).

For example, to place a text overlay at a vertical distance of 5% from the bottom of the video (l_text:Times_100:Welcome/fl_layer_apply,g_south,y_0.05):

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

url:

https://res.cloudinary.com/demo/video/upload/l_text:Times_100:Welcome/fl_layer_apply,g_south,y_0.05/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>{:font_family=>"Times", :font_size=>100, :text=>"Welcome"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>0.05}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::text("Welcome",(new TextStyle("Times",100))))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(0.05))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Times", "font_size"=>100, "text"=>"Welcome")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>"0.05")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': {'font_family': "Times", 'font_size': 100, 'text': "Welcome"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': "0.05"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: {font_family: "Times", font_size: 100, text: "Welcome"}},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(100).text("Welcome")},
  {flags: "layer_apply", gravity: "south", y: "0.05"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay={{fontFamily: "Times", fontSize: 100, text: "Welcome"}} />
  <Transformation flags="layer_apply" gravity="south" y="0.05" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="{fontFamily: 'Times', fontSize: 100, text: 'Welcome'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="0.05" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(text("Welcome", new TextStyle("Times", 100))).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(0.05)
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="text:Times_100:Welcome">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="0.05">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Times").FontSize(100).Text("Welcome")).Chain()
  .Flags("layer_apply").Gravity("south").Y(0.05)).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("text:Times_100:Welcome").chain()
  .setFlags("layer_apply").setGravity("south").setY(0.05)).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Times").fontSize(100).text("Welcome")).chain()
  .flags("layer_apply").gravity("south").y(0.05)).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.text("Welcome",TextStyle("Times",100))) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.south()))
 offsetY(0.05F) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Tip

See the Positioning with Gravity interactive demo to experiment with gravity and coordinate parameters.

Layer transformations

You can apply resizing and other transformation options on your overlays just like any other asset delivered from Cloudinary. You can apply multiple (chained) transformations to overlays by adding them in separate components before the layer_apply component. All chained transformations, until a transformation component that includes the layer_apply flag, are applied on the last added overlay or underlay instead of applying them on the base asset (the layer_apply flag closes the layer, similar to a closing bracket).

For example:

Adding an overlay of the image called cloudinary_icon_blue, scaled down to 50% of its original width and made into a watermark by reducing the opacity to 70% and increasing the brightness to 50% using the brightness effect. The transformed image is then placed as a layer in the top-right corner of the base video (l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east):

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

url:

https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon_blue/c_scale,w_0.5/o_70/e_brightness:50/fl_layer_apply,g_north_east/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:width=>0.5, :crop=>"scale"},
  {:opacity=>70},
  {:effect=>"brightness:50"},
  {:flags=>"layer_apply", :gravity=>"north_east"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.5))
  ->adjust(Adjust::opacity(70))
  ->adjust(Adjust::brightness()->level(50)))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("width"=>"0.5", "crop"=>"scale"),
  array("opacity"=>70),
  array("effect"=>"brightness:50"),
  array("flags"=>"layer_apply", "gravity"=>"north_east")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'width': "0.5", 'crop': "scale"},
  {'opacity': 70},
  {'effect': "brightness:50"},
  {'flags': "layer_apply", 'gravity': "north_east"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {width: "0.5", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:50"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(0.5).crop("scale").chain()
  .opacity(70).chain()
  .effect("brightness:50").chain()
  .flags("layer_apply").gravity("north_east")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(0.5))
        .adjust(opacity(70))
        .adjust(brightness().level(50))
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: "0.5", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:50"},
  {flags: "layer_apply", gravity: "north_east"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: "0.5", crop: "scale"},
  {opacity: 70},
  {effect: "brightness:50"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(0.5))
        .adjust(opacity(70))
        .adjust(brightness().level(50))
    )
  ).position(new Position().gravity(compass("north_east")))
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation width="0.5" crop="scale" />
  <Transformation opacity="70" />
  <Transformation effect="brightness:50" />
  <Transformation flags="layer_apply" gravity="north_east" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(0.5))
        .adjust(opacity(70))
        .adjust(brightness().level(50))
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation width="0.5" crop="scale" />
  <cld-transformation opacity="70" />
  <cld-transformation effect="brightness:50" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(0.5))
        .adjust(opacity(70))
        .adjust(brightness().level(50))
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="70">
  </cl-transformation>
  <cl-transformation effect="brightness:50">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(0.5).Crop("scale").Chain()
  .Opacity(70).Chain()
  .Effect("brightness:50").Chain()
  .Flags("layer_apply").Gravity("north_east")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(0.5).setCrop("scale").chain()
  .setOpacity(70).chain()
  .setEffect("brightness:50").chain()
  .setFlags("layer_apply").setGravity("north_east")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(0.5).crop("scale").chain()
  .opacity(70).chain()
  .effect("brightness:50").chain()
  .flags("layer_apply").gravity("north_east")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(0.5F) })
   adjust(Adjust.opacity(70))
   adjust(Adjust.brightness() { level(50) }) })
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.northEast()))
   })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(0.5))
  .adjust(Adjust.opacity(70))
  .adjust(Adjust.brightness().level(50)))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.northEast()))
  )
  ));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(0.5))
  .adjust(Adjust.opacity(70))
  .adjust(Adjust.brightness().level(50)))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.northEast()))
  )
  ));

The base video is scaled to a width of 500 pixels before adding the woman image as an overlay, where the overlay image is automatically cropped to include only the detected face and then scaled to a width of 150 pixels (c_scale,w_500/l_woman/c_crop,g_face/c_scale,w_150/fl_layer_apply):

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_woman/c_crop,g_face/c_scale,w_150/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>"woman"},
  {:gravity=>"face", :crop=>"crop"},
  {:width=>150, :crop=>"scale"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::image("woman")
  ->transformation((new Transformation())
  ->resize(Resize::crop()
  ->gravity(
  Gravity::focusOn(
  FocusOn::face()))
  )
  ->resize(Resize::scale()->width(150)))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>"woman"),
  array("gravity"=>"face", "crop"=>"crop"),
  array("width"=>150, "crop"=>"scale"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': "woman"},
  {'gravity': "face", 'crop': "crop"},
  {'width': 150, 'crop': "scale"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "woman"},
  {gravity: "face", crop: "crop"},
  {width: 150, crop: "scale"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("woman")).chain()
  .gravity("face").crop("crop").chain()
  .width(150).crop("scale").chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .resize(scale().width(500))
  .overlay(
    source(
      image("woman").transformation(
        new Transformation()
          .resize(crop().gravity(focusOn(face())))
          .resize(scale().width(150))
      )
    )
  );

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("woman")},
  {gravity: "face", crop: "crop"},
  {width: 150, crop: "scale"},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("woman")},
  {gravity: "face", crop: "crop"},
  {width: 150, crop: "scale"},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .resize(scale().width(500))
  .overlay(
    source(
      image("woman").transformation(
        new Transformation()
          .resize(crop().gravity(focusOn(face())))
          .resize(scale().width(150))
      )
    )
  );

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay="woman" />
  <Transformation gravity="face" crop="crop" />
  <Transformation width="150" crop="scale" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .resize(scale().width(500))
  .overlay(
    source(
      image("woman").transformation(
        new Transformation()
          .resize(crop().gravity(focusOn(face())))
          .resize(scale().width(150))
      )
    )
  );

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="woman" />
  <cld-transformation gravity="face" crop="crop" />
  <cld-transformation width="150" crop="scale" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4")
  .resize(scale().width(500))
  .overlay(
    source(
      image("woman").transformation(
        new Transformation()
          .resize(crop().gravity(focusOn(face())))
          .resize(scale().width(150))
      )
    )
  );

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="woman">
  </cl-transformation>
  <cl-transformation gravity="face" crop="crop">
  </cl-transformation>
  <cl-transformation width="150" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("woman")).Chain()
  .Gravity("face").Crop("crop").Chain()
  .Width(150).Crop("scale").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("woman").chain()
  .setGravity("face").setCrop("crop").chain()
  .setWidth(150).setCrop("scale").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("woman")).chain()
  .gravity("face").crop("crop").chain()
  .width(150).crop("scale").chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.image("woman") {
   transformation(Transformation {
   resize(Resize.crop() {
   gravity(
  Gravity.focusOn(
  FocusOn.face()))
   })
   resize(Resize.scale() { width(150) }) })
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .resize(Resize.scale().width(500))
  .overlay(Overlay.source(
  Source.image("woman")
  .transformation(new Transformation()
  .resize(Resize.crop()
  .gravity(
  Gravity.focusOn(
  FocusOn.face()))
  )
  .resize(Resize.scale().width(150)))
  )));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .resize(Resize.scale().width(500))
  .overlay(Overlay.source(
  Source.image("woman")
  .transformation(new Transformation()
  .resize(Resize.crop()
  .gravity(
  Gravity.focusOn(
  FocusOn.face()))
  )
  .resize(Resize.scale().width(150)))
  )));

Note

You cannot use object aware cropping in layers.

Multiple overlays

Multiple overlays can easily be added as chained transformations to an aset. The following example adds both image and text overlays to the base video as follows:

An overlay of an image called couple, cropped to a 120x150 ellipse that includes only the detected faces (l_couple/c_crop,g_faces,h_150,w_120/r_max/fl_layer_apply).
An overlay of an image called cloudinary_icon_white with a relative width of 80% of the base video and an opacity of 50% and a brightness of 100 (l_cloudinary_icon_white/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply).
The text string "Sample" in bold 'Impact' font with a size of 40 pixels, placed at a distance of 20 pixels from the bottom of the base video (l_text:impact_40_bold:Sample/fl_layer_apply,g_south,y_20).

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

url:

https://res.cloudinary.com/demo/video/upload/l_couple/c_crop,g_faces,h_150,w_120/r_max/fl_layer_apply,g_north_east/l_cloudinary_icon_white/c_scale,fl_relative,w_0.8/o_50/e_brightness:100/fl_layer_apply/l_text:impact_40_bold:Sample/fl_layer_apply,g_south,y_20/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"couple"},
  {:gravity=>"faces", :height=>150, :width=>120, :crop=>"crop"},
  {:radius=>"max"},
  {:flags=>"layer_apply", :gravity=>"north_east"},
  {:overlay=>"cloudinary_icon_white"},
  {:flags=>"relative", :width=>0.8, :crop=>"scale"},
  {:opacity=>50},
  {:effect=>"brightness:100"},
  {:flags=>"layer_apply"},
  {:overlay=>{:font_family=>"impact", :font_size=>40, :font_weight=>"bold", :text=>"Sample"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::image("couple")
  ->transformation((new Transformation())
  ->resize(Resize::crop()->width(120)
->height(150)
  ->gravity(
  Gravity::focusOn(
  FocusOn::faces()))
  )
  ->roundCorners(RoundCorners::max()))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  )
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_white")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.8)
  ->relative()
  )
  ->adjust(Adjust::opacity(50))
  ->adjust(Adjust::brightness()->level(100)))
  ))
  ->overlay(Overlay::source(
  Source::text("Sample",(new TextStyle("impact",40))
  ->fontWeight(
  FontWeight::bold())
  ))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"couple"),
  array("gravity"=>"faces", "height"=>150, "width"=>120, "crop"=>"crop"),
  array("radius"=>"max"),
  array("flags"=>"layer_apply", "gravity"=>"north_east"),
  array("overlay"=>"cloudinary_icon_white"),
  array("flags"=>"relative", "width"=>"0.8", "crop"=>"scale"),
  array("opacity"=>50),
  array("effect"=>"brightness:100"),
  array("flags"=>"layer_apply"),
  array("overlay"=>array("font_family"=>"impact", "font_size"=>40, "font_weight"=>"bold", "text"=>"Sample")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "couple"},
  {'gravity': "faces", 'height': 150, 'width': 120, 'crop': "crop"},
  {'radius': "max"},
  {'flags': "layer_apply", 'gravity': "north_east"},
  {'overlay': "cloudinary_icon_white"},
  {'flags': "relative", 'width': "0.8", 'crop': "scale"},
  {'opacity': 50},
  {'effect': "brightness:100"},
  {'flags': "layer_apply"},
  {'overlay': {'font_family': "impact", 'font_size': 40, 'font_weight': "bold", 'text': "Sample"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "couple"},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: "cloudinary_icon_white"},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: {font_family: "impact", font_size: 40, font_weight: "bold", text: "Sample"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("couple")).chain()
  .gravity("faces").height(150).width(120).crop("crop").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").chain()
  .overlay(new TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")).chain()
  .flags("layer_apply").gravity("south").y(20)).videoTag("dog");

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

// This code example is not currently available.

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("couple")},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("couple")},
  {gravity: "faces", height: 150, width: 120, crop: "crop"},
  {radius: "max"},
  {flags: "layer_apply", gravity: "north_east"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_white")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {opacity: 50},
  {effect: "brightness:100"},
  {flags: "layer_apply"},
  {overlay: new cloudinary.TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="couple" />
  <Transformation gravity="faces" height="150" width="120" crop="crop" />
  <Transformation radius="max" />
  <Transformation flags="layer_apply" gravity="north_east" />
  <Transformation overlay="cloudinary_icon_white" />
  <Transformation flags="relative" width="0.8" crop="scale" />
  <Transformation opacity="50" />
  <Transformation effect="brightness:100" />
  <Transformation flags="layer_apply" />
  <Transformation overlay={{fontFamily: "impact", fontSize: 40, fontWeight: "bold", text: "Sample"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="couple" />
  <cld-transformation gravity="faces" height="150" width="120" crop="crop" />
  <cld-transformation radius="max" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
  <cld-transformation :overlay="cloudinary_icon_white" />
  <cld-transformation flags="relative" width="0.8" crop="scale" />
  <cld-transformation opacity="50" />
  <cld-transformation effect="brightness:100" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation :overlay="{fontFamily: 'impact', fontSize: 40, fontWeight: 'bold', text: 'Sample'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

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

<cl-video public-id="dog" >
  <cl-transformation overlay="couple">
  </cl-transformation>
  <cl-transformation gravity="faces" height="150" width="120" crop="crop">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_white">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.8" crop="scale">
  </cl-transformation>
  <cl-transformation opacity="50">
  </cl-transformation>
  <cl-transformation effect="brightness:100">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="text:impact_40_bold:Sample">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("couple")).Chain()
  .Gravity("faces").Height(150).Width(120).Crop("crop").Chain()
  .Radius("max").Chain()
  .Flags("layer_apply").Gravity("north_east").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_white")).Chain()
  .Flags("relative").Width(0.8).Crop("scale").Chain()
  .Opacity(50).Chain()
  .Effect("brightness:100").Chain()
  .Flags("layer_apply").Chain()
  .Overlay(new TextLayer().FontFamily("impact").FontSize(40).FontWeight("bold").Text("Sample")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("couple").chain()
  .setGravity("faces").setHeight(150).setWidth(120).setCrop("crop").chain()
  .setRadius("max").chain()
  .setFlags("layer_apply").setGravity("north_east").chain()
  .setOverlay("cloudinary_icon_white").chain()
  .setFlags("relative").setWidth(0.8).setCrop("scale").chain()
  .setOpacity(50).chain()
  .setEffect("brightness:100").chain()
  .setFlags("layer_apply").chain()
  .setOverlay("text:impact_40_bold:Sample").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("couple")).chain()
  .gravity("faces").height(150).width(120).crop("crop").chain()
  .radius("max").chain()
  .flags("layer_apply").gravity("north_east").chain()
  .overlay(new Layer().publicId("cloudinary_icon_white")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .opacity(50).chain()
  .effect("brightness:100").chain()
  .flags("layer_apply").chain()
  .overlay(new TextLayer().fontFamily("impact").fontSize(40).fontWeight("bold").text("Sample")).chain()
  .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.image("couple") {
   transformation(Transformation {
   resize(Resize.crop() { width(120)
 height(150)
   gravity(
  Gravity.focusOn(
  FocusOn.faces()))
   })
   roundCorners(RoundCorners.max()) })
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.northEast()))
   })
   })
   overlay(Overlay.source(
  Source.image("cloudinary_icon_white") {
   transformation(Transformation {
   resize(Resize.scale() { width(0.8F)
   relative()
   })
   adjust(Adjust.opacity(50))
   adjust(Adjust.brightness() { level(100) }) })
   }))
   overlay(Overlay.source(
  Source.text("Sample",TextStyle("impact",40) {
   fontWeight(
  FontWeight.bold())
   })) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.south()))
 offsetY(20) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Nesting layers

Layers can be nested within layers. Each layer must have its own layer and layer_apply components, and the inner layer must be closed before the outer one, like with any nested programming statement.

For example, adding another cloudinary_icon_blue image as an overlay to the first (black and white) overlay:

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_cloudinary_icon_blue/c_scale,w_150/e_blackwhite/l_cloudinary_icon_blue/c_scale,w_50/fl_layer_apply/fl_layer_apply,g_north_east/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>"cloudinary_icon_blue"},
  {:width=>150, :crop=>"scale"},
  {:effect=>"blackwhite"},
  {:overlay=>"cloudinary_icon_blue"},
  {:width=>50, :crop=>"scale"},
  {:flags=>"layer_apply"},
  {:flags=>"layer_apply", :gravity=>"north_east"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(150))
  ->effect(Effect::blackwhite())
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(50)))
  )))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::northEast()))
  )
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("width"=>150, "crop"=>"scale"),
  array("effect"=>"blackwhite"),
  array("overlay"=>"cloudinary_icon_blue"),
  array("width"=>50, "crop"=>"scale"),
  array("flags"=>"layer_apply"),
  array("flags"=>"layer_apply", "gravity"=>"north_east")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': "cloudinary_icon_blue"},
  {'width': 150, 'crop': "scale"},
  {'effect': "blackwhite"},
  {'overlay': "cloudinary_icon_blue"},
  {'width': 50, 'crop': "scale"},
  {'flags': "layer_apply"},
  {'flags': "layer_apply", 'gravity': "north_east"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: "cloudinary_icon_blue"},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: "cloudinary_icon_blue"},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .effect("blackwhite").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(50).crop("scale").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").gravity("north_east")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 150, crop: "scale"},
  {effect: "blackwhite"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {width: 50, crop: "scale"},
  {flags: "layer_apply"},
  {flags: "layer_apply", gravity: "north_east"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation width="150" crop="scale" />
  <Transformation effect="blackwhite" />
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation width="50" crop="scale" />
  <Transformation flags="layer_apply" />
  <Transformation flags="layer_apply" gravity="north_east" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation width="150" crop="scale" />
  <cld-transformation effect="blackwhite" />
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation width="50" crop="scale" />
  <cld-transformation flags="layer_apply" />
  <cld-transformation flags="layer_apply" gravity="north_east" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation()
        .resize(scale().width(150))
        .effect(blackwhite())
        .overlay(
          source(
            image("cloudinary_icon_blue").transformation(
              new Transformation().resize(scale().width(50))
            )
          )
        )
    )
  ).position(new Position().gravity(compass("north_east")))
);

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation width="150" crop="scale">
  </cl-transformation>
  <cl-transformation effect="blackwhite">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation width="50" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="north_east">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(150).Crop("scale").Chain()
  .Effect("blackwhite").Chain()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Width(50).Crop("scale").Chain()
  .Flags("layer_apply").Chain()
  .Flags("layer_apply").Gravity("north_east")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(150).setCrop("scale").chain()
  .setEffect("blackwhite").chain()
  .setOverlay("cloudinary_icon_blue").chain()
  .setWidth(50).setCrop("scale").chain()
  .setFlags("layer_apply").chain()
  .setFlags("layer_apply").setGravity("north_east")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(150).crop("scale").chain()
  .effect("blackwhite").chain()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .width(50).crop("scale").chain()
  .flags("layer_apply").chain()
  .flags("layer_apply").gravity("north_east")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(150) })
   effect(Effect.blackwhite())
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(50) }) })
   })) })
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.northEast()))
   })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .resize(Resize.scale().width(500))
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(150))
  .effect(Effect.blackwhite())
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(50)))
  )))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.northEast()))
  )
  ));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .resize(Resize.scale().width(500))
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(150))
  .effect(Effect.blackwhite())
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(50)))
  )))
  )
  .position(Position()
  .gravity(
  Gravity.compass(
  Compass.northEast()))
  )
  ));

The first image layer has a transformation that changes its size and applies a black and white effect. The second layer is also resized, and then is closed and placed by the first (inner) fl_layer_apply. Since no gravity was specified for that later, it's placed in the center of the first overlay. Then the outer layer apply closes and places the entire layer (including its nested layer) and positions it in the northeast corner.

Relative layer sizing

By default, whenever you apply relative resize transformations to your overlay, the overlay is resized relative to its own original size. However, you can add the relative flag (fl_relative in URLs) to specify that percentage-based width and height parameters of overlays (e.g., w_0.5) are relative to the size of the base video instead of to the original size of the overlaying asset itself.

For example, to add an overlay of the image called cloudinary_icon_blue, where the overlay is resized to 80% of the width of the base video (l_cloudinary_icon_blue/c_scale,fl_relative,w_0.8/fl_layer_apply):

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

url:

https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon_blue/c_scale,fl_relative,w_0.8/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:overlay=>"cloudinary_icon_blue"},
  {:flags=>"relative", :width=>0.8, :crop=>"scale"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->overlay(Overlay::source(
  Source::image("cloudinary_icon_blue")
  ->transformation((new Transformation())
  ->resize(Resize::scale()->width(0.8)
  ->relative()
  ))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("overlay"=>"cloudinary_icon_blue"),
  array("flags"=>"relative", "width"=>"0.8", "crop"=>"scale"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'overlay': "cloudinary_icon_blue"},
  {'flags': "relative", 'width': "0.8", 'crop': "scale"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {overlay: "cloudinary_icon_blue"},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon_blue")},
  {flags: "relative", width: "0.8", crop: "scale"},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation overlay="cloudinary_icon_blue" />
  <Transformation flags="relative" width="0.8" crop="scale" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation :overlay="cloudinary_icon_blue" />
  <cld-transformation flags="relative" width="0.8" crop="scale" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").overlay(
  source(
    image("cloudinary_icon_blue").transformation(
      new Transformation().resize(scale().width(0.8).relative())
    )
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation overlay="cloudinary_icon_blue">
  </cl-transformation>
  <cl-transformation flags="relative" width="0.8" crop="scale">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon_blue")).Chain()
  .Flags("relative").Width(0.8).Crop("scale").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon_blue").chain()
  .setFlags("relative").setWidth(0.8).setCrop("scale").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon_blue")).chain()
  .flags("relative").width(0.8).crop("scale").chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   overlay(Overlay.source(
  Source.image("cloudinary_icon_blue") {
   transformation(Transformation {
   resize(Resize.scale() { width(0.8F)
   relative()
   }) })
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(0.8)
  .relative()
  ))
  )));

Dart (cloudinary_dart 0.x):

cloudinary.video('dog.mp4').transformation(Transformation()
  .overlay(Overlay.source(
  Source.image("cloudinary_icon_blue")
  .transformation(new Transformation()
  .resize(Resize.scale().width(0.8)
  .relative()
  ))
  )));

Text layer options

Text layers can be customized in a variety of ways, such as applying CSS-like styles, adding line breaks, applying special characters, custom fonts, and more.

Styling parameters

In addition to the required font family and font size values of the text layer, a variety of optional CSS-like styles are supported, such as decoration, alignment, letter spacing and more. For a full list, see the Styling parameters table in the reference guide.

The Cloudinary SDK helper methods support supplying the values as an array of mapped values or as a serialized string of values. For example, in Ruby (other frameworks use similar syntax):
overlay: { text: 'Hello World', font_family: 'Arial', font_size: 18, font_weight: 'bold', font_style: 'italic', letter_spacing: 4 }

For example, to overlay the text string "Flowers" in Verdana bold with a size of 75 pixels, underlined, and with 14 pixels spacing between the letters: l_text:verdana_75_bold_underline_letter_spacing_14:Flowers:

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_text:Verdana_75_bold_underline_letter_spacing_14:Flowers/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Verdana", :font_size=>75, :font_weight=>"bold", :text_decoration=>"underline", :letter_spacing=>14, :text=>"Flowers"}},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Flowers",(new TextStyle("Verdana",75))
  ->fontWeight(
  FontWeight::bold())
  ->textDecoration(
  TextDecoration::underline())
->letterSpacing(14))));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Verdana", "font_size"=>75, "font_weight"=>"bold", "text_decoration"=>"underline", "letter_spacing"=>14, "text"=>"Flowers")),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Verdana", 'font_size': 75, 'font_weight': "bold", 'text_decoration': "underline", 'letter_spacing': 14, 'text': "Flowers"}},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Verdana", font_size: 75, font_weight: "bold", text_decoration: "underline", letter_spacing: 14, text: "Flowers"}},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")).chain()
  .flags("layer_apply")).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Verdana", fontSize: 75, fontWeight: "bold", textDecoration: "underline", letterSpacing: 14, text: "Flowers"}} />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Verdana', fontSize: 75, fontWeight: 'bold', textDecoration: 'underline', letterSpacing: 14, text: 'Flowers'}" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Flowers",
      new TextStyle("Verdana", 75)
        .fontWeight("bold")
        .textDecoration("underline")
        .letterSpacing(14)
    )
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Verdana_75_bold_underline_letter_spacing_14:Flowers">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Verdana").FontSize(75).FontWeight("bold").TextDecoration("underline").LetterSpacing(14).Text("Flowers")).Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Verdana_75_bold_underline_letter_spacing_14:Flowers").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(75).fontWeight("bold").textDecoration("underline").letterSpacing(14).text("Flowers")).chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.text("Flowers",TextStyle("Verdana",75) {
   fontWeight(
  FontWeight.bold())
   textDecoration(
  TextDecoration.underline())
 letterSpacing(14) }))) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Text color

You can control the color of the text overlay by adding the color property (co in URLs).

Opaque colors can be set as an RGB hex triplet (e.g., co_rgb:3e2222), a 3-digit RGB hex (e.g., co_rgb:777) or a named color (e.g., co_green). By default, if the color property is omitted, the text has a black color.

For example, adding the text string "Cool text" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base video, in yellow text (FFFF00):

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/co_rgb:FFFF00,l_text:Times_90_bold:Cool%20text/fl_layer_apply,g_south,y_20/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:color=>"#FFFF00", :overlay=>{:font_family=>"Times", :font_size=>90, :font_weight=>"bold", :text=>"Cool%2520text"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%20text",(new TextStyle("Times",90))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textColor(Color::rgb("FFFF00"))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("color"=>"#FFFF00", "overlay"=>array("font_family"=>"Times", "font_size"=>90, "font_weight"=>"bold", "text"=>"Cool%2520text")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'color': "#FFFF00", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Cool%2520text"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Cool%2520text"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF00", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation color="#FFFF00" overlay={{fontFamily: "Times", fontSize: 90, fontWeight: "bold", text: "Cool%2520text"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation color="#FFFF00" :overlay="{fontFamily: 'Times', fontSize: 90, fontWeight: 'bold', text: 'Cool%2520text'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF00")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation color="#FFFF00" overlay="text:Times_90_bold:Cool%2520text">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Color("#FFFF00").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Cool%2520text")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setColor("#FFFF00").setOverlay("text:Times_90_bold:Cool%2520text").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF00").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.text("Cool%20text",TextStyle("Times",90) {
   fontWeight(
  FontWeight.bold())
   }) {
   textColor(Color.rgb("FFFF00"))
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.south()))
 offsetY(20) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

You can also use a 4-digit or 8-digit RGBA hex quadruplet for the color, where the 4th hex value represents the alpha (opacity) value (e.g., co_rgb:3e222240 results in 25% opacity).

The example below uses the same text string "Cool text" in Times bold with a size of 90 pixels at a distance of 20 pixels from the bottom of the base video, in yellow text, but this time with an opacity of 50% (FFFF0080):

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/co_rgb:FFFF0080,l_text:Times_90_bold:Cool%20text/fl_layer_apply,g_south,y_20/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:color=>"#FFFF0080", :overlay=>{:font_family=>"Times", :font_size=>90, :font_weight=>"bold", :text=>"Cool%2520text"}},
  {:flags=>"layer_apply", :gravity=>"south", :y=>20}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%20text",(new TextStyle("Times",90))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textColor(Color::rgb("FFFF0080"))
  )
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::south()))
->offsetY(20))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("color"=>"#FFFF0080", "overlay"=>array("font_family"=>"Times", "font_size"=>90, "font_weight"=>"bold", "text"=>"Cool%2520text")),
  array("flags"=>"layer_apply", "gravity"=>"south", "y"=>20)
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'color': "#FFFF0080", 'overlay': {'font_family': "Times", 'font_size': 90, 'font_weight': "bold", 'text': "Cool%2520text"}},
  {'flags': "layer_apply", 'gravity': "south", 'y': 20}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: {font_family: "Times", font_size: 90, font_weight: "bold", text: "Cool%2520text"}},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {color: "#FFFF0080", overlay: new cloudinary.TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")},
  {flags: "layer_apply", gravity: "south", y: 20}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation color="#FFFF0080" overlay={{fontFamily: "Times", fontSize: 90, fontWeight: "bold", text: "Cool%2520text"}} />
  <Transformation flags="layer_apply" gravity="south" y="20" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation color="#FFFF0080" :overlay="{fontFamily: 'Times', fontSize: 90, fontWeight: 'bold', text: 'Cool%2520text'}" />
  <cld-transformation flags="layer_apply" gravity="south" y="20" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text(
      "Cool%20text",
      new TextStyle("Times", 90).fontWeight("bold")
    ).textColor("#FFFF0080")
  ).position(
    new Position()
      .gravity(compass("south"))
      .offsetY(20)
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation color="#FFFF0080" overlay="text:Times_90_bold:Cool%2520text">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="south" y="20">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Color("#FFFF0080").Overlay(new TextLayer().FontFamily("Times").FontSize(90).FontWeight("bold").Text("Cool%2520text")).Chain()
  .Flags("layer_apply").Gravity("south").Y(20)).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setColor("#FFFF0080").setOverlay("text:Times_90_bold:Cool%2520text").chain()
  .setFlags("layer_apply").setGravity("south").setY(20)).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .color("#FFFF0080").overlay(new TextLayer().fontFamily("Times").fontSize(90).fontWeight("bold").text("Cool%2520text")).chain()
  .flags("layer_apply").gravity("south").y(20)).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.text("Cool%20text",TextStyle("Times",90) {
   fontWeight(
  FontWeight.bold())
   }) {
   textColor(Color.rgb("FFFF0080"))
   }) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.south()))
 offsetY(20) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Multi-line text

You can manually break lines of text by separating each line of text with the newline character (%0A). For example, adding the text string "Cool text" in Verdana bold with a size of 50 pixels at a distance of 10 pixels from the left border of the base video, where each word appears on a new line:

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/l_text:Verdana_50_bold:Cool%0Atext/fl_layer_apply,g_west,x_10/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Verdana", :font_size=>50, :font_weight=>"bold", :text=>"Cool%250Atext"}},
  {:flags=>"layer_apply", :gravity=>"west", :x=>10}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Cool%0Atext",(new TextStyle("Verdana",50))
  ->fontWeight(
  FontWeight::bold())
  ))
  ->position((new Position())
  ->gravity(
  Gravity::compass(
  Compass::west()))
->offsetX(10))
  );

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Verdana", "font_size"=>50, "font_weight"=>"bold", "text"=>"Cool%250Atext")),
  array("flags"=>"layer_apply", "gravity"=>"west", "x"=>10)
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Verdana", 'font_size': 50, 'font_weight': "bold", 'text': "Cool%250Atext"}},
  {'flags': "layer_apply", 'gravity': "west", 'x': 10}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Verdana", font_size: 50, font_weight: "bold", text: "Cool%250Atext"}},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")).chain()
  .flags("layer_apply").gravity("west").x(10)).videoTag("dog");

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

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")},
  {flags: "layer_apply", gravity: "west", x: 10}
  ]})

React (@cloudinary/react 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Verdana", fontSize: 50, fontWeight: "bold", text: "Cool%250Atext"}} />
  <Transformation flags="layer_apply" gravity="west" x="10" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Verdana', fontSize: 50, fontWeight: 'bold', text: 'Cool%250Atext'}" />
  <cld-transformation flags="layer_apply" gravity="west" x="10" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This SDK requires imports from @cloudinary/url-gen. Learn more in the SDK docs.
new CloudinaryVideo("dog.mp4").resize(scale().width(500)).overlay(
  source(
    text("Cool%0Atext", new TextStyle("Verdana", 50).fontWeight("bold"))
  ).position(
    new Position()
      .gravity(compass("west"))
      .offsetX(10)
  )
);

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Verdana_50_bold:Cool%250Atext">
  </cl-transformation>
  <cl-transformation flags="layer_apply" gravity="west" x="10">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Verdana").FontSize(50).FontWeight("bold").Text("Cool%250Atext")).Chain()
  .Flags("layer_apply").Gravity("west").X(10)).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Verdana_50_bold:Cool%250Atext").chain()
  .setFlags("layer_apply").setGravity("west").setX(10)).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Verdana").fontSize(50).fontWeight("bold").text("Cool%250Atext")).chain()
  .flags("layer_apply").gravity("west").x(10)).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.text("Cool%0Atext",TextStyle("Verdana",50) {
   fontWeight(
  FontWeight.bold())
   })) {
   position(Position() {
   gravity(
  Gravity.compass(
  Compass.west()))
 offsetX(10) })
   }) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

Auto-line breaks

Cloudinary can also automatically wrap your text into multiple lines based on a specified maximum width for the text string. To do this, apply the fit crop mode to the text layer and specify the width to use for word wrapping. This setting tells Cloudinary to automatically wrap the actual text content onto a new line once the width is reached.

Note

c_fit (Called textFit in the latest major version of some SDKs) is the only 'resize' option that can be used as a qualifier of text overlays.

For example, to add a long text string in bold Neucha font with a size of 26 pixels to the base video that wraps at a width of 400 pixels:

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

url:

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Neucha", :font_size=>26, :font_weight=>"bold", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>400, :crop=>"fit"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textFit(
  TextFit::size(400))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Neucha", "font_size"=>26, "font_weight"=>"bold", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>400, "crop"=>"fit"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).videoTag("dog");

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

// This code example is not currently available.

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Neucha", fontSize: 26, fontWeight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="400" crop="fit" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Neucha', fontSize: 26, fontWeight: 'bold', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="400" crop="fit" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="400" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).resourceType("video").generate("dog.mp4");

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

cloudinary.video {
  publicId("dog.mp4")
   resize(Resize.scale() { width(500) })
   overlay(Overlay.source(
  Source.text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",TextStyle("Neucha",26) {
   fontWeight(
  FontWeight.bold())
   }) {
   textFit(
  TextFit.size(400))
   })) 
}.generate()

Flutter (cloudinary_flutter 0.x):

// This code example is not currently available.

Dart (cloudinary_dart 0.x):

// This code example is not currently available.

When using the fit (textFit in some SDKs) crop mode, you must specify a width for your text overlay, but height is optional. Line breaks are applied as needed to achieve the requested width and/or height rectangle.

The specified font size of your overlay stays as is, even if the resulting text overlay height exceeds the height of its hosting video. So, if you don't limit the overlay height, the height of the image expands to accommodate large texts:

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

url:

https://res.cloudinary.com/demo/video/upload/c_scale,w_500/c_fit,l_text:Neucha_26_bold:Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat. Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.,w_400/fl_layer_apply/dog.mp4

Ruby (cloudinary 1.x):

cl_video_tag("dog", :transformation=>[
  {:width=>500, :crop=>"scale"},
  {:overlay=>{:font_family=>"Neucha", :font_size=>26, :font_weight=>"bold", :text=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, :width=>400, :crop=>"fit"},
  {:flags=>"layer_apply"}
  ])

PHP (cloudinary_php 2.x):

(new VideoTag('dog.mp4'))
  ->resize(Resize::scale()->width(500))
  ->overlay(Overlay::source(
  Source::text("Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.
Lorem%20ipsum%20dolor%20sit%20amet%20consectetur%20adipisicing%20elit%20sed%20do%20eiusmod%20tempor%20incididunt%20ut%20labore%20et%20dolore%20magna%20aliqua.%20Ut%20enim%20ad%20minim%20veniam%20quis%20nostrud%20exercitation%20ullamco%20laboris%20nisi%20ut%20aliquip%20ex%20ea%20commodo%20consequat.",(new TextStyle("Neucha",26))
  ->fontWeight(
  FontWeight::bold())
  )
  ->textFit(
  TextFit::size(400))
  ));

PHP (cloudinary_php 1.x (legacy)):

cl_video_tag("dog", array("transformation"=>array(
  array("width"=>500, "crop"=>"scale"),
  array("overlay"=>array("font_family"=>"Neucha", "font_size"=>26, "font_weight"=>"bold", "text"=>"Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), "width"=>400, "crop"=>"fit"),
  array("flags"=>"layer_apply")
  )))

Python (cloudinary 1.x):

CloudinaryVideo("dog").video(transformation=[
  {'width': 500, 'crop': "scale"},
  {'overlay': {'font_family': "Neucha", 'font_size': 26, 'font_weight': "bold", 'text': "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, 'width': 400, 'crop': "fit"},
  {'flags': "layer_apply"}
  ])

Node.js (cloudinary 1.x):

cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: {font_family: "Neucha", font_size: 26, font_weight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}, width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})

Java (cloudinary 1.x):

cloudinary.url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).videoTag("dog");

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

// This code example is not currently available.

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

cloudinary.videoTag('dog', {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]}).toHtml();

jQuery (cloudinary-jquery 2.x):

$.cloudinary.video("dog", {transformation: [
  {width: 500, crop: "scale"},
  {overlay: new cloudinary.TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."), width: 400, crop: "fit"},
  {flags: "layer_apply"}
  ]})

React (@cloudinary/react 1.x):

// This code example is not currently available.

React (cloudinary-react 1.x):

<Video publicId="dog" >
  <Transformation width="500" crop="scale" />
  <Transformation overlay={{fontFamily: "Neucha", fontSize: 26, fontWeight: "bold", text: "Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat."}} width="400" crop="fit" />
  <Transformation flags="layer_apply" />
</Video>

Vue.js (@cloudinary/vue 1.x):

// This code example is not currently available.

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

<cld-video public-id="dog" >
  <cld-transformation width="500" crop="scale" />
  <cld-transformation :overlay="{fontFamily: 'Neucha', fontSize: 26, fontWeight: 'bold', text: 'Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.'}" width="400" crop="fit" />
  <cld-transformation flags="layer_apply" />
</cld-video>

Angular (@cloudinary/ng 1.x):

// This code example is not currently available.

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

<cl-video public-id="dog" >
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat." width="400" crop="fit">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
</cl-video>

.NET (CloudinaryDotNet 1.x):

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(500).Crop("scale").Chain()
  .Overlay(new TextLayer().FontFamily("Neucha").FontSize(26).FontWeight("bold").Text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).Width(400).Crop("fit").Chain()
  .Flags("layer_apply")).BuildVideoTag("dog")

iOS (cloudinary 3.x):

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(500).setCrop("scale").chain()
  .setOverlay("text:Neucha_26_bold:Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.").setWidth(400).setCrop("fit").chain()
  .setFlags("layer_apply")).generate("dog.mp4")

Android (cloudinary-android 1.x):

MediaManager.get().url().transformation(new Transformation()
  .width(500).crop("scale").chain()
  .overlay(new TextLayer().fontFamily("Neucha").fontSize(26).fontWeight("bold").text("Lorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.%0D%0A%0D%0ALorem%2520ipsum%2520dolor%2520sit%2520amet%2520consectetur%2520adipisicing%2520elit%2520sed%2520do%2520eiusmod%2520tempor%2520incididunt%2520ut%2520labore%2520et%2520dolore%2520magna%2520aliqua.%2520Ut%2520enim%2520ad%2520minim%2520veniam%2520quis%2520nostrud%2520exercitation%2520ullamco%2520laboris%2520nisi%2520ut%2520aliquip%2520ex%2520ea%2520commodo%2520consequat.")).width(400).crop("fit").chain()
  .flags("layer_apply")).reso