> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/media-widgets/video.md).

# 3.4. Video

The **Video** widget allows you to embed a video directly into your landing page. Videos can help convey a strong message, explain product/service details, or engage customers. You can use videos from various sources, such as uploading directly or embedding from video-sharing platforms.

<figure><img src="/files/7ThhLfswcBI7jRuH7mMk" alt=""><figcaption></figcaption></figure>

## **1. Add Video to the Landing Page**

* Click on **Widgets** in the sidebar of the editor.
* Select **Video** from the **Media** section.
* Choose the **Video** element and drag it onto your landing page

<figure><img src="/files/ztHP8YdzFDCmdqBIQGxN" alt=""><figcaption></figcaption></figure>

## **2. Video Editor**

### 2.1. Content Editor

To access the **Content Editor**, click on the **Video** widget you wish to modify on the screen and select **Content** from the quick settings bar.

<figure><img src="/files/F7sMNj4hrozTy1vBpprH" alt=""><figcaption></figcaption></figure>

* You can set the content on the video:
  * **Show video controls:** Enable or disable video controls such as play/pause buttons, progress bar, volume, etc., for the users.
  * **Play video in loop:** When this option is enabled, the video will automatically replay from the beginning when it ends, creating an endless loop.
  * **Set video to autoplay:** Enable this option for the video to automatically start playing when the page finishes loading, without requiring the user to press the "Play" button.
  * **Play audio:** Decide whether to allow the audio of the video to play when the video is running.

### 2.2. Design Editor

To access the **Design Editor**, click on the **Video** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="/files/IZ4IjhndnbDuxvYBzwEW" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the **Video** within the container, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Sizes:** In the design editor, allows you to adjust the size and position of **Video** on the landing page, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on:** Allows you to control the display of the **Video** on different devices, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected **Video**, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border:** Allows you to add and customize the border around the **Video**, and you can also adjust the border radius, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).

2.3. Advanced Editor

To access the **Advanced Editor**, click on the **Video** you wish to modify on the screen and select **Advanced** from the quick settings bar.

<figure><img src="/files/q6i5YDHOwdkNunjiErek" alt=""><figcaption></figcaption></figure>

* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code, see details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).