How to add a video background banner with autoplay to Homepage | Shopify Dawn theme

How to add a video background banner with autoplay to Homepage | Shopify Dawn theme | All Themes

Рет қаралды 35,265

Күн бұрын

In this video we will be talking about how to add a video banner to your website - This is without any plugin, and is completely free
GET THE CODE FREE:
pastebin.com/jDBLjYSr
The idea behind this is to add custom liquid to any page on your website, so you can also add a video banner to your product page, to your collection pages, and to any specific page on your shopify store, as well as your homepage
This is a really good system for giving a beautiful effect to your website - as you can autoplay the video, and not give it any controls, meaning the video is borderless and becomes part of your website
This video is specifcally for shopify video background autoplay, because I personally really like this effect. This is an embeded bit of code directly into Shopify's Liquid code
This video is great if you are wondering:
how to embed video on shopify homepage
embed video in shopify product page
how to embed youtube video in shopify blog
shopify embed video home page
can i add video to my shopify store
can you upload video to shopify
shopify video background code
How to add mp4 to Shopify
Shopify Dawn theme video background autoplay banner tutorial
This full screen video effect is great for any shopify users, and although this video is for Dawn, you can use it for any Shopify 2.0 theme
Peace!

Пікірлер: 193

@333baine Жыл бұрын

bro ive joined facebook groups, watched hours of youtube tutorials and even tried using GIFs💀youre a life saver, honestly. the only tutorial ive watched which explains perfectly and works amazingly on desktop as well as mobile. you are a legend

@luisatejeda8866 Жыл бұрын

OMG I’ve been searching for an easy video for 2 hours and the ones that I found I had to add a bunch of code, Thank you so much for making this so simple!!!

@Whosnikozis Жыл бұрын

Same

@taylornils Жыл бұрын

Thank you so much for this!! I have tried maybe 5 different methods that didn't work and yours was by far the easiest & most effective. Great job explaining the code- I've never had any experience with it and I was able to edit it perfectly to fit my website. Thanks again!!

@pamelachance2915 3 ай бұрын

I have been trying code from other videos for 2 days. Yours took 5 minutes. Thanks a million times over!

@DaveFore_AudioEngineering Жыл бұрын

I had to change my margin to -50px as the template was displaying an added 50px of header space (or so it seemed) but this puts the video right to the very bottom of the header. This is awesome, man! Thank you!

@Incomestreamsurfers Жыл бұрын

Thanks so much! Glad it helped

@RiversideVideo47 Жыл бұрын

I spent 4 hours today trying many solutions for this issue. One used 450 lines of code and didn't work!!! Yours uses 2 lines of code, takes 5 minutes and works brilliantly. Well done. Keep it up.

@allthingsdivergent-88 Жыл бұрын

Thank you so much!! This is the first embedded code that works across all the different styles ie. phone, computer etc.

@ShopMichelleBoutique Жыл бұрын

Very easy and well explained! Thanks so much!

@arturhavrylov Жыл бұрын

Man you are the best. You should keep creating content. I like how you explain easily

@silviobiabo Жыл бұрын

Really Simple! Took me less than 10 minutes to do! Thanks a lot💯💯

@iamjamham Жыл бұрын

You are the man. Super easy to follow - thanks mate!

@yourlinkedinbestie Жыл бұрын

This video just saved me now. So helpful. Video working properly

@MKMK-iw8te Жыл бұрын

Literally just copy and paste! Best video for this topic I've seen thus far! Thanks

@xanderrijkee5094 9 ай бұрын

Works like a charm... very elegant solution!

@petermolloy4174 Жыл бұрын

Dude, Thanks so much for that tutorial and supplying the free code. Legend

@PromiseJohnson34 Жыл бұрын

Thank you so much!!!! This took a few minutes and bang!!

@amctothemoon7654 Жыл бұрын

Thanks so much! I already uploaded mine with your help!

@user-rx2ef9ys2e 6 ай бұрын

this is a very usefull video even in 2024 everything you said is still working,Very nice video thank you!

@artisanrange Жыл бұрын

Thanks! This was so easy to do!!

@jessewiesner3930 6 ай бұрын

PSA: This actually works. Thanks!

@meditationgirl Жыл бұрын

Great video! Thank you so much!!!

@4theboys0 Жыл бұрын

Free knowledge, thank you my friend.

@user-yg3pc3rx3x Жыл бұрын

You are an legend, i wish you life time succes

@ITGirlll Жыл бұрын

Super useful, thank you!

@VongaBeauty Жыл бұрын

Thank you so much for this video & the coding! Worked easily!!!

@Incomestreamsurfers Жыл бұрын

Great

@sebastiansanchezlopez1369 Жыл бұрын

Many thanks bro, Ur great!

@ChloeSellsKnoxville Жыл бұрын

Amazing, thank you!

@OscarSolano-xi9vs Жыл бұрын

Great advise!!

@hocuskrazy Жыл бұрын

only video that worked bro thx

@Olaf134 4 ай бұрын

you are a life saver!!!!

@pineneedletealady 5 ай бұрын

THANK YOU SO MUCH!!!

@lanistewart3719 Жыл бұрын

Thank you so much!!

@DionSteyn-zx7jx 5 ай бұрын

Thank you soooooo much, this video really helped me

@blissblisscollections6039 Жыл бұрын

Beyond grateful

@onegirlsparty Жыл бұрын

OMG OMG THANK YOU SOOOOOOOOOOOOOOOOOOO much I was look ever where !!!! i am no guru XOXO HAPPY NEW YEAR

@MABO Жыл бұрын

So good thank you!

@markanthonygrant Жыл бұрын

Thanks a million!

@user-qj7fd1wr8s 6 ай бұрын

works perfect!

@PhotoBoothMaestro Жыл бұрын

Hello, What buttons did you press to open the code directly in editor at the moment 2:03? When I double click on the section name it doesn't open the code source. Thank you!

@nam9295 Жыл бұрын

Thanks bro!!!!!

@carlakatelyn1832 Жыл бұрын

THANK YOU SO MUCHHHHHHH!!!!!!!!

@EdnaAlberto Жыл бұрын

Thank you!

@investintoyourself 6 ай бұрын

Thanks you, you’re a saviour! Only question I’ve got is where to find such high quality professional video’s falling under my theme/season?

@ClintHamilton-Caroll 21 күн бұрын

You're the goat.

@wladikov1362 Жыл бұрын

Yooo awesome, I really needed this. I have a tiny problem tho. Whenever I, for example, choose a color or a size for my product or when I click on a "show all" button the video stops playing, even though it set on autoplay and loop. Any help would be appreciated 🙏

@thequalityco.2832 Жыл бұрын

Thanks!

@blowerbandco1607 Жыл бұрын

Two questions any way to add opacity? Anyway to get text overlay?

@MidwestGoldworksChain Жыл бұрын

Hey man. This was an awesome video much appreciated.. is there anyway to get the “auto play” feature to work on mobile? It’s not working on my iPhone but in desktop and iPad it auto plays, otherwise on my phone I have to click the play button? Help please lol, thankyou!

@countrydancex 8 ай бұрын

Thank you for this video. It was as easy to do as promised. I do have a question ... How could changing the viewing size (percent) affect the loading time? The video would still be the exact same size but we would just be viewing it in a smaller window right? I can't imagine a scenario where changing the viewing size would affect the loading time.

@yamillopez6754 Жыл бұрын

Great solution!.. very simple!... one question: How can I do, to show a video on desktop and see another video on mobile?

@s1lvastyle Жыл бұрын

Thank you for the help! Do you have a solution to close the gap between the header and the video?

@VareshwarDhiman Жыл бұрын

Thank you buddy

@arunprakash120 7 ай бұрын

thanks man

@candylovalot Жыл бұрын

It works perfectly. Thank you. How can we have the video on full height screen on mobile?

@pamelachance2915 3 ай бұрын

Thank you. This helped me so much! How can we add a text box with a button over the video?

@dylanbensi-yx3cf Жыл бұрын

Thank you! only i have one thing I want this just being the only thing on my webshop as homepage and on desktop mode it is full screen but in Mobile it isn't only just a small part how can i fix this?

@ahmedalsalihi2787 Жыл бұрын

thanks dude

@vize004 9 ай бұрын

Hey! THis code is great and easy thank you! One question is there a little more code that could add to make the video clickable and link to another page?

@wxsse Жыл бұрын

Hey! I have this problem where it doesn't change the height of the video. Only the width.

@DawitJember Жыл бұрын

Your the goat

@lightlylume Жыл бұрын

THANK YOU

@maramalmutairi8626 Жыл бұрын

Thank you. It really helped. Is there anyway we can add a Shop All button on the video?

@user-ht3eu3fs1w Жыл бұрын

Is there a way to add a cover image incase it doesn't load? It seems to not work after some time has past and then need to reactivate it by reloading the customise theme page

@user-cq1mr9rd8l Ай бұрын

Thanks a ton! Most easy video for this feature on youtube. Do you know if there is a way to add text and even a button to the video banner?

@ricardosantiago7880 Жыл бұрын

Thank youuu

@WarrenLouw 6 ай бұрын

Thanks a lot man! Is there a way to add videos to collection headers? Can't seem to figure that one out.

@Carloshernandeztattoo Жыл бұрын

Thank u sir 🙏

@Heyydudee 2 ай бұрын

Great thank you for this. I will join & subscribe! But wondering if you could tell me how to add a email collection field underneath the header/subheader?

@susannlucas7138 Ай бұрын

Hi thank you again for this code the only thing is i have this white gap between the video and the header ... any idea what to do or how i can get it up to the header wihout the gap ? Thank you

@MrAviranshahino Жыл бұрын

I've almost change platform to squerspace for having this. Thank you very much. Can sound work also?

@Faaith1 10 ай бұрын

Hi! Thank you so much for this, super easyyy. Is there a way I can add a button in the middle or a link so when clicked on the video it takes users to a collection? tank you

@alozanx Жыл бұрын

hey and what about mobile version? in my case i don't want the video to resize how can I make it?

@Bonnyvox Жыл бұрын

Awesome!! Can i put text over it?

@faldabagh 10 ай бұрын

This is a tonne easier than adding a new section! Is it possible to add a button on top of the video here though?

@veganqwef1162 Жыл бұрын

when i added 2 custom videos. when i change the width to 1 it changes both of them how do i separate them

@God66671 Жыл бұрын

Can you please make the code for having different dimension desktop and mobile please ? Actually video looks small on mobile would like to rotate the video to portait format for mobile ……… thanks

@AGENCE_AIDA 11 ай бұрын

Thank you very much. But i may be the only one but i never succeeded to get the same result as you. The video takes over all the page and i've changed the margin, width and height, but nothing changed... can you help please ? Thank you

@kellyrodrigues1483 Жыл бұрын

Amazing video! Is it possible to add text and a button on the video? Thank you

@Alina-wy1ro Жыл бұрын

Thank you! IS there a way to make it clickable?

@manizacisse982 8 ай бұрын

Thanks for the Video! But the autoplay does not work in my page somehow ? Do you know how I can fix it ?

@mar97021 Жыл бұрын

This was super easy to do for my non-coding brain. Thank you! Is there a way to move the video to the right side of the page?

@Incomestreamsurfers Жыл бұрын

I'm not sure, probably by adding a div or something..... or adding a white space? I don't know for sure

@davideesposito8471 Жыл бұрын

You helped me a lot! Thank you! One question, it is possible to make it showable only for the mobile?

@Incomestreamsurfers Жыл бұрын

Probably - I will look into this but most likely you will have to use media screens - if you can’t work it out I’ll have a look. Google media screens Shopify and make it so the video only shows on screens smaller than 1000px or something

@tchingz Жыл бұрын

thank you very much, i was starting to get stuck with this, had videos that didn't display on mobile and stuff but with your methode it is just perfect, thank you very much, i'd like to know if you have a way of writing and displaying a button or is this solution has only the video that can be featured

@Incomestreamsurfers Жыл бұрын

I’ll look into this soon as people are asking

@goodifi Жыл бұрын

@@Incomestreamsurfers I'd like to know this too! I'd love to have a text + button overlay if possible :)

@TeijevanderLaan Жыл бұрын

Does this work on Product pages too? I want my product picture to be a GIF/video

@GRXMSZILLA Жыл бұрын

Hey, i have a question, do you also know.. for example i have 2 videos, and i want them both player, but when the first video stops, the second video plays, hope you can help me out

@user-dw7wl4yr8v 11 ай бұрын

My problem is that it shows on the homepage AND on the product page. How do I hide it from the product page, when I try it seems to affect both pages

@niko_goosebumps Жыл бұрын

Thank you but in my case it doesn't work. I think it has something to do with my video link, even tho it looks pretty similar to urs.

@hjhgfdrtyj 7 ай бұрын

I was using this method to add a video banner on product page. But there is a problem. It was working well at the beginning, but after I click on variants pill/selector or swiped the photo gallery, the video banner just stopped playing. Does anybody know how to solve this problem? 🙏

@ShopHazelBlues Жыл бұрын

Where do you put the code if your theme does not have the custom liquid option?

@pinifarina458 4 ай бұрын

Is there a way to make it also look good on the mobile version?

@yukonglory 4 ай бұрын

Hi! Thanks for the video. This option does not allow you to add h1 header and description (hero text) which is super important for a home page. How does one goi about doing that?

@Incomestreamsurfers 4 ай бұрын

Your homepage already has a title on Shopify - it takes it from the Shopify internal settings

@visualdosage234 4 ай бұрын

is it possible to use a youtube video link? so it doesnt take any loading time away from your site

@etiqdes1199 Жыл бұрын

thx so much ,, can i make the video much taller like FEAR OF GOD brand ??

@jillianosullivan1229 Жыл бұрын

Hello, I have the Cascade theme and there doesn't seem to be an option to add custom liquid, only custom HTML.

@Incomestreamsurfers Жыл бұрын

It's the same thing - The code I have given is in HTML

@Craigo177 Жыл бұрын

Thanks for making such a great tutorial! Sorry if this is a stupid question, but what would I need to change for my video to not be muted? Thanks :)

@Incomestreamsurfers Жыл бұрын

It says mute=yes in the code I think somewhere just change that

@Craigo177 Жыл бұрын

@@Incomestreamsurfers video { display: block; margin: 0 auto; width: 100%; height: 50%; } It's got playsinline muted at the end there and I've tried removing the word muted, but then it doesn't autoplay anymore. Do I need to put something else there instead?

@Incomestreamsurfers Жыл бұрын

@@Craigo177 just a tip as you’ll need this anyway - try putting the code into ChatGPT and saying can you unmute this but keep auto play

@os_asphaltmidas8654 Жыл бұрын

Does it still play if phone is on low power mode?

@Sexveil 8 ай бұрын

Respect

@outthetrunk4365 Жыл бұрын

do you know how we can add text ontop??? thank you

@aaronkleytz8599 4 ай бұрын

is there a way to add text/link to product page on the video?

@sendly_6980 10 ай бұрын

Hello! Thank you very much for the good video! I have one problem tho: The video shows perfectly fine on desktop, but on mobile it doesn't work... any tips?

@portaemprende 9 ай бұрын

same