# Videos

Videos can significantly enhance engagement in your emails. This guide explains how to add a video element and link it to your hosted video content (e.g., on YouTube or Vimeo).

> **Note:** Most email clients do not support direct embedding of playable videos within the email itself. Instead, this method typically involves displaying a thumbnail image of the video, which, when clicked, takes the user to the video on its hosting platform (like YouTube or Vimeo).

### Adding a Video Element

1. **Access the Content Tab:** Ensure the **Content** tab is active in the right-hand sidebar, displaying the available content elements.
2.  **Drag and Drop:**

    * Locate the "Video" element in the sidebar.
    * Click and drag the "Video" element onto your email canvas, placing it within a column or content area where you want the video preview to appear.

    Upon dropping, a placeholder (often showing a generic video player icon) will appear on the canvas. Its properties will load in the right-hand sidebar under the "Content" tab, specific to the "Video" (or "Link") element.

<figure><img src="https://616167918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLjwLbJC8g5ucoCRH06Pj%2Fuploads%2F9ny0TdNdw3hrdfYLwDXY%2FCleanShot%202025-06-16%20at%2013.29.26%402x.png?alt=media&#x26;token=92f45e17-9ff3-4516-b890-7d2ea28f9170" alt=""><figcaption></figcaption></figure>

### Configuring the Video Link

With the video element selected, you will primarily configure the link to your video.

1.  **Enter Video URL:**

    * In the right-hand sidebar, locate the "Video URL" input field. This is usually the most prominent option for the video element.
    * Paste the full URL of your video from YouTube or Vimeo into this field (e.g., `https://www.youtube.com/watch?v=5dPVHzIo6c`).
    * As you type or paste a valid URL, the system will attempt to fetch a preview image (thumbnail) from the video service. The placeholder on the canvas will update to show this preview image, often overlaid with a play button icon. This process might show a "Loading" indicator.

    > **Context:** The text below the URL field often clarifies: "Add a YouTube or Vimeo URL to automatically generate a preview image. The image will link to the provided URL." This confirms that the element creates a linked image, not an embedded player.

<figure><img src="https://616167918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLjwLbJC8g5ucoCRH06Pj%2Fuploads%2FnEVxtwvFj19MJh16GlR9%2FCleanShot%202025-06-16%20at%2013.30.15%402x.png?alt=media&#x26;token=d00f33b5-40fc-4e70-be40-d93bc43db4c9" alt=""><figcaption></figcaption></figure>

### Customising Video Element Properties

While the primary function is linking, you can adjust some general properties of the video element container.

#### General (Container Padding)

This section controls the spacing _around_ the video preview image element within its container block.

* **Container Padding:**
  * **All Sides:** Enter a pixel value in the "All Sides" input field to apply equal padding to the top, right, bottom, and left of the video element's container (e.g., default `10px`).
  * **More Options:** Toggle the "More Options" switch on to reveal individual input fields for "Top," "Right," "Bottom," and "Left" container padding. This allows for precise control over the spacing

<div align="left"><figure><img src="https://616167918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLjwLbJC8g5ucoCRH06Pj%2Fuploads%2FDj86jMxEPc8m8H5Ycm39%2FCleanShot%202025-06-16%20at%2013.30.40%402x.png?alt=media&#x26;token=a62c3429-ec9b-4958-b18a-1c016a7743a1" alt="" width="341"><figcaption></figcaption></figure></div>

#### Responsive Design

Control the visibility of the video element on different devices.

* **Hide on Desktop:** Toggle this switch on to make the video preview invisible when the email is viewed on desktop devices.

<div align="left"><figure><img src="https://616167918-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLjwLbJC8g5ucoCRH06Pj%2Fuploads%2FDYb4gKVO8gOsyUVYgMlM%2FCleanShot%202025-06-16%20at%2013.31.16%402x.png?alt=media&#x26;token=9c6bdd4f-3fa4-473d-915a-5ce7491c48ab" alt="" width="342"><figcaption></figcaption></figure></div>
