Shopify themes, liquid, logos, and UX
I'm having an issue trying to resize the Dawn banner so it displays more prominently on mobile view. Desktop is fine but mobile does not stretch the banner so the content is very small.
Also, does anyone know how to make the banner (video) auto play on mobile? Currently the image is static but if you click on it it will pop-out and play on a new screen. I would like to know if it can simply play once on load and then stop without poping-out.
Thanks all!
Hey @doglasa,
Can I have the link to your store?
Hey @doglasa,
You can increase the height of the banner so it's takes up more space and it's looks more prominent, but there's nothing to do for the video itself because it's a landscape video and mobile view is portrait.
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
If you want you can increase the height more
<style>
@media only screen and (max-width: 749px) {
video#myVideoBackground {
height: 50vh !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
Additional Tip
You can also use this to "zoom" more into the video, but it might cut portions of the video on certain screen sizes. Not really a recommended approach.
<style>
@media only screen and (max-width: 749px) {
video#myVideoBackground {
height: 50vh !important;
object-fit: cover !important;
}
}
</style>
Thank you! This seems to have improved a bit. If I were to remake the video what aspect ratio should I use in order for it to work on mobile? Is it possible to make two versions of the same video (one for desktop and one mobile)?
In addition to this, is there a way to have this auto play on mobile?
in regard to making the screen "zoom" is there a way to adjust this incrementally or is
"object-fit: cover !important;" - Full Zoom to fit the only option for this?
Hey @doglasa,
For the first question. You could have a mobile and desktop version, but you would have to change some of the template code to allow two videos and then write the code when to switch between them. There's not really a perfect aspect ratio for it, I also go for the approach of creating two video options, mobile and desktop for clients I work because the screen size issue would be covered automatically by that.
If it autoplays on desktop, it should autoplay on mobile, unless the mobile is on power saver mode, then the phone itself stops videos from autoplaying, nothing you can do about that.
Second, The object fit just tries to fit the height specified, The incremental adjustment you can make it to the height itself. (The 50vh value). So if you increase the height, you'll see a zoom in, decrease it and you'll zoom out. But if you see no zoom, you are basically at the original height you were at.
I see. In that case, the code did not have the intended effect. When I change the vh to "10" it shrinks, but if i set to "50, 80, 100 and 1000" the only change is to the top and bottom white space. The content in the middle does not zoom or change.
Is there an alternate solution?
Hey @doglasa,
If you want it to zoom, you need to add the object-fit: cover !important part, without it, it just increases in height of the container of the video.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025