# Video

{% hint style="danger" %} <mark style="color:red;">Theme retirement</mark> Ira 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/ira/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 [Mosaic grid](https://help.fluorescent.co/ira/sections/mosaic-grid-2-columns#add-autoplay-video), and [Image with text](https://help.fluorescent.co/ira/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/ira/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/ira/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/ira/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. 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 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**.

</details>

## Section headings

Add a section title and promotional text above your **Video**. The section headings are included as blocks nested within the section.

<details>

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

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

</details>

> **R**

<br>

***

> **Related links**
>
> [Image with text](https://help.fluorescent.co/ira/sections/theme-sections/image-with-text)