How To Add Video Background Banner To Shopify Homepage (With Autoplay)

[@OnHOWGuy]

🛑🛑ATTENTION !! For everyone who's having the issue of banner heading and button not showing up on Mobile. Get back to section background-video.liquid that we did create then scroll down to the line 439 right before remove the code below : .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn { display: none; } After that click on Save and get back to this video and HIT THAT LIKE BUTTON. Cheers

[@nils8884]

Thanks. I love you

[@OnHOWGuy]

Love you too.

[@JamieDion]

11:44 Hey hey, I would like to have the video banner on mobile to scale down and fit on the screen. I wasn’t able to locate an adjustment for that. Can you help? Thank you, always!

[@ahsanJunejo]

hey its still not working

[@patd5490]

on mobile my text and button that is on top of the video in desktop mode shows up below the video in mobile?

[@damianmartinez5743]

Bro you have no idea how much you have helped me understand how to make an online store , I appreciate your videos heavy , you get down to it and don’t bs on the secrets to success !!! Thank you

[@MarcusBurrell-g1u]

Question where do I find the codes

[@tanmimhinaee]

@@MarcusBurrell-g1udescription box

[@KristenPerry-uj1tw]

Hi! My text is still not optimized for mobile and the header is stacking on top of each other. By chance do you have the code to use to help with header/line spacing?

[@lukapetch]

Yeah please the video is ontop of a white bar of space which is on top of the text which should be overlaying the video

[@artk1272]

@@lukapetch line 365 in the liquid file line-height: 40px; change to line-height: 60px;

[@yRyXn-]

For everyone that gets the “no image” error thing… I found the fix. -- So what you have to do is you have to put in a cover image. Under the box where you put in the video link, there is a box saying Cover Image. So if your site background is white. Take a screenshot of the white bit on you screen and use that screenshot as the image. You have to do the same thing for every other background color you have on your screen. So save it and reload the page. Now the “no image” error prompt is gone. 😊 hope this helps

[@wasifjaved3161]

Thanks

[@panda1856]

Oh sick imma try that now

[@Bhigpanda]

sadly that dont work for me...on mobile its still white and then just has a play button like its making me push play first and doesnt autoplay

[@yRyXn-]

@@Bhigpandadid you copy his whole code? And did you click on the right background video section? Because there are two sections. 1 called “Video” and the other Background video

[@Bhigpanda]

@@yRyXn-what code the one for FIX whole the backround video one

[@BlockForgeToys]

great video! i want to ask how can we edit the size of the video background? Mines doesnt look ideal for a big size! Thank you!

[@vswildtom]

Wow!! I Searched for DAYS for a good solution and with your code (and a little altering) ITS PERFECT !!! AND TRANSLATEABLE!! 5/5 Stars!! THANK YOU

[@IvanNkusi]

BEST TUTORIALS ON THE INTERNET,NO CLICKBAITS THANK YOU SO MUCH

[@solowokeeSWNS]

im having an issue when i copy the link to input my backround my bacxkround doesnt show up

[@bettercallameen]

I can't thank you enough Anas... This playlist is a hidden gem! siiiir 3allah

[@ShawnWilder-u1p]

Hi, I asked this question a month ago. How do you disable the video banner from showing up on any other page except the home page? It appears on each of my pages, including product pages etc... I only want the header with the menu drop downs and products to be displayed. PLEASE HELP!

[@MarvinSuarez-g7s]

can you answer this please

[@tysautoworksPerformance]

any update on this issue ????

[@kanyekush452]

This man is goated. Got my website looking like I paid $300 for it lol

[@JemaRoseReyno]

Hello hello… thank-you for all your videos! They’ve been super helpful! I have a question thou! Is there any way to have different video banners for different pages?? Thanks :)

[@burealuxe]

If I was able to I would hit the like twice. Thank you so much

[@samf.7431]

Hello Anas! This video just blew me away in its simplicity and effectiveness! Thanks a lot for this valuable resource. Was wondering if you can instruct me how do I configure the code so that the video will be in the classic "landscape" orientation as opposed to square?

[@JohannesBitcube]

Thanks, this was helpful. One quick question, I have followed your steps on how to fix and show the text on mobile and I prefer not having the heading and the description only the button, but the button isn't showing on mobile. Is there maybe a video on this or a possible fix you can suggest?

[@shawnspears7440]

Excellent Tutorial Thank you so much! Excited to make the adjustments.

[@jeanettecurrie7536]

Omg I cannot believe this worked! First try 😃 thank you!!

[@1109bigred]

Awesome video, is there any way to make the video size not as tall as it is? Is there a number in the code that states the height of the box or the window it resides in? Thanks

[@deventak8070]

did you get it?

[@boldpurpose]

Such a good video! Subscribed just for it!

[@MRukhshanAli]

I am a beginner in Shopify and it's really helps me to understand the core concept. Keep it up. JazakAllah...!!! :)

[@aaallonzo]

Is there a way to make sure the font size of the header changes when in mobile?

[@Chloedallaire]

Hey Anas thank you for this video you helped me so much! But now I have a trouble to remove the banner video autoplay on all my pages. How can I remove it from all my pages? Thank you🙏🏼

[@Neon-DreamsDE]

Thank you for your Videos! Is it possible to add a second button on the banner?

[@OnHOWGuy]

You're very welcome and it is possible if you know little bit of css. Cheers

[@Gellario-ae]

MaShaAllah! Anas brother May Allah bless you forever I can't imagine how much I appreciate your videos

[@lianabagui]

Immaculately made! This channel is among the BEST Shopify-niche channels out there. Liked and subscribed! 👏Worth every clicks he gets.

[@MacKiniko]

hi, awesome stuff how do you move the position of the button - it's currently in the middle but i want it bottom centre? :)

[@jadealt7212]

Might be super late, but if you are having issues with the text overlay on MOBILE, go to the section AFTER the line 431 where you can see @ media screen. After that line there will be a bunch of proprieties that you can add or alter to have your result. Ex. if the text is present, but below the video, change the position from "relative" to "absolute". Ex. If the text is over the video, but the postition on the video box is wrong, change the padding or instead write the padding this way padding: 20px 20px 20px 20px; Just change "20" into another value and the text box will move to put it simply. the order is top-left-bottom-right Just keep refreshing after any change to see what happened and keep chancing accordily until you have the text like you wanted. By editing this section you are ONLY changing the view of MOBILES (or screens which are less than 767px wide)

[@deibyerincon2239]

somehow letters are still overlay in mobile, decrees the 20 and nothing happen.

[@maCisoN69]

I've clicked the like button 35 times as instructed, hope this helps. but seriously: good job! thank you.

[@GoomSounds]

I really appreciate this tutorial and code you provided. I have a issue on imac27inch monitor. when I browse is in full window the height of the video crops into half. I can only see the center of the video and top and bottom will be cropped from header and footer. (If I drag the browser window to 2/3 of the width from the screen, the video stretches to right size) How I can make the video height fluid for any size of the screen?

[@Juliamalibu1]

Hi I’ve added a picture not a video but it’s in the header as a video and it’s on every for. How to I apply it just to the home page please?

[@DrCharmsTV]

Thank you so much dude! Barakallahu feek

[@OnHOWGuy]

You're very welcome and glad i could help. Cheers

[@naratara3005]

U are the best on KZbin really thank u so mush u explain everything professionally seriously I watch many videos no one did like u thanks 👍🏻

[@kawaiicharmsss]

I came across your channel and honestly you’re a life saver! So straightforward and easy to follow, thank you brother 🙌🏾

[@OnHOWGuy]

Thank you brother and you're very welcome, glad i could help. Cheers

[@SimplyBeautiful0592schan-bq8bq]

I added the video and it’s on my website as a welcome video banner. The issue I’m now having is when my website opens theres an error sign that says “no image” just before the video pops up and plays. The error sign is against a white background so it’s very obvious.

[@Valentine_D]

the videos with less view are the most worth, i really appreciate how good this video is 🔝💻

[@Top3City]

@onHOWGuy I am getting the followinf error: Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined.

[@Alexandros1010]

Thanks alot bro you helped my store very much!!!!! keep going brother

[@OnHOWGuy]

You're very welcome and glad i could help, no worries a lot of videos on the way. Cheers

[@ifeanyio7602]

Great content and an addition to my Shopify store

[@NikshaY-je1wo]

Awesome tutorial! Anyway to customize the line spacing in the title? In mobile, there isn't enough line spacing when the title wraps to the second line. Your tutorials have made my site looks soo much better. Thank you!

[@CourteCollection]

Hello, this video was such a great help! Thank you very much. I have a question: if I would like to change the size of the video (for example double the height, to take up more of the screen) could you please advise on how to do this. Many thanks!

[@OnHOWGuy]

You're very welcome, the banner size changes based on the video resolution/ratio try with other video and see if not let me know. please let me know in a new comment as its difficult for me to see replies now. Cheers

[@Htbr]

@@OnHOWGuy is there any way that we put different video for pc and different for mobile pls pls respond

[@NickyIles]

Great content, however I don't have a base.css so what can I do in my case? I'm using a Themeforest theme for context.

[@OnHOWGuy]

Thank you, it might be theme.css or style.css or custom.css, its all the same but different file naming that developers uses. Cheers

[@bastea8939]

Unable to update the file Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined. I can't save it. :( what should i do

[@whaiken2225]

same problem

[@aaronrummycruz]

Great video, may you and your subscribers benefit greatly from your work.

[@hybridpersonaltraining]

Hi, first of all, thank you! Second, is there a way of putting a box around my text to make it more visible against the video? Currently, it doesn't stand out from the background very much. Thank you

[@OnHOWGuy]

You're very welcome and glad i could help. I have a newer version of this video on the way and it has many new features including yours and it will be posted soon. Cheers

[@Andy-wx2oe]

我也弄好了！！！跟你您的提示和toddjal的讲解，相对应的调整过后太完美了！！感谢感谢

[@ayshahphiri8083]

Bro Thank You, Man.... Also, I like your accent. Thank you, this video was very helpful

[@JocelynDeng]

Hello there! Thank you for the amazing tutorial! It was very helpful, however I did run into an issue where I upload the video on the custom liquid and there's a black banner showed up on the screen. Is there anyway to resolve this?

[@hayleyscott1837]

Hi Anas, thank for your speedy response. I'm using the Dawn theme, and I've noticed that it will only let me drag the video into the header section - so this might be the problem, that I need it in the template section (where yours is on the video) but that are goes grey for me and won't let me move it. Do you know of a way around this?

[@OnHOWGuy]

Hey, You're very welcome. To be honest i have no idea what might cause that, Im getting some conflicted feedback, some people say it works fine for dawn and some say it doesnt for dawn so im confused but i have a newer version of this video that im working and it will be better in terms of flexibility. Cheers

[@Curtis.fuhrmann]

Thank you so much! Very helpful! The mobile version does not display the description text and there is a lot of empty space between the video and the next section on mobile version. Please help!

[@gargrish]

Great Video man!!! Loved it!

[@pepejeans2679]

Thank you very much for your great help. Is there any solution to insert a video in this video background via connect dynamic souce/metafield? Thank you!

[@Marcus-deVries]

Thanks bro! Helped me out the fire rights here! Only question I have left I where you found such a clean gif?

[@jonathanwebster9000]

Great video!, However I want to add a slideshow in the header section, (Where you select the announcement bar and header) what code would I use, Please? Thank you!!

[@OnHOWGuy]

Thank you, Not sure what you mean but this video is for video banner and the slideshow is already available on theme customizer. Cheers

[@thesilverbackclub]

Can you add an audio icon to unmute a video? Awesome tutorial. Thank you!

[@BILGINAS]

Very strange I am missing the „ base.css „ Folder in my assets… And for the mobile screen, is it possible to scale down the text ?

[@MarielLorenzo-nb9wh]

Same here! I don't have base.css :( idk what to do to fix the mobile background now. did you figure it out by any chance?

[@pawelpastuszak515]

Hi, thanks for the video, I'm experiencing a problem with the code when i try to create a section: "Unable to update the file", Invalid preset "{"en"=>"Video Background"}": cannot include blocks in preset because there are no blocks defined. Could you please help?

[@OnHOWGuy]

Hey, Thats a bug from their end but i found a work around it. Create that video-background section then paste the code from a section thats already available on your theme like featured-blog.liquid just like if you want to duplicate it then click save and once its saved then now simply remove that code from video-background and paste my code from the description and it will be saved now without any error. Cheers

[@pawelpastuszak515]

solved the issue, thank you

[@pawelpastuszak515]

One more question, I want to move the button and paragraph to the bottom left corner, which parts of the code do I have to edit?

[@OnHOWGuy]

@@pawelpastuszak515 You're welcome

[@NytiaHenry]

Hello! So i followed the instructions and I am so thankful! Now the video is showing up cutting off the faces on phone view, do you have a video on how to adjust or what code to put in so the view doesn't change no matter the device we are on?

[@hayleyscott1837]

This is great, thank you so much Anas! Liked and subscribed. However... my video is showing up on every single page of my website. Is there any way to have it on the home page only as a welcome video? I don't need it on the 'About' and 'Shopping' etc.

[@OnHOWGuy]

You're very welcome and glad i could help. Thats strange because that shouldnt happen, i think the theme you using uses the same page markup for the homepage and other pages as well. Did you add that section on the homepage only ? Please let me know in new comment as its difficult or me to see replies now. Cheers

[@Tawa-r8c]

Thank you for this video! Is there a way to add a video slideshow to the banner?

[@OnHOWGuy]

You're very welcome, i have an update im working on and i will include that. Cheers

[@taipan.killah]

Hello, very helpful. But please could you tell me how to change the ratio for the mobile devices or in general? Thank you. PLEASE HELP, would appreciate a fast response, since in a bit of a hurry with this one. Thank you very much.

[@ProtPally666]

Thanks alot! how do i change text placement and add text box?

[@OnHOWGuy]

You're very welcome, i got a new version of this video on the way and i will try to include your requests. Cheers

[@uatalima]

I dont't like indian youtubers because of bad accent, but you gave me a good tutorial and I subscribe your channel.

[@andujar-calcanoentertainme7430]

I got it thanks for the video's man you are a game changer!!

[@andersw2274]

Hi = ) So how big should the video resolution need to be? Thanks!

[@SebasHeNPL18]

Thnaks you so much for the video, really help me out, now mu webside looks really nice.

[@travisb2411]

this is great. What if i want to move the position of the text to lower left/right, or the upper left/right?

[@frdbze5208]

Hi ! I've been watching your videos for a while and I think you're great! As far as this video is concerned, I followed your instructions to the letter. I have a problem however, the dimensions of my video do not match at all with the rest and the preview on mobile is worse. my question is how to fix the dimensions? in any case I'm almost there, I miss this little detail. I thank you. One more, I'm amazed at your kindness and of course I'm a subscriber and I like.

[@deventak8070]

did you get it?

[@MattOnlineCreations]

I LOVE YOU MAN Huge Thank you for this video !

[@thesilverbackclub]

Thank you so much for this video tutorial. We all appreciate it! I have been looking and still do not understand where to adjust the height of a video automatically. Could you help with this or point me in the right direction? Thank you!

[@hasibullahpopal2883]

Thank you so much for your nice learning video dear Anas! I have problem opening the first link, how to solve it?

[@chillrr]

bro u helped me set up my first shopify store thank u so much !!

[@OnHOWGuy]

You're very welcome, really glad i could help. Cheers

[@KarmaCreativeStudios]

seriously good value channel! my first ever subscribe!

[@angelslimited]

quick question, what px or size should i use for the video

[@mollypivnichny]

Hi! I followed all your instructions and everything was working perfectly until today. my video will no longer autoplay on desktop but will on mobile. if you could let me know how to fix this I would appreciate it!

[@Heyydudee]

I have the opposite issue. It plays on desktop but not mobile. Did you ever figure this out?

[@harpreetkaursandhu2432]

Hi Anas, great video, I subscribed immediately! This tutorial and mobile fix worked perfectly. How can I unmute the video playing?

[@suavehouse101]

Awesome, as always, thanks a million for all the vids, I for one, am going to review them all!!!!!

[@AntonioMBrown]

Thanks so much bro

[@ToreBempasciuto]

There is no add section as shown at 4:58 my drop down menu and selections are very different.

[@lexip.4269]

Thanks so much for this tutorial! Your instructions are very clear and easy to implement on the website especially with the given code. I did experience the same issue with some other users where only the description appear on mobile. I think I found a fix (not sure if this will work for everyone), but i commented out the .videoBoxInfoTitle, .videoBackground .videoBoxInfoBtn { display: none; } that is right before the . Both the title and button appears on my side after removing this code. Hope this helps!

[@OnHOWGuy]

No, thank you actually for pointing that out because i did add that code to fix a loading issue on refresh theme but didn't ever remember it or think that it might be causing the issue. You are such legend, i will make a pinned comment for people who's having the same issue. Thanks again

[@notthetydkynanymore]

when i did this my title text ended up being broken and formatted wrong to fix this i just edited the css in side bar. im sure you could go into settings section and add it into the video background section but i just have this up in one spot so i just did the side bar css edit code below fixes text sizing for mobile phones as well as add a border- radius so you can make your button have smoother more rounded corners H1 { line-height: 150%; } a { border-radius: 6px; } @media all and (max-width: 500px) { h1 { font-size: 4rem; } } @media all and (max-width: 340px) { h1 { font-size: 2rem; } } @media all and (max-width: 200px) { h1 { font-size: 1rem; } p { font-size: 0.3rem; } } hope this helps

[@ingeillingworth1215]

This has been soooo helpful!! I only have one issue, I cant add a button. I write the text but it doesnt show either in desktop or in mobile

[@Enriquewong89]

Thanks bro, appreciate your job,really helps a lot.

[@OnHOWGuy]

You're very welcome and really glad i could help. Cheers

[@amirperrymusic]

This is extremely helpful! Is there a way to reduce the height of video banner??

[@OnHOWGuy]

Glad to know that, That depends on the video resolution, the code sets the video banner size to fit the video perfectly. Try with different videos to see. Cheers

[@amirperrymusic]

@@OnHOWGuy Thank you!

[@inspired9638]

My video keeps cutting from top and bottom, while I want the video to cover the entire screen height. Can you guide me on how to fix the height of the video or have the original height.

[@pratikanand012]

Hii there, Hope u r doing absolutely fine, this video was great help. When I added this code the BG stripe that comes below announcement bar disappeared, can I get that stripe back while using this code ?

[@Kdramanew6]

You are the best! so much helped me, you do great job to humanity)))

[@mjk3273]

Thank you very much, finally I did it! but I have an issue! how to reduce the size of the banner?

[@JanTrd-nr6kw]

Hi! Awesome Video, thanks! Just one question: The Color of the text in the banner does not change. I can select a color, but the second text (the little one) itself stays in black. Can you help?

[@OnHOWGuy]

Hey, you're very welcome. I have an update for this video on the way and i will include this feature with many more but as of now i dont have the code to do what you requested. Cheers

[@ousmaneba8317]

changed mine a lot but i believe it's arround line 377 for the description

[@itsrubynotes]

Soo helpful and easy to follow thank you!!!

[@josephquesada94]

thanks bro, really helpfull!! I just subscribed, pura vida!!

[@serene.journeyy]

Hey there! Thanks a lot for your content! It's been really helpful! Happens that, while using the Sense Theme, when I load my page it shows for half a second the "NO IMAGE" white screen and then the video starts, how can i fix it so you can see the video right away and avoid that half second frame?

[@serene.journeyy]

Also, my title is overlaid on mobile. It has three words all over each other. Is is fixable?

[@serene.journeyy]

Last one, how can i change the font type? ahah thanks

[@SupeBeatz]

Anyone find a fix for the NO IMAGE that appears when you first load your website??

[@yRyXn-]

@@SupeBeatzyes bro i found the fix

[@yRyXn-]

I found the fix

[@brand-wavey4977]

Bro nice video very educational I have one question I want to add a option for the button background to be tranparent and only show the outline just like the button option in the orginal banner can you help me with this?

[@AlanTran-xe2eq]

Amazing video but is there a way to re size the heading text mine is just a bit too big and for what i want to write its looking a bit too messy thanks!

[@christiand5580]

I had the same issue. I figured out a way. For Desktop go to the edit code and sections to the video bg one, then at line 363 you can change that font value to whatever you like. For mobile, Go into theme customization and press directly on the video background section to get to custom CSS. From there, paste this code into the CSS and change the font size in the code to whatever works best for the mobile preview @media screen and (max-width: 767px) { .videoBackground .imageBoxInfoTitle { font-size: 40px; } }

[@matthew-g8w]

HI just want to say thankyou your videos are great im having the issue with the txt not showing in mobile view but the code i have entered seems to do nothing can you advise what i could do? thankyou!

[@matthew-g8w]

Dont worry ive just read the comments and sorted it. again THANKYOU SIR YOUR AMAZING!

[@iMajesticEdits]

hii, thank you fro the amazing video great work! but I have one issue I did everything as you said but on the mobile version it doesn't show the heading and the button how can I fix that ?

[@zezoksaxxx]

man i just found your channel your contetn is amazing and simple thanks so much man بتوفيق يا انس عقبال مليون متابع

[@markpeel623]

how do you change the size of the font?! the words are to big on mobile

[@kumansi]

Great tutorial and addition to my Shopify store. Thank you!

[@trentd.9492]

Super cool, super quick, super helpful!!! Nice work, man!

[@xiomara_play]

Hello, how can I make the video have sound? and also- how can I move the button below or to the left if the head and text fields are empty

[@luisacanizalez4347]

Hello, The video stays anchored to all the pages of my website, how can I make it appear only on the home page? Thank you!