Change product page video size on desktop

[Daniel19901]

Hi community, the product images on the product page are just fine, but the videos look huge on desktop. Can anyone help reducing their size for desktop ?

https://www.elegancebyselin.com/products/alice-earrings

Password: daumas

[LizHoang · Accepted solution]

Hi @Daniel19901,

Thank you for your question. After taking a look at your store, you can try to add the following code to your Custom CSS inside your Theme Editor to reduce the video size on desktop view:

.plyr video, .plyr audio, .product__grid--slides .flickity-viewport {
    height: 500px !important;
}
And you should get the result as the image below:

If the method above didn't work, you can add the code directly to the Theme CSS, you also change the px number to adjust the size of video as you prefer.

I hope my answer is helpful!

Best,
Liz.

[LizHoang]

Hi again @Daniel19901,

After checking one more time, I highly recommend you replace the previous code I shared above with this new code:
@media only screen and (min-width: 768px) {
.plyr video, .plyr audio, .product__grid--slides .flickity-viewport {
    height: 500px !important;
}
}
This new set of code still works fine for desktops but it will also ensure the video on the mobile view won't be accidentally extended.

Best,
Liz.