A user is experiencing an issue where product videos on their landing page cause the media container to shrink to fit the video’s dimensions, disrupting the layout consistency with product images.
Problem:
Solution Provided:
A community member suggested adding custom CSS code to the theme.liquid file (after the <head> element) to center videos within the container without resizing it.
Follow-up Concern:
The original poster asked whether these custom code changes would persist through theme updates (e.g., upgrading from Spotlight 11 to Spotlight 12).
Resolution:
The helper confirmed that custom code modifications must be manually copied and re-applied to new theme versions after updates, as they are not automatically carried over.
Hello currently my images are shown like this on my landing page media slider:
However, when I select the video, because of different dimensions for example in the first video of this product, the media box (or wrapper) shrinks to fit the video (shop link: https://rocl7ctpf39j3gf0-78669414739.shopifypreview.com ). However, I want the video to just be centered in the middle of the media container, without decreasing the size of the container. Something like in this image:
Thanks in advace!
Go to Online store > Themes > Edit code > open theme.liquid file, add this code below after element
Perfect, thank you. I was wondering, with these kinf od changes in the liquid files, in case of updates to the theme, for example currently is Spotlight 11, if the theme is updated to spotlight 12 in the future, will these changes be carried to the updated version, or not?
You must copy this code and add it to your new version