Embedding rich media

Across the internet, all sorts of media is designed to be embedded, from YouTube videos to Instagram photos to GitHub gists. Users can easily embed this media in their Canva designs, and so can apps.

When a user adds an embed to their design, the media is embedded in an iframe. The user can then manipulate the position, rotation, and size of the embed.

Some embeds are interactive. For example, users can watch embedded YouTube videos.

Unlike images, videos, and text, users can't apply effects to embeds. This is because Canva doesn't have access to the underlying media in the embed's iframe.

Behind the scenes, Canva uses Iframely⁠(opens in a new tab or window) to embed media from thousands of different platforms. This means apps can embed any media that's supported by the Iframely API.

To check if a URL is supported by Iframely, see What URLs to send to Iframely⁠(opens in a new tab or window).

In the Developer Portal, enable the canva:design:content:write permission. In the future, the Apps SDK will throw an error if the required permissions are not enabled. To learn more, see Configuring permissions.

Import the addElementAtPoint method (or addElementAtCursor, depending on the current context) from the @canva/design package:

import { addElementAtPoint } from "@canva/design";

Call the method, passing in the following options:

await addElementAtPoint({
  type: "embed",
  url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
});

The url property must contain an Iframely-supported URL.

• Iframely can't embed arbitrary HTML files. It can only embed media supported by its API.
• If the original media is deleted, an error is displayed in place of the media.
• If the original media changes, the changes are not immediately reflected in the user's design.

• addElementAtPoint

import React from "react";
import { addElementAtPoint } from "@canva/design";

export function App() {
  async function handleClick() {
    await addElementAtPoint({
      type: "embed",
      url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Add embed to design</button>
    </div>
  );
}