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:

<base_url>/content/resources/find

BASH

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

{
  "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

This example assumes the extension is configured to support videos.

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