Cloudinary cookbook background

Cloudinary Cookbook

Recipes of the Watermark tag

← View popular recipes
Find recipes by tags:
View all 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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/video/upload/celenarae.mp4
Ruby:
cl_video_tag("celenarae")
PHP:
cl_video_tag("celenarae")
Python:
CloudinaryVideo("celenarae").video()
Node.js:
cloudinary.video("celenarae")
Java:
cloudinary.url().videoTag("celenarae");
JS:
cloudinary.videoTag('celenarae').toHtml();
jQuery:
$.cloudinary.video("celenarae")
React:
<Video publicId="celenarae" >

</Video>
Angular:
<cl-video public-id="celenarae" >

</cl-video>
.Net:
cloudinary.Api.UrlVideoUp.BuildVideoTag("celenarae")
Android:
MediaManager.get().url().resourceType("video").generate("celenarae.mp4");
iOS:
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.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg
Ruby:
cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")
PHP:
cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))
Python:
CloudinaryImage("envelope.jpg").image(overlay="cloudinary_icon")
Node.js:
cloudinary.image("envelope.jpg", {overlay: "cloudinary_icon"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).imageTag("envelope.jpg");
JS:
cloudinary.imageTag('envelope.jpg', {overlay: new cloudinary.Layer().publicId("cloudinary_icon")}).toHtml();
jQuery:
$.cloudinary.image("envelope.jpg", {overlay: new cloudinary.Layer().publicId("cloudinary_icon")})
React:
<Image publicId="envelope.jpg" >
  <Transformation overlay="cloudinary_icon" />
</Image>
Angular:
<cl-image public-id="envelope.jpg" >
  <cl-transformation overlay="cloudinary_icon">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("cloudinary_icon"))).BuildImageTag("envelope.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("cloudinary_icon"))).generate("envelope.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("cloudinary_icon")).generate("envelope.jpg")!, cloudinary: cloudinary)
Read more
by Itay Taragano
Tags: