How to adjust video size (in a video section in my products page) so it doesn't overflow the screen?

Store Design
, , ,

Topic summary

A user is experiencing issues with an oversized video in a dedicated section at the bottom of their Dawn-themed product page. The video’s height exceeds the viewport, making it difficult to view without scrolling.

Desired Solution:

  • Video height should be 85% of viewport height
  • Width should adjust proportionally to maintain original aspect ratio
  • Solution should work responsively across devices

Attempted Fix:
A CSS solution was provided using fixed pixel dimensions (750px width, 760px height) with aspect-ratio and object-fit properties. However, this approach created new problems:

  • Video doesn’t properly adjust to screen size before or after pressing play
  • Aspect ratio appears distorted in the preview/cover state
  • Mobile display is now broken, with the video overflowing into sections below

Current Status:
The issue remains unresolved. The user has identified that fixed pixel values aren’t suitable and is seeking a viewport-based CSS solution (using vh units) that maintains aspect ratio across all screen sizes.

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

I have added a video to a video dedicated section at the bottom of my products page (Dawn themed website).

The video looks way too big on the screen - the video height is larger than the screen height.

I would like the video height to be 85% of the viewport and the width to be adjusted accordingly in order to keep the original video aspect ratio.

Does anyone know how to do it?

I suppose it involves adding custom CSS but I’m not a coder.

2

Hello @Marcos_2025
Can you please provide me with the preview URL of the theme

3

Hey! @Marcos_2025 ,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

4

Hello @Lakshya_design , here is the URL:
https://1a8cnd-nf.myshopify.com/products/misturador-monocomando-elara

The video I’m talking about is at the bottom of the page.

5

Hello @CodingFifty , here is the URL:
https://1a8cnd-nf.myshopify.com/products/misturador-monocomando-elara

The video I’m talking about is at the bottom of the page.

6

Hello @Marcos_2025

  1. Navigate to Online Store > Themes
  2. Click on Customize for your active theme
  3. Click on Edit Code
  4. Find and open the file: base.css and add this code at the end of the fileGo to your Shopify Admin
.video-section__media.deferred-media {
    max-width: 750px;
    margin: 0 auto;
}

.video-section__media.deferred-media video {
    aspect-ratio: 1/0.5;
    object-fit: cover;
    height: 760px;
}
7

I pasted the code and,

AFTER I PRESS PLAY, video looks smaller but it isn’t adjusting to the screen size. It will only fit the screen If I press F11 (Full Screen), otherwise it will be too big.

BEFORE I PRESS PLAY, the video cover still looks enormous and now the aspect ratio is messed up.

See: https://1a8cnd-nf.myshopify.com/products/misturador-monocomando-elara

8

One more thing, I just realized that this code modification messed up with the video size on the mobile (looks enormous now and overflows to the section below).
It seems like going for a fixed amount of pixels for the video dimensions is not the way to go. Ideally, the video height should be 85% of the viewport height and the video width should be adjusted accordingly in order to keep the video aspect ratio.
Can we make a CSS code with the these “rules”?
Again, I’m not a coder so I have no idea what can and what can’t be done.