Cloudinary Cookbook recipes about Watermark

Find recipes by 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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

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:

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 v1:

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

PHP v2:

(new VideoTag('dog.mp4'))
  ->overlay(
      Overlay::source(Source::video('abbey_road')
        ->transformation((new VideoTransformation())
          ->resize(Resize::scale()->width(150))
          ->effect(Effect::accelerate()->rate(100))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::west())))
      ->timeline(Timeline::position()->startOffset(0)->endOffset(2)))
    ->overlay(
        Overlay::source(Source::video('abbey_road')
          ->transformation((new VideoTransformation())
            ->resize(Resize::scale()->width(150))
            ->effect(Effect::accelerate()->rate(100))))
        ->position((new Position())
          ->gravity(Gravity::compass(Compass::center())))
        ->timeline(Timeline::position()->startOffset(2)->endOffset(5)))
          ->overlay(
              Overlay::source(Source::video('abbey_road')
                ->transformation((new VideoTransformation())
                  ->resize(Resize::scale()->width(150))
                  ->effect(Effect::accelerate()->rate(100))))
              ->position((new Position())
                ->gravity(Gravity::compass(Compass::east())))
              ->timeline(Timeline::position()->startOffset(5))
          
        
          );

Python:

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:

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:

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:

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:

$.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:

<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:

<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:

<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:

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:

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:

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 Jul 02, 2020

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/abbey_road.mp4

Ruby:

cl_video_tag("abbey_road")

PHP v1:

cl_video_tag("abbey_road")

PHP v2:

(new VideoTag('abbey_road.mp4'));

Python:

CloudinaryVideo("abbey_road").video()

Node.js:

cloudinary.video("abbey_road")

Java:

cloudinary.url().videoTag("abbey_road");

JS:

cloudinary.videoTag('abbey_road').toHtml();

jQuery:

$.cloudinary.video("abbey_road")

React:

<Video publicId="abbey_road" >

</Video>

Vue.js:

<cld-video publicId="abbey_road" >

</cld-video>

Angular:

<cl-video public-id="abbey_road" >

</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.BuildVideoTag("abbey_road")

Android:

MediaManager.get().url().resourceType("video").generate("abbey_road.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").generate("abbey_road.mp4")

by Maor Gariv Jul 02, 2020

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

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/video/upload/celenarae.mp4

Ruby:

cl_video_tag("celenarae")

PHP v1:

cl_video_tag("celenarae")

PHP v2:

(new VideoTag('celenarae.mp4'));

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>

Vue.js:

<cld-video publicId="celenarae" >

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

by George Bontea Jan 08, 2019

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

Scale and position

Semi-transparent

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon/envelope.jpg

Ruby:

cl_image_tag("envelope.jpg", :overlay=>"cloudinary_icon")

PHP v1:

cl_image_tag("envelope.jpg", array("overlay"=>"cloudinary_icon"))

PHP v2:

(new ImageTag('envelope.jpg'))
  ->overlay(Overlay::source(Source::image('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>

Vue.js:

<cld-image publicId="envelope.jpg" >
  <cld-transformation :overlay="cloudinary_icon" />
</cld-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)

by Itay Taragano Jun 15, 2014

Tags: