> ## 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.

# Video elements

Add video elements to designs with playback controls.

## Running this example

To run this example locally:

1. If you haven't already, create a new app in the [Developer Portal](https://www.canva.com/developers/apps). For more information, refer to our [Quickstart guide](https://www.canva.dev/docs/apps/quickstart/).

2. In your app's configuration on the [Developer Portal](https://www.canva.com/developers/apps), ensure the "Development URL" is set to `http://localhost:8080`.

3. Clone the starter kit:

   ```shell
   git clone https://github.com/canva-sdks/canva-apps-sdk-starter-kit.git
   cd canva-apps-sdk-starter-kit
   ```

4. Install dependencies:

   ```shell
   npm install
   ```

5. Run the example:
   ```shell
   npm run start:example video_elements
   ```

6. Click the **Preview URL** link shown in the terminal to open the example in the Canva editor.

## Example app source code

<Tabs>
  <Tab name="app.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import {
      Box,
      Button,
      FormField,
      Grid,
      VideoCard,
      Rows,
      Text,
    } from "@canva/app-ui-kit";
    import React from "react";
    import * as styles from "styles/components.css";
    import { upload } from "@canva/asset";
    import { addElementAtCursor, addElementAtPoint } from "@canva/design";
    import { useFeatureSupport } from "@canva/app-hooks";

    type ExampleStaticVideo = {
      title: string;
      url: string;
      thumbnailImageUrl: string;
      thumbnailVideoUrl: string;
    };

    // Static video assets for demo purposes - see README for production considerations
    const STATIC_VIDEOS: Record<string, ExampleStaticVideo> = {
      building: {
        title: "Pinwheel on building",
        url: "https://www.canva.dev/example-assets/video-import/video.mp4",
        thumbnailImageUrl:
          "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
        thumbnailVideoUrl:
          "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
      },
      beach: {
        title: "A beautiful beach scene",
        url: "https://www.canva.dev/example-assets/video-import/beach-video.mp4",
        thumbnailImageUrl:
          "https://www.canva.dev/example-assets/video-import/beach-thumbnail-image.jpg",
        thumbnailVideoUrl:
          "https://www.canva.dev/example-assets/video-import/beach-thumbnail-video.mp4",
      },
    };

    export const App = () => {
      const [selected, setSelected] = React.useState("building");
      const [isLoading, setIsLoading] = React.useState(false);
      const isSupported = useFeatureSupport();
      const addElement = [addElementAtPoint, addElementAtCursor].find((fn) =>
        isSupported(fn),
      );

      // Transform video data for VideoCard components with selection state
      const items = Object.entries(STATIC_VIDEOS).map(([key, value]) => {
        const { title, thumbnailImageUrl, thumbnailVideoUrl } = value;
        return {
          key,
          title,
          thumbnailImageUrl,
          thumbnailVideoUrl,
          active: selected === key,
          onClick: () => {
            setSelected(key);
          },
        };
      });

      const addVideo = React.useCallback(async () => {
        if (!addElement) {
          return;
        }

        setIsLoading(true);
        try {
          // In production, you would likely be fetching this from a database or API
          const item = STATIC_VIDEOS[selected];
          if (!item) {
            throw new Error(`Unknown video: ${selected}`);
          }

          // Upload video to Canva's asset storage and get reference
          const { ref } = await upload({
            type: "video",
            mimeType: "video/mp4",
            url: item.url,
            thumbnailImageUrl: item.thumbnailImageUrl,
            thumbnailVideoUrl: item.thumbnailVideoUrl,
            aiDisclosure: "none", // Indicates this video is not AI-generated
          });

          // Add the video element to the current design using the asset reference
          await addElement({
            type: "video",
            ref,
            altText: {
              text: item.title,
              decorative: undefined, // Set to true if video is purely decorative
            },
          });
        } finally {
          setIsLoading(false);
        }
      }, [selected, addElement]);

      return (
        <div className={styles.scrollContainer}>
          <Rows spacing="2u">
            <Text>
              This example demonstrates how apps can add video elements to a design.
            </Text>
            <FormField
              label="Select a video"
              control={(props) => (
                <Box {...props} padding="1u">
                  <Grid columns={2} spacing="1.5u">
                    {items.map((item) => (
                      <VideoCard
                        ariaLabel="Add video to design"
                        key={item.key}
                        mimeType="video/mp4"
                        thumbnailUrl={item.thumbnailImageUrl}
                        thumbnailHeight={150}
                        videoPreviewUrl={item.thumbnailVideoUrl}
                        onClick={item.onClick}
                        selectable={true}
                        selected={item.active}
                        borderRadius="standard"
                      />
                    ))}
                  </Grid>
                </Box>
              )}
            />
            <Button
              variant="primary"
              disabled={!addElement}
              tooltipLabel={
                !addElement
                  ? "This feature is not supported in the current page"
                  : undefined
              }
              loading={isLoading}
              onClick={addVideo}
              stretch
            >
              Add element
            </Button>
          </Rows>
        </div>
      );
    };
    ```
  </Tab>

  <Tab name="index.tsx">
    ```typescript
    // For usage information, see the README.md file.
    import { AppUiProvider } from "@canva/app-ui-kit";
    import { createRoot } from "react-dom/client";
    import { App } from "./app";
    import "@canva/app-ui-kit/styles.css";
    import type { DesignEditorIntent } from "@canva/intents/design";
    import { prepareDesignEditor } from "@canva/intents/design";

    async function render() {
      const root = createRoot(document.getElementById("root") as Element);

      root.render(
        <AppUiProvider>
          <App />
        </AppUiProvider>,
      );
    }

    const designEditor: DesignEditorIntent = { render };
    prepareDesignEditor(designEditor);

    // Hot Module Replacement for development (automatically reloads the app when changes are made)
    if (module.hot) {
      module.hot.accept("./app", render);
    }
    ```
  </Tab>

  <Tab name="README.md">
    ```markdown
    # Video elements

    Demonstrates how to add video elements to designs using predefined video assets. Shows video selection, upload handling, and video insertion with thumbnail previews.

    For API reference docs and instructions on running this example, see: <https://www.canva.dev/docs/apps/examples/video-elements/>.

    Related examples:

    - `app_video_elements` - For embedding videos within app elements
    - `drag_and_drop/drag_and_drop_video` - For drag-and-drop video insertion patterns

    NOTE: This example differs from what is expected for public apps to pass a Canva review:

    - Static assets are used for demonstration purposes only. Production apps should host assets on a CDN/hosting service and use the `upload` function from the `@canva/asset` package
    - Video format validation is not implemented. Production apps must validate video formats, dimensions, and file sizes
    - Error handling is simplified for demonstration. Production apps must implement comprehensive error handling with clear user feedback and graceful failure modes
    - Internationalization is not implemented. Production apps must support multiple languages using the `@canva/app-i18n-kit` package to pass Canva review requirements
    - The code structure is simplified: Production apps using [intents](https://www.canva.dev/docs/apps/intents/) are recommended to call the prepareDesignEditor function from src/intents/design_editor/index.tsx
    ```
  </Tab>
</Tabs>

## API reference

* [App UI Kit](https://www.canva.dev/docs/apps/app-ui-kit/)
* [`addElementAtCursor`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-cursor/)
* [`addElementAtPoint`](https://www.canva.dev/docs/apps/api/latest/design-add-element-at-point/)
* [`prepareDesignEditor`](https://www.canva.dev/docs/apps/api/latest/intents-design-prepare-design-editor/)
* [`upload`](https://www.canva.dev/docs/apps/api/latest/asset-upload/)

## Need help?

* Join our [Community Forum](https://community.canva.dev/)
* Report issues with this example on [GitHub](https://github.com/canva-sdks/canva-apps-sdk-starter-kit/issues)