In this example, we'll add a responsive watermark to a video. With a few constraints applied, our watermark will always appear at the appropriate location and scale, no matter the resolution or aspect ratio.
The first step is to add a video element with duration set to "media" so it is stretched to its full length. Next, add the watermark image.
1{
2 "output_format": "mp4",
3 "width": 1920,
4 "height": 1080,
5 "elements": [
6 {
7 "type": "video",
8 "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
9 "duration": "media"
10 },
11 {
12 "type": "image",
13 "source": "https://creatomate.com/files/assets/90f0f53c-ac48-4b62-ac17-196c4b0ea653.png",
14 "fit": "contain"
15 }
16 ]
17}We're going to resize the watermark to a maximum of "60 vmin" width and height. The vmin unit represents a percentage of either the width or height of the total resolution, whichever is smaller. Therefore, if the width is smaller than the height, 60% of the width will be used, otherwise 60% of the height. This lets us set a size that won't exceed the resolution in both dimensions, whether it's a vertical or landscape video.
1{
2 "output_format": "mp4",
3 "width": 1920,
4 "height": 1080,
5 "elements": [
6 {
7 "type": "video",
8 "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
9 "duration": "media"
10 },
11 {
12 "type": "image",
13 "source": "https://creatomate.com/files/assets/90f0f53c-ac48-4b62-ac17-196c4b0ea653.png",
14 "fit": "contain",
15 "width": "60 vmin",
16 "height": "60 vmin"
17 }
18 ]
19}Place the watermark in the upper right corner by setting its position, anchor point, and image alignment to (100%, 0%). You can experiment with these values in the template editor to get a better understanding of how they work together.
1{
2 "output_format": "mp4",
3 "width": 1920,
4 "height": 1080,
5 "elements": [
6 {
7 "type": "video",
8 "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
9 "duration": "media"
10 },
11 {
12 "type": "image",
13 "source": "https://creatomate.com/files/assets/90f0f53c-ac48-4b62-ac17-196c4b0ea653.png",
14 "fit": "contain",
15 "width": "60 vmin",
16 "height": "60 vmin",
17 "x": "100%",
18 "y": "0%",
19 "x_anchor": "100%",
20 "y_anchor": "0%",
21 "x_alignment": "100%",
22 "y_alignment": "0%"
23 }
24 ]
25}As a final step, we will add padding and a shadow to the watermark. So there we have it: a responsive watermark that works in any resolution.
1{
2 "output_format": "mp4",
3 "width": 1920,
4 "height": 1080,
5 "elements": [
6 {
7 "type": "video",
8 "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
9 "duration": "media"
10 },
11 {
12 "type": "image",
13 "source": "https://creatomate.com/files/assets/90f0f53c-ac48-4b62-ac17-196c4b0ea653.png",
14 "fit": "contain",
15 "width": "60 vmin",
16 "height": "60 vmin",
17 "x": "100%",
18 "y": "0%",
19 "x_anchor": "100%",
20 "y_anchor": "0%",
21 "x_alignment": "100%",
22 "y_alignment": "0%",
23 "x_padding": "7 vmin",
24 "y_padding": "7 vmin",
25 "shadow_color": "rgba(0,0,0,0.66)"
26 }
27 ]
28}