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

[@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

[@bettercallameen]

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

[@IvanNkusi]

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

[@kanyekush452]

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

[@burealuxe]

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

[@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

[@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;

[@jeanettecurrie7536]

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

[@DrCharmsTV]

Thank you so much dude! Barakallahu feek

[@OnHOWGuy]

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

[@Valentine_D]

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

[@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!

[@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

[@lianabagui]

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

[@MRukhshanAli]

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

[@maCisoN69]

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

[@shawnspears7440]

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

[@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 👍🏻

[@Gellario-ae]

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

[@KarmaCreativeStudios]

seriously good value channel! my first ever subscribe!

[@boldpurpose]

Such a good video! Subscribed just for it!

[@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?

[@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 :)

[@ayshahphiri8083]

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

[@gargrish]

Great Video man!!! Loved 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

[@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?

[@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

[@trentd.9492]

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

[@Andy-wx2oe]

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

[@Brasileirathelabel]

LEGEND! This has helped me immensely. Thank you a million!

[@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?

[@suavehouse101]

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

[@DEVILGAMINGG34]

Man I love your videos

[@gensteffan2778]

Amazing! thank you! Took me ages to work out how to put the text on top of the video.

[@OnHOWGuy]

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

[@DaHomie-95]

I LOVE YOU MAN Huge Thank you for this video !

[@EliteAgency-fh4rm]

love this dude

[@AntonioMBrown]

Thanks so much bro

[@aaronrummycruz]

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

[@andujar-calcanoentertainme7430]

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

[@kumansi]

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

[@kennethlopez60]

THANKS ALOT!!! I was looking for this type of videos and i found them, thanks for your content it came in handy my Friend!

[@skvirls]

Thanks! Helped so much!

[@itsrubynotes]

Soo helpful and easy to follow thank you!!!

[@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.

[@AguiaDourada-f8s]

Worked Perfectly thank you

[@OnHOWGuy]

You're welcome!

[@Knowledgedad]

You got the best videos sir

[@OnHOWGuy]

Thank you and i appreciate that. Cheers

[@Enriquewong89]

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

[@OnHOWGuy]

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

[@Kdramanew6]

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

[@GersonCruz-j3t]

you're the best man!

[@SebasHeNPL18]

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

[@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?

[@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!

[@wizart-k9g]

i love you man! you are amazing

[@fabianeer41]

worked perfectly fine, ty

[@nicelul4410]

Thanks bro helped me alot. Liked!

[@Winterfell.]

Brilliant video!

[@OnHOWGuy]

Thank you

[@manishreza9918]

Love you dude. ❤

[@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🙏🏼

[@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?

[@angrygoosecandlesandbath207]

thank you so much for this! Works great for me on my desktop and mobile. There's a bit of lag of "no image" to the video, but from reading other comments, that's a my issue due to the size of the mp4. That's fine. I would have loved the music I had with the video, but it's not a big deal. Love your videos and I appreciate you helping :)

[@terezakotkova5960]

same issue here. cut down the video to 3Mb. still doing it. how did you solve it?

[@baraabolat]

Salam Anas, Thank you for this great video. Is there any possibity to move the text and the button a little bit in bottom direction - If yes i would appreciate an answer best wishes

[@OnHOWGuy]

Hey Baraa, You're very welcome and your content is amazing btw. Yes you can, head over to the new section that we did add and scroll down to line number 285 : you 'll find : margin: auto;
 change “auto” to “40px”
if its too low decrease the number and vice versa. If you have any further questions let me know. Cheers

[@baraabolat]

@@OnHOWGuy Thank you, your answer helped me a lot. Keep up the good work with your content, Cheers

[@OnHOWGuy]

@@baraabolat Glad i could help Daraa and you're very welcome. Always sister. Cheers

[@dansroka4265]

@@OnHOWGuy This is exactly what I needed, thanks so much!!

[@OnHOWGuy]

@@dansroka4265 You're welcome

[@NOWAY091]

Best KZbin Channel ! Thank You

[@OnHOWGuy]

You're very welcome and really glad you think so. Cheers

[@jadsakr796]

You are a legend!

[@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!

[@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

[@uatalima]

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

[@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

[@josephquesada94]

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

[@solowokeeSWNS]

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

[@DerlyneG]

New subscriber here! Great video. I've been trying to find a solution for this for months. I'm so happy I found your channel.

[@Achilles_of_Troy]

Thankyou for the Code, it works great

[@jokutyyppi9964]

thank you so much for this video, it helped a lot!

[@theomarasescu7996]

the link is working to you?

[@bindooransachithanandam203]

Very very helpful, thank you so much!!

[@productukivo5695]

You're a G! Thanks bro 💯

[@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!

[@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

[@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? :)

[@PoshPoshyx]

You deserve more subscribers brother.

[@jhaei]

I hope you're able to see this in time. I wanted to make the button more customizable like rounded edges or a colored outline. Would you happen to have a video or code for this? I saw your other video on transparent banners and don't know if that code could be applied to the button portion. Either way, thank you for your help on this video! I was able to add so many things to my website :)

[@princeojha5460]

i have try this code and my text and button are not fit inside video in mobile can you please tell on which line i have to add other code please help me ...

[@OnHOWGuy]

Saw it in 5 days haha, sorry super busy lately. Im afraid that requires some custom code writing and that does take some time which i don't have now but i noted your request and as soon as im free i will work on it. You're very welcome and glad i could help. Cheers

[@jhaei]

@@OnHOWGuy Thank you so much! I working on making the footer transparent as well. I know you said you're busy, but do you have a reference to a forum that solves this? I would appreciate it!

[@biznazz101]

Not sure if you mean for a specific section, but if you go to theme settings and click the buttons drop-down, you can adjust things like corner radius, border thickness, text offset, etc. Note*: These settings are store wide, all buttons will be changed. Customize Theme>Theme Settings>Buttons Good luck!

[@youtuuubeeyoutubeee]

Is there already a solution for this?

[@Marcus-deVries]

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

[@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?

[@DanielRockenschaub-w2p]

thank you so much, very good tutorial!

[@travisb2411]

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

[@aaallonzo]

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

[@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

[@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?

[@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

[@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 ????

[@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?

[@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

[@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!

[@ChristineKerseyBooks]

Thank you so much for your great tutorials!

[@Flavas]

amazing video

[@OnHOWGuy]

Thank you, Glad you think so. Cheers

[@zezoksaxxx]

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

[@ToreBempasciuto]

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

[@ArturoHerrera777]

Thank you so much for your yand effort 🎉

[@hasibullahpopal2883]

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