Shopify themes, liquid, logos, and UX
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
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.
Hello @Marcos_2025
Can you please provide me with the preview URL of the theme
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.
Hello @Marcos_2025
.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;
}
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
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.
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?
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.