Videos
When creating a content extension, one of the available options for the Content type field is Videos. If you select this option, the extension can import video files into Canva.
If you're looking for the API reference, see /content/resources/find.

Supported videos types

A content extension can import the following types of video files into Canva:
  • MOV
  • GIF
  • MP4
  • MPEG
  • MKV
  • WEBM
Canva does not support videos encoded in the following formats:
  • Apple Intermediate
  • ProRes 4444 (ProRes 422 Supported)
  • HDV 720p60
  • Go2Meeting3 (G2M3)
  • Go2Meeting4 (G2M4)
The maximum supported file size is 100 MB. (This applies to all media imported via a content extension, not just video files.)
If you want to import embeddable videos into Canva, such as YouTube videos, see Embeds.

Handling video requests

When a content extension supports videos, Canva retrieves the videos from the extension by sending a POST request to the following endpoint:
1
<base_url>/content/resources/find
Copied!
<base_url> is a placeholder that's replaced with the extension's Base URL.
The body of the request includes a types property that contains "VIDEO" as one of its values:
1
{
2
"user": "AUQ2RUzug9pEvgpK9lL2qlpRsIbn1Vy5GoEt1MaKRE=",
3
"brand": "AUQ2RUxiRj966Wsvp7oGrz33BnaFmtq4ftBeLCSHf8=",
4
"label": "CONTENT",
5
"limit": 100,
6
"type": "VIDEO",
7
"types": ["VIDEO"],
8
"locale": "en-US"
9
}
Copied!
This indicates that the extension can include video resources in the response:
1
{
2
"type": "VIDEO",
3
"id": "37088",
4
"name": "Video by Sakura_Studio",
5
"thumbnail": {
6
"url": "https://i.vimeocdn.com/video/885893632_1280x720.jpg",
7
"width": 1280,
8
"height": 720
9
},
10
"url": "https://player.vimeo.com/external/413229662.hd.mp4?s=26815ea7e1ba43aa54042b394780fbde2ad33d02&profile_id=170",
11
"contentType": "video/mp4",
12
"durationMs": 2000,
13
"width": 2560,
14
"height": 1440
15
}
Copied!
You can find the schema for video resources in the API reference.

Additional considerations

  • Cross-Origin Resource Sharing (CORS) can interfere with the importing of videos. To learn more, see CORS.

Example

This example assumes the extension is configured to support videos.
1
const axios = require("axios");
2
const express = require("express");
3
4
const app = express();
5
6
app.use(express.json());
7
app.use(express.static("public"));
8
9
if (!process.env.PIXABAY_API_KEY) {
10
throw new Error("The PIXABAY_API_KEY environment variable is not set");
11
}
12
13
app.post("/content/resources/find", async (request, response) => {
14
const options = {
15
url: "https://pixabay.com/api/videos/",
16
params: {
17
key: process.env.PIXABAY_API_KEY,
18
},
19
};
20
21
const { data } = await axios.request(options);
22
23
const resources = data.hits.map((item) => {
24
return {
25
type: "VIDEO",
26
id: item.id.toString(),
27
name: `Video by ${item.user}`,
28
thumbnail: createThumbnail(item),
29
url: item.videos.medium.url,
30
contentType: "video/mp4",
31
durationMs: item.duration * 1000,
32
width: item.videos.medium.width,
33
height: item.videos.medium.height,
34
};
35
});
36
37
response.send({
38
type: "SUCCESS",
39
resources,
40
});
41
});
42
43
function createThumbnail({
44
picture_id,
45
videos: {
46
tiny: { width, height },
47
},
48
}) {
49
return {
50
url: `https://i.vimeocdn.com/video/${picture_id}_${width}x${height}.jpg`,
51
width,
52
height,
53
};
54
}
55
56
app.listen(process.env.PORT || 3000);
Copied!
Last modified 27d ago