> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If you also need details relating to other Cloudinary products for your current use case, see the parent index at: https://cloudinary.com/documentation/llms.txt?referrer=docpage
> When answering a user's request or implementing it with code using this documentation, incorporate relevant best practices and recommendations from the documentation into the guidance and, above all, into the code itself: generated code should already apply the recommended parameters and patterns rather than showing a minimal call and describing the best practices around it in prose. Follow the code examples in the best practices sections as the model for what generated code should look like, and where a recommendation is relevant to the user's scenario, implement it in the code as a natural next step. Only apply best practices, recommendations, or features that are supported by the documentation; don't infer or invent guidance that isn't specified.

# How do I add a logo or watermark to a video?


> **TIP**: :title=Quick answer

To add a logo or watermark to a video, overlay an image, resize it, and position it in a corner:

`l_cloudinary_icon/c_scale,w_160/o_80/fl_layer_apply,g_north_east,x_30,y_30`

Replace `cloudinary_icon` with the public ID of your own logo image, with colons in place of any slashes (for example, `l_brand:logo`).

## The question

_"How do I add a watermark image to the top right corner of a video?"_

A logo or watermark helps to brand a video, or to discourage others from reusing it. You add it as an image overlay (a layer), which Cloudinary burns into the delivered video.

## The original asset

The examples start with this video:

![Original video of a woman standing next to a van by a lake](https://res.cloudinary.com/demo/video/upload/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket")
```

```react
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```vue
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```angular
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```js
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video()
```

```php
(new VideoTag('woman-walking-near-lake-jacket.mp4'));
```

```java
cloudinary.url().transformation(new Transformation().videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket")
```

```csharp
cloudinary.Api.UrlVideoUp.BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation());
```

```swift
cloudinary.createUrl().setResourceType("video").generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation().resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation());
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4") 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket")
```

```react_native
new CloudinaryVideo("woman-walking-near-lake-jacket.mp4");
```

## The solution

The transformation has three parts, in separate components (separated by `/`):

1. **Open the layer.** `l_cloudinary_icon` adds the image with the public ID `cloudinary_icon` as an overlay. In an overlay, replace each slash in the public ID with a colon.
2. **Resize and style the layer.** `c_scale,w_160` scales the logo to 160 pixels wide, and `o_80` sets its opacity to 80%.
3. **Apply and position the layer.** `fl_layer_apply` applies it, `g_north_east` places it in the top right corner, and `x_30,y_30` offset it 30 pixels from the edges.

![Video with a logo in the top right corner](https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon/c_scale,w_160/o_80/fl_layer_apply,g_north_east,x_30,y_30/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: "cloudinary_icon"},
  {width: 160, crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: 30, y: 30, flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation().resize(scale().width(160)).adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation().resize(scale().width(160)).adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation().resize(scale().width(160)).adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation().resize(scale().width(160)).adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(transformation=[
  {'overlay': "cloudinary_icon"},
  {'width': 160, 'crop': "scale"},
  {'opacity': 80},
  {'gravity': "north_east", 'x': 30, 'y': 30, 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->overlay(Overlay::source(
	Source::image("cloudinary_icon")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(160))
	->adjust(Adjust::opacity(80)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
->offsetX(30)
->offsetY(30))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon")).chain()
  .width(160).crop("scale").chain()
  .opacity(80).chain()
  .gravity("north_east").x(30).y(30).flags("layer_apply")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", transformation: [
  {overlay: "cloudinary_icon"},
  {width: 160, crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: 30, y: 30, flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Chain()
  .Width(160).Crop("scale").Chain()
  .Opacity(80).Chain()
  .Gravity("north_east").X(30).Y(30).Flags("layer_apply")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("cloudinary_icon")
	.transformation(new Transformation()
	.resize(Resize.scale().width(160))
	.adjust(Adjust.opacity(80)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.northEast()))
.offsetX(30)
.offsetY(30))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon").chain()
  .setWidth(160).setCrop("scale").chain()
  .setOpacity(80).chain()
  .setGravity("north_east").setX(30).setY(30).setFlags("layer_apply")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon")).chain()
  .width(160).crop("scale").chain()
  .opacity(80).chain()
  .gravity("north_east").x(30).y(30).flags("layer_apply")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("cloudinary_icon")
	.transformation(new Transformation()
	.resize(Resize.scale().width(160))
	.adjust(Adjust.opacity(80)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.northEast()))
.offsetX(30)
.offsetY(30))
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 overlay(Overlay.source(
	Source.image("cloudinary_icon") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(160) })
	 adjust(Adjust.opacity(80)) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
 offsetX(30)
 offsetY(30) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {width: 160, crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: 30, y: 30, flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation().resize(scale().width(160)).adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(30)
      .offsetY(30)
  )
);
```

> **NOTE**: For a logo with a transparent background, use an image format that supports transparency, such as PNG.

## Make the watermark scale with the video

A logo with a fixed pixel size looks right on a 1920x1080 video, but much larger on a small video. To size and position the logo as a fraction of the video, add `fl_relative` and use values between 0 and 1. In this example, the logo is 12% of the video width, and sits 2% of the width from the right and 3% of the height from the top:

![Video with a logo sized relative to the video](https://res.cloudinary.com/demo/video/upload/l_cloudinary_icon/c_scale,fl_relative,w_0.12/o_80/fl_layer_apply,g_north_east,x_0.02,y_0.03/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: "cloudinary_icon"},
  {width: "0.12", flags: "relative", crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: "0.02", y: "0.03", flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation()
        .resize(scale().width(0.12).relative())
        .adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(0.02)
      .offsetY(0.03)
  )
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation()
        .resize(scale().width(0.12).relative())
        .adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(0.02)
      .offsetY(0.03)
  )
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation()
        .resize(scale().width(0.12).relative())
        .adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(0.02)
      .offsetY(0.03)
  )
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation()
        .resize(scale().width(0.12).relative())
        .adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(0.02)
      .offsetY(0.03)
  )
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(transformation=[
  {'overlay': "cloudinary_icon"},
  {'width': "0.12", 'flags': "relative", 'crop': "scale"},
  {'opacity': 80},
  {'gravity': "north_east", 'x': "0.02", 'y': "0.03", 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->overlay(Overlay::source(
	Source::image("cloudinary_icon")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(0.12)
	->relative()
	)
	->adjust(Adjust::opacity(80)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::northEast()))
->offsetX(0.02)
->offsetY(0.03))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon")).chain()
  .width(0.12).flags("relative").crop("scale").chain()
  .opacity(80).chain()
  .gravity("north_east").x(0.02).y(0.03).flags("layer_apply")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", transformation: [
  {overlay: "cloudinary_icon"},
  {width: 0.12, flags: "relative", crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: 0.02, y: 0.03, flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("cloudinary_icon")).Chain()
  .Width(0.12).Flags("relative").Crop("scale").Chain()
  .Opacity(80).Chain()
  .Gravity("north_east").X(0.02).Y(0.03).Flags("layer_apply")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("cloudinary_icon")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.12)
	.relative()
	)
	.adjust(Adjust.opacity(80)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.northEast()))
.offsetX(0.02)
.offsetY(0.03))
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("cloudinary_icon").chain()
  .setWidth(0.12).setFlags("relative").setCrop("scale").chain()
  .setOpacity(80).chain()
  .setGravity("north_east").setX(0.02).setY(0.03).setFlags("layer_apply")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("cloudinary_icon")).chain()
  .width(0.12).flags("relative").crop("scale").chain()
  .opacity(80).chain()
  .gravity("north_east").x(0.02).y(0.03).flags("layer_apply")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("cloudinary_icon")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.12)
	.relative()
	)
	.adjust(Adjust.opacity(80)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.northEast()))
.offsetX(0.02)
.offsetY(0.03))
	));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 overlay(Overlay.source(
	Source.image("cloudinary_icon") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(0.12F)
	 relative()
	 })
	 adjust(Adjust.opacity(80)) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.northEast()))
 offsetX(0.02F)
 offsetY(0.03F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon")},
  {width: "0.12", flags: "relative", crop: "scale"},
  {opacity: 80},
  {gravity: "north_east", x: "0.02", y: "0.03", flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    image("cloudinary_icon").transformation(
      new Transformation()
        .resize(scale().width(0.12).relative())
        .adjust(opacity(80))
    )
  ).position(
    new Position()
      .gravity(compass("north_east"))
      .offsetX(0.02)
      .offsetY(0.03)
  )
);
```

## Place the watermark in a different corner

Change the gravity in the `fl_layer_apply` component. For example, use `g_south_west` for the bottom left corner, or `g_south_east` for the bottom right corner. The offsets always measure in from the edges that the gravity names.

## Add a dark overlay behind text

White text can be hard to read over a bright video. This example adds white text to the video, centered. Over the bright sky and water, the words are difficult to read:

`co_white,l_text:Arial_120_bold:Summer%20Adventures/fl_layer_apply,g_center`

![Video with white text that's hard to read against the bright background](https://res.cloudinary.com/demo/video/upload/co_white,l_text:Arial_120_bold:Summer%20Adventures/fl_layer_apply,g_center/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {color: "white", overlay: {font_family: "Arial", font_size: 120, font_weight: "bold", text: "Summer%20Adventures"}},
  {gravity: "center", flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    text(
      "Summer Adventures",
      new TextStyle("Arial", 120).fontWeight("bold")
    ).textColor("white")
  ).position(new Position().gravity(compass("center")))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    text(
      "Summer Adventures",
      new TextStyle("Arial", 120).fontWeight("bold")
    ).textColor("white")
  ).position(new Position().gravity(compass("center")))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    text(
      "Summer Adventures",
      new TextStyle("Arial", 120).fontWeight("bold")
    ).textColor("white")
  ).position(new Position().gravity(compass("center")))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    text(
      "Summer Adventures",
      new TextStyle("Arial", 120).fontWeight("bold")
    ).textColor("white")
  ).position(new Position().gravity(compass("center")))
);
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(transformation=[
  {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 120, 'font_weight': "bold", 'text': "Summer%20Adventures"}},
  {'gravity': "center", 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\FontWeight;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->overlay(Overlay::source(
	Source::text("Summer Adventures",(new TextStyle("Arial",120))
	->fontWeight(
	FontWeight::bold())
	)
	->textColor(Color::WHITE)
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::center()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")).chain()
  .gravity("center").flags("layer_apply")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", transformation: [
  {color: "white", overlay: {font_family: "Arial", font_size: 120, font_weight: "bold", text: "Summer%20Adventures"}},
  {gravity: "center", flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(120).FontWeight("bold").Text("Summer%20Adventures")).Chain()
  .Gravity("center").Flags("layer_apply")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.addTransformation("co_white,l_text:Arial_120_bold:Summer Adventures/fl_layer_apply,g_center"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setColor("white").setOverlay("text:Arial_120_bold:Summer%20Adventures").chain()
  .setGravity("center").setFlags("layer_apply")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")).chain()
  .gravity("center").flags("layer_apply")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.addTransformation("co_white,l_text:Arial_120_bold:Summer Adventures/fl_layer_apply,g_center"));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 overlay(Overlay.source(
	Source.text("Summer Adventures",TextStyle("Arial",120) {
	 fontWeight(
	FontWeight.bold())
	 }) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.center()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")},
  {gravity: "center", flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4").overlay(
  source(
    text(
      "Summer Adventures",
      new TextStyle("Arial", 120).fontWeight("bold")
    ).textColor("white")
  ).position(new Position().gravity(compass("center")))
);
```

To make the text stand out, first darken the whole video. Stretch a 1x1 pixel image over the full video (`c_scale,fl_relative,h_1.0,w_1.0`), and lower its opacity (`o_40` is 40%). Then add the text layer on top:

`l_docs:one_black_pixel/c_scale,fl_relative,h_1.0,w_1.0/o_40/fl_layer_apply/co_white,l_text:Arial_120_bold:Summer%20Adventures/fl_layer_apply,g_center`

Replace `docs:one_black_pixel` with the public ID of a 1x1 pixel image in your own product environment. You can download the 1x1 pixel image and upload it to your product environment.

![Video with a dark overlay and clear white text](https://res.cloudinary.com/demo/video/upload/l_docs:one_black_pixel/c_scale,fl_relative,h_1.0,w_1.0/o_40/fl_layer_apply/co_white,l_text:Arial_120_bold:Summer%20Adventures/fl_layer_apply,g_center/woman-walking-near-lake-jacket.mp4 "thumb: c_scale,w_480")

```nodejs
cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: "1.0", width: "1.0", flags: "relative", crop: "scale"},
  {opacity: 40},
  {flags: "layer_apply"},
  {color: "white", overlay: {font_family: "Arial", font_size: 120, font_weight: "bold", text: "Summer%20Adventures"}},
  {gravity: "center", flags: "layer_apply"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image, text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4")
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width("1.0").height("1.0").relative())
          .adjust(opacity(40))
      )
    )
  )
  .overlay(
    source(
      text(
        "Summer Adventures",
        new TextStyle("Arial", 120).fontWeight("bold")
      ).textColor("white")
    ).position(new Position().gravity(compass("center")))
  );
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image, text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4")
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width("1.0").height("1.0").relative())
          .adjust(opacity(40))
      )
    )
  )
  .overlay(
    source(
      text(
        "Summer Adventures",
        new TextStyle("Arial", 120).fontWeight("bold")
      ).textColor("white")
    ).position(new Position().gravity(compass("center")))
  );
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image, text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4")
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width("1.0").height("1.0").relative())
          .adjust(opacity(40))
      )
    )
  )
  .overlay(
    source(
      text(
        "Summer Adventures",
        new TextStyle("Arial", 120).fontWeight("bold")
      ).textColor("white")
    ).position(new Position().gravity(compass("center")))
  );
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image, text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4")
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width("1.0").height("1.0").relative())
          .adjust(opacity(40))
      )
    )
  )
  .overlay(
    source(
      text(
        "Summer Adventures",
        new TextStyle("Arial", 120).fontWeight("bold")
      ).textColor("white")
    ).position(new Position().gravity(compass("center")))
  );
