> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Layer placement


This page covers how to position and arrange layers on videos. For the layer syntax itself, see [Layer syntax](video_layers). For transformations and relative sizing, see [Transforming layers](video_layer_transformations).


## The `fl_layer_apply` flag

The `fl_layer_apply` component not only acts as the closing bracket for the layer, but is also used to include any options that will control how the layer is placed on the base video, and any details regarding the relationship between the overlay element and the base video.

> **NOTE**: Some Cloudinary SDKs use layer apply flags as described, and any placement qualifiers must also be the last component of the layer transformation. However some of the Cloudinary SDKs don't use a specific layer apply flag. Instead, when the SDK generates the transformation URL from your code, it automatically adds the fl_layer_apply flag together with placement qualifiers based on the transformation hierarchy in your SDK code.
## Positioning layers with gravity

To determine the position of the new layer, you can add the [gravity](transformation_reference#g_gravity) parameter to define the location to place the layer within the base video ('center' by default). The `gravity` parameter is added in the same component as the `layer_apply` flag. 

For example, to add an image overlay to the base video with gravity set to west (`l_lotus_layer/fl_layer_apply,g_west`):

![Image with precisely placed overlay](https://res.cloudinary.com/demo/image/upload/l_lotus_layer/w_0.5/fl_layer_apply,g_west/docs/camera.jpg "thumb: w_500")

```nodejs
cloudinary.image("docs/camera.jpg", {transformation: [
  {overlay: "lotus_layer"},
  {width: "0.5", crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
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 CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
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 CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
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 CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
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 CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```

```python
CloudinaryImage("docs/camera.jpg").image(transformation=[
  {'overlay': "lotus_layer"},
  {'width': "0.5", 'crop': "scale"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])
```

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

(new ImageTag('docs/camera.jpg'))
	->overlay(Overlay::source(
	Source::image("lotus_layer")
	->transformation((new Transformation())
	->resize(Resize::scale()->width(0.5)))
	)
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::west()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .width(0.5).crop("scale").chain()
  .flags("layer_apply").gravity("west")).imageTag("docs/camera.jpg");
```

```ruby
cl_image_tag("docs/camera.jpg", transformation: [
  {overlay: "lotus_layer"},
  {width: 0.5, crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("lotus_layer")).Chain()
  .Width(0.5).Crop("scale").Chain()
  .Flags("layer_apply").Gravity("west")).BuildImageTag("docs/camera.jpg")
```

```dart
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("lotus_layer").chain()
  .setWidth(0.5).setCrop("scale").chain()
  .setFlags("layer_apply").setGravity("west")).generate("docs/camera.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .width(0.5).crop("scale").chain()
  .flags("layer_apply").gravity("west")).generate("docs/camera.jpg");
```

```flutter
cloudinary.image('docs/camera.jpg').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer")
	.transformation(new Transformation()
	.resize(Resize.scale().width(0.5)))
	)
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```kotlin
cloudinary.image {
	publicId("docs/camera.jpg")
	 overlay(Overlay.source(
	Source.image("lotus_layer") {
	 transformation(Transformation {
	 resize(Resize.scale() { width(0.5F) }) })
	 }) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.west()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/camera.jpg", {transformation: [
  {overlay: new cloudinary.Layer().publicId("lotus_layer")},
  {width: "0.5", crop: "scale"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
import { scale } from "@cloudinary/url-gen/actions/resize";
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 CloudinaryImage("docs/camera.jpg").overlay(
  source(
    image("lotus_layer").transformation(
      new Transformation().resize(scale().width(0.5))
    )
  ).position(new Position().gravity(compass("west")))
);
```
    
![Video with precisely placed overlay](https://res.cloudinary.com/demo/video/upload/l_lotus_layer/fl_layer_apply,g_west/docs/sunglasses.mp4 "thumb: w_500")

```nodejs
cloudinary.video("docs/sunglasses", {transformation: [
  {overlay: "lotus_layer"},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react
import { source } from "@cloudinary/url-gen/actions/overlay";
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("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```vue
import { source } from "@cloudinary/url-gen/actions/overlay";
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("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```angular
import { source } from "@cloudinary/url-gen/actions/overlay";
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("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```js
import { source } from "@cloudinary/url-gen/actions/overlay";
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("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

```python
CloudinaryVideo("docs/sunglasses").video(transformation=[
  {'overlay': "lotus_layer"},
  {'flags': "layer_apply", 'gravity': "west"}
  ])
```

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

(new VideoTag('docs/sunglasses.mp4'))
	->overlay(Overlay::source(
	Source::image("lotus_layer"))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::west()))
	)
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .flags("layer_apply").gravity("west")).videoTag("docs/sunglasses");
```

```ruby
cl_video_tag("docs/sunglasses", transformation: [
  {overlay: "lotus_layer"},
  {flags: "layer_apply", gravity: "west"}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new Layer().PublicId("lotus_layer")).Chain()
  .Flags("layer_apply").Gravity("west")).BuildVideoTag("docs/sunglasses")
```

```dart
cloudinary.video('docs/sunglasses.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("lotus_layer").chain()
  .setFlags("layer_apply").setGravity("west")).generate("docs/sunglasses.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new Layer().publicId("lotus_layer")).chain()
  .flags("layer_apply").gravity("west")).resourceType("video").generate("docs/sunglasses.mp4");
```

```flutter
cloudinary.video('docs/sunglasses.mp4').transformation(Transformation()
	.overlay(Overlay.source(
	Source.image("lotus_layer"))
	.position(Position()
	.gravity(
	Gravity.compass(
	Compass.west()))
	)
	));
```

```kotlin
cloudinary.video {
	publicId("docs/sunglasses.mp4")
	 overlay(Overlay.source(
	Source.image("lotus_layer")) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.west()))
	 })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("docs/sunglasses", {transformation: [
  {overlay: new cloudinary.Layer().publicId("lotus_layer")},
  {flags: "layer_apply", gravity: "west"}
  ]})
