How To Adjust The SCALE of Video On My Custom Page, Need It Smaller In SCALE. SAME ASPECT RATIO

Store Design
,

Topic summary

A user needs to reduce the size of a vertical video displayed on a custom Shopify page while maintaining its aspect ratio. The video currently appears too large at the bottom of their team cars page.

Proposed Solution:
Another user provided CSS code to be added to the base.css file, targeting:

  • .media elements to adjust video height
  • .deferred-media__poster-button for player button positioning
  • Specific width and height values (400px height suggested)

Current Status:
The proposed CSS solution did not work. The original poster clarified that the video was added as a normal video element on a custom page created in Shopify, which may require a different approach than the standard theme video sections.

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

I found the section and code. I just need some knowledge to change it.
The video is far to big. As seen at the bottom of my page, (the vertical video) https://rmtperformance.com/pages/our-team-cars

RMTPerformance_0-1710698828114.png
RMTPerformance_0-1710698828114.png1895×839 53.6 KB

2

Hello @Reinhart ,

To adjust the video size, You need to add this code

Go to Shopify admin > Themes > Edit Code > Search Base.css file and put the given code at the bottom of base.css file

This Code for adjust the video size

.media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
     
    height: 400px; /* adjust the height according to your requirement */
    width: 100%;
}

video size.png
video size.png1319×590 136 KB

Now Add this code for adjust the Player Button

.deferred-media__poster-button{
top: 12%;
}

vdeo button.png
vdeo button.png1365×588 145 KB

3

Thank-you for your efforts, this did not work unfortuantley.

This page is a page created in Shopify. And the video was added using a normal video element if that helps at all.