How can I add a mobile-friendly, looping banner video to my homepage?

Store Design

Topic summary

Goal: add a looping, mobile-friendly banner video at the top of a Shopify homepage.

Implemented solution (confirmed working by OP and others):

  • Upload an .mp4 to Shopify Admin > Settings > Files, copy its URL.
  • In Theme editor (Themes > Customize) add a “Custom liquid” section and paste HTML5 video code, replacing src with the file URL.

Key clarifications and constraints (mobile/browser behavior):

  • Many browsers block autoplay, especially with audio; most iOS/Android devices don’t support autoplay and may show a play button instead.
  • On mobile, videos often take over fullscreen and can’t play “behind” other elements; text overlays may be visible but not interactive over the video.
  • Making the video itself clickable or reliably overlaying clickable text/buttons is limited on mobile.

Open questions/requests (not fully resolved in-thread):

  • Adjusting banner height/thinner display.
  • Adding text/button overlays and making the video or overlay clickable.
  • Allowing sound (unmuted playback).
  • Adding multiple looping videos.
  • Restricting the section to homepage only (one user linked a complex workaround).

Notes: Screenshots and a code snippet are central; the exact code isn’t included here. Discussion remains open on customization details.

Summarized with AI on January 6. AI used: gpt-5.
5

Fantastic! works like a charm.

I also noticed that the play button pops up when you use this liquid on my phone. (not automatically looping).

Also, is there a way to make a looping video but with text box and button? (refer to photo).

Screen Shot 2022-04-02 at 10.34.45 am.png
Screen Shot 2022-04-02 at 10.34.45 am.png3584×1112 551 KB

webiste link www.aquald.com

Thanks!