Video Thumbnail Scale Too Big

Hello @kreish29 ,
please add this code under?functions.php?file locates in your child theme:

// change woocommerce thumbnail image size
add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'override_woocommerce_image_size_gallery_thumbnail' );
function override_woocommerce_image_size_gallery_thumbnail( $size ) {
    // Gallery thumbnails: proportional, max width 200px
    return array(
        'width'  => 150, //width of thumbnail
        'height' => 60,  //height of thumbnail
        'crop'   => 1,
    );
}

How to change image size you can find in this page.

https://woocommerce.com/document/image-sizes-theme-developers/

Thanks for the reply! Will this code affect all images or just the video images?

Thank you!

I implemented that and it made the thumbnails smaller and actually cut them off more (more of a horizontal aspect ratio). It also didn’t change how much of the thumbnail or the main image showed for the video thumbnail.

I went ahead and purchased the premium version because even if we can’t get this resolved I think it will be good enough. I would love to be able to show the full YouTube video thumbnail without it being cut off and without impacting my other images in both the thumbnail preview section below the main image on the product page, and the main product image.

Apologize,

I’m not available this week because I’m out of town for a family function.

I’ll back with solution of this issue.?

Thank you. 

As I continue to tinker I am finding that as I add additional videos the thumbnails are getting messed up. I am seeing two patterns. 1. When I add a new YouTube video (and it appears to be ones that have the YouTube selected thumbnail) the thumbnail pic below the mail product picture is “blank” when when you move the slider to it, it shows the proper image in the main product image.

2. When adding and deleting videos (because I was trying to get rid of the blank thumbnails, the thumbnail displayed is one that corresponded to a DIFFERENT video that was previously uploaded.

All of this is when the “Use Custom Thumbnail” is unchecked. When I check the “Use Custom Thumbnail” for pattern 1, it shows a blank image and for Pattern 2, it shows the thumbnail associated with the different video.

So my current theory is that it is having trouble getting thumbnails from YouTube for videos that don’t have a custom thumbnail selected AND that when you have selected “Use Custom Thumbnail” it is “Holding Onto” the thumbnail that was previously selecting for the video that was “In that slot” before. So if I had Video 2 in Slot 2, then I deleted Video 2 from Slot to and added video 3 into Slot 2, it is still using Video 2’s Thumbnail.

I currently have it “Tricked” into looking okay. You can see what I am talking about by going here: https://rjdunkin.com/product/struttn-360-motion-decoy-base/

The first video thumbnail was incorrect and was showing the thumbnail that is actually associate to this video: https://youtu.be/p2Whsh_R7nI

I corrected it by selecting “Use Custom Thumbnail” and luckily had the “correct” thumbnail already in my media library.

The third video is (Shows “Bring Turkeys to You!”) is actually a thumbnail that is associate to a different video. The video that is actually linked to is this one: https://youtu.be/hIsDDPrJIF0 and the thumbnail shown is from this one: https://youtu.be/7YRCjfpTPQ0

When I originally added this link: https://youtu.be/hIsDDPrJIF0 the thumb nail displayed as “missing”. I didn’t have the proper thumb nail in my media library so I couldn’t fix it the same way I fixed the first, so what I did was I added this video in the third slot: https://youtu.be/7YRCjfpTPQ0 saved the product, confirmed the thumb nail was no longer blank, and then went back in and added the link I wanted it to be which was: https://youtu.be/hIsDDPrJIF0 and I took advantage of the bug where it “holds onto” the thumbnail that was previously in that slot.

Just wanted you to have that additional context because if you went to the site it will “Look fine” but when you dig under the covers, what I just laid it is “Why” it looks fine.

Continuing to iterate and experiment…I put one of the thumbnails in Photoshop so that I could take the horizontal aspect ratio and put it into a square 500×500 to make sure it would fit into the thumbnail. It did make the image fit in the thumbnail view (below the product), but the picture shown when they swipe, or click on that thumbnail to the actual video it still zooms WAY in on the video thumbnail. If there was ONE thing I would want fixed it would be that the main image when the video is selected showed the whole video thumbnail.

See the second video on this product as the example where I did this: https://rjdunkin.com/product/struttn-ridge-single-reed-turkey-mouth-call/

• This reply was modified 2 years, 1 month ago by kreish29.

Hello,

Can you please remove the current plugin and download new zip from here and check it is working well on your site? I’ll release a new update if it is working well on your site. 

https://www.dropbox.com/s/mto0uk4ssl7jrz3/product-video-gallery-slider-for-woocommerce.zip?dl=1

Thank You.

I will give this a try tonight or tomorrow night. Sorry, didn’t see that you had responded!

This solved the thumb nail issue! Thanks so much. The only thing that is left is when I click on one of the thumb nails and it becomes the “Main Image” in the slider, it is still cutting off the thumbnail. Would it be possible to apply a similar fix for when the thumbnail is selected so they can see the full image on the main image? Here is an example: https://rjdunkin.com/product/struttn-360-beginner-value-pack/

Click on the second video, the one that says “Everything You Need to Know” and then seen how it cuts off the thumbnail when it becomes the main image.

I am giving you a 5 star review regardless, but if you could also fix that I would say this 100% meets my needs.

Thanks again!

Hello @kreish29 ,

Please add following CSS in your site.

You can adjust height of video using this CSS.

iframe.product_video_iframe {
    height: 100% !important;
    min-height: 400px;
}

Much better on Desktop, it doesn’t seem to impact mobile though. Any suggestions on how to adjust mobile/tablet specific?

I attempted this, but that seems to have shrunk it too much and still seems to be the same for all devices.

iframe.product_video_iframe {
height: 100% !important; @media (min-width:480px)
min-height: 600px;
@media (min-width:600px)
min-height: 350px;
@media (min-width:801px)
min-height: 350px;
@media (min-width:1025px)
min-height: 350px;
@media (min-width:1281px)
min-height: 600px;
}