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

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:

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.

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:

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

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.

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
• Watermarking videos
• Layer placement