Video background is not showing on mobile?

Solved

Video background is not showing on mobile?

Sh6300
Tourist
3 0 1

So I added a custom CSS code to have a video banner on my store homepage, it works fine on the desktop version but not on the mobile version, anyone knows what I can add to the code to have it show on the mobile version as well?

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2139 616 520

This is an accepted solution.

Hey @Sh6300,

 

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.

 

<style>
@media only screen and (max-width: 767px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 1 !important;
    }
    
    .videoBackground .fullscreen-video-wrap video {
     object-fit: contain !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710129701590.jpeg

 

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!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2139 616 520

Hey @Sh6300,

 

Can you share the link to your store please? Thanks!

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!
Sh6300
Tourist
3 0 1
TheZenmonks.eu
Pass: Hello#123

Sh6300
Tourist
3 0 1

Thezenmonks.eu

pass: Hello#123

ThePrimeWeb
Shopify Partner
2139 616 520

This is an accepted solution.

Hey @Sh6300,

 

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.

 

<style>
@media only screen and (max-width: 767px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 1 !important;
    }
    
    .videoBackground .fullscreen-video-wrap video {
     object-fit: contain !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710129701590.jpeg

 

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!