Video on DAWN Theme

Store Design

Topic summary

A user wants to add an auto-looping background video to their Dawn theme homepage without visible playback controls (play button, time bar).

Problem: Standard video uploads display controls and don’t auto-loop.

Solutions provided:

  • Multiple developers shared similar HTML/CSS code snippets using <video> tags with attributes: autoplay, muted, loop, and playsinline to create a seamless looping video

  • Implementation steps:

    1. Navigate to theme code editor (Sections folder)
    2. Insert the video HTML code in desired section (e.g., hero.liquid)
    3. Upload video file to Assets folder
    4. Add CSS styling to base.css for proper sizing and display

  • Alternative suggestion: Use Custom Liquid section in theme customizer for easier implementation

Status: Multiple working solutions offered with code examples. One developer requested collaborator access to implement directly. Discussion remains open for user to test solutions.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I really want to add a video onto my homepage on my website, but there is a play button and the time bar at the bottom of the video when i try to put it up on the site. Is there a way for the video to just upload as a loop that doesn’t have to be played ever, and is just constantly looping on my homepage?

my website is creativeblueprintbrand.com. The video is not up right now, but any help on this would be great!

1 Like
2

Hi @creativebp8

In your theme (likely Craft or whichever section you’re editing), add this snippet where you want the video:

<video 
  autoplay 
  muted 
  loop 
  playsinline 
  preload="auto" 
  class="homepage-video">
  <source src="{{ 'your-video.mp4' | file_url }}" type="video/mp4">
  Your browser does not support the video tag.
</video>

Please send me the collaborator code. I will send you a store access request and give you a proper update.

3

no it is the Dawn theme

1 Like
4

Hi @creativebp8 ,
Go to Online Store → Themes → Actions → Edit code → Sections → hero.liquid
or any other section where you want video to apear.
add this code

<div class="homepage-video-wrapper">
  <video autoplay muted loop playsinline class="homepage-video">
    <source src="{{ 'your-video.mp4' | asset_url }}" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

then go to Online Store → Themes → Actions → Edit code → Assets
upload your video ( ‘your-video.mp4’) there.
find base.css and add this at the bottom

.homepage-video-wrapper {
  position: relative;
  width: 100%;
  height: 500px; /* adjust height as needed */
  overflow: hidden;
}

.homepage-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keeps aspect ratio and covers area */
  display: block;
}

Save and refresh preview.

Best
Anmol

5

Hi @creativebp8

Could you share the code of video section?

6

@creativebp8 you can go to home page in customize settings, add custom liquid section and in that section can copy the code given by @devcoders or @anmolkumar

if you need any more help then I can do it for you