Overlay (white or black) on top of looping video

Store Design
, , ,

Topic summary

A user is building a custom video section in Shopify that requires a looping video with a semi-transparent overlay (white or black) positioned beneath a logo. The challenge is layering the overlay between the video and logo so the logo remains fully visible.

Initial Setup:

  • Using Custom Liquid block
  • Video and logo elements already implemented
  • Struggling with CSS positioning/layering

Resolution:

  • After sharing a test page URL for review, the user found their own solution
  • Mentioned they “started again” and successfully implemented the overlay effect
  • Indicated they would share the working code for others needing similar functionality

Status: Resolved independently. The user appears ready to post their solution markup/code for community reference.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I want to integrate inside a “Custom Liquid” a video that runs in a loop, has a white or black overlay, and a logo on top. I have the video and logo part but I don’t know how to put a white or black overlay on top of the video but not on top of the logo.

Any ideas? This is my code as of now:

<video

src=“https://dji-official-fe.djicdn.com/reactor/assets/_next/static/videos/962a755d-6391-455b-8ae1-18df6725884f.mp4”

muted=“”
preload=“”
loop=“loop” autoplay=“autoplay” height=“auto”
width=“100%”>

Thanks.

2

give us the store URL then we will able to help you.

3

Got it, here’s the tests page: Tests

4

I’ve started again and managed to find a solution, for anyone that needs it, here’s the code: