video to continuously play

Shopify Discussion
,

Topic summary

A user wants to make a video autoplay continuously on their Shopify store to mimic a GIF, without requiring a play button click.

Solution Provided:
Multiple respondents recommend using HTML5 video attributes in Shopify’s Liquid code:

  • autoplay - starts video automatically
  • loop - restarts video when it ends
  • muted - required for autoplay to work in modern browsers
  • playsinline - prevents fullscreen mode on mobile devices

Implementation Options:

  1. Use theme’s built-in Video Section with “Autoplay” option if available
  2. Add custom HTML/Liquid code via Online Store > Themes > Edit Code
  3. Insert code in Custom HTML or Custom Liquid section

Additional Recommendation:
One contributor suggests using HandBrake (free tool) to properly encode videos before uploading, with specific settings:

  • Passthru Common Metadata
  • Web Optimized (enables faster streaming)
  • Align A/V Start (syncs audio/video)

Important: Test on both desktop and mobile devices to ensure compatibility across browsers.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Ecomowner_0-1741665137219.png
Ecomowner_0-1741665137219.png1268×676 150 KB

anyone know how to get a video to continually play without having to press the play button, I want it to resemble a gif

2

hi @Ecomowner

You can achieve that by embedding the video with the Autoplay, Loop and Muted attributes.

Here’s an example of how you can add it in Shopify’s Liquid code:

Key Notes:

  • Autoplay: Starts the video automatically.
  • Loop: Ensures the video restarts when it ends.
  • Muted: Videos with autoplay typically need to be muted to comply with browser policies.
  • Playsinline: Ensures the video plays inline on mobile devices instead of fullscreen.

If you’re adding this via a Shopify theme’s section or block, you can reference the video file directly from your assets folder or via a URL. Let me know if you need more guidance!

3

Hi,

Hope this will help

If your theme has a Video Section, add a video and look for an “Autoplay” option and turn it ON.

Other method you can use following example code (theme.liquid)
4

It’s pretty simple.

Edit Your Theme:

  • Navigate to Online Store > Themes > Actions > Edit Code in your Shopify Admin.

Add the Video Code:

  • Use a Custom HTML or Custom Liquid section, depending on your theme. If your theme doesn’t have a built-in video section with autoplay options, you’ll need to add custom code.
  • Insert the following HTML code where you want the video to display (replace the src URL with your uploaded video’s URL):

Attributes Explained:

  • autoplay: Starts the video automatically when the page loads.
  • loop: Makes the video restart automatically after it ends, mimicking a GIF’s continuous play.
  • muted: Ensures the video has no sound, which is required for autoplay to work in most modern browsers.
  • playsinline: Allows the video to play inline on mobile devices without forcing fullscreen mode.
  • style=“width: 100%;”: Adjusts the video size to fit its container (optional; tweak as needed).

Test on both desktop and mobile devices to confirm compatibility.

Important Notes:

  • Theme-Specific Adjustments: Some Shopify themes (e.g., Dawn, Debut) might require you to modify specific files like theme.liquid or a section file (e.g., custom-liquid.liquid).
5

Screenshot 2025-03-11 at 06.37.08.png
Screenshot 2025-03-11 at 06.37.08.png997×782 237 KB

Forgot to mention that it’s very important to properly encode a video before uploading. I highly recommend using the handbrake.fr tool (it’s 100% free) and adding the highlighted settings to your encoding flow:

  • Passthru Common Metadata: Keeps video info intact.
  • Web Optimized: Enables faster streaming start.
  • Align A/V Start: Syncs audio and video playback.