I want to change aspect of Video between Mobile and Desktop?
Keep Desktop video aspect but mobile change to 9:16
https://2d21d4-3.myshopify.com/
LG999
Following pictures
Topic summary
A user seeks to modify video background aspect ratios differently for mobile versus desktop devices. They want to maintain the current desktop video aspect ratio while changing the mobile version to a 9:16 (vertical) format.
Proposed Solution:
- Another user provides CSS code using a media query targeting screens up to 767px width (mobile devices)
- The code adjusts the padding-top to 177% and sets the video element to absolute positioning with 100% width/height and object-fit: cover
- This approach creates a taller container for mobile while maintaining the desktop appearance
Status: The discussion appears resolved with a technical solution provided, though no confirmation of implementation or testing results has been posted.
Hi @LG999
You can use below code.β
@media screen and (max-width: 767px) {
.section-template--14823502184550__9e36d8d0-1c42-442e-b6ce-923c3796141c-padding {
position: relative;
padding-top: 177%;
}
.section-template--14823502184550__9e36d8d0-1c42-442e-b6ce-923c3796141c-padding video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
1 Like