```

```python
CloudinaryVideo("woman-walking-near-lake-jacket").video(transformation=[
  {'overlay': "docs:one_black_pixel"},
  {'height': "1.0", 'width': "1.0", 'flags': "relative", 'crop': "scale"},
  {'opacity': 40},
  {'flags': "layer_apply"},
  {'color': "white", 'overlay': {'font_family': "Arial", 'font_size': 120, 'font_weight': "bold", 'text': "Summer%20Adventures"}},
  {'gravity': "center", 'flags': "layer_apply"}
  ])
```

```php
use Cloudinary\Transformation\Overlay;
use Cloudinary\Transformation\Resize;
use Cloudinary\Transformation\Adjust;
use Cloudinary\Transformation\Source;
use Cloudinary\Transformation\Position;
use Cloudinary\Transformation\TextStyle;
use Cloudinary\Transformation\FontWeight;
use Cloudinary\Transformation\Gravity;
use Cloudinary\Transformation\Compass;

(new VideoTag('woman-walking-near-lake-jacket.mp4'))
	->overlay(Overlay::source(
	Source::image("docs/one_black_pixel")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(1.0)
->height(1.0)
	->relative()
	)
	->adjust(Adjust::opacity(40)))
	))
	->overlay(Overlay::source(
	Source::text("Summer Adventures",(new TextStyle("Arial",120))
	->fontWeight(
	FontWeight::bold())
	)
	->textColor(Color::WHITE)
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::center()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(1.0).width(1.0).flags("relative").crop("scale").chain()
  .opacity(40).chain()
  .flags("layer_apply").chain()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")).chain()
  .gravity("center").flags("layer_apply")).videoTag("woman-walking-near-lake-jacket");
```

```ruby
cl_video_tag("woman-walking-near-lake-jacket", transformation: [
  {overlay: "docs:one_black_pixel"},
  {height: 1.0, width: 1.0, flags: "relative", crop: "scale"},
  {opacity: 40},
  {flags: "layer_apply"},
  {color: "white", overlay: {font_family: "Arial", font_size: 120, font_weight: "bold", text: "Summer%20Adventures"}},
  {gravity: "center", flags: "layer_apply"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("docs:one_black_pixel")).Chain()
  .Height(1.0).Width(1.0).Flags("relative").Crop("scale").Chain()
  .Opacity(40).Chain()
  .Flags("layer_apply").Chain()
  .Color("white").Overlay(new TextLayer().FontFamily("Arial").FontSize(120).FontWeight("bold").Text("Summer%20Adventures")).Chain()
  .Gravity("center").Flags("layer_apply")).BuildVideoTag("woman-walking-near-lake-jacket")
```

```dart
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.addTransformation("l_docs:one_black_pixel/c_scale,fl_relative,h_1.0,w_1.0/o_40/fl_layer_apply/co_white,l_text:Arial_120_bold:Summer Adventures/fl_layer_apply,g_center"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("docs:one_black_pixel").chain()
  .setHeight(1.0).setWidth(1.0).setFlags("relative").setCrop("scale").chain()
  .setOpacity(40).chain()
  .setFlags("layer_apply").chain()
  .setColor("white").setOverlay("text:Arial_120_bold:Summer%20Adventures").chain()
  .setGravity("center").setFlags("layer_apply")).generate("woman-walking-near-lake-jacket.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("docs:one_black_pixel")).chain()
  .height(1.0).width(1.0).flags("relative").crop("scale").chain()
  .opacity(40).chain()
  .flags("layer_apply").chain()
  .color("white").overlay(new TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")).chain()
  .gravity("center").flags("layer_apply")).resourceType("video").generate("woman-walking-near-lake-jacket.mp4");
```

```flutter
cloudinary.video('woman-walking-near-lake-jacket.mp4').transformation(Transformation()
	.addTransformation("l_docs:one_black_pixel/c_scale,fl_relative,h_1.0,w_1.0/o_40/fl_layer_apply/co_white,l_text:Arial_120_bold:Summer Adventures/fl_layer_apply,g_center"));
```

```kotlin
cloudinary.video {
	publicId("woman-walking-near-lake-jacket.mp4")
	 overlay(Overlay.source(
	Source.image("docs/one_black_pixel") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(1.0F)
 height(1.0F)
	 relative()
	 })
	 adjust(Adjust.opacity(40)) })
	 }))
	 overlay(Overlay.source(
	Source.text("Summer Adventures",TextStyle("Arial",120) {
	 fontWeight(
	FontWeight.bold())
	 }) {
	 textColor(Color.WHITE)
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.center()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("woman-walking-near-lake-jacket", {transformation: [
  {overlay: new cloudinary.Layer().publicId("docs:one_black_pixel")},
  {height: "1.0", width: "1.0", flags: "relative", crop: "scale"},
  {opacity: 40},
  {flags: "layer_apply"},
  {color: "white", overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(120).fontWeight("bold").text("Summer%20Adventures")},
  {gravity: "center", flags: "layer_apply"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { opacity } from "@cloudinary/url-gen/actions/adjust";
import { image, text } from "@cloudinary/url-gen/qualifiers/source";
import { Position } from "@cloudinary/url-gen/qualifiers/position";
import { TextStyle } from "@cloudinary/url-gen/qualifiers/textStyle";
import { compass } from "@cloudinary/url-gen/qualifiers/gravity";

new CloudinaryVideo("woman-walking-near-lake-jacket.mp4")
  .overlay(
    source(
      image("docs/one_black_pixel").transformation(
        new Transformation()
          .resize(scale().width("1.0").height("1.0").relative())
          .adjust(opacity(40))
      )
    )
  )
  .overlay(
    source(
      text(
        "Summer Adventures",
        new TextStyle("Arial", 120).fontWeight("bold")
      ).textColor("white")
    ).position(new Position().gravity(compass("center")))
  );
```

Lower the opacity for a lighter darkening, or raise it for stronger contrast. Layers apply in order, so the dark overlay must come before the text.

## Related topics

* [Video layers](video_layers)
* [Watermarking videos](video_layer_watermarking#watermarking)
* [Layer placement](video_layer_placement)