```

```react_native
import { source } from "@cloudinary/url-gen/actions/overlay";
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("docs/sunglasses.mp4").overlay(
  source(image("lotus_layer")).position(new Position().gravity(compass("west")))
);
```

To fine-tune the exact location of the layer, you can offset the overlay from the focus of gravity by also adding the `x` and `y` coordinate offset parameters. These parameters accept either integer values representing the number of pixels to adjust the overlay position in the horizontal or vertical directions, or decimal values representing a percentage-based offset relative to the containing video (e.g., 0.2 for an offset of 20%).

For example, to place a text overlay at a vertical distance of 5% from the top of the video (`l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05`):

![Text added to image using % offset](https://res.cloudinary.com/demo/image/upload/l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05/docs/row-boat-sea-mountains.jpg "thumb: w_500")

```nodejs
cloudinary.image("docs/row-boat-sea-mountains.jpg", {transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```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 CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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 CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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 CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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 CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```python
CloudinaryImage("docs/row-boat-sea-mountains.jpg").image(transformation=[
  {'overlay': {'font_family': "Roboto", 'font_size': 400, 'text': "Paradise"}},
  {'flags': "layer_apply", 'gravity': "north", 'y': "0.05"}
  ])
```

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

(new ImageTag('docs/row-boat-sea-mountains.jpg'))
	->overlay(Overlay::source(
	Source::text("Paradise",(new TextStyle("Roboto",400))))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(0.05))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).imageTag("docs/row-boat-sea-mountains.jpg");
```

```ruby
cl_image_tag("docs/row-boat-sea-mountains.jpg", transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: 0.05}
  ])
```

```csharp
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Roboto").FontSize(400).Text("Paradise")).Chain()
  .Flags("layer_apply").Gravity("north").Y(0.05)).BuildImageTag("docs/row-boat-sea-mountains.jpg")
```

```dart
cloudinary.image('docs/row-boat-sea-mountains.jpg').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```swift
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Roboto_400:Paradise").chain()
  .setFlags("layer_apply").setGravity("north").setY(0.05)).generate("docs/row-boat-sea-mountains.jpg")!, cloudinary: cloudinary)
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).generate("docs/row-boat-sea-mountains.jpg");
```

```flutter
cloudinary.image('docs/row-boat-sea-mountains.jpg').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```kotlin
cloudinary.image {
	publicId("docs/row-boat-sea-mountains.jpg")
	 overlay(Overlay.source(
	Source.text("Paradise",TextStyle("Roboto",400))) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(0.05F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.image("docs/row-boat-sea-mountains.jpg", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```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 CloudinaryImage("docs/row-boat-sea-mountains.jpg").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

![Text added to video using % offset](https://res.cloudinary.com/demo/video/upload/l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05/paradise_location.mp4 "thumb: w_500")

```nodejs
cloudinary.video("paradise_location", {transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```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("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```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("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

```python
CloudinaryVideo("paradise_location").video(transformation=[
  {'overlay': {'font_family': "Roboto", 'font_size': 400, 'text': "Paradise"}},
  {'flags': "layer_apply", 'gravity': "north", 'y': "0.05"}
  ])
```

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

(new VideoTag('paradise_location.mp4'))
	->overlay(Overlay::source(
	Source::text("Paradise",(new TextStyle("Roboto",400))))
	->position((new Position())
	->gravity(
	Gravity::compass(
	Compass::north()))
->offsetY(0.05))
	);
```

```java
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).videoTag("paradise_location");
```

```ruby
cl_video_tag("paradise_location", transformation: [
  {overlay: {font_family: "Roboto", font_size: 400, text: "Paradise"}},
  {flags: "layer_apply", gravity: "north", y: 0.05}
  ])
```

```csharp
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Roboto").FontSize(400).Text("Paradise")).Chain()
  .Flags("layer_apply").Gravity("north").Y(0.05)).BuildVideoTag("paradise_location")
```

```dart
cloudinary.video('paradise_location.mp4').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```swift
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
  .setOverlay("text:Roboto_400:Paradise").chain()
  .setFlags("layer_apply").setGravity("north").setY(0.05)).generate("paradise_location.mp4")
```

