Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Adjust Product Video Container in Dawn Theme

Adjust Product Video Container in Dawn Theme

Roxolot
Explorer
67 4 13

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.pngProduct_Image_Container.png

Reply 1 (1)

DaisyVo
Shopify Partner
903 113 130

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution