fbpx
Want To Add Extra Images Per Product Variation? Download This Free Plugin

Vimeo video only shows in gallery if browser cache is cleared

Laura Wattie

Hi, When we add a video to an image in our simple product the video only shows if:

A: the user has never been on that product page before

B: if the browser cache is cleared.

Example product this is happening on: https://la-bek.com.au/product/antique-rose/

Hakik Zaman

Hi Laura,

Thank you for reaching out to us. Please kindly do a plugin compatibility check by doing these steps to identify the error :

=> Deactivate all of your additional plugins except WooCommerce and Additional Variation Images Gallery Plugin.

=> See if the problem persists.

=> If the problem is resolved, you can tell which plugin might be the culprit of this error by activating your additional plugins one by one.

Looking forward to hearing from you soon.

Thank you

Laura Wattie

Hi there, the problem persists even after deactivating all but woo and additional variations.

Hakik Zaman

Hi Laura,

It’s a staging site, please login here and set up your theme. And try to reproduce your issue here for one product.

https://wptestbox.com/167535/wp-admin/

Username: admin

Password: demo

After reproducing the issue, please inform me here.

Thank You

Hakik Zaman

Hi Laura,

Thanks for reproducing the issue.

It seems like it is an issue with the Divi Theme CSS.

I have added the following CSS here on the staging site:

.wvg-single-gallery-iframe-container iframe, .wvg-single-gallery-iframe-container object, .wvg-single-gallery-iframe-container embed, .wvg-single-gallery-iframe-container video, .wvg-single-gallery-video-container iframe, .wvg-single-gallery-video-container object, .wvg-single-gallery-video-container embed, .wvg-single-gallery-video-container video {
    position: relative !important;
}
.woo-variation-gallery .fluid-width-video-wrapper{
padding: 0 !important;
}

Please check this product now- https://wptestbox.com/167535/product/beanie-with-logo/

Hope to hear from you soon.

Thank You

Laura Wattie

Hi, I was hoping for some more help with this issue, I find that with the supplied CSS the video displays with a black padding area on top, if I add code to make this padding 0 all my other videos in video modules on other pages disappear.

example product: https://la-bek.com.au/product/baby-pink/

Hakik Zaman

Hi Laura,

It seems like you haven’t applied the CSS we provided.

I couldn’t find the following part (previously given) on your site:

.woo-variation-gallery .fluid-width-video-wrapper{
padding: 0 !important;
}

Instead of the above CSS, I found the following:

.fluid-width-video-wrapper {
width: 100%;
position: relative;
padding: 0;
}

Please add the CSS properly.

Thank You

Laura Wattie

Hi, thanks for your reply, as i mentioned, I had to remove CSS provided as it made all of our other videos throughout the site disappear, you will see a screenshot from our homepage (https://la-bek.com.au/), the area to the left has a video but when the supplied code is added it disappears.

Hakik Zaman

Hi Laura,

Unfortunately, your screenshot was not attached properly.

I recommend https://snipboard.io/ for easily sharing screenshots – please follow the instructions on that page, then paste the screenshot’s sharable URL in this thread.

Please replace this 

.woo-variation-gallery .fluid-width-video-wrapper{
padding: 0 !important;
}

with

.woo-variation-gallery.single .fluid-width-video-wrapper{
padding: 0 !important;
}

Then try again and let me know whether it helps or not.

Hope to hear from you soon.

Thank You

Laura Wattie

Thank you, that updated code seems to have worked 🙂