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.

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.)

When a content extension supports videos, Canva retrieves the videos from the extension by sending a POST request to the following endpoint:

<base_url>/content/resources/find
bash

The body of the request includes a types property that contains "VIDEO" as one of its values:

{
"user": "AUQ2RUzug9pEvgpK9lL2qlpRsIbn1Vy5GoEt1MaKRE=",
"brand": "AUQ2RUxiRj966Wsvp7oGrz33BnaFmtq4ftBeLCSHf8=",
"label": "CONTENT",
"limit": 100,
"type": "VIDEO",
"types": ["VIDEO"],
"locale": "en-US"
}
json

This indicates that the extension can include video resources in the response:

{
"type": "VIDEO",
"id": "37088",
"name": "Video by Sakura_Studio",
"thumbnail": {
"url": "https://i.vimeocdn.com/video/885893632_1280x720.jpg",
"width": 1280,
"height": 720
},
"url": "https://player.vimeo.com/external/413229662.hd.mp4?s=26815ea7e1ba43aa54042b394780fbde2ad33d02&profile_id=170",
"contentType": "video/mp4",
"durationMs": 2000,
"width": 2560,
"height": 1440
}
json

You can find the schema for video resources in the API reference.

  • 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.
const axios = require("axios");
const express = require("express");
const app = express();
app.use(express.json());
app.use(express.static("public"));
if (!process.env.PIXABAY_API_KEY) {
throw new Error("The PIXABAY_API_KEY environment variable is not set");
}
app.post("/content/resources/find", async (request, response) => {
const options = {
url: "https://pixabay.com/api/videos/",
params: {
key: process.env.PIXABAY_API_KEY,
},
};
const { data } = await axios.request(options);
const resources = data.hits.map((item) => {
return {
type: "VIDEO",
id: item.id.toString(),
name: `Video by ${item.user}`,
thumbnail: createThumbnail(item),
url: item.videos.medium.url,
contentType: "video/mp4",
durationMs: item.duration * 1000,
width: item.videos.medium.width,
height: item.videos.medium.height,
};
});
response.send({
type: "SUCCESS",
resources,
});
});
function createThumbnail({
picture_id,
videos: {
tiny: { width, height },
},
}) {
return {
url: `https://i.vimeocdn.com/video/${picture_id}_${width}x${height}.jpg`,
width,
height,
};
}
app.listen(process.env.PORT || 3000);
javascript