how to make full screen banner video on shopify

a while back i did a video showing you,how to turn your hero banner into a,video hero banner and since that time,i've had quite a few questions and,requests such as can you have it show,the text on desktop but not on mobile or,can you remove the white box surrounding,it or how do i change the spacing below,the banner,in this video i'm going to answer all,those questions so that you can adjust,the video banner code to look exactly,how you want it,before we get into the video if you like,videos about winning products drop,shipping shopify themes apps and,tutorials do us a favor and hit that,subscribe button and turn notifications,on now let's get into the video alright,the first question i'm going to answer,is why isn't my video link working so,you've pasted the code you're pressing,enter you are clicking and it just,disappears what's up now if you're,watching this video without seeing the,first one make sure to watch that video,first you can click the link here to do,that and then come back here because in,that video i show you how to add the,code to your theme where to find free,videos and what to do but back to the,question this is actually a really,simple fix all you have to do is click,this right here and it solves that,problem,another question i got a lot was how to,remove this white square around the text,i'm going to show you how to do that but,i'm also going to show you how to change,the color so maybe for your theme black,might work better than white so i'm,going to show you both how to remove it,completely and how to change the color,we're going to be diving into the code,for this and i know that's not for,everyone or maybe you try it out and it,doesn't work out the way you wanted it,to so if you want us to edit it for you,you can reach out to us through our,website and fill out a store tweaks,request and we can help you out for,those of you that want to give it a go,on your own let's get right into it,the first thing you want to do is,preview your store so click these three,dots here,and click preview,keep this tab open and go back to your,previous tab,and click exit,if you haven't done so already make sure,to duplicate your theme,we're going to be editing the code so,it's important to back up your theme,just in case,once your theme has been duplicated,click actions,edit code,click sections,and find video dash background.liquid,now go back to your store preview,right click,and click inspect,then what you want to do is click this,little tool here,and then click on the white part of the,video banner,when you do that you will see the code,for this part appear over here,see how it says dot video background,comma dot video box info keep that in,mind for when we go over to the code,because that is what we're going to be,looking for but first this line right,here is what we need to change currently,it's saying that for the background we,want a white background that is slightly,transparent so that you can see through,it a little bit,if you double click this here you can,erase that and instead type none quite,simply this code is asking us what,background do you want to see here we,are saying none no background now when,you edit the code here you haven't,actually edited the actual theme code if,you refresh your page this will all be,gone this is just a way for you to find,the piece of code you will need to edit,and to see a visual before you actually,make that change permanent we're going,to make that change permanent now so,let's go back to your code if you go,down to line 281 you can see that we,have the same text here dot video,background dot video box info so we know,we're in the right spot and here we can,see that same background code,highlight all this stuff here,delete it by backspacing,and instead type none,click save,and now if we preview our theme we can,see the white background has disappeared,now the reason i added the white,background is because the text can be,hard to see especially depending on,which video you have behind the text so,if you don't actually want to remove it,completely but you do want to change the,color instead of erasing that piece of,text you would instead change these,three numbers right here ignore the 0.7,that is the piece of code that's making,it slightly transparent,for black it's zero comma zero comma,zero but if you wanted to change it to,pink blue or purple you could do that as,well just go to colorhexa.com,find the color of your choice,and then scroll down here where you will,see rgb decimal and then you would paste,those same numbers in here,here's the result of a video banner with,a black background behind it it looks,much better with this theme,the next question i received a lot was,how to remove the text when you're,reviewing it on your phone so show the,text if you're looking at the website,from a computer but hide it if you're,viewing it from your phone for this one,you want to scroll down until you get to,line 399. depending on which parts of,code you have added or removed the line,numbers might be a little bit different,but the key thing you want to see here,is this text where it says at media,screen and max with 767px,everything under this line is coded,specifically for your mobile view so,this is where we want to be we're going,to click between these two brackets here,and then we will paste a piece of code,to get this code and all the other video,codes you can head to our private,facebook group i'll have a link in our,description box,once your code is pasted we are going to,do two other edits right above the piece,of code we just pasted you should see,dot video background dot video box info,you want to type background colon,none,semicolon,the final edit is right here we are,going to change this number from 500 to,300.,save your work and then this is how it,looks on desktop,and if i make my screen smaller you can,see that on mobile view it would look,like this,this brings me to the final question i,received which was how do i fix the,spacing between the video and the,section below it sometimes when you add,or move sections around the spacing is,off you can see here when i move the,multi-column section up it is flush with,the video and it looks odd so let's fix,that for this one you want to go to line,173,you should see this dot video background,code,we're going to add another line of code,you can type it with me it's padding,dash,bottom,colon,space,90px,semicolon,you can decrease this number if you want,less space or increase it for a larger,gap,here is the result you can see we have,nice even spacing here that matches the,section below it,we now need to do the same for the,mobile view because left as is the,spacing will be the same as we see here,and that gap is way too big for your,mobile view,for this one you want to go down to line,401 again depending on which pieces of,code you have added or removed this,might be slightly different you just,want to make sure that you see this at,media screen code and we're going to be,editing below that line,anything above this line you are editing,the desktop version which is not what we,want to do so let's click right here,between these two curly brackets,and then you're going to add in this,section of code,again feel free to increase or decrease,that number depending on how much or how,little space you want,here's the result,and here's the full thing here's the,spacing on desktop,and here's the spacing on mobile,one last variation if you have added the,code to remove the text when viewing it,from your phone in addition to the above,code you will also need to adjust this,piece of code here where it says 40px,you can change that to 10 or try lower,depending on your needs for this theme,xero looks good so that's what i'm going,to type,click save,and here is the result again if you need,help tweaking the code don't hesitate to,reach out i will add a link in our,description box where you can fill out a,store tweaks request if you need some,help if you like this video do me a,favor and give it a thumbs up or leave,me a comment down below and if you,haven't already make sure to subscribe,we post a lot of time-sensitive content,such as winning products on this channel,so make sure you have notifications,turned on so that you can be one of the,first to market when we post those,videos

Congratulation! You bave finally finished reading how to make full screen banner video on shopify and believe you bave enougb understending how to make full screen banner video on shopify

Come on and read the rest of the article!