autoplay video product page

Shopify Discussion

Topic summary

A user encountered an issue where product page videos became unplayable on mobile devices after removing the zoom button. The problem affected only mobile views.

Solution Provided:

  • Add custom CSS code to the theme’s base.css file
  • The CSS targets mobile screens (max-width: 580px) and modifies the display properties of video media containers
  • Implementation requires accessing Shopify Admin → Online Store → Themes → Edit code

Outcome:
The CSS solution successfully resolved the issue, restoring video playback functionality on mobile devices. The discussion is marked as resolved.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

hello

I deleted the zoom button on product page and now i cant play the video on product page on mobile.

How can i play it automatic? or just add play button in the center on video?

mobile only

https://shemaisraeljudaica.com/products/8-pair-of-crystal-shabbat-candlesticks-with-zircons

2

Hello @nadavhalevi

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search base.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media screen and (max-width:580px)
{
    .product__media-list .product-media-container.media-type-video .deferred-media 
    {
    display: block;
    }
    .product__media-list .product-media-container.media-type-video   modal-opener.product__modal-opener .product__media.media
    {
        display:none;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

3

thanks!

4

Hello @nadavhalevi

Glad the solution worked for you! Feel free to reach out if you need anything else.

5

Do you need help