CSSHTML

How to Make Video Autoplay in Shopify?

Rahul Woll
Published: April 21, 2024
What's on this page:
What's on this page:
Shopify Experts

Did you faced any problem while integrating autoplay video in Shopify Stores? Here is the bottom line on autoplaying video in Shopify themes. Let’s Get Started.

How to Upload Video in Shopify?

  1. Login to Shopify Store
  2. Go to Settings
  3. Click on Files Sections
  4. Upload Video and Copy Link

Files

Next click on theme settings and find video section. Expand the section and paste video link.

CDN Shopify

HTML5 MP4 FILE ULR

Hit Save.✅

How to Use Better Video?

Audio and video can be a easiest way to engage customers, tell your story and even increase conversion rates, but recent trends by the companies that develop browsers that made it more difficult to use video and audio in your Shopify theme — especially if you want it to autoplay.

Nearly all of the major browsers — Chrome, Firefox, Edge and Safari — have at least some limitations on video, particularly video with audio, that prevents it from autoplaying and the restrictions tend to become even more strict on tablets and smartphones.

Almost all popular Web browsers have an option, whether natively built in or available via a plugin or add on, to block autoplaying video and audio based on the user’s preferences.

This can be done globally — that is the browser might be instructed to block all instances of video from starting automatically. It’s also possible to block this feature on a per site basis or the browser might leverage machine learning and a user’s browsing history to determine if an audio or video file should automatically play or not.

We won’t get into the nuances of which browser does what, not only because it changes all the time, but because there are typically so many variables that it’s difficult to outline hard and fast rules.

It’s also important to note that autoplaying rules are most likely to change — and probably get stricter as time go on — so preparing yourself now with these tips will be a good step toward making your site ready for down the road.

How to Make Video Autoplay in Shopify?

After video embedded in your video section. You have to do some code modifications in theme to make your video autoplay.

Here is the Script that works well.

APP JS

Place the following code in app.js.liquid. Click here to see Screenshot.

After this open include-video.liquid

Video LiQuid

Place the following code in include-video.liquid.

That’s It.

Note: This method is only working with video hosted on Shopify CDN along with Mp4 format.

If you are not a professional coder don’t try this on your own. This method can be only implemented by developers. Failing that, there are some Shopify Experts that specialize in smaller, theme-related tasks from us that you can check out.

Looking for help with Shopify Store Design and Development? Hire Our Expert Shopify Developers.

If you have any question let us know in comment section.