# 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="/files/7uiAvBpZe9mMDTqxFtaT" 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="/files/hjF1kX4MHbPMENESyKFI" 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="/files/qBDgv2AJOiM0D1iE7Ejx" 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="/files/xQ25XYUyD5Fyn96WMb7p" alt="" width="342"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/videos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.