Video
A Shopify, YouTube or Vimeo video as an inline player, a muted background loop, or a poster that opens a lightbox. Nothing loads until play.
- Category
- Image and video
- Use on
- Home, Product, About, Landing pages
- Reads
- Shopify video or YouTube / Vimeo link
- Size
- 41 KB, small script included
- License
- MIT, free for client work
In short
Video is a free Shopify section that shows a Shopify-hosted video or a YouTube or Vimeo link as an inline player, a muted background loop with a pause button, or a poster that opens the video in a lightbox. The player is only created on play, or when a background video scrolls near, and YouTube plays from youtube-nocookie.com. It works in Online Store 2.0 themes without an app.
When to use it
- A brand or making-of film on the home or about page, opened from a poster in a lightbox
- An ambient muted loop behind a heading and button as a hero
- A product demo or how-to clip played inline on a product or landing page
In the theme editor
- Eyebrow, heading, text, one button; heading tag (H1–H3 or paragraph) and size
- Display: inline player, muted background loop, or poster that opens a lightbox
- Shopify-hosted video or YouTube / Vimeo link, video title for screen readers
- Poster image for desktop and mobile; play button text or icon only
- Inline options: muted autoplay, start muted, controls; loop for inline and lightbox
- Shape per device (16:9, 21:9, 4:3, 1:1, 9:16), page or full width, corner radius
- Text above or over the video, alignment per device, overlay color and opacity
- Background, text, text over video, accent and text on accent colors
- Top and bottom padding per device, show on desktop/mobile only, anchor ID
Files
sections/lib-video.liquidView the code
snippets/lib-image.liquidView the code
snippets/lib-button.liquidView the code
Written in plain Liquid, CSS and, where needed, a small script. No app, no dependencies.
How to add it to your theme
- Copy the section file into your theme’s sections folder, and any snippet it lists into snippets.
- In the theme editor, choose Add section and pick the one that starts with “Lib ·”.
- Replace the sample text with your store’s own, and set the colors to match your brand.
Questions
- Does the video slow down the page?
- No player loads with the page. Only the poster image is loaded; the video or iframe is created from an inert template when the visitor presses play, opens the lightbox, or, for background and autoplay videos, when the section comes within 200px of the viewport.
- Is it privacy-friendly for YouTube and Vimeo?
- YouTube embeds use youtube-nocookie.com and Vimeo embeds add dnt=1 (do not track). Inline (without autoplay) and lightbox players are only embedded on play, so visitors who never press play never contact YouTube or Vimeo. Background and autoplay videos load when the section scrolls near.
- What happens for visitors who prefer reduced motion?
- Nothing autoplays. Background loops and inline autoplay stay on the poster; the background pause/play button then starts the video only when pressed.
- Is it keyboard and screen-reader accessible?
- The play button, the background pause/play toggle and the lightbox close button are real buttons with labels that include your video title. The lightbox is a native dialog: focus moves into it, Esc, the close button or a click outside closes it, the player is removed and focus returns to the play button.
- Can I use a different shape on mobile?
- Yes. Desktop and mobile each take 16:9, 21:9, 4:3, 1:1 or 9:16, and you can set a separate mobile poster. Background videos crop to fill the shape.
- Can the text sit over the video?
- Yes, for background and lightbox videos. Inline players always show the text above so it never covers the controls. If the text is taller than the video shape, the video area grows to fit it.
Before you publish
- The text in the demos is sample content. Replace it with facts about your own store before you publish.
- Animations are switched off for visitors who ask for reduced motion.
- Every file is checked with Shopify Theme Check before it is published here.
Need it adapted to your theme, or a section that isn’t here? See Shopify theme development.
More sections
Hero and banners
Hero banner
A full-bleed image banner with eyebrow, heading, text and two buttons over it, a separate mobile image, overlay, nine content positions and height per device.
Hero and banners
Hero slideshow
A full-width hero slideshow of up to six slides, each with its own desktop and mobile image, overlay, text and button. Swipe, autoplay, arrows and dots.
Hero and banners
Hero split
A split hero: badge, headline, supporting text, two buttons, up to three short stats and an image on either side, with a separate image for mobile.
