Re-size hero banner on "Dawn" mobile view but not desktop?

Re-size hero banner on "Dawn" mobile view but not desktop?

doglasa
New Member
6 0 0

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!

 

 

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2139 616 519

Hey @doglasa,

 

Can I have the link to your store?

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
doglasa
New Member
6 0 0
ThePrimeWeb
Shopify Partner
2139 616 519

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.

ThePrimeWeb_0-1708021180674.jpeg

 

 

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>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
doglasa
New Member
6 0 0

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?

doglasa
New Member
6 0 0

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?

ThePrimeWeb
Shopify Partner
2139 616 519

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. 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
doglasa
New Member
6 0 0

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?

ThePrimeWeb
Shopify Partner
2139 616 519

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.

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!