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.

E.g, The original video -

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")

Now, let’s add a watermark on the entire video by using the overlay parameter (l_ in URLs) -

Ruby:
Copy to clipboard
cl_video_tag("abbey_road", :overlay=>"cloudinary_icon", :width=>70, :height=>70, :gravity=>"north_west")
PHP:
Copy to clipboard
cl_video_tag("abbey_road", array("overlay"=>"cloudinary_icon", "width"=>70, "height"=>70, "gravity"=>"north_west"))
Python:
Copy to clipboard
CloudinaryVideo("abbey_road").video(overlay="cloudinary_icon", width=70, height=70, gravity="north_west")
Node.js:
Copy to clipboard
cloudinary.video("abbey_road", {overlay: "cloudinary_icon", width: 70, height: 70, gravity: "north_west"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).width(70).height(70).gravity("north_west")).videoTag("abbey_road");
JS:
Copy to clipboard
cloudinary.videoTag('abbey_road', {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 70, height: 70, gravity: "north_west"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("abbey_road", {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 70, height: 70, gravity: "north_west"})
React:
Copy to clipboard
<Video publicId="abbey_road" >
  <Transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="abbey_road" >
  <cld-transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="abbey_road" >
  <cl-transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon")).Width(70).Height(70).Gravity("north_west")).BuildVideoTag("abbey_road")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).width(70).height(70).gravity("north_west")).resourceType("video").generate("abbey_road.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setOverlay("cloudinary_icon").setWidth(70).setHeight(70).setGravity("north_west")).generate("abbey_road.mp4")

You can also confine the watermark for a few seconds by specifying the start and end offset (so_ and eo_ in the URLs). For example, let’s make the watermark visible for 2 seconds - starting from the 0:03 mark -

Ruby:
Copy to clipboard
cl_video_tag("abbey_road", :overlay=>"cloudinary_icon", :width=>70, :height=>70, :gravity=>"north_west", :start_offset=>"3", :end_offset=>"5")
PHP:
Copy to clipboard
cl_video_tag("abbey_road", array("overlay"=>"cloudinary_icon", "width"=>70, "height"=>70, "gravity"=>"north_west", "start_offset"=>"3", "end_offset"=>"5"))
Python:
Copy to clipboard
CloudinaryVideo("abbey_road").video(overlay="cloudinary_icon", width=70, height=70, gravity="north_west", start_offset="3", end_offset="5")
Node.js:
Copy to clipboard
cloudinary.video("abbey_road", {overlay: "cloudinary_icon", width: 70, height: 70, gravity: "north_west", start_offset: "3", end_offset: "5"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).width(70).height(70).gravity("north_west").startOffset("3").endOffset("5")).videoTag("abbey_road");
JS:
Copy to clipboard
cloudinary.videoTag('abbey_road', {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 70, height: 70, gravity: "north_west", startOffset: "3", endOffset: "5"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.video("abbey_road", {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), width: 70, height: 70, gravity: "north_west", start_offset: "3", end_offset: "5"})
React:
Copy to clipboard
<Video publicId="abbey_road" >
  <Transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west" startOffset="3" endOffset="5" />
</Video>
Vue.js:
Copy to clipboard
<cld-video publicId="abbey_road" >
  <cld-transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west" startOffset="3" endOffset="5" />
</cld-video>
Angular:
Copy to clipboard
<cl-video public-id="abbey_road" >
  <cl-transformation overlay="cloudinary_icon" width="70" height="70" gravity="north_west" start-offset="3" end-offset="5">
  </cl-transformation>
</cl-video>
.Net:
Copy to clipboard
cloudinary.Api.UrlVideoUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon")).Width(70).Height(70).Gravity("north_west").StartOffset("3").EndOffset("5")).BuildVideoTag("abbey_road")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon")).width(70).height(70).gravity("north_west").startOffset("3").endOffset("5")).resourceType("video").generate("abbey_road.mp4");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation().setOverlay("cloudinary_icon").setWidth(70).setHeight(70).setGravity("north_west").setStartOffset("3").setEndOffset("5")).generate("abbey_road.mp4")