Adjust Product Video Container in Dawn Theme

[Roxolot]

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:

[DaisyVo]

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