How to make My Youtube link Match what my Cover Image size

Store Design
, ,

Topic summary

Issue: A user wants YouTube videos on their product page to display as 1000x1000 squares matching their cover images, instead of the default 16:9 ratio with black borders. They’re using the Warehouse theme and uploading videos via the product media URL feature.

Key Points:

  • Videos are shot in square format, but YouTube adds padding/black borders when embedded
  • The user cannot access iframe code directly since videos are uploaded through Shopify’s media interface, not manually embedded
  • One responder suggested the spacing might be in the original video file itself

Solution: A CSS code snippet was provided to force square aspect ratio:

.product-gallery__external-video .video-wrapper {
    height: 0;
    padding-bottom: 100%;
}

This code should be added to the theme.css file via Actions > Edit code > Assets.

Outcome: The solution worked successfully for the original poster. The discussion is resolved.

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

Hello, @DavidBeuy

I understand you want to embed YouTube videos on your product page and have them match the size of your cover image (1000x1000 pixels) without the black borders. Here’s how you can achieve this using HTML and CSS:

HTML Code
First, ensure your YouTube video embed code is set to match the dimensions of your cover image:

CSS Code
Next, add some CSS to remove the black borders and ensure the video fills the entire container:

iframe {
width: 100%;
height: 100%;
border: none;
}

Full Example
Here’s how you can integrate this into your Wix Studio Editor:

Add the HTML Code: Insert the iframe code into your product page where you want the video to appear.

Add the CSS Code: Add the CSS code to your theme’s stylesheet or use the custom CSS section in Wix Studio Editor.

Additional Tips
Responsive Design: If you want the video to be responsive, you can use percentages instead of fixed pixel values for width and height.

Testing: Always test the changes on different devices and browsers to ensure the video displays correctly.

I hope this info is helpful to you.

Best Regard,
Jennifer Anderson