The Canva Apps SDK, Connect APIs, and MCP are now unified in the Canva Developers SDK. Learn more(opens in a new tab or window).
Canva Developers SDK
The Canva Apps SDK, Connect APIs, and MCP are now unified in the Canva Developers SDK. Learn more(opens in a new tab or window).

DraggableEmbed

API reference for the DraggableEmbed component.

The DraggableEmbed component has been deprecated. Instead, use the EmbedCard(opens in a new tab or window) component.

Usage

import React from "react";
import { DraggableEmbed } from "components/draggable_embed";
export function App() {
return (
<DraggableEmbed
embedUrl="https://www.youtube.com/embed/L3MtFGWRXAA"
previewUrl="https://www.canva.dev/example-assets/images/puppyhood.jpg"
previewSize={{ width: 320, height: 180 }}
title="Heartwarming Chatter: Adorable Conversation with a Puppy"
subtitle="Puppyhood"
/>
);
}
TSX

Props

embedUrlstring
Required

The URL of the embeddable media.

This URL must be supported by Iframely. To learn more, see What URLs to send to Iframely(opens in a new tab or window).

previewUrlstring
Required

The URL of a thumbnail image.

previewSizestring
Required

The dimensions of the preview image, in pixels.

titlestring
Required

A human-readable title for the embed.

subtitlestring
Optional

A human-readable subtitle for the embed.