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

[DavidBeuy]

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. 

[DanCodes]

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%;

}

[namphan · Accepted solution]

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%;
}

[DavidBeuy]

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

[namphan]

Hi @DavidBeuy,

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

[websensepro]

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 </head>

<style>
.product-gallery__media {
    height: 100%;
}
.product-gallery__media video-media {
    height: 100%;
    width: auto;
    max-width: 100%;
}
</style>

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

Thanks!

[magecomp]

Hello @DavidBeuy 

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

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