video to continuously play

[Ecomowner]

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

[Dotsquares]

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:

<video autoplay loop muted playsinline>
<source src="{{ 'your-video.mp4' | asset_url }}" type="video/mp4">
Your browser does not support the video tag.
</video>

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!

[Small_Task_Help]

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)

<video autoplay loop muted playsinline>
  <source src="your-video-url.mp4" type="video/mp4">
</video>

[atominte]

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):

<video autoplay loop muted playsinline style="width: 100%;">
  <source src="https://cdn.shopify.com/s/files/.../yourvideo.mp4" type="video/mp4">
</video>

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).

[atominte]

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.