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.
For guidelines on choosing the layout that’s most appropriate for your content type, see Choose the best layout.
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!

Embeds

Containers

Last modified 1mo ago

Copy link

Contents

Supported videos types

Handling video requests

Additional considerations

Example