How To Add Video On Shopify Homepage With Autoplay

Поделиться
HTML-код
  • Опубликовано: 16 апр 2023
  • In this Shopify tutorial i will show you how to add video on Shopify homepage with autoplay feature for your store so the video will start playing automatically when the customer accessed your store's homepage.
    There is a lot of reasons why adding a video on your Shopify homepage with autoplay is so important, it can can help engage and capture the attention of potential customers, videos give shoppers an interactive, visual experience that can showcase what makes your store unique and memorable.
    Also having a video on Shopify homepage that plays automatically helps draw people in even more as it allows them to immediately see what you have going on without any effort from them at all, adding videos with autoplay also gives you an opportunity to show off products or services in action or provide informative tutorials for customers who are interested in learning more about how they work before making their purchase decision.
    Link for the code : pastebin.com/t8rgWiYA
    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 RUclips 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 #shopify #homepagevideo

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

  • @user-lc6er8kx4j
    @user-lc6er8kx4j 9 месяцев назад +12

    This video is exquisite! Quick and easy to understand! 11/10 Thank you!!!!

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

      You're very welcome, glad it was.
      Cheers

  • @IWWOD
    @IWWOD Год назад +7

    Bro, your genuinely the best, it took me one week watching different videos, this was simple and awesome

    • @OnHOWGuy
      @OnHOWGuy  Год назад +3

      Thanks brother, i appreciate that and really glad i could help.
      Cheers

  • @CourtneyElRefai
    @CourtneyElRefai 7 месяцев назад +2

    Wow thank you for this gem! Appreciate you sharing this information for free. Very straight to the point video -- rare to find these days!!

  • @svetlinmitev7653
    @svetlinmitev7653 10 месяцев назад +3

    Finally someone actually explained. Thanks bro, great video!

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

    Thank youuuuu so much! For some reason I had to put nothing in the first type section of the code, then it worked perfectly. Cheers!

  • @DaintyLittleShop
    @DaintyLittleShop 3 месяца назад +1

    I am sorry to say, but you are simply "THE BESTTTTTT". Your videos have helped me so soo much. ATB for your honest hardwork and helping others man!!

  • @deavontadixon805
    @deavontadixon805 7 месяцев назад +2

    Best tutorial EVER!!!
    Got it on the first try!!!!!
    Thank you soooooo much :)

  • @joonabarlund9428
    @joonabarlund9428 3 месяца назад +1

    Earned my sub like and comment and i rarely do that. I went to hell and back and back to hell and back trying to find how to do this and this guys just shows it like in 10 seconds.. thank you!

  • @blau2417
    @blau2417 Год назад +11

    A perfectly explained video, 10/10. Thank you so much!

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

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

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

    I never comment on videos, but this deserves it. Thank you!!!

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

    What a legend. I spent hours trying to do this myself, thanks so much for the help!

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

      You're very welcome brother, glad i could help and good luck with your journey.
      Cheers

  • @milesdiallo564
    @milesdiallo564 9 месяцев назад +2

    God bless you bro. You saved me 10 hours of work.

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

    I'm learning a lot from your videos. Thank you so much for sharing!

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

    Thank you!
    Great content, always learning, happy Wednesday!

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

    This is an easy and perfect way to adapt!! Thank you!

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

    Thank you very much! This did exactly what I wanted

  • @Drums1696
    @Drums1696 2 месяца назад

    You're awesome bro, thanks for the help. Like and subscribed!

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

    Thank you so much for the video!! You explain it so well!!

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

    Wow thank you you are a life saver ! I tried so many codes and it was difficult

  • @user-ne1fy8oi5x
    @user-ne1fy8oi5x 7 месяцев назад

    man your the honest boy love you man

  • @FacesbyStacye
    @FacesbyStacye 7 месяцев назад +1

    Best tutorial hands down! Got it on the first try!!!!!

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

    Thank you so much!! Saved me a lot of headache.

  • @user-es3ft6dn4z
    @user-es3ft6dn4z 10 месяцев назад

    Thanks this was useful. Is it possible to make the mobile desktop auto play as well? When i look at the mobile desktop it has the play button instead of auto play.

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

    thank you so much, this saved me a lot of headaches with shopify video

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

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

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

    WOW, exactly what I needed. You have saved the day once again..

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

      Really glad i did and happy to help.
      Cheers

  • @BLStudios-yx9fm
    @BLStudios-yx9fm 3 месяца назад

    Hey! thanks for the video this worked for me. Question - what aspect ratio do you use for your video to get it to fit well on the screen? The width is perfect but part of the video is cut off and when I resize the height I'm left with columns on the left and right of the screen.

  • @deidred
    @deidred Год назад +7

    Thanks for the tutorial. Is there any way to add the text box over the video?

  • @user-en9ku7it6w
    @user-en9ku7it6w 6 месяцев назад

    FIRE!!! Straight to the point and it worked awesome thank you so much.

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

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

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

    Rien à dire le meilleur tutorial que j'ai vu et facile a comprendre

  • @user-hp7qs6kl8p
    @user-hp7qs6kl8p 6 месяцев назад

    Thank you!! Works perfect and easy to understand! Saved me so much time

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

      Great to hear and you're very welcome.
      Cheers

  • @3rdSalimo
    @3rdSalimo Год назад

    Thank you Anas. Very helpful!

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

    Oh my gosh thank you!!! Such a wonderful explanation!

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

      Thank you, really glad you think so.
      Cheers

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

    Hey man, thanks for the video, helped a lot! Quick question, I realized that it only works for computer but not for mobile. Any suggestion? Appreciate it!

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

    Hello. This worked really well. Im on Dawn 10.0. It seems like the video is showing when i press to see my products aswell. is there a way to have the video only on the main page without it appearing on my products. Thank you

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

    Thank you! I struggled with this and looked into a lot of pages but couldn't find anything! One more question, how would you add text on the top of the video?

  • @user-bp4hu8yl6x
    @user-bp4hu8yl6x Год назад +3

    Thank you, That;s what i was looking for, you are good man. I am wondering how to add the button on the video

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

    Wow! This was great, very straight to the point.

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

      Really glad you think so.
      Cheers

  • @tygessupplies1837
    @tygessupplies1837 2 месяца назад

    You have my eternal thanks. - liked and subscribed.

  • @demior5582
    @demior5582 2 месяца назад

    OKAY THANK YOU SO MUCH YOU ARE GREAT. I do have one question. What is the size of that video? I want to make sure my video doesn’t cut anything out HELLO

  • @CJ-vz5bl
    @CJ-vz5bl Год назад

    dude thank you so much for this video, so easy to follow, just subbed

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

      I just saw your comment, you're very welcome and glad i could help.
      Welcome to the family.
      Cheers

  • @colesmart7027
    @colesmart7027 11 месяцев назад +3

    Hey Anas! Is there a way to make the product video autoplay? I want the product videos on my homepage to be playing automatically. Please let me know. Thanks so much.

  • @iamannie415
    @iamannie415 6 месяцев назад

    This is the only video that worked ! Thank you immensely ♥️ new subsc

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

      Thanks for subbing and you're very welcome.
      Thats what this channel is all about.
      Cheers

  • @meghanwedin3562
    @meghanwedin3562 9 месяцев назад

    Thank you!! Is it possible to have the video not loop but just stop at end of video? Still showing the end of video no blank screen is what I’m looking for.

  • @user-wz5bn2mq9k
    @user-wz5bn2mq9k 8 месяцев назад

    Awesome video, very helpful, thank you!

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

    Thank you for the tutorial, it really worked. However, my video is darker than when I added the video using the default section add-on under template. Did the code make my video darker? how do I fix this? Thank you

  • @Paulette-mj5fr
    @Paulette-mj5fr 11 месяцев назад

    Thank you so much. Much appreciated!

  • @chrisinclan8866
    @chrisinclan8866 Месяц назад

    Great video! Need help though as my video is to large on the height. What is best way to edit video height because I want the width to remain full screen.

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

    Thank you for this. You're a gem. How to unmute the video? I need to play the video with sound.

  • @laurajones5282
    @laurajones5282 9 месяцев назад +2

    Hi! I loved the video but my Shopify doesn't have the "custom liquid" option is their an alternative way?

  • @user-yk8he4yc8z
    @user-yk8he4yc8z Год назад

    bro wtf, thank you so much! you save me like 5 hours lol

  • @davidijames_
    @davidijames_ 2 месяца назад

    That is great. Why when remove muted does it not play? I want my video to have sound, but not to Loop. I would also like to only have it play when the customer scrolls down the home page to that video section. In addition a custom image over the video would be a great option. Thanks for all your videos !

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

    Video was awesome and works! The only problem I am having is there is a large Margin at the top. I have this as a website welcome video and large white bar in between header and video. Any ideas how to shrink this unwanted space?

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

    Hi, Thank you for the video. I wanted to add a button for Shop now at the bottom of the video. How to do that?

  • @ABDNaturalsCanada-vi2vl
    @ABDNaturalsCanada-vi2vl 6 месяцев назад

    Thank you for the video! I tried your method it works on one video but if I add the second the first video shrinks and I can't make it any bigger. any idea why and how to fix it?

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

    Thank you so much I really appreciate this it was so helpful

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

    Hey brother thanks alot for the info, now i have a question, is it also possible to put a second video in the same 'banner / video'

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

    hey man great video! very well explained! I just had trouble with the video autoplaying on the mobile. For some reason it doesnt play.. I tried the ¨playsinline¨ code but still nothing.. do you think you could help me with that?

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

    Hi and thank for the explaination. My video is not added to my section, but remains stuck in the middle of my page... Do you have a solution to this problem? I also have no frame when I select custom liquid. Thanks

  • @user-nl9eu2cg4v
    @user-nl9eu2cg4v 9 месяцев назад

    Absolute legend! Thank you!!!

  • @MarielLorenzo-nb9wh
    @MarielLorenzo-nb9wh 3 месяца назад

    Thanks so much for the video, it was really helpful. I can't make my video to cover the entire space to the edges. Any tips on how to fix this? If I try to make it bigger like 120% or 150% the video goes to the right and it doesn't stay centred.

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

    thank you very much bro, what a legend!

  • @Sensei-jh8yn
    @Sensei-jh8yn 10 месяцев назад

    GENIOUS!!! Exactly what I needed! Is there a way to only show these videos on mobile and not desktop as well?

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

    Thank you for this tutorial!!

  • @bellawilliams245
    @bellawilliams245 Месяц назад

    You are the goat..thank youu so much for this but for some reason its plays fine on my PC but when i look at my site on my phone it still shows the play button...i followed the instructions and all..any help on this

  • @user-hz4lk4jw3j
    @user-hz4lk4jw3j 5 месяцев назад

    This is great! Thank you for the help!

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

    Thank you for the video and clear tutorial!
    How can I optimize my video width for mobile as well?

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

    Best tutorial ever thank you!

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

    Thank you very much Anas !

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

    This video was amazing;20/10!! If you don't mine me asking what measurements did you use for your video when designing?

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

    Very helpful video thank you so much!

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

    THANK YOU!
    Can I also get this video vertically for better view on mobile?

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

    Hi! I don't have a custom liquid option under "add section". Can you advise if there is another way to access this?

  • @bryanj.morales8935
    @bryanj.morales8935 3 месяца назад

    Hello my friend, I have a question. How would I edit the code to make the youtube video autoplay but hide the video completely? Because I just want the audio as background music. I am using the dawn theme. Plz help

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

    this is amazing, came in the right time, can i also ask please. if i want to do the same thing but with a Play button on the video, so it won't loop. would that be possible?

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

    Thank you very much bro ! You a genius fr

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

    Bro, you are amazing. Thank you so much.

  • @sophie-ek2zm
    @sophie-ek2zm Год назад

    you are amazing!!! Thank you from my heart!!!

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

    Thank you! Great videos

  • @arpitjain586
    @arpitjain586 6 месяцев назад

    It Actually Works thanks for the information. It's Really appreciated🤗🤗

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

      Glad i could help.
      Cheers

  • @bjsorensen
    @bjsorensen 4 месяца назад

    I've noticed that the video on mobile is great while the video on desktop is too tall to view. Is there any way to make that better? If I change the width to fit desktop well, the mobile version is tiny.

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

    I noticed the code showed the sound was muted, what code could I add to unmute the sound? would love to have the sound volume on. thank you

  • @thexwise
    @thexwise 11 месяцев назад +2

    Your videos help a lot ! How would I make the sound on my video play ?

  • @rahegas
    @rahegas 4 месяца назад

    Thanks a lot budy... You are a genius..

  • @AGorgeousBeauty
    @AGorgeousBeauty 9 месяцев назад

    Ok question does it matter what theme you have or the format of the video

  • @user-xf3fk3ct5n
    @user-xf3fk3ct5n 6 месяцев назад

    thanks for this perfect video! Is there any chance to unmute the video? When im deleting "Muted" from the code, the video gets paused..

  • @evayates3676
    @evayates3676 Месяц назад

    Super helpful video, thank you! Is there code I can add to round the corners (i use sense theme)?

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

    Thank you, great video, how do i add the sound? and 100% width takes 100% of the screen and not 100% of the width of the page like banner, product list, etc. Any idea how to fix it?

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

    such a easy video to follow very simple!! Thanks so much Sir

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

      You're very welcome, glad you think so and happy to help.
      Cheers

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

    Hi, do you have any idea how to get the video working with mobile as it's not showing up at all on phone?

  • @SabrinaKinz-lz4bq
    @SabrinaKinz-lz4bq 3 месяца назад

    Thank you Ernest for the great content it's so much helpful, can you help with this, i want the video to be 50% width but tho the side and the other 50% i want to write a text , is that possible ? Thanks

  • @devanshbuttan8526
    @devanshbuttan8526 Месяц назад

    Thanks a lot bro!!❤️

  • @lamonicapeterson4178
    @lamonicapeterson4178 9 месяцев назад

    Very helpful thank you!

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

    How can you put menu options over the video? Like Shop, About, Gallery etc..

  • @user-de9kr5wp5w
    @user-de9kr5wp5w 4 месяца назад

    Thank you so so much!

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

    Thank you bro short and good one !!

  • @shameccafreeman
    @shameccafreeman 6 месяцев назад

    So glad you showed this way. Thank you thank you thank you!!!

    • @OnHOWGuy
      @OnHOWGuy  6 месяцев назад

      You are so welcome and glad i could help.
      Cheers

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

    hello. I did everything you said. When i look at the video from my PC it autoplays but when I look it from my iPhone a play button shows up. What can I do? thank you

  • @jamesprice8220
    @jamesprice8220 4 месяца назад

    Great video thank you! It works fine on computer. However on mobile it still have play button. Can this be removed? Thank you!

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

    Thanks so much for the valuable info ❣❣❣

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

    Thank youuuu! How do you find a video for your product that you want to sell and put it on your banner? For your Shopify store?