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

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ก.ย. 2024

ความคิดเห็น • 200

  • @luisatejeda8866
    @luisatejeda8866 ปีที่แล้ว +18

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

  • @333baine
    @333baine ปีที่แล้ว +4

    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

  • @pamelachance2915
    @pamelachance2915 5 หลายเดือนก่อน +1

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

  • @DaveFore_AudioEngineering
    @DaveFore_AudioEngineering ปีที่แล้ว +6

    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!

  • @RiversideVideo47
    @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.

  • @LeifRobertson-y9j
    @LeifRobertson-y9j 3 วันที่ผ่านมา

    Hey! Out of all the BS ones Ive tried this one worked quick and simple. The others did not work on mobile and required too many adjustments..I know code and this is way easier...Thanks!!!

  • @arturhavrylov
    @arturhavrylov ปีที่แล้ว +1

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

  • @montesinbad
    @montesinbad 8 หลายเดือนก่อน

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

  • @taylornils
    @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!!

  • @MKMK-iw8te
    @MKMK-iw8te ปีที่แล้ว

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

  • @MidwestGoldworksChain
    @MidwestGoldworksChain ปีที่แล้ว +3

    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!

  • @yourlinkedinbestie
    @yourlinkedinbestie ปีที่แล้ว

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

  • @user-yg3pc3rx3x
    @user-yg3pc3rx3x ปีที่แล้ว +1

    You are an legend, i wish you life time succes

  • @allthingsdivergent-88
    @allthingsdivergent-88 ปีที่แล้ว

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

  • @countrydancex
    @countrydancex 9 หลายเดือนก่อน

    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.

  • @jessewiesner3930
    @jessewiesner3930 8 หลายเดือนก่อน

    PSA: This actually works. Thanks!

  • @blowerbandco1607
    @blowerbandco1607 ปีที่แล้ว +4

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

  • @xanderrijkee5094
    @xanderrijkee5094 11 หลายเดือนก่อน

    Works like a charm... very elegant solution!

  • @ShopMichelleBoutique
    @ShopMichelleBoutique ปีที่แล้ว +1

    Very easy and well explained! Thanks so much!

  • @silviobiabo
    @silviobiabo ปีที่แล้ว

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

  • @candylovalot
    @candylovalot ปีที่แล้ว +2

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

  • @pamelachance2915
    @pamelachance2915 4 หลายเดือนก่อน

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

  • @iamjamham
    @iamjamham ปีที่แล้ว

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

  • @investintoyourself
    @investintoyourself 7 หลายเดือนก่อน

    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?

  • @wxsse
    @wxsse ปีที่แล้ว +2

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

  • @user-cq1mr9rd8l
    @user-cq1mr9rd8l 3 หลายเดือนก่อน

    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?

  • @petermolloy4174
    @petermolloy4174 ปีที่แล้ว

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

  • @sendly_6980
    @sendly_6980 11 หลายเดือนก่อน +1

    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?

  • @Olaf134
    @Olaf134 6 หลายเดือนก่อน

    you are a life saver!!!!

  • @God66671
    @God66671 ปีที่แล้ว +2

    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

  • @Heyydudee
    @Heyydudee 3 หลายเดือนก่อน

    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?

  • @PhotoBoothMaestro
    @PhotoBoothMaestro ปีที่แล้ว +3

    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!

  • @PromiseJohnson34
    @PromiseJohnson34 ปีที่แล้ว

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

  • @VongaBeauty
    @VongaBeauty ปีที่แล้ว

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

  • @ClintHamilton-Caroll
    @ClintHamilton-Caroll 2 หลายเดือนก่อน

    You're the goat.

  • @yamillopez6754
    @yamillopez6754 ปีที่แล้ว

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

  • @erikwetterheim2257
    @erikwetterheim2257 21 วันที่ผ่านมา

    Thank you sooo much!!!

  • @onegirlsparty
    @onegirlsparty ปีที่แล้ว

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

  • @susannlucas7138
    @susannlucas7138 3 หลายเดือนก่อน

    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

  • @ElazarDavydov
    @ElazarDavydov ปีที่แล้ว +2

    if I want to add button on top and text box how can I do that. ?

  • @DionSteyn-zx7jx
    @DionSteyn-zx7jx 6 หลายเดือนก่อน

    Thank you soooooo much, this video really helped me

  • @Alina-wy1ro
    @Alina-wy1ro ปีที่แล้ว +1

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

  • @amctothemoon7654
    @amctothemoon7654 ปีที่แล้ว

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

  • @KidParanormal
    @KidParanormal ปีที่แล้ว +1

    How do you get it to auto play on IOS devices?

  • @vize004
    @vize004 10 หลายเดือนก่อน

    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?

  • @4theboys0
    @4theboys0 ปีที่แล้ว

    Free knowledge, thank you my friend.

  • @artisanrange
    @artisanrange ปีที่แล้ว

    Thanks! This was so easy to do!!

  • @hocuskrazy
    @hocuskrazy ปีที่แล้ว

    only video that worked bro thx

  • @WarrenLouw
    @WarrenLouw 7 หลายเดือนก่อน

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

  • @mar97021
    @mar97021 ปีที่แล้ว +2

    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
      @Incomestreamsurfers  ปีที่แล้ว

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

  • @meditationgirl
    @meditationgirl ปีที่แล้ว

    Great video! Thank you so much!!!

  • @MABO
    @MABO ปีที่แล้ว

    So good thank you!

  • @s1lvastyle
    @s1lvastyle ปีที่แล้ว

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

  • @alozanx
    @alozanx ปีที่แล้ว +1

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

  • @maramalmutairi8626
    @maramalmutairi8626 ปีที่แล้ว

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

  • @wladikov1362
    @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 🙏

  • @user-qj7fd1wr8s
    @user-qj7fd1wr8s 7 หลายเดือนก่อน

    works perfect!

  • @MrAviranshahino
    @MrAviranshahino ปีที่แล้ว

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

  • @ITGirlll
    @ITGirlll ปีที่แล้ว

    Super useful, thank you!

  • @faldabagh
    @faldabagh ปีที่แล้ว

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

  • @Faaith1
    @Faaith1 11 หลายเดือนก่อน

    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

  • @user-fk9yp6ek8h
    @user-fk9yp6ek8h ปีที่แล้ว +1

    why I don't have a files button?

    • @ConradFreestyle
      @ConradFreestyle 6 หลายเดือนก่อน

      Instead of clicking "settings", go to "Content" , then "Files"

  • @lsaccountingfirm5494
    @lsaccountingfirm5494 7 หลายเดือนก่อน

    Exactly what I was looking for 🙂 BUT it doesn't auto-play on Mobile (Desktop only)

    • @Incomestreamsurfers
      @Incomestreamsurfers  7 หลายเดือนก่อน

      Auto play generally is disabled by your phone not Shopify

  • @Bonnyvox
    @Bonnyvox ปีที่แล้ว +1

    Awesome!! Can i put text over it?

  • @AnaisMcqueen
    @AnaisMcqueen ปีที่แล้ว +2

    Yo there is no files button on my page

    • @VirgoRisingAlchemist
      @VirgoRisingAlchemist ปีที่แล้ว +1

      just type files in search bar and it will direct you to the section :)

    • @deannacamille31
      @deannacamille31 ปีที่แล้ว

      @@VirgoRisingAlchemist Thank you!

  • @sebastiansanchezlopez1369
    @sebastiansanchezlopez1369 ปีที่แล้ว

    Many thanks bro, Ur great!

  • @pinifarina458
    @pinifarina458 5 หลายเดือนก่อน

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

  • @arunprakash120
    @arunprakash120 9 หลายเดือนก่อน

    thanks man

  • @contentm3893
    @contentm3893 ปีที่แล้ว

    60MB is not a large file size. What about adding TH-cam video?

  • @manizacisse982
    @manizacisse982 10 หลายเดือนก่อน

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

  • @dylanbensi-yx3cf
    @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?

  • @kellyrodrigues1483
    @kellyrodrigues1483 ปีที่แล้ว

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

  • @OscarSolano-xi9vs
    @OscarSolano-xi9vs ปีที่แล้ว

    Great advise!!

  • @AraB-df4cd
    @AraB-df4cd ปีที่แล้ว +2

    Thank you for the video! However, it unfortunately does not play on mobile devices. Which is the most important platform for most. :(

    • @Incomestreamsurfers
      @Incomestreamsurfers  ปีที่แล้ว +1

      The problem is actually that auto play is not automatically switched on on most mobile browsers

    • @shmooglevitz7281
      @shmooglevitz7281 ปีที่แล้ว

      @@Incomestreamsurfersis there a way to fix this?

  • @blissblisscollections6039
    @blissblisscollections6039 ปีที่แล้ว

    Beyond grateful

  • @yukonglory
    @yukonglory 6 หลายเดือนก่อน

    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
      @Incomestreamsurfers  6 หลายเดือนก่อน

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

  • @UJFOREX_ACADEMY_for_Beginners
    @UJFOREX_ACADEMY_for_Beginners 8 หลายเดือนก่อน

    I noticed the video appears on all page ,how can change that

  • @davideesposito8471
    @davideesposito8471 ปีที่แล้ว

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

    • @Incomestreamsurfers
      @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

  • @christinaunbekannt4902
    @christinaunbekannt4902 ปีที่แล้ว

    good eplained but I don't have the button " Custom Liquid"? whhhhyyy is it so complicated :(( helppp

  • @aaronkleytz8599
    @aaronkleytz8599 6 หลายเดือนก่อน

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

  • @AGENCE_AIDA
    @AGENCE_AIDA ปีที่แล้ว

    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

  • @markanthonygrant
    @markanthonygrant ปีที่แล้ว

    Thanks a million!

  • @carlakatelyn1832
    @carlakatelyn1832 ปีที่แล้ว

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

  • @visualdosage234
    @visualdosage234 6 หลายเดือนก่อน

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

  • @yRyXn-
    @yRyXn- 11 หลายเดือนก่อน

    The video doesnt work on phone, can you help me with that?

  • @Craigo177
    @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
      @Incomestreamsurfers  ปีที่แล้ว

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

    • @Craigo177
      @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
      @Incomestreamsurfers  ปีที่แล้ว +1

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

  • @EdnaAlberto
    @EdnaAlberto ปีที่แล้ว

    Thank you!

  • @hjhgfdrtyj
    @hjhgfdrtyj 9 หลายเดือนก่อน

    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? 🙏

  • @AWESOMEBANDrocker
    @AWESOMEBANDrocker 7 หลายเดือนก่อน

    Is there any ways to boost the loading time?

  • @tchingz
    @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
      @Incomestreamsurfers  ปีที่แล้ว +3

      I’ll look into this soon as people are asking

    • @goodifi
      @goodifi ปีที่แล้ว +1

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

  • @try.not.to.laugh.funnvideos
    @try.not.to.laugh.funnvideos 9 หลายเดือนก่อน

    is there a way to make the banner video clickable? if thats possible could you give me the full code

  • @niko_goosebumps
    @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.

  • @user-dw7wl4yr8v
    @user-dw7wl4yr8v ปีที่แล้ว

    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

  • @nam9295
    @nam9295 ปีที่แล้ว

    Thanks bro!!!!!

  • @investorempires
    @investorempires 9 หลายเดือนก่อน

    I thought I was never gonna be able to do it. Thank so much!
    Do you think is possible to add a clickable button on it? If so, can you explain how?
    Thanks!

    • @Incomestreamsurfers
      @Incomestreamsurfers  9 หลายเดือนก่อน +1

      you can actually just add an html button just ask ChatGPT to do it

  • @VareshwarDhiman
    @VareshwarDhiman ปีที่แล้ว

    Thank you buddy

  • @GRXMSZILLA
    @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

  • @Es_4444
    @Es_4444 28 วันที่ผ่านมา

    Hi great video! I have uploaded the video however is not playing automatically. How do I fix this?
    Thank you!

    • @Incomestreamsurfers
      @Incomestreamsurfers  28 วันที่ผ่านมา

      @@Es_4444 auto play depends on the browser and not your settings

    • @Es_4444
      @Es_4444 28 วันที่ผ่านมา

      @@Incomestreamsurfers thanks so much!

  • @akashdeepsandhu1080
    @akashdeepsandhu1080 ปีที่แล้ว

    Hey it doesn’t work on safari it shows the play icon

  • @lightlylume
    @lightlylume ปีที่แล้ว

    THANK YOU