```android
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")).chain()
  .flags("layer_apply").gravity("north").y(0.05)).resourceType("video").generate("paradise_location.mp4");
```

```flutter
cloudinary.video('paradise_location.mp4').transformation(Transformation()
	.addTransformation("l_text:Roboto_400:Paradise/fl_layer_apply,g_north,y_0.05"));
```

```kotlin
cloudinary.video {
	publicId("paradise_location.mp4")
	 overlay(Overlay.source(
	Source.text("Paradise",TextStyle("Roboto",400))) {
	 position(Position() {
	 gravity(
	Gravity.compass(
	Compass.north()))
 offsetY(0.05F) })
	 }) 
}.generate()
```

```jquery
$.cloudinary.video("paradise_location", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Roboto").fontSize(400).text("Paradise")},
  {flags: "layer_apply", gravity: "north", y: "0.05"}
  ]})
```

```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("paradise_location.mp4").overlay(
  source(text("Paradise", new TextStyle("Roboto", 400))).position(
    new Position()
      .gravity(compass("north"))
      .offsetY(0.05)
  )
);
```

The direction of x and y depends on the compass position:

Compass position | Positive x | Positive y | Negative x | Negative y
--|--|--|--|--
`center`, `north_west`, `north`, `west` | right | down | left | up
`north_east`, `east` | left | down | right | up
`south_east` | left | up | right | down
`south`, `south_west` | right | up | left | down

> **TIP**: See the [Positioning with Gravity
](https://cloudinary-training.github.io/cld-advanced-concepts/overlay-underlay/positioning-app/docs/index.html) interactive demo to experiment with gravity and coordinate parameters.

## Dynamic video overlays

Dynamic video overlays provide a mechanism to layer images or text on a video with the overlay tracking a detected person throughout, using the `track_person` gravity value. You can make use of fashion object detection (using the [Cloudinary AI Content Analysis add on](cloudinary_ai_content_analysis_addon)) to determine whether to include the overlay based on the presence of the object on the person. Some use cases for this functionality might be:

* Overlay relevant prices when specific items of clothing are detected in a product video.
* Add supplementary information for the components of an outfit, such as the brand.
* Highlight names of people featured in a video based on clothing characteristics.

To add a dynamic video overlay, apply the `g_track_person` gravity value in the transformation component after your layer definition, ensuring that you complete the layer using `fl_layer_apply`, for example:

![Adding a layer that tracks a person](https://res.cloudinary.com/demo/video/upload/l_price_tag/g_track_person,fl_layer_apply/dresses.mp4 "width: 500, with_code: false, poster: https://res.cloudinary.com/demo/video/upload/dresses.jpg")

You can use fashion object detection to ensure that the layer tracks all instances of people based on the defined object. To do this, add the `obj` parameter with your object value separated from the gravity with a colon (`:`). 

You may also want to control the position of the layer and apply adaptive sizing to ensure the layer maintains a consistent size relative to the person and doesn't overlap any other tracked people. To do this, add the `position` and `adaptivesize` parameters separated from the rest of the transformation by a semicolon (`;`)

In this example, the dress object is being detected, the layer is positioned above the people ensuring that it's visible for both, and the size adapts to always be 50% sized relative to the tracked people:

![Adding a layer that tracks people wearing dresses](https://res.cloudinary.com/demo/video/upload/l_price_tag/g_track_person:obj_dress;position_n;adaptivesize_50,fl_layer_apply/dresses.mp4 "width: 500, with_code: false, poster: https://res.cloudinary.com/demo/video/upload/dresses.jpg")

You can also apply tracking for text layers, for example:

![Text tracking layer](https://res.cloudinary.com/demo/video/upload/l_text:Verdana_100_bold:Your%20Clothing%20Brand/g_track_person:position_nw;adaptivesize_80,fl_layer_apply/fashion_coat.mp4 "width: 500, with_code: false, poster: https://res.cloudinary.com/demo/video/upload/fashion_coat.jpg")

> **NOTES**:
>
> * Only one tracked layer can be applied at a time.

> * The maximum video duration that tracked layers can be applied to is 3 minutes. 

> * When requesting your video on the fly, you will receive a 423 response until the video has been processed. Once processed, subsequent transformations will be applied synchronously.

> * You can apply transformations to the layer, such as controlling duration, by adding those into the layer definition component (e.g. `l_price_tag,du_3`)

> * If you're using our [Asia Pacific or Europe data centers](admin_api#alternative_data_centers_and_endpoints_premium_feature), you currently can't apply `g_track_person` to videos.

> **READING**:
>
> * [Layer syntax](video_layers): Learn the layer URL syntax and overlay types for videos.

> * [Text layer options](video_text_layers): Text styling, color, multi-line text, and special characters.

> * [Transforming layers](video_layer_transformations): Apply transformations, multiple overlays, and relative sizing to layers.

> * [Underlays, watermarking, and special effects](video_layer_watermarking): Image underlays, watermarking, and special layer applications.