How can I make my video banner cover the entire computer screen?

Store Design
1

Hi everyone!
my shop is: thefreshjuicefactory.com

At the top I have a video-banner. I got help with the coding through a YouTube video.
Can anyone help me makethe video larger, covering the whole screen on the computer.
This is example of the size, see picture at the top: https://caiacosmetics.se

2

Hey Andres,

You have an element with class of “videoBox”. The height for that right now is

height: calc(100vh - 165px);

You need to simply change that to:

height: 100vh;

You can find the CSS for videoBox and make the adjustment or add the following CSS snippet to fix it:

.videoBackground .videoBox{
height: 100vh !Important;
}

Thank you

Please follow my Twitter account https://twitter.com/VoxfaOfficial to stay up-to-date with my Shopify tips or visit the Shopify section of my website https://voxfa.com/category/shopify/.

3

Thanks a lot Voxfa!

I Will try this later tonight. I Also wanted to ask, is there a way to make the whole video-banner clickable? I want it to be a link because the button don’t look so good.

4

Yes. You can simply wrap your video wrapper between and . This might not be easy and require liquid file modification.

Was my answer helpful? Please hit Like or Mark it as solution!

Thank you
5

Thanks for helping me man! I´m sorry but I don´t know how to wrap my video wrapper. I can make changes in code but I need instruktions sadly :confused:

The first solution you gave me was perfect making the video larger!