Double video thumbnail on product page (mobile view)

Solved

Double video thumbnail on product page (mobile view)

mas_prim
Shopify Partner
12 0 2

Hello, 

 

we use a custom video thumbnail in our product page gallery and on mobile view there seems to be a bug that shows the thumbnail two times.

 

Does anybody have aquick solution to this?

 

https://cs.primeroscondom.com/products/the-king-extra-velke-kondomy-12ks

 

Thank you

 

Tereza, Primeros

IMG_9579.png

 

 

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

you can delete the original code and use my new code.
you add this code before the </body> tag of the theme.liquid file

<script>

window.onload=()=>{

    if(window.innerWidth<767){

$('#Deferred-Poster-Modal-23764815151194 span.deferred-media__poster-button.motion-reduce')[0].onclick=()=>{

$('.section-template--14492576677978__main-padding.refreshWithAjax .productGalleryCarousel .owl-item:last-child [data-modal="#ProductModal-template--14492576677978__main"]').css('display','none')

$('.section-template--14492576677978__main-padding.refreshWithAjax .productGalleryCarousel .owl-stage-outer.owl-height').css("height","220px")

}

}

}

</script>

View solution in original post

Replies 8 (8)

PageFly-Victor
Shopify Partner
7865 1785 3079

Hi @Mas_prim

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> base.css  paste the below code at the bottom of the file.

@media(max-width:767px){

.section-template--14492576677978__main-padding.refreshWithAjax .productGalleryCarousel .owl-item:last-child .product__media.media.media--transparent.gradient.global-media-settings{

    display:none !important

}

}.

 

PageFly_0-1664812179715.png

 

Best Regards;

PageFly

 

mas_prim
Shopify Partner
12 0 2

Hi @PageFly-Victor ,

 

thank you for a quick response. It worked, but the cover image is not a bit deformed. Any solution to this? The cover image dimensions are 1282 × 1000px

 

See the screenshot after I used the code:

 

IMG_9603.jpg

Thank you


Tereza, Primeros

 

 

 

PageFly-Victor
Shopify Partner
7865 1785 3079

you mean when you click it, it no longer has the image cover above the video, right?

mas_prim
Shopify Partner
12 0 2

No, no, when I click it, I just want the cover to disappear and play the video. The issue was that when I applied the code, the image got scaled in the wrong way – this is the original:

 

KLAUS RICHTER_6.png

 

Now the issue with double image actually returned – see video https://www.dropbox.com/s/ujgoyh18njxo59k/RPReplay_Final1664872224.mov?dl=0 

 

IMG_9605.PNG

 

PageFly-Victor
Shopify Partner
7865 1785 3079

that means you just want to lose the image when you press the play video button, right?

mas_prim
Shopify Partner
12 0 2

Yes exactly! 

PageFly-Victor
Shopify Partner
7865 1785 3079

This is an accepted solution.

you can delete the original code and use my new code.
you add this code before the </body> tag of the theme.liquid file

<script>

window.onload=()=>{

    if(window.innerWidth<767){

$('#Deferred-Poster-Modal-23764815151194 span.deferred-media__poster-button.motion-reduce')[0].onclick=()=>{

$('.section-template--14492576677978__main-padding.refreshWithAjax .productGalleryCarousel .owl-item:last-child [data-modal="#ProductModal-template--14492576677978__main"]').css('display','none')

$('.section-template--14492576677978__main-padding.refreshWithAjax .productGalleryCarousel .owl-stage-outer.owl-height').css("height","220px")

}

}

}

</script>

jogglefactory
Visitor
3 0 0

Hi!


I'm having the same problem with mobile.  Do you mind helping?  

 

Thanks!

 

Kristi