Cloudinary Cookbook recipes about Overlay

Find recipes by tags:

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

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/e_noise:60,so_0,eo_3,l_video:dog,fl_layer_apply/e_fade:2000/e_fade:-4000/dog.mp4

Ruby:

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

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

PHP v2:

(new VideoTag('dog.mp4'))
  ->overlay(
      Overlay::source(Source::video('dog')
        ->transformation((new VideoTransformation())
          ->effect(Effect::noise()->level(60))))
      ->timeline(Timeline::position()->startOffset(0)->endOffset(3)))
    ->effect(Effect::fadeIn()->duration(2000))
    ->effect(Effect::fadeOut()->duration(4000));

Python:

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:

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:

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:

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:

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

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

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

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

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:

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:

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

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:

Creating a Bevel effect

Add the Bevel effect to any image. We will create a generalized transformation URL, which could be used to apply the bevel effect to any image. In order to do this, we'll make use of variables, overlays, the colorize effect, the cut-out effect, and more. Here is the final result - The Bevel effect

The Bevel effect

Triangle Image

Top Bevel

by Eyal Katz Talmon May 03, 2020

Tags: