# Media
Media includes **Image**, **Image slider,** **Before/After slider, Embed Video** and **Video** elements.
## Adding media
1. Drag an element (image, image slider, before/after slider, embed Video or Video) to the canvas.
2. Click the element to display the toolbar and open the left side panel with its corresponding settings
## Customizing image settings
The settings panel has all the standard image editing tools to customize the display and layout, These include responsive property, alignment, margins, alt text, borders, and shadows. We also offer more specialized features, described below.
### Preview selected product
Enable this feature to display a preview of a product inside an **Image** or **Image slider** element when your customer selects a product.
### Click action
To add a link to images, click on the image, then on the left panel click the **Interaction** tab, then click on the "+" next to **On click** where you can select:
* **Submit step**\
Submit customer payment details and move the user to the next step in the flow.
* **Go to next step** \
Move the customer along the flow, but do not submit any payment information.
* **Go to URL** \
Add a link to an external page.
* **Go to section/row** \
Create an anchor link to a different place on the same step. Link to a specific section or row on the step.
* **Show popup** \
Choose a popup for the drop-down menu. When a user clicks the image, the popup displays.
### Lazyload
Enable this feature to enhance site performance. Lazyload delays media loading until it is needed. The result is a better user experience because other site elements can load faster when needed.
### Changing/Adding images
To change or add more images, click on the image element then on the left side panel, click **browse.**
### Image folder
When opening the image folder, by default it will open the folder **My Images** where all your images will be saved.
You will also find **Pexels** where you can search for high-quality, royalty-free images to add to your pages.
To create a new folder for file management if you plan on uploading lots of content, here is how to do it:
1. Click **+ New folder**. The new folder will be created below.
2. Enter a unique name.
3. Now you can start adding the images into the folder
You can add videos using video links or uploading your own video.
### **Embed Video element**
To add your videos embedding a url, add an **embed video element** to your page and on the left panel, paste the video URL into the **Video URL** field. Funnelish automatically loads the video into the element.
## Adding **videos to your page**
Customize the display settings to control video size (width and height) and layout on the step (e.g., margins and borders).
### Customize the Embed Video player
You can control video play behavior with three toggles.
* **Autoplay** \
The video plays as soon as it loads on the user's device. If activating this option, the video by default will be muted.
* **Loop infinitely**\
The video plays again and again.
* **Show controls** \
The visitor can see the Play/Stop button and progress bar. If disabled, the visitor can't stop or start the video.
{% hint style="info" %}
Funnelish automatically optimizes media files (images and videos). Even when using multiple images and videos, the average Funnelish page load speed is 0.1 seconds.
{% endhint %}
### **Video element**
To upload your own videos instead of using a url, add a **video element** to your page and on the left panel click on the video element to upload your video.
We suggest uploading videos with a max size of 200MB per video but keep in mind that depending on the size of the video, the upload may take a bit longer to upload.
### Customize the Video element
* **Thumbnail**\
Will allow you to add your own thumbnail for the uploaded video.
* **Play button**\
Customize your own play button from different designs to choose from and apply their color.
* **Focal point**\
This is where the camera is focused, the side, top left corner, bottom right corner, etc of your video. To see the focal point in action, first a height to the video element.
* **Autoplay**\
The video plays as soon as it loads on the user's device. **If activating this option, the video by default will be muted.**
* **Loop** \
The video plays again and again.
* **Show controls** \
The visitor to see the Play/Stop button and progress bar. If disabled, they won't be able to stop or start the video.
* **Can be paused**\
Allows the visitor to pause the video
---
# 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://docs.funnelish.com/start/funnel-builder/editor-media.md?ask=
```
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.
