CTRL + K

Add an intro and outro to a video

What we're going to build

We may want to add a message to the beginning and end of a user-uploaded video for which we don't know the length in advance. Additionally, we may want to add a watermark to the video, but not to the intro and outro. Here's how we can achieve this.

Instructions

1. Add the video

Let's start by adding a video element and setting the duration property to "media" for it to be stretched to its full length.

1{
2  "output_format": "mp4",
3  "width": 1920,
4  "height": 1080,
5  "fill_color": "#262626",
6  "elements": [
7    {
8      "type": "video",
9      "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
10      "duration": "media"
11    }
12  ]
13}

2. Add a watermark

To add a watermark to the user's video, create a composition containing the user's video and our logo as an image element in the upper left corner.

1{
2  "output_format": "mp4",
3  "width": 1920,
4  "height": 1080,
5  "fill_color": "#262626",
6  "elements": [
7    {
8      "type": "composition",
9      "elements": [
10        {
11          "type": "video",
12          "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
13          "duration": "media"
14        },
15        {
16          "type": "image",
17          "source": "https://creatomate.com/files/assets/de898e8b-5c78-450e-aadd-442c85f54a26.png",
18          "x": "14.5497%",
19          "y": "11.835%",
20          "width": "21.6764%",
21          "height": "9.881%"
22        }
23      ]
24    }
25  ]
26}

3. Add the intro

It's time to make the intro scene. Once again, we're going to use a composition to group all the elements together to make the intro. Just a simple text will do for this example. To make the intro appear before the video, add both compositions to the same track.

1{
2  "output_format": "mp4",
3  "width": 1920,
4  "height": 1080,
5  "fill_color": "#262626",
6  "elements": [
7    {
8      "name": "Intro scene",
9      "type": "composition",
10      "track": 1,
11      "duration": 2.5,
12      "elements": [
13        {
14          "type": "text",
15          "height": "9.2378%",
16          "x_alignment": "50%",
17          "y_alignment": "50%",
18          "fill_color": "rgba(255,255,255,1)",
19          "text": "Your intro here",
20          "font_family": "Cabin",
21          "font_weight": "700"
22        }
23      ]
24    },
25    {
26      "name": "User's video scene",
27      "type": "composition",
28      "track": 1,
29      "elements": [
30        {
31          "type": "video",
32          "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
33          "duration": "media"
34        },
35        {
36          "type": "image",
37          "source": "https://creatomate.com/files/assets/de898e8b-5c78-450e-aadd-442c85f54a26.png",
38          "x": "14.5497%",
39          "y": "11.835%",
40          "width": "21.6764%",
41          "height": "9.881%"
42        }
43      ]
44    }
45  ]
46}

4. Add a transition effect

We're going to add a transition effect between the intro scene and the user's video scene. Let's go with circular-wipe, but any transition animation will do. Check out the template editor for a complete list.

1{
2  "output_format": "mp4",
3  "width": 1920,
4  "height": 1080,
5  "fill_color": "#262626",
6  "elements": [
7    {
8      "name": "Intro scene",
9      "type": "composition",
10      "track": 1,
11      "duration": 2.5,
12      "elements": [
13        {
14          "type": "text",
15          "height": "9.2378%",
16          "x_alignment": "50%",
17          "y_alignment": "50%",
18          "fill_color": "rgba(255,255,255,1)",
19          "text": "Your intro here",
20          "font_family": "Cabin",
21          "font_weight": "700"
22        }
23      ]
24    },
25    {
26      "name": "User's video scene",
27      "type": "composition",
28      "track": 1,
29      "elements": [
30        {
31          "type": "video",
32          "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
33          "duration": "media"
34        },
35        {
36          "type": "image",
37          "source": "https://creatomate.com/files/assets/de898e8b-5c78-450e-aadd-442c85f54a26.png",
38          "x": "14.5497%",
39          "y": "11.835%",
40          "width": "21.6764%",
41          "height": "9.881%"
42        }
43      ],
44      "animations": [
45        {
46          "time": "start",
47          "duration": 0.5,
48          "transition": true,
49          "type": "circular-wipe"
50        }
51      ]
52    }
53  ]
54}

5. Add the outro

Adding the outro will be much like adding the intro—just add a new composition and animate the transition. And that's all there is to it.

1{
2  "output_format": "mp4",
3  "width": 1920,
4  "height": 1080,
5  "fill_color": "#262626",
6  "elements": [
7    {
8      "name": "Intro scene",
9      "type": "composition",
10      "track": 1,
11      "duration": 2.5,
12      "elements": [
13        {
14          "type": "text",
15          "height": "9.2378%",
16          "x_alignment": "50%",
17          "y_alignment": "50%",
18          "fill_color": "rgba(255,255,255,1)",
19          "text": "Your intro here",
20          "font_family": "Cabin",
21          "font_weight": "700"
22        }
23      ]
24    },
25    {
26      "name": "User's video scene",
27      "type": "composition",
28      "track": 1,
29      "elements": [
30        {
31          "type": "video",
32          "source": "https://creatomate.com/files/assets/3e2f16d8-0ffc-4d90-aec2-721ee719eaed.mp4",
33          "duration": "media"
34        },
35        {
36          "type": "image",
37          "source": "https://creatomate.com/files/assets/de898e8b-5c78-450e-aadd-442c85f54a26.png",
38          "x": "14.5497%",
39          "y": "11.835%",
40          "width": "21.6764%",
41          "height": "9.881%"
42        }
43      ],
44      "animations": [
45        {
46          "time": "start",
47          "duration": 0.5,
48          "transition": true,
49          "type": "circular-wipe"
50        }
51      ]
52    },
53    {
54      "name": "Outro scene",
55      "type": "composition",
56      "track": 1,
57      "duration": 2.5,
58      "elements": [
59        {
60          "type": "text",
61          "width": "100%",
62          "height": "9.24%",
63          "x_alignment": "50%",
64          "y_alignment": "50%",
65          "fill_color": "rgba(255,255,255,1)",
66          "text": "Your outro here",
67          "font_family": "Cabin",
68          "font_weight": "700"
69        }
70      ],
71      "animations": [
72        {
73          "time": "start",
74          "duration": 0.5,
75          "transition": true,
76          "type": "circular-wipe"
77        }
78      ]
79    }
80  ]
81}
Previous page
Stitch videos together
Next page
Add a responsive watermark