Instant provides multiple options for adding video content to your pages. This guide covers the different video elements available, their configuration options, and how to use videos as background fills.
Adding Videos to the Canvas
Accessing Video Elements
Navigate to the Insert panel in the left sidebar
Hover over the Video header
The insert video popover appears with four element options
Available Video Elements
Element | Use Case |
Video | Generic video player for self-hosted videos |
YouTube | Embed YouTube videos |
TikTok | Embed TikTok videos |
Vimeo | Embed Vimeo videos |
Video Element (Self hosted)
The basic video element is for videos you host yourself, such as in your Shopify content folder.
Sizing
The video element can be sized like any other element on the canvas.
Configuration Options
In the right sidebar under the Video header:
Option | Description |
Link | Paste the URL where your video is hosted. For best results, use your Shopify content folder and copy the URL from there. |
Autoplay | Set to On, Off, or Loop |
Thumbnail | Upload a preview image displayed when the video isn't playing |
Color | Set the play button color |
Thumbnail Recommendation
Tip: Always upload a custom thumbnail. Safari does not automatically generate video thumbnails—without one, users will only see a video player with a play button and no preview image.
YouTube Element
Embed any YouTube video directly into your layout.
Configuration Options
Option | Description |
Link | Paste any YouTube video URL |
Autoplay | Configure autoplay settings (same options as generic video) |
Color | Change the play button color from red to white |
Vimeo Element
Embed Vimeo videos into your layout.
Configuration Options
Option | Description |
Link | Paste any Vimeo video URL |
Autoplay | Configure autoplay settings |
Color | Define the play button color |
TikTok Element
Embed TikTok videos into your layout.
Note: TikTok does not allow custom sizing. This is mandated by TikTok, and the video will render at TikTok's default dimensions regardless of your settings.
Configuration Options
Option | Description |
Link | Paste your TikTok video URL |
Autoplay | Turn autoplay on or off |
Background Video
Use videos as animated backgrounds for containers in your layout.
Supported Containers
Background videos can be applied to:
Row containers
Column containers
Grid containers
Adding a Background Video
Insert a container onto your canvas (or select an existing container)
Navigate to the right sidebar
Go to the Style tab
Locate Fill and click Add Fill
In the fill popover, click the Video tab (third tab)
Insert your video link
Configuration Options
Option | Description |
Link | Video URL (ideally from your Shopify content database) |
Overlay | Add a color overlay on top of the video |
Thumbnail | Set a fallback image if the video doesn't load |
Controls | Enable or disable video controls |
Background Video Behavior
Behavior | Description |
Looping | Background videos always loop continuously |
Audio | Background videos do not play audio |
Purpose | Designed exclusively for use as visual background fills |
Best Practices
Video Hosting
For self-hosted videos (generic Video element and background videos), upload your videos to your Shopify content folder for optimal performance and reliability.
Thumbnails
Always provide custom thumbnails for:
Generic video elements (Safari compatibility)
Background videos (fallback when video fails to load)
Autoplay Limitations
Important: Autoplay cannot be enforced due to browser restrictions. Videos will not autoplay when:
The device is in data saver mode
The browser blocks autoplay by default
User preferences prevent automatic media playback
Quick Reference
Task | Location |
Insert video element | Insert panel → Video → Select element type |
Add video link | Right sidebar → Video → Link |
Set autoplay | Right sidebar → Video → Autoplay |
Add thumbnail | Right sidebar → Video → Thumbnail |
Change YouTube button color | Right sidebar → Video → Color (red/white) |
Add background video | Select container → Style → Fill → Add Fill → Video tab |
Add video overlay | Right sidebar → Overlay (background video only) |
Element Comparison
Feature | Video | YouTube | Vimeo | TikTok | Background |
Custom sizing | ✓ | ✓ | ✓ | ✗ | ✓ |
Autoplay option | ✓ | ✓ | ✓ | ✓ | Always on |
Loop option | ✓ | ✓ | ✓ | ✗ | Always on |
Audio | ✓ | ✓ | ✓ | ✓ | ✗ |
Custom thumbnail | ✓ | ✗ | ✗ | ✗ | ✓ |
Play button color | ✓ | ✓ | ✓ | ✗ | N/A |