Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Featured product video to autoplay instead of thumbnail

Solved

Featured product video to autoplay instead of thumbnail

helpcomp
New Member
8 0 0

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 😊

Accepted Solutions (2)
EBOOST
Shopify Partner
1247 324 373

This is an 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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

EBOOST
Shopify Partner
1247 324 373

This is an 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

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

View solution in original post

Replies 16 (16)

EBOOST
Shopify Partner
1247 324 373

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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
helpcomp
New Member
8 0 0

Unfortunately that didn't work

EBOOST
Shopify Partner
1247 324 373

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

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
helpcomp
New Member
8 0 0

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
Shopify Partner
1247 324 373

This is an 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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
helpcomp
New Member
8 0 0

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

helpcomp
New Member
8 0 0

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

EBOOST
Shopify Partner
1247 324 373

This is an 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

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
helpcomp
New Member
8 0 0

I really can't thank you enough! Working perfectly

helpcomp
New Member
8 0 0

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

EBOOST
Shopify Partner
1247 324 373

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

.

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
helpcomp
New Member
8 0 0

Unfortunately neither worked, both stop the video playing again

EBOOST
Shopify Partner
1247 324 373

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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
Nardu_M
Shopify Partner
10 0 1

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

yami1
Visitor
1 0 0

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

EBOOST
Shopify Partner
1247 324 373

Hi @yami1 ,

You can update code these steps:

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

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

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips