Overview
The Video block allows you to embed videos directly into your pages, either by:
Uploading a Shopify-hosted video
Embedding an external video (YouTube or Vimeo)
This block is ideal for product showcases, brand storytelling, tutorials, and background-style videos.
Where to use this block
You can use the Video block in any section that supports blocks, including:
Homepage content sections
Landing pages
Product or collection layouts
Editorial or storytelling sections
How to add this block
Open the Theme Editor
Navigate to a section that supports blocks
Click Add block
Select Video
Choose the video source and configure playback options
Video source
Source
Choose how the video is provided:
Uploaded video – Shopify-hosted video
External URL – YouTube or Vimeo
Uploaded video
Video
Select a video uploaded to Shopify.
This option provides:
Better performance
More consistent playback behavior
Full support for aspect ratio controls
Aspect ratio (uploaded video only)
Controls the displayed video ratio:
Auto (adapt to video or cover image)
Square (1:1)
Portrait (4:5)
Landscape (16:9)
📌 If Auto is selected:
Uses the uploaded video’s aspect ratio
Falls back to the cover image ratio if the video isn’t available
External video (YouTube / Vimeo)
Video URL
Paste a YouTube or Vimeo URL.
Supported platforms:
YouTube
Vimeo
Alt text
Optional accessibility text for external videos.
Notes for external videos
Aspect ratio is handled by the external platform
Sound behavior may be limited (especially on Vimeo)
Autoplay may be restricted by browser policies
Playback behavior
Autoplay
Automatically plays the video when visible.
⚠️ Browser restrictions:
Autoplay videos are usually muted by default
Sound is disabled unless autoplay is off
Enable sound
Allows audio playback.
Only available when Autoplay is disabled
Vimeo may not support sound toggling in some cases
Loop video
Repeats the video continuously.
Useful for:
Background-style videos
Short looping animations
Show controls
Displays standard video controls (play, pause, seek).
Recommended for:
Tutorials
Long-form content
Cover image
Cover image
Optional preview image shown before playback.
Best used when:
Autoplay is disabled
You want a custom thumbnail
Video loading should be deferred
Layout & size
Width
Set independently for:
Desktop
Tablet
Mobile
Width is defined as a percentage (0–100%).
Responsive behavior
The video scales fluidly based on width settings
Aspect ratio is preserved automatically
Tablet uses desktop layout by default
Borders
Optional visual styling:
Border style: None / Solid / Dashed
Border thickness
Border opacity
Border radius
Padding
Controls spacing inside the block:
Top
Bottom
Left
Right
Use padding to separate the video from surrounding content.
When the video is displayed
The Video block will display when:
A video (uploaded or URL) is selected
Or you are viewing the Theme Editor (design mode)
If no video is selected, the block will not appear on live pages.
Tips for best results
Use uploaded videos for best performance
Keep videos short and optimized
Avoid autoplay with sound enabled
Always test on mobile and desktop
Use cover images for better perceived loading speed
Common mistakes
Video not showing
No video selected
Incorrect source type chosen
Sound not working
Autoplay is enabled (sound is blocked)
Vimeo limitations
Layout looks off
Aspect ratio not suitable for content
Width set too small on mobile
Limitations
Aspect ratio control applies only to uploaded videos
External video behavior depends on the provider
Autoplay + sound may be blocked by browsers
Summary
Supports Shopify-hosted and external videos
Responsive, flexible, and lightweight
Suitable for content, storytelling, and background videos
Designed to work independently or alongside other blocks
Comments
0 comments
Please sign in to leave a comment.