# Video

Source: <https://docs.ictsviluppo.example/dossier/sections/section-video/>

Video shows one video behind a cover image with a play button, together with a caption, a heading, a short text and a link. Use it to show how your clothes are made, a campaign film or a behind the scenes story. You can add it to any page.

## Upload a video or use YouTube or Vimeo

You have two choices:

- **Video**: a file uploaded to Shopify. The play button shows the video’s length.
- **YouTube or Vimeo URL**: paste the link to the video. YouTube and Vimeo don’t share the length, so none is shown.

If you set both, the section shows the uploaded video. A new Video section starts with a sample YouTube video, so remember to replace or remove the URL. Without any video, the cover is shown without a play button.

The video never starts on its own: it plays only when a customer selects the play button, and then shows its own player controls. This keeps the page fast and doesn’t distract customers who are reading.

## Choose the cover

**Cover image** is shown before the video plays, 1920 x 1080px recommended. Without one, an uploaded video shows its own preview frame. A YouTube or Vimeo video without a cover image shows a placeholder illustration, so add a cover image when you use them.

**Cover overlay opacity** tints the cover with the background color of the section’s color scheme. **Color scheme** also colors the play button and the gradient behind the text.

## Name the video for screen readers

Screen readers read the play button as “Watch video” followed by the video’s name:

- For an uploaded video, the name is its alternative text. Add it in **Content > Files** in your Shopify admin, the same way as for images.
- For YouTube and Vimeo videos, and for uploaded videos without alternative text, the section’s **Heading** is used.

Write the cover image’s alternative text in **Content > Files** too.

## Place the text

On tablets and computers the caption, heading, text and link sit at the bottom of the cover. When the video starts, the text is removed so it doesn’t cover the player controls. On phones the text sits below the video.

The link shows only when you fill in both **Link label** and **Link**.

## Make it touch the sections around it

With **Use full page width** on, the video reaches the edge of the screen. **Vertical spacing** is set to **None** by default, so the section touches the sections above and below like a solid band. Choose **Compact**, **Regular** or **Spacious** to add space around it.

## Show it only between two dates

Turn on **Schedule visibility** and set a start, an end, or both. See [Scheduling](https://docs.ictsviluppo.example/dossier/scheduling).

## Settings

| Setting | Type | Default | Options |
| - | - | - | - |
| **Video** — Upload a video, or add a YouTube or Vimeo URL below. If you add both, the section shows the uploaded video. Add alt text to the video in Files: screen readers announce it on the play button. | Video | — | — |
| **YouTube or Vimeo URL** — Screen readers announce the section heading on the play button. | Video URL | https\://www\.youtube.com/watch?v=\_9VUPq3SxOc | — |
| **Cover image** — 1920 x 1080px recommended. Replaces the video preview. Add alt text to the image in Files. | Image | — | — |
| **Cover overlay opacity** | Slider | 0% | 0%–80%, step 5 |
| **Text** | | | |
| **Caption** | Text | Video | — |
| **Heading** | Text | Tell your brand story | — |
| **Text** | Multi-line text | Pair the video with a short description. | — |
| **Link label** | Text | — | — |
| **Link** | Link | — | — |
| **Layout** | | | |
| **Use full page width** | Checkbox | On | — |
| **Vertical spacing** | Drop-down | None | None, Compact, Regular, Spacious |
| **Color scheme** — Sets the background of the play button and of the gradient behind the text. | Color scheme | scheme-3 | — |
| **Schedule** | | | |
| **Schedule visibility** | Checkbox | Off | — |
| **Start date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to show it right away. Shown when *Schedule visibility* is on | Text | — | — |
| **End date and time** — Use the format YYYY-MM-DD HH:MM, in your store's time zone. Leave empty to keep showing it. Shown when *Schedule visibility* is on | Text | — | — |