We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

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

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

Marcos_2025
New Member
5 0 0

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.

Replies 7 (7)

Lakshya_design
Shopify Partner
26 2 3

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

-Need a Shopify Expert? Chat on WhatsApp: [+918959753485]
-Grow Your Store with Affiliate Marketing – [UpPromote: Affiliate & Referral]
-Helpful Answer? Mark it as a solution & give it a like!
-Get Custom Shopify Solutions! Contact me for theme edits, app recommendations & store optimization.
Marcos_2025
New Member
5 0 0

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.

Lakshya_design
Shopify Partner
26 2 3

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;
}
-Need a Shopify Expert? Chat on WhatsApp: [+918959753485]
-Grow Your Store with Affiliate Marketing – [UpPromote: Affiliate & Referral]
-Helpful Answer? Mark it as a solution & give it a like!
-Get Custom Shopify Solutions! Contact me for theme edits, app recommendations & store optimization.
Marcos_2025
New Member
5 0 0

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

Marcos_2025
New Member
5 0 0

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.

CodingFifty
Shopify Partner
1102 161 190

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?

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Marcos_2025
New Member
5 0 0

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.