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

Store Design
, ,
1

So for my product page I have a lot of Videos on YouTube that Id like to add for a sales tool. I can seem to figure out what code I need to target to take away the black border and have the YouTube video match the same size as my cover image. Is there anyone out that could help me out? The theme is Warehouse if that is helpful at all. And here is the link to the Product page so you can see what I’m talking about.

https://usamadefactory.com/products/thrasher-htr-composite-60-100lbs-6-1pc-mf

The Size of the Cover Image is 1000x1000 and I just want it to where you click the video instead of it being a 6x9 ratio I want it to be square with now black fill behind the video

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

3

I think this issue it involve to how to you make video, you are make too much spacing both sides video.

DitalTek_0-1734691598785.png
DitalTek_0-1734691598785.png1840×1066 195 KB

4

Hi Jennifer, thanks for the reply. So Im not sure if it is embedded or not. I Uploaded the video through the Upload URL on the Media area on the Product Page where you can edit all the details of that product. So I don’t know if it uses iFrame tag. I just cant seem to find the right code to target that video to remove the black boarder spacing.

5

Ah the videos are shot in Square frame so that padding or white area is something that Youtube adds on. I want to remove that somehow

6

Hi @DavidBeuy ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

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

Hi @DavidBeuy

The configuration for the YouTube video is set to have a width greater than its height.
Even though the video inside has a 1:1 aspect ratio, it will still be displayed with a 16:9 aspect ratio.
In this case, the video’s width will be full-width, while the height will adjust automatically. It cannot have a fixed height as mentioned, because it will change depending on the screen size.

I hope this helps

Best,

Daisy

8

Works fantastic! Thank you @namphan

1 Like
9

Hi @DavidBeuy ,

You’re welcome and happy to help you :blush: