How can I autoplay a featured product video on my webpage?

[biznazz101]

Hello, I would like to make the video in this featured products section autoplay either on scroll, or if that is not possible just upon landing on page would like for it to begin playing. I have found some posts with similar requests for help but couldn’t get them to work with my theme (latest version of refresh).

Also if anyone has a quick way to do the same on the main product page that would be great.
Store: https://le0rz1khpd8nrrp6-65197605103.shopifypreview.com

Thank you for the help!

[BSS-Commerce]

You can try the following steps:

Step 1:


Step 2: Locate the theme.liquid file and add the following code snippet at the end of the file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script>
      	$(document).ready(function(){
      		if($('button.deferred-media__poster').length > 0){
      			$("button.deferred-media__poster").click();
      			$(".product__media-item video").on("loadeddata", function() {
      			  	$(".product__media-item video").each(() => {
                      this.play()
                    })
      			});
      		}
      	});
  </script>
  <style>
       .product .global-media-settings:after {
         	display: none;
       }
    
        @media screen and (max-width: 749px){
        	.product .product__modal-opener {
        		display: none!important;
        	}
        	.product .deferred-media {
        		display: block!important;
        		width: 100%;
        	}
        }
  </style>

Hope it can help you!

[biznazz101]

Hello, that did have some sort of effect on the video, as it is auto playing in the theme editor, but did not make it auto play on the live site. Here is the result:

https://ubxfbrjpcxizhiwm-65197605103.shopifypreview.com
Pass: Tiloht

Thanks for your help!

[BSS-Commerce]

I accessed the storefront through the shared preview link and noticed that the video was playing automatically. I’m not sure why it’s not playing on the live site. Could you please share the actual storefront link (not the preview link) with us?"

[biznazz101]

Ahh, yes you are correct. It must be something with my browser, I have encountered similar issues lately.

Thanks so much for the help!

[plantelavie2020]

Hello I tried this with the youtube video i wanted to have autoplay on my homepage. Nothing happened it is still a static youtube window with no autoplay- any reason why?

[anatchim]

@BSS-Commerce

Hi there!

I’m trying to make my video

autoplay, tried every bit of code that I could find, to no avail, until I got to yours…

I was able to make the autoplay work with your code, however:

• on the desktop, the page scrolls down a bit to show the video (my product pages have many photos, the video is the 3rd image)

• on mobile, the gallery also scrolls immediately to the video, plus all my other product photos are not showing… only the video is showing

…my questions:

• can the page be loaded normaly, without the “scroll to video” thing

• how to fix the fact that the product photos are hidden on mobile?

• and finally, can the video controls be hidden as well?

I would deeply appreciate your help! Thank you

on product page to