Cloudinary Blog

Green Screen Queen: Dynamic Video Transparency Fit For Royalty

By Jul 16, 2019

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Replacing her green suit with the famous blue or white dress is just one of many examples:

From: boredpanda.com

Cloudinary is loved by developers for, among other things, its huge collections of on-the-fly programmatic image and video transformation options. Automatically generating an image that replaced the Queen's greens with an alternative design using Cloudinary image transformations would be no challenge.

But we wanted a challenge. So in honor of the Queen, Cloudinary now supports its make_transparent parameter also for video!

Given that in video, the color you want to make transparent is usually a moving target, this involves a more sophisticated algorithm for us, but it's still just one on-the-fly transformation away for you.

For example, look what you get if you place the Queen's Coach Ride video as an overlay over a nice animated hearts video, and then apply the new dynamic video transparency parameter (make_transparent) to the Queen's green (hex color #87ff66) suit. You guessed it… A Queen of Hearts!

Here's what the URL for this video looks like, or click your favorite language to see how you would generate the URL in your web or mobile app using one of our many SDKs:

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_800/du_15,so_12/l_video:docs:green_screen_queen,e_make_transparent:15,co_rgb:87ff66,fl_relative,w_1.0/docs/animated_hearts.mp4

Ruby:

cl_video_tag("docs/animated_hearts", :transformation=>[
  {:width=>800, :crop=>"scale"},
  {:duration=>"15", :start_offset=>"12"},
  {:overlay=>"video:docs:green_screen_queen", :effect=>"make_transparent:15", :color=>"#87ff66", :flags=>"relative", :width=>1.0}
  ])

PHP v1:

cl_video_tag("docs/animated_hearts", array("transformation"=>array(
  array("width"=>800, "crop"=>"scale"),
  array("duration"=>"15", "start_offset"=>"12"),
  array("overlay"=>"video:docs:green_screen_queen", "effect"=>"make_transparent:15", "color"=>"#87ff66", "flags"=>"relative", "width"=>"1.0")
  )))

PHP v2:

(new VideoTag('docs/animated_hearts.mp4'))
  ->resize(Resize::scale()->width(800))
  ->videoEdit(VideoEdit::trim()->startOffset(12)->duration(15))
  ->overlay(
      Overlay::source(Source::video('docs/green_screen_queen')
        ->transformation((new VideoTransformation())
          ->resize(Resize::scale()->width(1.0)->relative())
          ->effect(Effect::makeTransparent()->tolerance(15)
            ->colorToReplace(Color::rgb('87ff66'))
  ))));

Python:

CloudinaryVideo("docs/animated_hearts").video(transformation=[
  {'width': 800, 'crop': "scale"},
  {'duration': "15", 'start_offset': "12"},
  {'overlay': "video:docs:green_screen_queen", 'effect': "make_transparent:15", 'color': "#87ff66", 'flags': "relative", 'width': "1.0"}
  ])

Node.js:

cloudinary.video("docs/animated_hearts", {transformation: [
  {width: 800, crop: "scale"},
  {duration: "15", start_offset: "12"},
  {overlay: "video:docs:green_screen_queen", effect: "make_transparent:15", color: "#87ff66", flags: "relative", width: "1.0"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(800).crop("scale").chain()
  .duration("15").startOffset("12").chain()
  .overlay(new Layer().publicId("video:docs:green_screen_queen")).effect("make_transparent:15").color("#87ff66").flags("relative").width(1.0)).videoTag("docs/animated_hearts");

JS:

cloudinary.videoTag('docs/animated_hearts', {transformation: [
  {width: 800, crop: "scale"},
  {duration: "15", startOffset: "12"},
  {overlay: new cloudinary.Layer().publicId("video:docs:green_screen_queen"), effect: "make_transparent:15", color: "#87ff66", flags: "relative", width: "1.0"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("docs/animated_hearts", {transformation: [
  {width: 800, crop: "scale"},
  {duration: "15", start_offset: "12"},
  {overlay: new cloudinary.Layer().publicId("video:docs:green_screen_queen"), effect: "make_transparent:15", color: "#87ff66", flags: "relative", width: "1.0"}
  ]})

React:

<Video publicId="docs/animated_hearts" >
  <Transformation width="800" crop="scale" />
  <Transformation duration="15" startOffset="12" />
  <Transformation overlay="video:docs:green_screen_queen" effect="make_transparent:15" color="#87ff66" flags="relative" width="1.0" />
</Video>

Vue.js:

<cld-video publicId="docs/animated_hearts" >
  <cld-transformation width="800" crop="scale" />
  <cld-transformation duration="15" startOffset="12" />
  <cld-transformation :overlay="video:docs:green_screen_queen" effect="make_transparent:15" color="#87ff66" flags="relative" width="1.0" />
</cld-video>

Angular:

<cl-video public-id="docs/animated_hearts" >
  <cl-transformation width="800" crop="scale">
  </cl-transformation>
  <cl-transformation duration="15" start-offset="12">
  </cl-transformation>
  <cl-transformation overlay="video:docs:green_screen_queen" effect="make_transparent:15" color="#87ff66" flags="relative" width="1.0">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Width(800).Crop("scale").Chain()
  .Duration("15").StartOffset("12").Chain()
  .Overlay(new Layer().PublicId("video:docs:green_screen_queen")).Effect("make_transparent:15").Color("#87ff66").Flags("relative").Width(1.0)).BuildVideoTag("docs/animated_hearts")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(800).crop("scale").chain()
  .duration("15").startOffset("12").chain()
  .overlay(new Layer().publicId("video:docs:green_screen_queen")).effect("make_transparent:15").color("#87ff66").flags("relative").width(1.0)).resourceType("video").generate("docs/animated_hearts.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setWidth(800).setCrop("scale").chain()
  .setDuration("15").setStartOffset("12").chain()
  .setOverlay("video:docs:green_screen_queen").setEffect("make_transparent:15").setColor("#87ff66").setFlags("relative").setWidth(1.0)).generate("docs/animated_hearts.mp4")

Seeing through the URL

In case you haven't played with Cloudinary transformation URLs before, here's a quick walk through (or 'see through', if you will):

https://res.cloudinary.com/demo/video/upload...
The first part of the URL defines your Cloudinary account and how/where the video to deliver is stored in your account.
.../w_800/du_15,so_12...
The next two components are transformations that scale the video down to a width of 800 pixels and shorten the overall video duration to 15 seconds.
.../l_video:docs:green_screen_queen,...
Now the fun part. The /l_ component ( overlay in SDKs) adds the green_screen_queen video (from the /docs folder) as a layer over the base animated_hearts video.
- ...e_make_transparent:15,co_rgb:87ff66,...
  The make_transparent parameter is applied to the overlay video with a tolerance of 15 to allow for minor color variations, and specifies that the transparency should be applied to the hex color 87ff66 (the particular shade of green that the Queen chose to wear).
- ...fl_relative,w_1.0...
  Additionally, the overlayed video is width is scaled to 1.0 (100%) relative to the width of the base video so that the top layer exactly covers the base video.
.../docs/animated_hearts.mp4
Finally, we specify the base video: animated_hearts.mp4 (also from the /docs folder). In this case, the base video will actually be hiding behind the identically-sized queen video layer, and will show through only where the top video layer is transparent.

Seconds after you deliver this URL for the first time, your video is generated and the specified green color is transparent throughout the duration, regardless of where that color appears or moves within your video.

It's Not Easy Being Green

"Green screen" transparency for both image and video isn't a new concept of-course, but usually it requires manually applying the transparency in video editing software. Additionally, most of these video editors can only achieve video transparency for a specific and very solid shade of green or in some cases, maybe a specific royal blue color. But that specific green (or blue) requirement can be limiting.

In contrast, Cloudinary's make_transparent feature, isn't picky at all. Specify any hex color, along with an optional tolerance level, and go. For example, all we have to do is change the color code accompanying the make_transparent parameter to a light-red shade (#ff4d4b) in the URL we used above, and now it's the footmens' previously light-red uniforms who are getting the love:

It's time to get serious

No doubt that redesigning clothes using video transparency can be entertaining, but there are more practical uses for the make_transparent video transformation.

For example, what if you want to deliver a video tutorial or product demo with a talking head? No special green-screen studio is necessary. Just find any solid colored wall or hang a sheet in a color that's not too similar to the speaker's face color or clothing, and then use make_transparent to remove the video background.

Here's a video we created in our turquoise-painted meeting room:

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/docs/talking_head_travel.mp4

Ruby:

cl_video_tag("docs/talking_head_travel")

PHP v1:

cl_video_tag("docs/talking_head_travel")

PHP v2:

(new VideoTag('docs/talking_head_travel.mp4'));

Python:

CloudinaryVideo("docs/talking_head_travel").video()

Node.js:

cloudinary.video("docs/talking_head_travel")

Java:

cloudinary.url().videoTag("docs/talking_head_travel");

JS:

cloudinary.videoTag('docs/talking_head_travel').toHtml();

jQuery:

$.cloudinary.video("docs/talking_head_travel")

React:

<Video publicId="docs/talking_head_travel" >

</Video>

Vue.js:

<cld-video publicId="docs/talking_head_travel" >

</cld-video>

Angular:

<cl-video public-id="docs/talking_head_travel" >

</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.BuildVideoTag("docs/talking_head_travel")

Android:

MediaManager.get().url().resourceType("video").generate("docs/talking_head_travel.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").generate("docs/talking_head_travel.mp4")

Now we just overlay this talking_head video on top of the video he's supposed to be talking about, set the transparency color to match the paint color, and we can send our narrator anywhere we want. How about a quick trip to Africa?

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/so_8/l_video:docs:talking_head_travel,e_make_transparent:18,co_rgb:5ec2c4,w_1.0,fl_relative/du_10/elephants.mp4

Ruby:

cl_video_tag("elephants", :transformation=>[
  {:start_offset=>"8"},
  {:overlay=>"video:docs:talking_head_travel", :effect=>"make_transparent:18", :color=>"#5ec2c4", :width=>1.0, :flags=>"relative"},
  {:duration=>"10"}
  ])

PHP v1:

cl_video_tag("elephants", array("transformation"=>array(
  array("start_offset"=>"8"),
  array("overlay"=>"video:docs:talking_head_travel", "effect"=>"make_transparent:18", "color"=>"#5ec2c4", "width"=>"1.0", "flags"=>"relative"),
  array("duration"=>"10")
  )))

PHP v2:

(new VideoTag('elephants.mp4'))
  ->videoEdit(VideoEdit::trim()->startOffset(8))
  ->overlay(
      Overlay::source(Source::video('docs/talking_head_travel')
        ->transformation((new VideoTransformation())
          ->resize(Resize::scale()->width(1.0)->relative())
          ->effect(Effect::makeTransparent()->tolerance(18)->colorToReplace(Color::rgb('5ec2c4'))))))
    ->videoEdit(VideoEdit::trim()->duration(10));

Python:

CloudinaryVideo("elephants").video(transformation=[
  {'start_offset': "8"},
  {'overlay': "video:docs:talking_head_travel", 'effect': "make_transparent:18", 'color': "#5ec2c4", 'width': "1.0", 'flags': "relative"},
  {'duration': "10"}
  ])

Node.js:

cloudinary.video("elephants", {transformation: [
  {start_offset: "8"},
  {overlay: "video:docs:talking_head_travel", effect: "make_transparent:18", color: "#5ec2c4", width: "1.0", flags: "relative"},
  {duration: "10"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .startOffset("8").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:18").color("#5ec2c4").width(1.0).flags("relative").chain()
  .duration("10")).videoTag("elephants");

JS:

cloudinary.videoTag('elephants', {transformation: [
  {startOffset: "8"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:18", color: "#5ec2c4", width: "1.0", flags: "relative"},
  {duration: "10"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("elephants", {transformation: [
  {start_offset: "8"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:18", color: "#5ec2c4", width: "1.0", flags: "relative"},
  {duration: "10"}
  ]})

React:

<Video publicId="elephants" >
  <Transformation startOffset="8" />
  <Transformation overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="1.0" flags="relative" />
  <Transformation duration="10" />
</Video>

Vue.js:

<cld-video publicId="elephants" >
  <cld-transformation startOffset="8" />
  <cld-transformation :overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="1.0" flags="relative" />
  <cld-transformation duration="10" />
</cld-video>

Angular:

<cl-video public-id="elephants" >
  <cl-transformation start-offset="8">
  </cl-transformation>
  <cl-transformation overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="1.0" flags="relative">
  </cl-transformation>
  <cl-transformation duration="10">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .StartOffset("8").Chain()
  .Overlay(new Layer().PublicId("video:docs:talking_head_travel")).Effect("make_transparent:18").Color("#5ec2c4").Width(1.0).Flags("relative").Chain()
  .Duration("10")).BuildVideoTag("elephants")

Android:

MediaManager.get().url().transformation(new Transformation()
  .startOffset("8").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:18").color("#5ec2c4").width(1.0).flags("relative").chain()
  .duration("10")).resourceType("video").generate("elephants.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setStartOffset("8").chain()
  .setOverlay("video:docs:talking_head_travel").setEffect("make_transparent:18").setColor("#5ec2c4").setWidth(1.0).setFlags("relative").chain()
  .setDuration("10")).generate("elephants.mp4")

We can also choose what size we'd like our overlay speaker to be, either relative to the base (background) video or as a fixed pixel size, and where we'd like to place him. Here, we didn't want to make our speaker look too big relative to the entire galaxy, so we made him a bit smaller (40% of the base video width), and moved the transparent video overlay to the bottom right of the base video:

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/so_8/l_video:docs:talking_head_travel,e_make_transparent:18,co_rgb:5ec2c4,w_0.4,fl_relative,g_south_east/du_10/galaxy_spin.mp4

Ruby:

cl_video_tag("galaxy_spin", :transformation=>[
  {:start_offset=>"8"},
  {:overlay=>"video:docs:talking_head_travel", :effect=>"make_transparent:18", :color=>"#5ec2c4", :width=>0.4, :flags=>"relative", :gravity=>"south_east"},
  {:duration=>"10"}
  ])

PHP v1:

cl_video_tag("galaxy_spin", array("transformation"=>array(
  array("start_offset"=>"8"),
  array("overlay"=>"video:docs:talking_head_travel", "effect"=>"make_transparent:18", "color"=>"#5ec2c4", "width"=>"0.4", "flags"=>"relative", "gravity"=>"south_east"),
  array("duration"=>"10")
  )))

PHP v2:

(new VideoTag('galaxy_spin.mp4'))
  ->videoEdit(VideoEdit::trim()->startOffset(8))
  ->overlay(
      Overlay::source(Source::video('docs/talking_head_travel')
        ->transformation((new VideoTransformation())
          ->resize(Resize::scale()->width(0.4)->relative())
          ->effect(Effect::makeTransparent()->tolerance(18)->colorToReplace(Color::rgb('5ec2c4')))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::southEast()))))
    ->videoEdit(VideoEdit::trim()->duration(10));

Python:

CloudinaryVideo("galaxy_spin").video(transformation=[
  {'start_offset': "8"},
  {'overlay': "video:docs:talking_head_travel", 'effect': "make_transparent:18", 'color': "#5ec2c4", 'width': "0.4", 'flags': "relative", 'gravity': "south_east"},
  {'duration': "10"}
  ])

Node.js:

cloudinary.video("galaxy_spin", {transformation: [
  {start_offset: "8"},
  {overlay: "video:docs:talking_head_travel", effect: "make_transparent:18", color: "#5ec2c4", width: "0.4", flags: "relative", gravity: "south_east"},
  {duration: "10"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .startOffset("8").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:18").color("#5ec2c4").width(0.4).flags("relative").gravity("south_east").chain()
  .duration("10")).videoTag("galaxy_spin");

JS:

cloudinary.videoTag('galaxy_spin', {transformation: [
  {startOffset: "8"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:18", color: "#5ec2c4", width: "0.4", flags: "relative", gravity: "south_east"},
  {duration: "10"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("galaxy_spin", {transformation: [
  {start_offset: "8"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:18", color: "#5ec2c4", width: "0.4", flags: "relative", gravity: "south_east"},
  {duration: "10"}
  ]})

React:

<Video publicId="galaxy_spin" >
  <Transformation startOffset="8" />
  <Transformation overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="0.4" flags="relative" gravity="south_east" />
  <Transformation duration="10" />
</Video>

Vue.js:

<cld-video publicId="galaxy_spin" >
  <cld-transformation startOffset="8" />
  <cld-transformation :overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="0.4" flags="relative" gravity="south_east" />
  <cld-transformation duration="10" />
</cld-video>

Angular:

<cl-video public-id="galaxy_spin" >
  <cl-transformation start-offset="8">
  </cl-transformation>
  <cl-transformation overlay="video:docs:talking_head_travel" effect="make_transparent:18" color="#5ec2c4" width="0.4" flags="relative" gravity="south_east">
  </cl-transformation>
  <cl-transformation duration="10">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .StartOffset("8").Chain()
  .Overlay(new Layer().PublicId("video:docs:talking_head_travel")).Effect("make_transparent:18").Color("#5ec2c4").Width(0.4).Flags("relative").Gravity("south_east").Chain()
  .Duration("10")).BuildVideoTag("galaxy_spin")

Android:

MediaManager.get().url().transformation(new Transformation()
  .startOffset("8").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:18").color("#5ec2c4").width(0.4).flags("relative").gravity("south_east").chain()
  .duration("10")).resourceType("video").generate("galaxy_spin.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setStartOffset("8").chain()
  .setOverlay("video:docs:talking_head_travel").setEffect("make_transparent:18").setColor("#5ec2c4").setWidth(0.4).setFlags("relative").setGravity("south_east").chain()
  .setDuration("10")).generate("galaxy_spin.mp4")

We can even take advantage of other Cloudinary video transformations. For example, in this transformation URL, we added the fade out effect to the last two seconds of the overlay video, as the narrator presumably travels to his next surprise location...

Note the use of the layer_apply flag so that two different effects (make_transparent and fade) can be applied in separate components to the same 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/e_accelerate:-50/l_video:docs:talking_head_travel,e_make_transparent:15,co_rgb:5ec2c4,w_0.7,fl_relative/e_fade:-2000/g_south,fl_layer_apply/du_10/venice_waters.mp4

Ruby:

cl_video_tag("venice_waters", :transformation=>[
  {:effect=>"accelerate:-50"},
  {:overlay=>"video:docs:talking_head_travel", :effect=>"make_transparent:15", :color=>"#5ec2c4", :width=>0.7, :flags=>"relative"},
  {:effect=>"fade:-2000"},
  {:gravity=>"south", :flags=>"layer_apply"},
  {:duration=>"10"}
  ])

PHP v1:

cl_video_tag("venice_waters", array("transformation"=>array(
  array("effect"=>"accelerate:-50"),
  array("overlay"=>"video:docs:talking_head_travel", "effect"=>"make_transparent:15", "color"=>"#5ec2c4", "width"=>"0.7", "flags"=>"relative"),
  array("effect"=>"fade:-2000"),
  array("gravity"=>"south", "flags"=>"layer_apply"),
  array("duration"=>"10")
  )))

PHP v2:

(new VideoTag('venice_waters.mp4'))
  ->effect(Effect::accelerate()->rate(-50))
  ->overlay(
      Overlay::source(Source::video('docs/talking_head_travel')
        ->transformation((new VideoTransformation())
          ->resize(Resize::scale()->width(0.7)->relative())
          ->effect(Effect::makeTransparent()->tolerance(15)->colorToReplace(Color::rgb('5ec2c4')))
          ->effect(Effect::fadeOut()->duration(2000))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::south()))))
    ->videoEdit(VideoEdit::trim()->duration(10));

Python:

CloudinaryVideo("venice_waters").video(transformation=[
  {'effect': "accelerate:-50"},
  {'overlay': "video:docs:talking_head_travel", 'effect': "make_transparent:15", 'color': "#5ec2c4", 'width': "0.7", 'flags': "relative"},
  {'effect': "fade:-2000"},
  {'gravity': "south", 'flags': "layer_apply"},
  {'duration': "10"}
  ])

Node.js:

cloudinary.video("venice_waters", {transformation: [
  {effect: "accelerate:-50"},
  {overlay: "video:docs:talking_head_travel", effect: "make_transparent:15", color: "#5ec2c4", width: "0.7", flags: "relative"},
  {effect: "fade:-2000"},
  {gravity: "south", flags: "layer_apply"},
  {duration: "10"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .effect("accelerate:-50").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:15").color("#5ec2c4").width(0.7).flags("relative").chain()
  .effect("fade:-2000").chain()
  .gravity("south").flags("layer_apply").chain()
  .duration("10")).videoTag("venice_waters");

JS:

cloudinary.videoTag('venice_waters', {transformation: [
  {effect: "accelerate:-50"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:15", color: "#5ec2c4", width: "0.7", flags: "relative"},
  {effect: "fade:-2000"},
  {gravity: "south", flags: "layer_apply"},
  {duration: "10"}
  ]}).toHtml();

jQuery:

$.cloudinary.video("venice_waters", {transformation: [
  {effect: "accelerate:-50"},
  {overlay: new cloudinary.Layer().publicId("video:docs:talking_head_travel"), effect: "make_transparent:15", color: "#5ec2c4", width: "0.7", flags: "relative"},
  {effect: "fade:-2000"},
  {gravity: "south", flags: "layer_apply"},
  {duration: "10"}
  ]})

React:

<Video publicId="venice_waters" >
  <Transformation effect="accelerate:-50" />
  <Transformation overlay="video:docs:talking_head_travel" effect="make_transparent:15" color="#5ec2c4" width="0.7" flags="relative" />
  <Transformation effect="fade:-2000" />
  <Transformation gravity="south" flags="layer_apply" />
  <Transformation duration="10" />
</Video>

Vue.js:

<cld-video publicId="venice_waters" >
  <cld-transformation effect="accelerate:-50" />
  <cld-transformation :overlay="video:docs:talking_head_travel" effect="make_transparent:15" color="#5ec2c4" width="0.7" flags="relative" />
  <cld-transformation effect="fade:-2000" />
  <cld-transformation gravity="south" flags="layer_apply" />
  <cld-transformation duration="10" />
</cld-video>

Angular:

<cl-video public-id="venice_waters" >
  <cl-transformation effect="accelerate:-50">
  </cl-transformation>
  <cl-transformation overlay="video:docs:talking_head_travel" effect="make_transparent:15" color="#5ec2c4" width="0.7" flags="relative">
  </cl-transformation>
  <cl-transformation effect="fade:-2000">
  </cl-transformation>
  <cl-transformation gravity="south" flags="layer_apply">
  </cl-transformation>
  <cl-transformation duration="10">
  </cl-transformation>
</cl-video>

.NET:

cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Effect("accelerate:-50").Chain()
  .Overlay(new Layer().PublicId("video:docs:talking_head_travel")).Effect("make_transparent:15").Color("#5ec2c4").Width(0.7).Flags("relative").Chain()
  .Effect("fade:-2000").Chain()
  .Gravity("south").Flags("layer_apply").Chain()
  .Duration("10")).BuildVideoTag("venice_waters")

Android:

MediaManager.get().url().transformation(new Transformation()
  .effect("accelerate:-50").chain()
  .overlay(new Layer().publicId("video:docs:talking_head_travel")).effect("make_transparent:15").color("#5ec2c4").width(0.7).flags("relative").chain()
  .effect("fade:-2000").chain()
  .gravity("south").flags("layer_apply").chain()
  .duration("10")).resourceType("video").generate("venice_waters.mp4");

iOS:

cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setEffect("accelerate:-50").chain()
  .setOverlay("video:docs:talking_head_travel").setEffect("make_transparent:15").setColor("#5ec2c4").setWidth(0.7).setFlags("relative").chain()
  .setEffect("fade:-2000").chain()
  .setGravity("south").setFlags("layer_apply").chain()
  .setDuration("10")).generate("venice_waters.mp4")

Need Video Transparency? We've Got it Covered!

Whether you want to post a Killer Queen video outfit in seconds, or you need to remove a solid background from a talking head video or live product demo, Cloudinary's green screen transparency effect makes it quick and easy. For more details on this and other effects you can apply to your Cloudinary videos, see the video effects documentation in the Video Transformations Guide.

Once you've got your cool video transparency effect ready to go, you can easily embed it in your web or mobile site using the Cloudinary video player, which offers responsive video display for any device, built-in adaptive bitmap streaming, customizable color themes, floating player support, and more.

This dynamic video transparency feature is too much fun not to try it yourself. If you haven't used Cloudinary before, register for a free account, upload some videos, and share your creations in the comments. We can't wait to see what you come up with!

Recent Blog Posts

Supercharge Shopify Conversions and Revenue with Cloudinary

By Aug 19, 2022

Our $2B Valuation

By Feb 17, 2022

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal Feb 02, 2022

Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Automatically Translating Videos for International Outreach

By Jan 26, 2022

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Minted Delivers High-quality Art at Scale with Cloudinary

By Jan 25, 2022

Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By Jan 24, 2022

Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.