Double video thumbnail on product page (mobile view)

[mas_prim]

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

[PageFly-Victor]

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

}

}.

Best Regards;

PageFly

[mas_prim]

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:

 

Thank you

Tereza, Primeros

[PageFly-Victor]

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

[mas_prim]

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:

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

[PageFly-Victor]

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

[mas_prim]

Yes exactly! 

[PageFly-Victor · 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]

Hi!

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

Thanks!

Kristi