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

Поделиться
HTML-код
  • Опубликовано: 17 янв 2025

Комментарии • 202

  • @333baine
    @333baine 2 года назад +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

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

  • @luisatejeda8866
    @luisatejeda8866 2 года назад +17

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

  • @pamelachance2915
    @pamelachance2915 9 месяцев назад +1

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

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

  • @artishdesign
    @artishdesign 3 месяца назад

    Wow I just spent an hour trying to figure this out on my own and you just made it easy as 123! Thank you!!!!

  • @arturhavrylov
    @arturhavrylov Год назад +1

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

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

  • @countrydancex
    @countrydancex Год назад

    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.

  • @blowerbandco1607
    @blowerbandco1607 2 года назад +4

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

  • @MKMK-iw8te
    @MKMK-iw8te Год назад

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

  • @yourlinkedinbestie
    @yourlinkedinbestie Год назад

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

  • @MidwestGoldworksChain
    @MidwestGoldworksChain 2 года назад +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!

  • @jessewiesner3930
    @jessewiesner3930 Год назад

    PSA: This actually works. Thanks!

  • @B750-k7n
    @B750-k7n 2 года назад +1

    You are an legend, i wish you life time succes

  • @wxsse
    @wxsse Год назад +2

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

  • @xanderrijkee5094
    @xanderrijkee5094 Год назад

    Works like a charm... very elegant solution!

  • @allthingsdivergent-88
    @allthingsdivergent-88 2 года назад

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

  • @iamjamham
    @iamjamham Год назад

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

  • @susannlucas7138
    @susannlucas7138 7 месяцев назад

    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

  • @montesinbad
    @montesinbad Год назад

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

  • @WarrenLouw
    @WarrenLouw 11 месяцев назад

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

  • @ElazarDavydov
    @ElazarDavydov Год назад +2

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

  • @Alina-wy1ro
    @Alina-wy1ro Год назад +1

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

  • @MadsHall-f1x
    @MadsHall-f1x 7 месяцев назад

    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?

  • @sendly_6980
    @sendly_6980 Год назад +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?

  • @petermolloy4174
    @petermolloy4174 2 года назад

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

  • @silviobiabo
    @silviobiabo Год назад

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

  • @alozanx
    @alozanx 2 года назад +1

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

  • @artishdesign
    @artishdesign 3 месяца назад

    Is it possible to add Text and Button options overlayed over the video with this method?

  • @God66671
    @God66671 2 года назад +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

  • @s1lvastyle
    @s1lvastyle Год назад

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

  • @ahmadabdulrehman4679
    @ahmadabdulrehman4679 18 дней назад

    Tum bohat mastt kaam krta hai maqsood bhai

  • @manizacisse982
    @manizacisse982 Год назад

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

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

  • @LeifRobertson-y9j
    @LeifRobertson-y9j 4 месяца назад

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

  • @PhotoBoothMaestro
    @PhotoBoothMaestro 2 года назад +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!

  • @yukonglory
    @yukonglory 10 месяцев назад

    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  10 месяцев назад

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

  • @KidParanormal
    @KidParanormal Год назад +1

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

  • @Faaith1
    @Faaith1 Год назад

    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

  • @Heyydudee
    @Heyydudee 8 месяцев назад

    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?

  • @investintoyourself
    @investintoyourself 11 месяцев назад

    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?

  • @pinifarina458
    @pinifarina458 10 месяцев назад

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

  • @shetrades984
    @shetrades984 2 года назад

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

  • @DionSteyn-zx7jx
    @DionSteyn-zx7jx 11 месяцев назад

    Thank you soooooo much, this video really helped me

  • @onegirlsparty
    @onegirlsparty 2 года назад

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

  • @vize004
    @vize004 Год назад

    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?

  • @Bonnyvox
    @Bonnyvox 2 года назад +1

    Awesome!! Can i put text over it?

  • @UbongaShorts
    @UbongaShorts 2 года назад

    how did u make that loading effect at 6:00?

    • @Incomestreamsurfers
      @Incomestreamsurfers  2 года назад

      That was just the end of the video timed very well to look like a loading effect and confuse viewers haha

    • @UbongaShorts
      @UbongaShorts 2 года назад

      @@Incomestreamsurfers Wow it worked hahaha

  • @VongaBeauty
    @VongaBeauty 2 года назад

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

  • @pamelachance2915
    @pamelachance2915 8 месяцев назад

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

  • @4theboys0
    @4theboys0 2 года назад

    Free knowledge, thank you my friend.

  • @yamillopez6754
    @yamillopez6754 Год назад

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

  • @MrAviranshahino
    @MrAviranshahino Год назад

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

  • @aaronkleytz8599
    @aaronkleytz8599 10 месяцев назад

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

  • @yahablack1229
    @yahablack1229 Год назад

    Hello! Is there a way the video is not muted?

  • @os_asphaltmidas8654
    @os_asphaltmidas8654 Год назад

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

  • @candylovalot
    @candylovalot 2 года назад +2

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

  • @AWESOMEBANDrocker
    @AWESOMEBANDrocker 11 месяцев назад

    Is there any ways to boost the loading time?

  • @outthetrunk4365
    @outthetrunk4365 Год назад

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

  • @Ujfinance
    @Ujfinance Год назад

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

  • @visualdosage234
    @visualdosage234 10 месяцев назад

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

  • @dylanbensi-yx3cf
    @dylanbensi-yx3cf 2 года назад

    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?

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

  • @maramalmutairi8626
    @maramalmutairi8626 Год назад

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

  • @amctothemoon7654
    @amctothemoon7654 2 года назад

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

  • @yxersce
    @yxersce Год назад

    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

  • @kellyrodrigues1483
    @kellyrodrigues1483 Год назад

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

  • @meditationgirl
    @meditationgirl Год назад

    Great video! Thank you so much!!!

  • @JIMGym-q3e
    @JIMGym-q3e Год назад +1

    why I don't have a files button?

    • @ConradFreestyle
      @ConradFreestyle 10 месяцев назад

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

  • @AnaisMcqueen
    @AnaisMcqueen Год назад +2

    Yo there is no files button on my page

    • @KimbaPham1
      @KimbaPham1 Год назад +1

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

    • @deannacamille31
      @deannacamille31 Год назад

      @@KimbaPham1 Thank you!

  • @GZSBGZSB
    @GZSBGZSB Год назад

    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

  • @artisanrange
    @artisanrange Год назад

    Thanks! This was so easy to do!!

  • @TeijevanderLaan
    @TeijevanderLaan 2 года назад

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

  • @yRyXn-
    @yRyXn- Год назад

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

  • @TMSavy
    @TMSavy 3 месяца назад

    I don't have the section labeled files.

  • @hocuskrazy
    @hocuskrazy 2 года назад

    only video that worked bro thx

  • @ShopHazelBlues
    @ShopHazelBlues Год назад

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

  • @haroldthomas5403
    @haroldthomas5403 Год назад

    can't get my video to show up

  • @mudrachain
    @mudrachain Год назад

    will it work on mobile?

  • @MABO
    @MABO Год назад

    So good thank you!

  • @veganqwef1162
    @veganqwef1162 Год назад

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

  • @whyeff21
    @whyeff21 Год назад

    In the current Dawn theme, the video plays on all the pages. How do you make conditions or templates for only the home page to have the video?

  • @ITGirlll
    @ITGirlll Год назад

    Super useful, thank you!

  • @mar97021
    @mar97021 2 года назад +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  2 года назад

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

  • @Es_4444
    @Es_4444 5 месяцев назад

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

    • @Incomestreamsurfers
      @Incomestreamsurfers  5 месяцев назад

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

    • @Es_4444
      @Es_4444 5 месяцев назад

      @@Incomestreamsurfers thanks so much!

  • @pineneedletealady
    @pineneedletealady 10 месяцев назад

    THANK YOU SO MUCH!!!

  • @Doshealle
    @Doshealle 2 года назад

    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

  • @jorenskk
    @jorenskk 2 года назад

    Can you create the same but for youtube ?

  • @sebastiansanchezlopez1369
    @sebastiansanchezlopez1369 2 года назад

    Many thanks bro, Ur great!

  • @mellowheights5505
    @mellowheights5505 2 года назад

    hello video works great on my desktop version of the website but it does not even show on my mobile version on my iphone
    any thoughts? i cleared all date and cache

    • @Incomestreamsurfers
      @Incomestreamsurfers  2 года назад

      Most likely you have autoplayed disabled on whichever browser you’re using - try using a different mobile browser

    • @mellowheights5505
      @mellowheights5505 2 года назад

      @@Incomestreamsurfers I have switched the code so the "controls" available. and it only gives me a black screen on mobile. the video never starts playing. Could this have to do with my video file type?

    • @mellowheights5505
      @mellowheights5505 2 года назад

      Worked after I used an MP4 file instead of webm file

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

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

  • @blissblisscollections6039
    @blissblisscollections6039 Год назад

    Beyond grateful

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

  • @investorempires
    @investorempires Год назад

    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  Год назад +1

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

  • @AraB-df4cd
    @AraB-df4cd 2 года назад +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  2 года назад +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?

  • @aledrube2526
    @aledrube2526 Год назад

    I am having a problem , the video is not autoplaying on mobiles phones :(

  • @christinaunbekannt4902
    @christinaunbekannt4902 Год назад

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

  • @theingecollection4026
    @theingecollection4026 Год назад

    my shopify account doesn't have a files upload section????