How can I center a video in Custom Liquid Dawn?

Technical Q&A

Topic summary

A user is attempting to center a video element in Shopify’s Dawn theme using Custom Liquid, but the video keeps shifting to the left despite being resized.

Technical Details:

  • The issue involves a <video> element with class “video-background”
  • Current CSS includes width set to 60% and other styling properties
  • The video source is hosted on Shopify’s CDN

Proposed Solutions:

  • One responder offered to help after reviewing the site URL
  • Another suggested changing code (specific solution appears corrupted/unreadable in the thread)
  • A third solution was confirmed working by another user specifically for Dawn theme version 10 when inserting custom liquid

Status: The discussion appears resolved, with at least one solution successfully centering the video, though the exact CSS/markup fix is not clearly visible in the thread text.

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

I have resized the video, but it shifts to the left. I am trying to center the video. Custom Liquid is as follows:

.video-background { width: 60%; padding-top: 0px; opacity: 1.0; height: 100%; left: 0; top: 0; }
1 Like
2

@bennyccox

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi @bennyccox ,

Please change all code:

it will display fine

2 Likes
4

out of all the solutions, this is the only one that worked for me in dawn 10 when inserting custom liquid, thank you!