Video elements

What are video elements? How do I create them?

A video element is a type of element that renders a video file. Apps can use the Design Interaction capability to add video elements to a user's design.

User experience

When an app creates a video element, the underlying video file is uploaded to the user's media library.

While the video is being uploaded, a lower-resolution version of the video is shown to the user. If the app hasn't provided a lower-resolution version of the video, a static image is shown as a fallback.

All users have a storage limit for their media library. If they reach this limit, they will encounter errors when attempting to upload further videos.

Creating video elements

To create a video element, apps must first use the Content capability to upload the underlying video file to the user's media library. The following snippet demonstrates how to do this:

const content = getContent();
const designInteraction = getDesignInteraction();
const upload = await content.queueMediaUpload({
type: "VIDEO",
mimeType: "video/mp4",
id: "video",
url: "",
if (upload.type === "done") {
await designInteraction.addNativeElement({
type: "VIDEO",
ref: upload.ref,

To learn more, see: