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

Today i will show you how to add video background banner to Shopify homepage with autoplay for Dawn Theme and adding the title and description to the banner with a call to action button.
Are you looking to add some extra flair and style to your Shopify homepage? If so, then a video background banner could be just the thing for you, with this feature, you can create an engaging and eye-catching Shopify homepage that will draw in customers and make your Shopify store stands out from the competition.
Adding Video background banner to Shopify homepage allow customers to truly immerse themselves into your store, this creates more engagement with potential shoppers who may be browsing around on their phones or tablets, and it does Increase customer retention rate because research has shown that Shopify stores featuring video background banner have higher user engagement rates than those without it, meaning people tend stay longer and return more often if they see something interesting going on at the Shopify store’s homepage.
Video Background Banner Section : pastebin.com/w...
FIX Banner Text : pastebin.com/4...
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this KZbin channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#video #banner #shopify

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

[@MynameisKris1]

Dude I'm blown away! Just starting up my page and you are the only one that makes sense! Everything works! Thousand thanks brother!

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

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

[@bettercallameen]

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

[@ActiveAttracting]

The best guides for shopify ever)! Thanks a lot

[@DrCharmsTV]

Thank you so much dude! Barakallahu feek

[@OnHOWGuy]

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

[@IvanNkusi]

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

[@lianabagui]

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

[@burealuxe]

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

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

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

[@KarmaCreativeStudios]

seriously good value channel! my first ever subscribe!

[@Valendy_bb]

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

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

[@jeanettecurrie7536]

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

[@kanyekush452]

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

[@shawnspears7440]

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

[@trentd.9492]

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

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

[@GlitteryGlit]

Hi, did you find a solution by any chance ?!

[@Gellario-ae]

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

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

[@ayshahphiri8083]

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

[@afeministsthoughts]

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

[@boldpurpose]

Such a good video! Subscribed just for it!

[@AntonioMBrown]

Thanks so much bro

[@IrfanShah-b2s]

thank you bro, really appreciate it

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

[@gargrish]

Great Video man!!! Loved it!

[@DaHomieMatt95]

I LOVE YOU MAN Huge Thank you for this video !

[@ChristiangirlPodcast777]

This was amazing 🤗🤗🤗 life saver

[@ClSt0707]

Thank you very 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?

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

[@suavehouse101]

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

[@kumansi]

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

[@ChristineKerseyBooks]

Thank you so much for your great tutorials!

[@ifeanyio7602]

Great content and an addition to my Shopify store

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

[@Kdramanew6]

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

[@bigraffyentertainmenttx]

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

[@skvirls]

Thanks! Helped so much!

[@aaronrummycruz]

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

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

[@boris-nathanrwe9878]

u deserve all the like man

[@DEVILGAMINGG34]

Man I love your videos

[@QuesadaJoseph]

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

[@BrysonCole]

You are awesome!! This video tutorial was perfect

[@OnHOWGuy]

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

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

[@nicelul4410]

Thanks bro helped me alot. Liked!

[@HowToBiznss]

Great tutorial, one question though, i want to add atleast 2 or more buttons on my storefront page (SHOP, ABOUT, etc) but the video text is only allowing me to put one, how can i fix that?

[@Enriquewong89]

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

[@OnHOWGuy]

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

[@SebasHeNPL18]

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

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

[@urbanunderdog479]

Hi, great videos and thanks for supporting the community. Question, how can I resize the font?

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

[@itsrubynotes]

Soo helpful and easy to follow thank you!!!

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

[@bindooransachithanandam203]

Very very helpful, thank you so much!!

[@uatalima]

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

[@AguiaDourada-f8s]

Worked Perfectly thank you

[@OnHOWGuy]

You're welcome!

[@oliverjrgensen7512]

This is really great, just subbed, very informational. I just have a question. If you wanna keep a high quality video, but load times might be an issue. Would you say a 11mb video is too much, or should that be fine? Im scared that the load times on mobile might be too harsh.

[@solowokeeSWNS]

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

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

[@NOWAY091]

Best KZbin Channel ! Thank You

[@OnHOWGuy]

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

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

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

[@Andy-wx2oe]

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

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

[@productukivo5695]

You're a G! Thanks bro 💯

[@jokutyyppi9964]

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

[@theomarasescu7996]

the link is working to you?

[@DanielRockenschaub-w2p]

thank you so much, very good tutorial!

[@Achilles_of_Troy]

Thankyou for the Code, it works great

[@EliteAgency-fh4rm]

love this dude

[@aaallonzo]

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

[@hebesue737]

Thank you so much to help me add the video banner , it's really helpful and clearly !

[@OnHOWGuy]

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

[@Knowledgedad]

You got the best videos sir

[@OnHOWGuy]

Thank you and i appreciate that. Cheers

[@ARMONICODESIGN]

hi! It was Amazing, but the video for mobile looks cropped, what can i do to show a vertical video

[@GildedPilgrim-l8t]

if i wanted to make the text over the image right justified to the right side of the screen, how would i go about doing that?

[@GersonCruz-j3t]

you're the best man!

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

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

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

[@fabianeer41]

worked perfectly fine, ty

[@ArturoHerrera777]

Thank you so much for your yand effort 🎉

[@PoshPoshyx]

You deserve more subscribers brother.

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

[@certifiedaverage1238]

How do I make it smaller in vertically (yes it will crop the video)

[@daviddubina2646]

Can you adjust code to have two button options please?

[@user-jc5vi4vb7l]

Followed everything on Sense theme but the text is not overlayed on the video, only in a separate box directly below. Any fix?

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

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

[@liamharris5817]

hi i have followed all the steps but when i go to add section it only says video, there is no video background option! Love the video hopefully you can help me

[@Marcus-deVries]

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

[@Jack-uf7ww]

My video seems super zoomed in, is there a way to make it look more zoomed out?

[@darniel6467]

Hello, I have a queation. The background banner is working, but I just want the banner on my Main Page, but the videos banner is showing up on every site on my website. Do have a tip how to avoid this ?

[@DriftArmy]

I can not see the section Video Background on my landing page, but on the other pages it does show up.