Featured product video to autoplay instead of thumbnail

[helpcomp]

On my Featured Product it displays a thumbnail of the video instead of auto playing the video of the product. When you click on the thumbnail it takes you to another page to click on the video to play. Is there a way that instead of a thumbnail the video just plays instead?

The website address is: www.helpcomputercentre.co.uk and it's at the top of the home page.

Thanks in advance for any help 😊

[EBOOST · Accepted solution]

hi @helpcomp 

You can try this script below. It seems we need trigger play for video as well.

<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() {
			  	var video =  $(".product__media-item video").get(0);
				video.play();
			});
		}
	});
</script>
<style>
 .featured-product .global-media-settings:after {
 	display: none;
 }
</style>

Hope can help

EBOOST

[EBOOST]

hi @helpcomp 

May I suggest these steps:

1. Go to Store Online-> theme -> edit code
2. Sections/featured-product.liquid
3. Copy code below after that paste before {% schema %}

<script>
  let buttonM = document.querySelectorAll('button.deferred-media__poster');
  if(buttonM.length > 0){
    	buttonM.forEach(function(element){
      		element.click();
  		})
  }
</script>

Hope can help

EBOOST

[helpcomp]

Unfortunately that didn't work

[EBOOST]

hi @helpcomp 

Did you apply this script? I dont see it on your store. If it is not work you can try to code below?
1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Copy and insert code below to before </body> tag

<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();
	}
});
</script>

EBOOST

[helpcomp]

I removed the code from the first try. Unfortunately the 2nd attempt hasn't worked either but I've kept the code in for you to see. Thanks for your help 🙂

[EBOOST · Accepted solution]

hi @helpcomp 

You can try this script below. It seems we need trigger play for video as well.

<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() {
			  	var video =  $(".product__media-item video").get(0);
				video.play();
			});
		}
	});
</script>
<style>
 .featured-product .global-media-settings:after {
 	display: none;
 }
</style>

Hope can help

EBOOST

[helpcomp]

Thank you so much, you're an absolute genius!!!!

[helpcomp]

Sorry to be a nuisance, is there a way to get it working on mobile too? Thanks again

[EBOOST · Accepted solution]

hi @helpcomp 

you can add more CSS below:

<style>
@media screen and (max-width: 749px){
	.featured-product .product__modal-opener {
		display: none!important;
	}
	.featured-product .deferred-media {
		display: block!important;
		width: 100%;
	}
}
</style>

EBOOST

[helpcomp]

I really can't thank you enough! Working perfectly

[helpcomp]

Sorry, being a nuisance again, it's stopped showing the pictures now on the other featured products 

[EBOOST]

hi @helpcomp 

all code for  only this block. And you need note "#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87" that is an ID of block. If you remove this block after add it again you need check this ID after update again.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		if($('#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 button.deferred-media__poster').length > 0){
			$("#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 button.deferred-media__poster").click();
			$("#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 .product__media-item video").on("loadeddata", function() {
			  	var video =  $("#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 .product__media-item video").get(0);
				video.play();
			});
		}
	});
</script>
<style>
 #MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 .featured-product .global-media-settings:after {
 	display: none;
 }

@media screen and (max-width: 749px){
	#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 .featured-product .product__modal-opener {
		display: none!important;
	}
	#MediaGallery-template--16261819760883__69229733-8e33-4a8f-91bb-b71a4e728a87 .featured-product .deferred-media {
		display: block!important;
		width: 100%;
	}
}

</style>

OR

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		if($('.featured-product button.deferred-media__poster').length > 0){
			$(this).closest('.featured-product').addClass('has-video-first')
			$(".featured-product button.deferred-media__poster").click();
			$(".featured-product .product__media-item video").on("loadeddata", function() {
			  	var video =  $(" .product__media-item video").get(0);
				video.play();
			});
		}
	});
</script>
<style>
  .featured-product.has-video-first .global-media-settings:after {
 	display: none;
 }

@media screen and (max-width: 749px){
	.featured-product.has-video-first .product__modal-opener {
		display: none!important;
	}
	 .featured-product.has-video-first .deferred-media {
		display: block!important;
		width: 100%;
	}
}

</style>

EBOOST

.

[helpcomp]

Unfortunately neither worked, both stop the video playing again

[EBOOST]

hi @helpcomp 

you can try to update CSS below:

<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() {
			  	var video =  $(".product__media-item video").get(0);
				video.play();
			});
		}
	});
</script>
<style>
 .featured-product .global-media-settings:after {
 	display: none;
 }

@media screen and (max-width: 749px){
	.featured-product .product__modal-opener.product__modal-opener--video {
		display: none!important;
	}
	.featured-product .deferred-media {
		display: block!important;
		width: 100%;
	}
}

</style>

NOTE: only update .featured-product .product__modal-opener to .featured-product .product__modal-opener.product__modal-opener--video

Hope can help

EBOOST

[Nardu_M]

The script worked great for product page video, thank you!
using Dawn v10.0.0

[yami1]

Can you please help me by telling where to paste all these codes?

[EBOOST]

Hi @yami1 ,

You can update code these steps:

1. Go to Store Online-> theme -> edit code

2. Layout/theme.liquid
3. Copy and insert code to before </body> tag