Layer placement

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

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.

Positioning layers with gravity

To determine the position of the new layer, you can add the 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):

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

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

Tip

See the Positioning with Gravity 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) 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:

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:

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