Video
Present one hosted or external video with an optional text overlay.
Use Video for one focused piece of motion, such as a campaign film, product demonstration, or brand story. The section accepts a Shopify-hosted video or a YouTube/Vimeo URL, with separate source and ratio controls for desktop and mobile.
Add a video
- In the Shopify Theme Editor, add a Video section to a supported template.
- In Media, choose a Desktop video or enter an External video URL. A hosted video takes precedence when both are present.
- Add a Poster image when the first frame is not a useful preview or when the section needs a meaningful still before playback.
- Use the Text block only when a short overlay improves the video’s context. Preview the section with playback stopped and started before publishing.
Media
| Setting | What it controls | Options or default |
|---|---|---|
| Desktop video | The primary Shopify-hosted video source. | No source is selected by default. |
| Mobile video | An optional mobile-specific hosted source. | When blank, the desktop video is used. If it is the only hosted video, it is used at every size. |
| External video URL | A provider-hosted video when no Shopify-hosted video is selected. | YouTube or Vimeo. The schema includes a default example URL; replace it with the intended video or clear it when using a hosted video. |
| Poster image | The still shown before playback or when the video cannot play. | Uses the hosted video’s preview image when blank. The exact provider fallback should be checked in the browser. |
If a Shopify-hosted video and an external URL are both configured, the hosted source is selected first by the current implementation. Do not use the external URL as a fallback for a hosted video without verifying the resulting state.
Playback
| Setting | What it controls | Options or default |
|---|---|---|
| Autoplay | The schema-level request for automatic playback of Shopify-hosted video. | On or off; default Off. The schema describes muted playback that pauses when the video is not visible. External videos start after the visitor selects Play. |
| Loop video | Repeats the hosted video after it ends. | On or off; default Off. Provider-specific external-video behavior remains verification pending. |
Autoplay should be treated as optional enhancement. Keep the poster, text, and first-frame context useful when autoplay is off, blocked by the browser, or disabled by reduced-motion preferences. The current section markup carries the Autoplay value, but the current video controller does not visibly consume that value to start hosted playback automatically. Treat automatic playback as verification pending until the Shopify owner accepts the browser behavior.
Layout
| Setting | What it controls | Options or default |
|---|---|---|
| Full width | Whether the video frame uses the full available page width. | On or off; default On. |
| Allow transparent header | Allows the header to overlay the video when this is the first template section and the header’s transparent mode is enabled. | On or off; default On. |
| Desktop ratio | The frame ratio used on larger screens. | Original, 16:9, 21:9, 32:9, or Fullscreen; default 16:9. |
| Mobile ratio | The frame ratio used on smaller screens. | Original, Square, 3:4 portrait, 4:3 landscape, or Fullscreen; default 3:4 portrait. |
| Media fit | How the selected source fills the frame. | Cover or Contain; default Cover. |
Cover fills the frame and may crop the source. Contain keeps the complete source visible and may leave space around it. Confirm the focal subject at both ratios, especially when a desktop video is reused on mobile.
Style
| Setting | What it controls | Options or default |
|---|---|---|
| Text color | The color of the play control and optional Text block. | Theme background color by default. |
| Overlay color | The color layered over the media to support readable foreground content. | Theme brand color by default. |
| Overlay opacity | The strength of the overlay. | 0–80%, step 5%; default 20%. |
Check the overlay against light and dark frames, not only the poster. If the section has no text overlay, use the lowest opacity that keeps the play control clear without hiding important media.
Text block
The section supports up to one Text block. Its only setting is Text, with the default value A story in motion. Keep the copy short enough to remain legible at the selected mobile ratio. The block is shown as an overlay and should not contain information that is unavailable from the video, poster, or surrounding page content.
Desktop and mobile behavior
- The Mobile video source is optional. When it is blank, the desktop source is used; the current schema also states that a mobile source can be used at every size when it is the only hosted video.
- The desktop and mobile ratio controls change the frame rather than editing the source file. Review crop and subject placement after changing Media fit.
- Fullscreen uses the available fullscreen media height; exact viewport behavior requires browser acceptance.
- If Allow transparent header is on, verify the first section with both a transparent and a regular header state.
- Mobile autoplay, poster loading, external-provider consent, and source switching still require an approved browser check.
Media recommendations
Choose a poster that communicates the video’s subject without playback. Provide a mobile source when the desktop composition does not keep its subject visible in the mobile frame. Confirm that the source, poster, and text remain useful with slow connections and with playback blocked. Exact file dimensions and encoding recommendations are not established by the current documentation evidence.
Accessibility and motion
- Keep the play control usable with a keyboard and verify its label in the rendered page.
- Provide captions or an equivalent text alternative when speech carries meaning; do not place essential instructions only in audio.
- Make the poster and Text block understandable before playback begins.
- Check Autoplay with global Reduce animation and the device’s
prefers-reduced-motionsetting. The reduced-motion fallback and whether autoplay is suppressed in every browser need acceptance evidence. - Avoid flashing frames and unnecessary looping. If motion is decorative, the page should remain understandable when playback is stopped.
Common issues
The external video does not play
Confirm that the URL is a supported YouTube or Vimeo URL and that no Shopify-hosted video is selected. A hosted video takes precedence over the external URL. Provider consent and playback may also vary by browser.
The poster is not the expected image
Add an explicit Poster image. When it is blank, the section requests the hosted video’s preview image; this fallback should be checked for the selected provider and source.
Autoplay does not start
Autoplay can be blocked by browser policy or reduced-motion preferences. The current schema describes muted hosted autoplay, but the current controller still needs browser verification for this setting. Keep the section useful with Autoplay off and provide a poster.
The mobile composition is cropped
Select a Mobile video, try Original or another Mobile ratio, and compare Cover with Contain. Review the result at the target device sizes before publishing.
Text is difficult to read
Adjust Text color, Overlay color, and Overlay opacity, then inspect several frames. A transparent header can place navigation over the same media, so check the header controls as well.
Related guides
- Media slideshow for multiple image or video slides with navigation and autoplay controls.
- Split media banners for two linked media panels.
- Flexible media grid for mixed image, video, and text blocks.
- Animation for global motion and reduced-motion controls.
Evidence boundary
The exact setting labels, defaults, options, and block limit are based on the current Strata schema. The current page has no approved screenshot. A final guide should add a privacy-cropped Theme Editor view plus accepted desktop/mobile checks for poster, hosted playback, external playback, source fallback, transparent header, autoplay, loop, and reduced motion. Do not treat the schema’s Autoplay description as confirmed browser behavior until that evidence is captured.