> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/spark/pages/theme-sections/video.md).
# Video
The **Video** section embeds a video uploaded to Shopify, YouTube, or Vimeo. Customers can click to play longer videos with sound about your store and products.
{% hint style="info" %}
For autoplaying background videos (without sound), see the [Video hero](/spark/pages/theme-sections/video-hero.md) and [Mosaic grid](/spark/pages/theme-sections/mosaic-grid.md) sections.
{% endhint %}
## Set up section
Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](/spark/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [insert dynamic content with metafields](/spark/general/adapting-your-theme/dynamic-content-with-metafields.md).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Select a **Template** to edit from the dropdown menu in the top bar.
> Learn how to use templates in our [Templates guide](/spark/general/editing-themes/using-templates.md).
2. Under **Template**, click **(+) Add section** and select **Video**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.
## Add video URL
The **Video** section displays videos hosted on YouTube or Vimeo. Upload a video to YouTube or Vimeo and add the video URL in the theme editor.
STEPS
In your theme editor (**Customize**):
1. Click on the **Video** block to open the settings.
2. Copy and paste your video link from Vimeo or YouTube into the **Video URL** field.
> Make sure you copy the full URL of your video on YouTube or Vimeo, including **`https://`** at the start.
3. Click **Save**.
## Add image overlay
You can replace the default video player with a custom preview image and a simple play button. This will keep your page looking sleek and tidy.
STEPS
In your theme editor (**Customize**):
1. Click the **Video** section to open the settings.
2. Upload or select an image to display as an **Image overlay** that appears over the video with a play button.
> We recommend using an image from the video. There are no required dimensions. A minimum pixel width of 2500px will ensure optimal quality on the widest screens. see our [image guide](/spark/general/image-guide.md) for more.
3. (*Optional*.) Select an **Overlay color** to display overtop of the video and adjust the **Overlay opacity** using the slider.
> The **Overlay** lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.
> Set the opacity to **`0%`** to turn off the overlay color; set it to **`100%`** to create a solid color block with no image.
4. Click **Save**.
## Section headings
Add a section title and promotional text to your **Video** section. The section headings are included as blocks nested within the section.
STEPS
In your theme editor (**Customize**):
1. Click on the heading blocks to change the **Heading** ("Featured video") and **Subheading** displayed above the video.
> We recommended short headings of a few words or a single sentence.
2. Use the **Max width of text** slider to control the maximum width of the headings.
> Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.
3. (*Optional*.) Click the **Eye icon** to hide or unhide a block. Click **Remove block** in the block settings to delete a block.
4. Click **Save**.
## Section style
Customize the section **Style** with options for section **Spacing**, **Animation**, and **Alternate section color**.
STEPS
In your theme editor (**Customize**):
1. Click on the section to find the **Section style** settings.
2. Choose whether to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.
> Learn more about [Section animations](/spark/theme-styles/animation.md) in Spark.
3. Choose to enable the **Alternate section color** to apply the secondary section colors selected in your theme settings for colors.
4. Select a **Spacing** option to add padding around the section content.
> Add padding to either the **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
5. Select the **Spacing amount** for the padded sides of the section: **Full**, **Half**, or **Minimum**.
6. Click **Save**.
## Settings reference
Click on the section to find the following settings:
| Setting | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------- |
| Style | Use the Default or Contrast section style. The Contrast style uses the contrast colors in your Theme Settings. |
| Enable animation | Choose whether to show visual effects when scrolling, hovering, or interacting with the section. |
| Heading alignment | Position the headings and button to the left or center of the section. |
| Max width of text | Use the slider to control the maximum width and line breaks of the headings |
Click on the **Video block** to find the following settings:
| Setting | Description |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Video URL | Add the full URL to your video on YouTube or Vimeo, including https\:// at the start. |
| Featured image | Select or upload an image as a preview to overlay the video player. |
| Overlay color | Choose the color that overlays the video preview or custom image overlay. |
| Overlay opacity | Use the slider to change the transparency of the overlay color, from 0% (off) to 100% (solid).
Use this setting to change the tone of your image and increase contrast with text to make it readable.
|
| Heading | Enter heading text to display as a section title. |
| Subheading | Enter subheading text to display below the heading.
Use formatting buttons to add bold, italic, or link text.
|
\\
***
> **Related links**
>
> [Video hero](/spark/pages/theme-sections/video-hero.md)