Canva Developers logo
Drag and Drop
Getting started
Drag and Drop

DraggableVideo

Renders a video that users can drag and drop into their design.

Import

import { DraggableVideo } from "../components/DraggableVideo";

Usage

<DraggableVideo
  mimeType="video/mp4"
  durationInSeconds={7}
  thumbnailImageSrc="https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg"
  thumbnailVideoSrc="https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4"
  width={270}
  height={480}
  resolveVideoRef={async () => {
    const content = getContent();


    const upload = await content.queueMediaUpload({
      type: "VIDEO",
      id: new Date().toString(), // This ID must be unique
      mimeType: "video/mp4",
      url: "https://www.canva.dev/example-assets/video-import/video.mp4",
      thumbnailImageUrl:
        "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
      thumbnailVideoUrl:
        "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
      width: 405,
      height: 720,
    });


    if (upload.type !== "done") {
      throw new Error(`Something went wrong: ${upload.reason.type}`);
    }


    return upload;
  }}
/>

Props

mimeType

The MIME type of the full-sized video file.

The supported MIME types include:

  • "video/avi"
  • "image/gif"
  • "video/x-m4v"
  • "video/x-matroska"
  • "video/quicktime"
  • "video/mp4"
  • "video/mpeg"
  • "video/webm"
Type
string
resolveVideoRef

An asynchronous function that returns a reference to a video in the user's media library. This requires the use of the Content capability:

async function resolveVideoRef() {
  const content = getContent();


  const upload = await content.queueMediaUpload({
    type: "VIDEO",
    mimeType: "video/mp4",
    id: "video",
    url: "https://www.canva.dev/example-assets/video-import/video.mp4",
    thumbnailImageUrl:
      "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
    thumbnailVideoUrl:
      "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
  });


  if (upload.type !== "done") {
    throw new Error(`Something went wrong: ${upload.reason.type}`);
  }


  return upload;
}

To learn more, see Importing media from a URL.

Type
function
thumbnailImageSrc

A thumbnail image to display in the side panel of the Canva editor.

Type
string
thumbnailVideoSrc

A low-resolution version of the full video with a maximum duration of 10 seconds. This can be omitted when the mimeType is video/gif.

Type
string
duration

The duration of the full video, in seconds.

Type
number
width

The width of the thumbnail, in pixels.

Type
number
height

The height of the thumbnail, in pixels.

Type
number
previewSrc

The URL or data URL of the image to use for the drag preview. This image will appear under the user's cursor as they during the drag event.

If omitted, thumbnailImageSrc will be used as a fallback.

Type
string
previewSize

The dimensions of the drag preview. The dimensions should have the same aspect ratio as the full-size video.

If omitted, the width and height will be used as a fallback.

Type
object
previewSize.width

The width of the drag preview, in pixels.

Type
number
previewSize.height

The height of the drag preview, in pixels.

Type
number
fullSize

The dimensions of the full-size video, in pixels.

If omitted, the dimensions of the drag preview will be used.

Type
object
fullSize.width

The width of the full-size video, in pixels.

Type
number
fullSize.height

The height of the full-size video, in pixels.

Type
number