# 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="https://content.gitbook.com/content/cZrhJDsqJxZMsvuaSaiJ/blobs/8ufkpYiQdnMfKrnuyyKr/image.png" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F90shT34z8IaONU8HSPfp%2Fimage.png?alt=media&#x26;token=db0c0800-cce6-45c1-8f29-0c41f8776857" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FsZXPn7hFUZ8mP4moUWPM%2Fimage.png?alt=media&#x26;token=ce4fce0a-3359-4684-99da-687b16a40aa2" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FpPOwnvSeWAsF6GWogdun%2Fimage.png?alt=media&#x26;token=14d4df25-7c09-493a-9013-f0f859e7950a" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FwbmetH855b08h8xpmPC9%2Fimage.png?alt=media&#x26;token=2d7a25a3-361f-45a7-8317-66e20ad321d6" 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).