Skip to main content

Video Block

Embed and display videos from metafields on your storefront, supporting multiple platforms.

Supported Metafield Types​

Single value types:

  • file_reference — a single Shopify-hosted video
  • url — a single video URL (YouTube, Vimeo, or direct)

List types:

  • list.file_reference — multiple Shopify-hosted videos in a grid
  • list.url — multiple video URLs in a grid

Supported Platforms​

  • Shopify-hosted videos Videos uploaded directly to Shopify (rendered with native video controls)
  • YouTube Embed any public YouTube video (supports youtube.com/watch and youtu.be short links)
  • Vimeo Embed any public Vimeo video
  • Direct video URLs Any direct link to a video file (rendered with HTML5 <video> tag)

Customization Options​

Aspect Ratio​

Select the aspect ratio for YouTube and Vimeo videos to ensure proper display.

Video Grid from List Types​

Using list.file_reference or list.url metafields, you can display multiple videos in a responsive grid layout.

Grid Columns​

Configure the number of columns (1–6) to control how videos are arranged. Videos are distributed evenly across the grid.

Spacing​

Control the gap between video players in the grid.

Corner Radius​

Apply rounded corners to video containers for a modern look.

Platform Detection for URL Lists​

When using list.url, the block automatically detects the video platform for each URL and renders it appropriately:

  • YouTube URLs are embedded as iframes with the correct aspect ratio
  • Vimeo URLs are embedded as iframes via Vimeo's player
  • Other URLs are rendered as HTML5 video elements with native controls
Use Cases
  • Product demo videos Use list.file_reference to showcase multiple product angles or feature demonstrations
  • Tutorial series Use list.url with YouTube links to embed a series of how-to videos on a product page
  • Customer testimonials Display a grid of video testimonials from customers