# Video

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> | Context is no longer available on the Shopify theme store. **Theme support and updates for current users will end after May 18, 2024**. [Learn more here](https://help.fluorescent.co/context/readme/theme-retirement).
{% endhint %}

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](https://help.fluorescent.co/context/sections/theme-sections/video-hero), [Mosaic grid](https://help.fluorescent.co/context/sections/mosaic-grid-2-columns#add-autoplay-video), and [Image with text](https://help.fluorescent.co/context/sections/theme-sections/image-with-text) 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](https://help.fluorescent.co/context/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/context/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

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](https://help.fluorescent.co/context/general/editing-themes/using-templates).
2. Under **Template**, click **(+) Add section** and select **Video**.
3. Click and hold the drag-and-drop handles **`⋮⋮`** to re-order your sections.

</details>

## 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.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

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**.

</details>

## 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.

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

In your theme editor (**Customize**):

1. Click the **Video** section to open the settings.
2. Select or upload a **Featured** **image** as a preview to overlay the video player.

   > 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](https://help.fluorescent.co/context/general/image-guide/image-sizes) to learn 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**.

</details>

## Settings reference

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.                                                                                                                                   |
| Meta text       | Enter text to display as a small heading above the section title                                                                                                                                      |
| Meta text color | Select the color of the meta text.                                                                                                                                                                    |
| 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. |

<br>

***

> **Related links**
>
> [Video hero](https://help.fluorescent.co/context/sections/theme-sections/video-hero)