> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# DraggableEmbed

API reference for the DraggableEmbed component.

**Warning:** The `DraggableEmbed` component has been deprecated. Instead, use the [`EmbedCard`](https://www.canva.dev/docs/apps/app-ui-kit/storybook/?path=/docs/canva-app-ui-kit-card-embedcard--docs) component.

## Usage

```tsx
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"
    />
  );
}
```

## Props

<Prop.List>
  <Prop name="embedUrl" type="string" required>
    The URL of the embeddable media.

    This URL must be supported by Iframely. To learn more, see [What URLs to send to Iframely](https://iframely.com/docs/providers).
  </Prop>

  <Prop name="previewUrl" type="string" required>
    The URL of a thumbnail image.
  </Prop>

  <Prop name="previewSize" type="string" required>
    The dimensions of the preview image, in pixels.
  </Prop>

  <Prop name="title" type="string" required>
    A human-readable title for the embed.
  </Prop>

  <Prop name="subtitle" type="string">
    A human-readable subtitle for the embed.
  </Prop>
</Prop.List>