Dawn Theme - Custom HTML for Video Autoplay

Store Design

Topic summary

Goal: autoplay, muted, looped hero video on Dawn without “click to watch” or GIF limitations.

Solution adopted:

  • Use a Custom Liquid block (no theme file changes needed) and insert an HTML5
  • Key attributes: muted, autoplay, loop, playsinline (prevents iOS fullscreen), optional controls hidden.
  • Replace the with a direct video file URL (e.g., Shopify CDN mp4). Several users confirmed this works.

Implementation notes:

  • Custom Liquid functions like the older Custom HTML block and supports both HTML and Liquid.
  • YouTube or Google Drive links don’t work as a
  • Example shared CSS sets responsive widths (e.g., 50% desktop, 90% mobile).

Recent questions/issues:

  • File size limit: Shopify Files caps at 20MB; longer videos via Google Drive showed a black screen. No alternative hosting solution was resolved in-thread.
  • Dual videos (desktop landscape vs mobile square): mobile currently shows both; likely needs CSS/media queries to show/hide per breakpoint. No final fix posted.

Status: Core approach (Custom Liquid + HTML5 video) is resolved and working; hosting large files and mobile-only video display remain open.

Summarized with AI on December 14. AI used: gpt-5.
40

I have solved this by below code:

video { display: block; margin: 0 auto; width: 50%; } @media screen and (max-width: 800px) { video { width: 90%; } }

You can replace the video url with your own which is inside src=“”

Note: Above code is valid for both desktop & mobile view.

For reference you can follow this video: https://youtu.be/26FfKhWP4Ag

9 Likes