how to center video with custom css and load muted

Store Design
,

Topic summary

A user needs help centering a video element on their site and making it load muted by default.

Solutions Provided:

  • Muting: Add the muted attribute directly to the <video> tag (confirmed working by original poster)
  • Centering: Apply CSS to the container div:
    • text-align: center; on the container
    • margin: 0 auto; on the video element

Current Status:
The muting solution has been successfully implemented. However, the user is unclear about how to integrate the centering CSS with their existing inline video code. The helper has requested the store URL to provide more specific guidance on implementing the centering solution.

Outstanding Issue:
The discussion remains open as the centering implementation needs clarification—specifically how to apply the container div CSS to the existing HTML structure.

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

can anyone tell me how to center a video I have on my site with custom css. it is currently aligning to the left of the screen.

Also, is there a way to load it muted?

2

Hi, @Kari_M

You need to change the css of the container div.

.container-div {
  text-align: center;
}
video{
  margin: 0 auto;
}

For loading it muted, you should add the muted attribute for the video, like this.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
3

the muted code worked, thank you!

but how would you integrate this code?

.container-div { text-align: center; } video{ margin: 0 auto; }

into this?

4

Can you share your store url?