Solved

How do I fix this video banner?

Yanana7
Tourist
9 0 0

I'm trying to get a video banner up without it stretching/ distorting or forming white spaces. I really tried to fix it but Idk what I'm looking at. I changed the object-fixes to "container" to stop the stretching and played with widths and heights but I still can't get it. 

 

The preview code: https://kswy9y7z7h8w2kh0-56191811702.shopifypreview.com

 

Please, help me fix this code.

 

Yanana7_0-1706975222322.png

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1156 299 229

This is an accepted solution.

Yeah, you can delete the above and replace with this, it's applying to all views now

 

<style>
body .videoBackground .videoBoxInfo {
    padding: 0 !important;
}

body .videoBackground .videoBox, body .videoBackground .fullscreen-video-wrap {
    position: relative !important;
    padding: 0 !important;
    min-height: max-content !important;
    display: flex !important;
    height: 100% !important;
}  

body .videoBackground .fullscreen-video-wrap .video-js {
    position: relative !important;
    height: auto !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 7 (7)

ThePrimeWeb
Shopify Partner
1156 299 229

Hey @Yanana7,

 

Try this and see if it works 😊

 

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 .videoBox,
    .videoBackground .fullscreen-video-wrap {
        min-height: max-content !important;
    }    

    .videoBackground .fullscreen-video-wrap .video-js {
        height: auto !important;
    }
}
</style>

 

 

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

ThePrimeWeb_0-1706976017169.jpeg

 

P.S. - Object-fit does not have a setting called "container"

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Yanana7
Tourist
9 0 0

oh haha. I meant "contain". Thank you for responding so quickly! I really appreciate it.

 

I tried your code but most of it still looks the same. The mobile version spaces reduced a bit. But, they're still there and the ones on the sides of the banner in desktop view. Any other suggestions?

ThePrimeWeb
Shopify Partner
1156 299 229

Hey @Yanana7,

 

Remove the previous code and try this instead. 

<style>
@media only screen and (max-width: 767px) {
    body .videoBackground .videoBoxInfo {
        padding: 0 !important;
    }

    body .videoBackground .videoBox, body .videoBackground .fullscreen-video-wrap {
        position: relative !important;
        padding: 0 !important;
        min-height: max-content !important;
        display: flex !important;
    }  

    body .videoBackground .fullscreen-video-wrap .video-js {
        position: relative !important;
        height: auto !important;
    }
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Yanana7
Tourist
9 0 0

How do I fix the desktop and tablet view? The code you gave for mobile worked perfectly! Thank you so much! Is there a way to use it or something similar for the other views?

Yanana7
Tourist
9 0 0

Yanana7_0-1706979327071.png

 

ThePrimeWeb
Shopify Partner
1156 299 229

This is an accepted solution.

Yeah, you can delete the above and replace with this, it's applying to all views now

 

<style>
body .videoBackground .videoBoxInfo {
    padding: 0 !important;
}

body .videoBackground .videoBox, body .videoBackground .fullscreen-video-wrap {
    position: relative !important;
    padding: 0 !important;
    min-height: max-content !important;
    display: flex !important;
    height: 100% !important;
}  

body .videoBackground .fullscreen-video-wrap .video-js {
    position: relative !important;
    height: auto !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Yanana7
Tourist
9 0 0

Yay!! It now looks perfect! Thank you so much! 🙂 I so appreciate you! Thank you!