Video

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on colors settings
3. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to add hosted, YouTube, or Vimeo video with flexible control over layout, playback, captions, and overlays. It suits product demos, tutorials, campaign media, and brand storytelling where the presentation needs to feel intentional on both desktop and mobile. For broader context on how blocks work in themes, see Shopify documentation on sections and blocks

Video settings

This block supports either a hosted video file or a video service URL. For YouTube or Vimeo, use the normal video link rather than embed code. If you upload a hosted file, adding a poster image gives the video a cleaner first frame before playback starts.

Aspect ratio settings help you control the video shape across devices. Default keeps the media at its natural proportions, while a fixed ratio is useful when you want cleaner alignment with surrounding content or a consistent look across multiple video blocks.

Max width controls how wide the video can appear in the available space. A full-width layout works well for immersive media, while a narrower width can feel more balanced when the video sits near text or other content.

Playback settings control how active the block feels on the page. Autoplay can create a more dynamic experience, looping works well for short repeatable clips, and mute or player controls affect how much control visitors have during playback.

If you enable autoplay, keep the video muted for a smoother experience. Autoplay with sound is more likely to feel disruptive and may not behave consistently across devices.

Tip

For hosted video, keep file size and bitrate reasonable so the block loads faster and plays more smoothly, especially on mobile.

Caption settings

Use the caption to add context above or below the video, such as a short explanation, product detail, or campaign message. It works best when it supports the media instead of repeating what viewers can already see.

Caption position helps you decide whether the text should introduce the video before playback or act as follow-up context underneath it. Text alignment and size should match the surrounding content so the block feels integrated rather than detached.

Overlay settings

Overlay settings place a color or gradient over the video area. This is useful when you want a more branded presentation, stronger contrast for icons, or a more intentional paused-state appearance.

Opacity determines how much of the video remains visible beneath the overlay. Lower opacity keeps the media more prominent, while higher opacity creates a stronger visual treatment.

Overlay style controls when the overlay is shown. An always-visible overlay is best when the video is part of a highly styled layout, while showing it only when paused keeps playback cleaner.

Choosing Always show turns off video player controls, even if controls are enabled elsewhere in the block.

Alignment settings

These settings control how the block is positioned within the available space on desktop and mobile. They are useful when the video should align differently depending on screen size or the surrounding layout.

Separate desktop and mobile alignment can help a block feel balanced on wide screens without forcing the same placement on smaller devices.

Standard block settings

Color settings

These settings override the block’s default colors for elements such as borders, icons, and caption text. Use them when the video needs stronger contrast or a closer match to a specific campaign or content area. For more detail, see the source-provided color settings reference.

Visibility settings

Visibility settings let you hide the block on desktop or mobile. This is helpful when you want different media treatments for different screen sizes, such as a wide video on desktop and a simpler alternative on mobile. For more detail, see the source-provided visibility settings reference.

Editor settings

Editor settings only affect how the block is labeled in the editor sidebar. A custom editor title is useful when you have multiple video blocks and want to identify them quickly by placement or purpose.

Usage notes

1. Choose the right source. Use a hosted file when you want tighter control over presentation, or a YouTube or Vimeo link when you prefer to manage the video on that service.
2. Match the shape to the layout. Use natural proportions for straightforward embeds, and switch to fixed ratios when you need a more uniform grid or cleaner responsive layout.
3. Use overlays with restraint. Add just enough overlay color or gradient to support branding or contrast without making the video feel dim or obscured.
4. Keep captions focused. A short caption is most effective when it explains why the video matters or points viewers to the key takeaway.
5. Test on mobile. Full-width video, autoplay, and large hosted files can feel heavy on smaller screens, so check the block on mobile before publishing.
6. Review both viewports. Desktop and mobile controls can affect alignment, visibility, and media behavior differently, so confirm both layouts before you finish.
7. Use overrides intentionally. Blank or default-style values usually preserve the surrounding fallback styling, while explicit colors, gradients, or separate desktop and mobile media choices make the block feel more independent.
8. Check commerce behavior in context. If the video is tied to product or cart actions, verify the selected product, variant, quantity, and availability so the configured actions match the page state.