What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

DavidBeuy
Excursionist
22 0 3

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. 

Accepted Solution (1)

namphan
Shopify Partner
2071 276 309

This is an 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%;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 6 (6)

DanCodes
Shopify Partner
54 9 6

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

}
If you'd like to support my work, you're welcome to treat me to a coffee here: Buy Me a Coffee
If you'd like to hire me, feel free to contact me: E-mail WhatsApp

namphan
Shopify Partner
2071 276 309

This is an 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%;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
DavidBeuy
Excursionist
22 0 3

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

 

namphan
Shopify Partner
2071 276 309

Hi @DavidBeuy,

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

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

websensepro
Shopify Partner
1290 145 166

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!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

magecomp
Shopify Partner
451 31 47

Hello @DavidBeuy 

 

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

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

Helping voluntarily. Please like and accept the solution if it helps. Thanks!
Our Bestseller Shopify Apps    |      Mobile App Builder by MageComp    |      Shoplock Hide Pages/Collections

Need a developer?  Just visit MageComp website