Adjust Product Video Container in Dawn Theme

Store Design
, ,

Topic summary

A user wants to resize product video containers in the Dawn theme to match product image dimensions, with white borders appearing at the top and bottom of videos.

Current Issue:

  • Product images display in a square container
  • Videos appear in a significantly different format/aspect ratio
  • The inconsistency creates visual misalignment on product pages

Proposed Solution:
A community member provided CSS customization steps:

  • Navigate to Online Store > Themes > Edit code
  • Locate and open the theme.css or theme.scss.liquid file
  • Add custom CSS targeting .video-container with properties including:
    • width: 100% to match product image width
    • max-width set to product image dimensions
    • padding-top and padding-bottom (10px) for white borders
    • background-color: white
    • height: auto for proportional scaling

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

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

I would like to enlarge the container of the video so that it has the same dimensions as the product images and there is simply a white border at the top and bottom of the video. Is there a way I can customize this?

The two images show a photo with the square container and the video which has a significantly different format:

Product_Video_Container.png
Product_Video_Container.png1117×752 263 KB

Product_Image_Container.png
Product_Image_Container.png1022×758 233 KB

2

Hi @Roxolot

To adjust the video container to match the product image size, you can use custom CSS in Shopify:

  1. Go to Online Store > Themes in your Shopify admin, and click Edit code.
  2. Open the theme.css or theme.scss.liquid file.
  3. Add this CSS to resize the video container and center it with white borders:

.video-container {

width: 100%; /* Match product image width */

height: auto; /* Adjust height proportionally */

max-width: [product image width]; /* Replace with the actual width */

padding-top: 10px; /* Adjust for white border */

padding-bottom: 10px;

background-color: white;

}

  1. Save the changes and preview to ensure it aligns with the product image dimensions.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy