# Video with text overlay

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fj98bsF0TUgZeniqJniH4%2Fv-g.jpg?alt=media&#x26;token=9b593f6a-87f3-4a05-8bb4-39885b42376b" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Video with text overlay**
3. Make necessary changes. > **Save.**
   {% endhint %}

## General Settings

<div><figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FzKMDfoT0i1caO0ynkTgT%2Fv-g-1.jpg?alt=media&#x26;token=bfe8208f-8458-48f1-bcc0-79927d4344c5" alt=""><figcaption></figcaption></figure> <figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2Fa7TyJURTgHj9pd1hJavq%2Fv-g-2.jpg?alt=media&#x26;token=6f9774ec-35d9-4649-a1c1-4b918278d34e" alt=""><figcaption></figcaption></figure></div>

* **Section width** -  Container / Stretched / Full width&#x20;
* **Enable lazy loading video** - If you want improve the performance of your store, enable lazy loading for the video. The video will only load when it is in the viewport.
* **Shopify-hosted video** - Overrides the External video URL field.
* **External video** - Accepts YouTube and Vimeo URLs.
* **Poster image** - 1920x1080 .jpg recommended. If image blank, Shopify-hosted video will use the preview image.
* **Video alt text** - Describe the video for customers using screen readers.
* **Desktop height** - Adapt to image /  450px / 550px / 650px / 750px /  Full screen&#x20;
* **Mobile height** - Adapt to image / 400px / 450px / 500px / 550px / Full screen&#x20;
* **Desktop Content position**
* **Mobile content position**
* **Content width -** Small / Normal / Large / Container

### Colors

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FtlAotY1sEUiWqatmQZxN%2Fiw-g4.jpg?alt=media&#x26;token=56e51153-7f10-4d3a-a4fa-b97c188d80df" alt=""><figcaption></figcaption></figure>

* **Text color**
* **Overlay color**
* **Overlay opacity**
* **Overlay gradient** - Overwite overlay color

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Video with text overlay**
2. **Add Block. >** Select block you want
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://1556176885-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPgk3wauuyAKlfkLLpBvA%2Fuploads%2FedDXMLdXmD9i9SipkdiZ%2Fv-g-b.jpg?alt=media&#x26;token=a5584e92-5627-44d6-8944-7292ccdcf02c" alt=""><figcaption></figcaption></figure>