Shopify themes, liquid, logos, and UX
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 😊
Solved! Go to the solution
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
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
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
Unfortunately that didn't work
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
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 🙂
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
Thank you so much, you're an absolute genius!!!!
Sorry to be a nuisance, is there a way to get it working on mobile too? Thanks again
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
I really can't thank you enough! Working perfectly
Sorry, being a nuisance again, it's stopped showing the pictures now on the other featured products
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
.
Unfortunately neither worked, both stop the video playing again
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
The script worked great for product page video, thank you!
using Dawn v10.0.0
Can you please help me by telling where to paste all these codes?
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024