Skip navigation
Skip to main content
Content extensions
Content extensions

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.

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

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:

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

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

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