> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Electro How to Use Electro Video With Text Section

**Theme:** Electro · **Section type:** All-template section

A Video with text section shows a video next to your own text, countdown timer, and buttons. Use it to tell your brand story, demo a product, or promote a sale with a video customers can play on the page.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds 1 Countdown timer block and 1 Buttons block.
![Electro Video with text section with a video thumbnail, heading, countdown timer, and button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vwt1_14l7lay.png)

**What you can do**
- Add the section and your video
- Add a thumbnail and choose how the video plays
- Add text, a countdown, and buttons
- Change the layout
- See what customers see
- Look up every setting
- Fix common problems

## Add the section and your video
1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Video with text**. The section comes with Subheading, Heading, Description, Countdown timer, and Buttons blocks.
3. Under **Video**, paste a YouTube or Vimeo link into **External video**, or select a **Shopify-hosted video**.
4. Enter a **Video alt text** that describes the video.
5. Click **Save**.

> **Note:** A Shopify-hosted video overrides the external video. To use a YouTube or Vimeo link, remove the Shopify-hosted video.

> **Tip:** The alt text helps customers who use screen readers. Describe what happens in the video in one short sentence.

## Add a thumbnail and choose how the video plays
1. Click the **Video with text** section.
2. Under **Layout**, select a **Thumbnail**. This image shows until a customer plays the video.
3. Optional: select a **Mobile thumbnail (Optional)**. If you don't add one, phones show the main thumbnail.
4. Turn **Enable video loop** on to replay the video when it ends.
5. Turn **Enable video mute** on to start the video without sound.
6. Click **Save**.

> **Tip:** Use a thumbnail with the same shape as your video, so the frame doesn't jump when the video starts.

## Add text, a countdown, and buttons
1. In the left sidebar, under **Video with text**, click a block to edit it, or click **Add block** and choose **Subheading**, **Heading**, **Description**, **Countdown timer**, or **Buttons**.
2. Drag the blocks to change their order. The text column shows them from top to bottom in the same order.
3. In the **Countdown timer** block, enter an **End date** and an optional **End time**.
4. In the **Buttons** block, enter a **Label** and a **Link** for each button you want. Leave a **Label** empty to hide that button.
5. Click **Save**.

For all countdown options, see Electro Countdown timer.

## Change the layout
1. Click the **Video with text** section.
2. Under **General**, choose a **Color scheme** and the **Content ordering on large screen**: Text first or Video first.
3. Under **Layout**, choose the **Height on large screen**.
4. Click **Save**.

## What customers see
- **Large screens:** the video and the text sit side by side, in the order you chose. The video shows the thumbnail with a play button.
- **Playing the video:** customers click the play button. The video plays in place, with video controls, using your loop and mute settings. Starting a video pauses other videos on the page.
- **Phones and tablets:** the text shows first and the video below it. The mobile thumbnail shows if you added one.
- **Countdown:** the timer shows days, hours, minutes, and seconds. When it ends, it disappears or shows your end text, depending on your settings.
- **Long text:** on large screens, the section grows taller if the text doesn't fit.
![Electro Video with text after a customer clicks play: the video plays in place next to the text](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/vwt2_16tzldm.png)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background, text, and button colors. |
| Content ordering on large screen | Shows the text first (left) or the video first (left). Phones always show the text first. |

### Video
| Setting | What it does |
| ---- | ---- |
| External video | A YouTube or Vimeo link. |
| Shopify-hosted video | A video uploaded to Shopify. Overrides the external video. |
| Video alt text | Describes the video for screen reader users. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Height on large screen | Sets the section height to 70% screen height or Fill screen height. The section grows if the text is long. |
| Thumbnail | The image customers see before they play the video. |
| Mobile thumbnail (Optional) | A separate thumbnail for phones. |
| Enable video loop | Replays the video when it ends. |
| Enable video mute | Starts the video without sound. |

### Subheading block settings
| Setting | What it does |
| ---- | ---- |
| Text | A short tagline. |

### Heading block settings
| Setting | What it does |
| ---- | ---- |
| Text | The heading. |
| Text size | Sets the heading size: Headline, or H1 to H6. |

### Description block settings
| Setting | What it does |
| ---- | ---- |
| Text | Body text. Supports bold, italic, and links. |

### Countdown timer block settings
| Setting | What it does |
| ---- | ---- |
| Hide the countdown when it ends | Removes the timer after the end date and time. |
| End date | The day the countdown ends, in the format YYYY-MM-DD. If it's empty, the countdown ends at midnight tonight. |
| End time (optional) | The time the countdown ends, in the format HH:MM (24-hour clock). |
| End text | A message that shows when the countdown ends. Leave it empty to show nothing. |
| Countdown background | Sets the background color of the timer. |
| Countdown number | Sets the color of the numbers. |
| End text (under Custom color) | Sets the color of the end message. |

### Buttons block settings
| Setting | What it does |
| ---- | ---- |
| Label | The button text, for Button 1 and Button 2. Leave it empty to hide that button. |
| Style | Sets each button to Primary, Secondary, or Tertiary. |
| Link | The page the button opens. |

## Troubleshooting
**The video doesn't play on its own.**
This section waits for a click. Customers start the video with the play button. For a video that plays automatically in the background, use **Video banner**.

**The video plays without sound.**
**Enable video mute** is on. Turn it off under **Layout**. Some browsers still block sound until the customer interacts with the video.

**The video on the page is not the YouTube link I added.**
A Shopify-hosted video overrides the external video. Remove the **Shopify-hosted video** under **Video**.

**A button looks faded and can't be clicked.**
The button has no link. Add a **Link** in the **Buttons** block.

**The video is on the wrong side.**
Change **Content ordering on large screen** under **General**. On phones the text always shows first.

## Related articles
- [Electro Video banner](https://help.ecomx.co/en/article/electro-how-to-use-electro-video-banner-1uqofi1/)
- [Electro Image with text](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-section-1i58xtt/)
- [Electro Countdown timer](https://help.ecomx.co/en/article/electro-countdown-timer-7xh0wl/)
- [Electro Typography](https://help.ecomx.co/en/article/electro-typography-17a6dzk/)
- [Electro Theme settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)