Getting started
Designing apps
Fundamentals
Platform concepts
Developing apps
Authenticating usersCreating app elementsCreating audio tracksCreating imagesCreating image overlaysCreating shapesCreating tablesCreating textCreating videosDesign editingEmbedding rich mediaExporting designsGrouping elementsLocalizationPositioning elementsQuerying contentReading elementsReplacing elementsSupporting drag and dropUploading assetsUsing color selectorsUsing design IDsUsing fonts
Resources
Securing apps
Monetizing apps
Distributing apps
DraggableEmbed
API reference for the DraggableEmbed component.
The DraggableEmbed
component has been deprecated. Instead, use the EmbedCard
component.
Usage
import React from "react";import { DraggableEmbed } from "components/draggable_embed";export function App() {return (<DraggableEmbedembedUrl="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
embedUrl
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(opens in a new tab or window).
previewUrl
string
REQUIRED
The URL of a thumbnail image.
previewSize
string
REQUIRED
The dimensions of the preview image, in pixels.
title
string
REQUIRED
A human-readable title for the embed.
subtitle
string
OPTIONAL
A human-readable subtitle for the embed.