Fading in and out (+ visual noise)

By overlaying a video on top of itself, we can create the visual noise effect for a limited period of time. For that we’ll use the noise effect for 3 seconds in the start of the video. Let’s also add e_fade parameter, so the video will also fade in and out.

Original

Fade in & out

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:effect=>"noise:60", :start_offset=>"0", :end_offset=>"3", :overlay=>"video:dog", :flags=>"layer_apply"},
  {:effect=>"fade:2000"},
  {:effect=>"fade:-4000"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("effect"=>"noise:60", "start_offset"=>"0", "end_offset"=>"3", "overlay"=>"video:dog", "flags"=>"layer_apply"),
  array("effect"=>"fade:2000"),
  array("effect"=>"fade:-4000")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'effect': "noise:60", 'start_offset': "0", 'end_offset': "3", 'overlay': "video:dog", 'flags': "layer_apply"},
  {'effect': "fade:2000"},
  {'effect': "fade:-4000"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: "video:dog", flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {effect: "noise:60", startOffset: "0", endOffset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {effect: "noise:60", start_offset: "0", end_offset: "3", overlay: new cloudinary.Layer().publicId("video:dog"), flags: "layer_apply"},
  {effect: "fade:2000"},
  {effect: "fade:-4000"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <Transformation effect="fade:2000" />
  <Transformation effect="fade:-4000" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation effect="noise:60" startOffset="0" endOffset="3" overlay="video:dog" flags="layer_apply" />
  <cld-transformation effect="fade:2000" />
  <cld-transformation effect="fade:-4000" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation effect="noise:60" start-offset="0" end-offset="3" overlay="video:dog" flags="layer_apply">
  </cl-transformation>
  <cl-transformation effect="fade:2000">
  </cl-transformation>
  <cl-transformation effect="fade:-4000">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("noise:60").StartOffset("0").EndOffset("3").Overlay(new Layer().PublicId("video:dog")).Flags("layer_apply").Chain()
  .Effect("fade:2000").Chain()
  .Effect("fade:-4000")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("noise:60").startOffset("0").endOffset("3").overlay(new Layer().publicId("video:dog")).flags("layer_apply").chain()
  .effect("fade:2000").chain()
  .effect("fade:-4000")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("noise:60").setStartOffset("0").setEndOffset("3").setOverlay("video:dog").setFlags("layer_apply").chain()
  .setEffect("fade:2000").chain()
  .setEffect("fade:-4000")).generate("dog.mp4")
by Maor Gariv

Video overlays

Place a video on top of another by using the overlay parameter while adding the ‘video:’ type to it (l_video in URLs).

Moving video overlay

Video overlay

Ruby:
Copy to clipboard
cl_video_tag("dog", :transformation=>[
  {:width=>150, :effect=>"accelerate:100", :overlay=>"video:abbey_road"},
  {:gravity=>"west", :start_offset=>"0", :end_offset=>"2", :flags=>"layer_apply"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"center", :start_offset=>"2", :end_offset=>"5", :flags=>"layer_apply", :crop=>"scale"},
  {:overlay=>"video:abbey_road"},
  {:width=>150, :effect=>"accelerate:100", :gravity=>"east", :start_offset=>"5", :flags=>"layer_apply", :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_video_tag("dog", array("transformation"=>array(
  array("width"=>150, "effect"=>"accelerate:100", "overlay"=>"video:abbey_road"),
  array("gravity"=>"west", "start_offset"=>"0", "end_offset"=>"2", "flags"=>"layer_apply"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"center", "start_offset"=>"2", "end_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale"),
  array("overlay"=>"video:abbey_road"),
  array("width"=>150, "effect"=>"accelerate:100", "gravity"=>"east", "start_offset"=>"5", "flags"=>"layer_apply", "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryVideo("dog").video(transformation=[
  {'width': 150, 'effect': "accelerate:100", 'overlay': "video:abbey_road"},
  {'gravity': "west", 'start_offset': "0", 'end_offset': "2", 'flags': "layer_apply"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "center", 'start_offset': "2", 'end_offset': "5", 'flags': "layer_apply", 'crop': "scale"},
  {'overlay': "video:abbey_road"},
  {'width': 150, 'effect': "accelerate:100", 'gravity': "east", 'start_offset': "5", 'flags': "layer_apply", 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: "video:abbey_road"},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: "video:abbey_road"},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog', {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", startOffset: "0", endOffset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", startOffset: "2", endOffset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", startOffset: "5", flags: "layer_apply", crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog", {transformation: [
  {width: 150, effect: "accelerate:100", overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {gravity: "west", start_offset: "0", end_offset: "2", flags: "layer_apply"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "center", start_offset: "2", end_offset: "5", flags: "layer_apply", crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("video:abbey_road")},
  {width: 150, effect: "accelerate:100", gravity: "east", start_offset: "5", flags: "layer_apply", crop: "scale"}
  ]})
React:
Copy to clipboard
<Video publicId="dog" >
  <Transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <Transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <Transformation overlay="video:abbey_road" />
  <Transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="dog" >
  <cld-transformation width="150" effect="accelerate:100" overlay="video:abbey_road" />
  <cld-transformation gravity="west" startOffset="0" endOffset="2" flags="layer_apply" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="center" startOffset="2" endOffset="5" flags="layer_apply" crop="scale" />
  <cld-transformation overlay="video:abbey_road" />
  <cld-transformation width="150" effect="accelerate:100" gravity="east" startOffset="5" flags="layer_apply" crop="scale" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="dog" >
  <cl-transformation width="150" effect="accelerate:100" overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation gravity="west" start-offset="0" end-offset="2" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="center" start-offset="2" end-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="video:abbey_road">
  </cl-transformation>
  <cl-transformation width="150" effect="accelerate:100" gravity="east" start-offset="5" flags="layer_apply" crop="scale">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(150).Effect("accelerate:100").Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Gravity("west").StartOffset("0").EndOffset("2").Flags("layer_apply").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("center").StartOffset("2").EndOffset("5").Flags("layer_apply").Crop("scale").Chain()
  .Overlay(new Layer().PublicId("video:abbey_road")).Chain()
  .Width(150).Effect("accelerate:100").Gravity("east").StartOffset("5").Flags("layer_apply").Crop("scale")).BuildVideoTag("dog")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(150).effect("accelerate:100").overlay(new Layer().publicId("video:abbey_road")).chain()
  .gravity("west").startOffset("0").endOffset("2").flags("layer_apply").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("center").startOffset("2").endOffset("5").flags("layer_apply").crop("scale").chain()
  .overlay(new Layer().publicId("video:abbey_road")).chain()
  .width(150).effect("accelerate:100").gravity("east").startOffset("5").flags("layer_apply").crop("scale")).resourceType("video").generate("dog.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(150).setEffect("accelerate:100").setOverlay("video:abbey_road").chain()
  .setGravity("west").setStartOffset("0").setEndOffset("2").setFlags("layer_apply").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("center").setStartOffset("2").setEndOffset("5").setFlags("layer_apply").setCrop("scale").chain()
  .setOverlay("video:abbey_road").chain()
  .setWidth(150).setEffect("accelerate:100").setGravity("east").setStartOffset("5").setFlags("layer_apply").setCrop("scale")).generate("dog.mp4")
by Maor Gariv

Adding a watermark to a video

A common practice among many of our customers - watermark images or videos to give credit for the owners and/or to protect their high-res original resources.

Original Video

Full video watermark

Mid-video watermark

Ruby:
Copy to clipboard
cl_video_tag("abbey_road")
PHP:
Copy to clipboard
cl_video_tag("abbey_road")
Python:
Copy to clipboard
CloudinaryVideo("abbey_road").video()
Node.js:
Copy to clipboard
cloudinary.video("abbey_road")
Java:
Copy to clipboard
cloudinary.url().videoTag("abbey_road");
JS:
Copy to clipboard
cloudinary.videoTag('abbey_road').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("abbey_road")
React:
Copy to clipboard
<Video publicId="abbey_road" >

</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="abbey_road" >

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

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

Manipulating the audio channel

By setting the audio_codec to none (ac_none in URLs), you can strip the audio channel from the video, serving it without sound. You can also chain another audio file as an overlay to replace the video’s original audio.

The original video file (with audio) -

Ruby:
Copy to clipboard
cl_video_tag("dog")
PHP:
Copy to clipboard
cl_video_tag("dog")
Python:
Copy to clipboard
CloudinaryVideo("dog").video()
Node.js:
Copy to clipboard
cloudinary.video("dog")
Java:
Copy to clipboard
cloudinary.url().videoTag("dog");
JS:
Copy to clipboard
cloudinary.videoTag('dog').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("dog")
React:
Copy to clipboard
<Video publicId="dog" >

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

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

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