How can I center align a non-Youtube video on a webpage?

Store Design
, ,

Topic summary

A user needed help centering a non-YouTube video on their homepage. The video was in portrait mode and sized to 50% width, but remained left-aligned.

Initial attempts:

  • First solution added margin: 0 auto to the CSS, but this made the video too large and didn’t center it
  • User clarified they wanted the video at half-width (not full-width) and centered, since it’s a vertical video

Resolution:

  • The helper requested access to the live site to troubleshoot
  • After examining the page, a custom CSS solution was provided to be added before the </head> tag in the theme.liquid file
  • The solution successfully centered the video at the desired width

Technical note: The user encountered an “Invalid custom CSS: Certain At-rules are not supported” error when trying to add CSS through the section’s Custom CSS field, which is why the code needed to be added directly to the theme file instead.

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

Hi @imexmodelco2

You can try to update your code to this and check if it works


{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
.section-homepage-video{
width:100%;
}
.video-homepage{
width: 50%;
height: auto;
margin: 0 auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}