Double video thumbnail on product page (mobile view)

Technical Q&A

Topic summary

A Shopify store owner encountered a bug where custom video thumbnails display twice on product pages in mobile view.

Initial Solution Provided:

  • PageFly support suggested adding CSS code to base.css to hide the duplicate thumbnail
  • This successfully removed the duplicate but caused the cover image to become deformed/incorrectly scaled

Follow-up Fix:
After clarifying that the goal was to hide the cover image when the video play button is clicked, PageFly provided an updated solution:

  • Delete the original CSS code
  • Add a JavaScript snippet to the theme.liquid file (before the </body> tag)
  • The new code targets the specific video modal and adjusts display properties for mobile viewports under 767px

Current Status:
Another user (jogglefactory) has reported experiencing the same issue and is seeking assistance. The discussion remains open for additional cases.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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
IMG_9579.png828×1375 391 KB

1 Like
2

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
PageFly_0-1664812179715.png409×584 189 KB

Best Regards;

PageFly

3

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
IMG_9603.jpg828×1261 151 KB

Thank you

Tereza, Primeros

4

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

5

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
KLAUS RICHTER_6.png1282×1000 509 KB

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

IMG_9605.PNG
IMG_9605.PNG828×1426 409 KB

6

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

7

Yes exactly!

8

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

1 Like
9

Hi!

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

Thanks!

Kristi