Instant provides multiple ways to add video content to your pages: self-hosted videos through the Media element, embedded videos from platforms like YouTube, TikTok, and Vimeo, and background videos for containers.
Overview
Video Type | Element | Best For |
Self-hosted | Media element | Full control, custom thumbnails, product videos |
YouTube | YouTube element | YouTube-hosted content |
Vimeo | Vimeo element | Vimeo-hosted content |
TikTok | TikTok element | TikTok-hosted content |
Background | Container fill | Animated backgrounds |
Self-Hosted Videos (Media Element)
For videos you host yourself, use the Media element. This is ideal for product videos, promotional content, and any video stored in your Shopify content folder.
Adding a Self-Hosted Video
Navigate to the Insert panel in the left sidebar
Hover over Media
Drag the Media element onto your canvas
Select the Media element
In the right sidebar, click on the Content field
In the popover, select the Video tab
Adding the Video Link
Insert the video URL in the provided field
Ideally, host your video in your Shopify content folder and paste the URL from there
Thumbnail Image
Upload a thumbnail (poster image) that displays:
Before the video plays
When video playback is blocked
As a fallback if the video cannot load
Recommendation: Always upload a thumbnail. Safari does not automatically generate video thumbnails—without one, users will only see a play button with no preview.
Autoplay Options
Option | Behavior |
On | Video attempts to autoplay when loaded |
Off | Video waits for user interaction |
Loop | Video autoplays and repeats continuously |
Controls
When autoplay is set to Loop, you can choose to show or hide video controls.
Dynamic Product Videos
When the Media element is inside a container connected to a Shopify product:
Click the database icon next to the Content field
Select from dynamic video options linked to your product configuration
Embedded Videos
Embed videos from popular platforms directly into your layouts.
Accessing Embedded Video Elements
Navigate to the Insert panel in the left sidebar
Hover over the Media header
Select from the available platform embeds
Available Embedded Video Elements
Element | Use Case |
YouTube | Embed YouTube videos |
TikTok | Embed TikTok videos |
Vimeo | Embed Vimeo videos |
YouTube Element
Embed any YouTube video directly into your layout.
Configuration Options
Option | Description |
Link | Paste any YouTube video URL |
Autoplay | Configure autoplay settings |
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 |
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
Don't rely on autoplay for critical content—always ensure your layout works well with videos paused.
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 folder) |
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 and background videos, upload your videos to your Shopify content folder for optimal performance and reliability.
Thumbnails
Always provide custom thumbnails for:
Self-hosted videos via Media element (Safari compatibility)
Background videos (fallback when video fails to load)
Autoplay
Don't rely on autoplay for critical content—always ensure your layout works well with videos paused, as autoplay may be blocked by user settings or browser policies.
Quick Reference
Task | Location |
Add self-hosted video | Insert panel → Media → Content → Video tab |
Add video thumbnail | Media element → Content → Video → Upload thumbnail |
Set autoplay (Media) | Right sidebar → Autoplay |
Insert embedded video | Insert panel → Media→ Select platform |
Add embedded video link | Right sidebar → Media → Link |
Change YouTube button color | Right sidebar → Media → Color (red/white) |
Add background video | Select container → Style → Fill → Add Fill → Video tab |
Add video overlay | Right sidebar → Overlay (background video only) |
Video Type Comparison
Feature | Self-Hosted (Media) | YouTube | Vimeo | TikTok | Background |
Custom sizing | ✓ | ✓ | ✓ | ✗ | ✓ |
Autoplay option | ✓ | ✓ | ✓ | ✓ | Always on |
Loop option | ✓ | ✓ | ✓ | ✗ | Always on |
Audio | ✓ | ✓ | ✓ | ✓ | ✗ |
Custom thumbnail | ✓ | ✗ | ✗ | ✗ | ✓ |
Play button color | ✗ | ✓ | ✓ | ✗ | N/A |
Dynamic product content | ✓ | ✗ | ✗ | ✗ | ✗ |