How can I fit video in my product page with Tinker Theme

Technical Q&A

Topic summary

Issue: Product-page video in Shopify’s Tinker theme renders oversized; prior attempts adding CSS to base.css didn’t help.

Guidance offered:

  • Process/format the video for the target display (matching size and aspect ratio). Aspect ratio = the width:height relationship; mismatches can cause overflow or letterboxing.
  • Styling or JavaScript might be needed, but first share a publicly accessible URL; screenshots are only supplementary.

Update:

  • A public product URL was shared.
  • The video was reformatted to 800×800 with a white background to fill space (avoiding black bars). Original goal was 1920×1080 (16:9).

Outcome:

  • The reformatted 800×800 video now fits and looks acceptable in the current layout, per feedback.
  • No theme code change or specific CSS/JS fix was provided; solution was achieved via video asset reformatting.

Status:

  • Practically resolved. If maintaining 16:9 (1920×1080) is required, no concrete code solution was provided in-thread; further theme-specific CSS/JS or settings would be needed.
Summarized with AI on December 11. AI used: gpt-5.
1

Hi Community,

I am using Tinker theme for my Shopify store and when I play the video in the product page, it is huge and doesn’t fit the window. I’ve tried searching for answers everywhere with codes being added to the base.css but none worked. I’m obviously looking at the wrong place. Any help would be highly appreciated. Here is a screenshot of the page…

Screenshot Capture - 2025-11-22 - 18-28-58
Screenshot Capture - 2025-11-22 - 18-28-581920×1131 244 KB

2

Hi @CooperandCharlie :waving_hand: Just process and format the video for it’s target display.
After that it turns into guesswork of aspect-ratios, styles, and or javascript.

Beyond that ALWAYS keep other people in mind when seeking help
provide PUBLICLY INSPECTABLE URLS, the info is right in front of you share it.
Other people are not mind readers or magically have your exact same setup or know what you’ve done.

Screenshots are SUPPLEMENTARY, you’ve basically walked into a random store and asked strangers to diagnose engine problems from a picture of the back of the car.

3

Got it. Thanks for the help.

4

@CooperandCharlie can you please share this page link with the video on it?

5

Here is the link for the page. I reformatted the video into a 800x800 screen size to fit the window of the page and added a white background in the video to fill in the background which would’ve been black. I guess it works for now. I was hoping for 1920x1080. Thanks for the help.

6

@CooperandCharlie I see it like this, I think it looks fine

image
image1366×768 140 KB

1 Like