How to resixe YouTube link in Media Uploader from 16:9 Ratio to 9:16 Ratio

Store Design
, , ,
1

Hi so I’m having difficulty matching the ratio size from my video to the size of the dimensions of my product images. All the images are a 3:4 ration and I want the video to match when played. Is there something I can do in the CSS to fix this or do i need to get more into the code to fix it? Or is it just a YouTube thing and im out of luck?

Here is the site link to the product page Im talking about. If you scrub to the left on the 3rd img you’ll see the video and how its much smaller compared to the images.

https://talonrods.com/products/10-4c-10-40lbs-10ft

Thanks for any help. Part of my issue too is I don’t know how to word it in searches.

2

  1. Go to Online Store.

  2. Click Edit code.

  3. Find the Assets folder.

  4. Find the file theme.css.

  5. Add code below:

.product-gallery__media {

height: 100%;

}

video-media {

height: 100%;
max-width: 100%;

}
3

Hi @DavidBeuy ,

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

.product-gallery__media {
    height: 100%;
}
.product-gallery__media video-media {
    height: 100%;
    width: auto;
    max-width: 100%;
}
4

Hi @DavidBeuy ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

5

Hello @DavidBeuy

For video on product page, you should also try this free app

https://apps.shopify.com/vdo-product-video-feed

6

Thank you for the Help! That was exactly what I needed!

1 Like
7

Hi @DavidBeuy ,

If you have any questions, you can contact me directly.
Nice to meet you :blush: