Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Watermark tag

← View popular recipes
Find recipes by tags:
View all tags

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/w_150,e_accelerate:100,l_video:abbey_road/g_west,so_0,eo_2,fl_layer_apply/l_video:abbey_road/w_150,e_accelerate:100,g_center,so_2,eo_5,fl_layer_apply/l_video:abbey_road/w_150,e_accelerate:100,g_east,so_5,fl_layer_apply/dog.mp4
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")
Read more
by Maor Gariv
Tags:

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

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/abbey_road.mp4
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")
Read more
by Maor Gariv
Tags:

Adding Video Watermark as an Overlay

Adding watermarks to videos on Cloudinary yields many enhancements, involving only a few simple steps. The sections below describe the various scenarios along with examples.

Original video

Overlay image watermark

Watermark coordinates

URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/video/upload/celenarae.mp4
Ruby:
Copy to clipboard
cl_video_tag("celenarae")
PHP:
Copy to clipboard
cl_video_tag("celenarae")
Python:
Copy to clipboard
CloudinaryVideo("celenarae").video()
Node.js:
Copy to clipboard
cloudinary.video("celenarae")
Java:
Copy to clipboard
cloudinary.url().videoTag("celenarae");
JS:
Copy to clipboard
cloudinary.videoTag('celenarae').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("celenarae")
React:
Copy to clipboard
<Video publicId="celenarae" >

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

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

</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.BuildVideoTag("celenarae")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("video").generate("celenarae.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").generate("celenarae.mp4")
Read more
by George Bontea
Tags:

Adding watermarks as an overlay

Add your watermark as an overlay on top of any image by setting the overlay parameter (l in URLs) as your watermark image's public ID. The overlaid image's size and position is customizable.

Overlaying

Overlaying

Scale and position

Scale and position

Semi-transparent

Semi-transparent
URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg
Ruby:
Copy to clipboard
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
Copy to clipboard
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
Copy to clipboard
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
Copy to clipboard
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).imageTag("envelope.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('envelope.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("envelope.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})
React:
Copy to clipboard
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="envelope.jpg" >
  <cld-transformation overlay="cloudinary_icon" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("envelope.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("envelope.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags: