Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Embeded video FOUC

  • Hi,

    I have two online shops running woocommerce, both with generatepress and WPRocket and cloudflare. I recently activated the plugin “Product Video Gallery for Woocommerce” to both sites.

    I initially had problems on both sites with some spacing (between photo and text) and also that the product thumbnails would flash a full sizes video image (when there was a video link attached) or a full sized image of the the first thumbnail (when there was no video attached)
    I talked to the developer and he gave me some CSS to fix the spacing (which worked) and a second for the thumbnails (below)

    .images.nickx_product_images_with_video.loading {
    max-height: 455px !important;
    overflow: hidden !important;

    This seemed to fix the thumbnail issue on one of the sites –
    but not the second –

    This is a link to a product with a video attached –

    WP rocket has the same settings on both sites. I’ve also disabled wprocket and gone through the other plugins that I think could affect it but can’t find a solution,

    Any ideas?
    Thanks in advance

  • Hi Aaron,

    For reference, can you share a link to a Product page at that has a video? I’ll see how the code runs and assess how to apply it to your second site.

  • I see. That’s weird, you’re CSS doesn’t seem to do anything on that page.

    In any case, can you try adding this CSS for the second site?:

    .single-product square-placement {
        min-height: 38px;

    Then, enable WP Rocket and defer Render Block scripts.

  • Hi
    Done, just to double check in Rocket I’ve ticked “Load Javascript Deferred”

  • Where did you add the CSS I provided? I’m not seeing it on the site.

  • Hey,
    I added this through the front end – Customize then Additional CSS

    site – A Carved Piece right?

  • Yes, that’s the site I’m looking at but the CSS is not showing.

    I can see it though if I view the site with ?wprocket=1.

    Have you tried using a CDN to serve your site’s resources faster? Helpful link:

  • ah,

    Could another setting be blocking it?

    I’ve taken it out of additional css and put it into plugin called simple custom css

    Can you see it now?

    I already use cloudflare


  • Let’s try to address to loading speed of your site’s resources. You can remove the CSS I provided. It may be irrelevant.

    Have you tried using a CDN to serve your site’s resources faster? Helpful link:

  • ok cool,
    I already use a cloudflare CDN

    Is it working properly?


  • It seems to be working fine but something seems to be render blocking. Are aaronbrownsculpture and acarvedpiece both hosted on the same server?

    What optimization plugins are you using for both? Can you check if they have the same settings?

  • They are both on the same server,

    I’ll see if I can find anything,

  • Yes. Checking would be good.

    It seems it may have something to do with the loading time of resources as opposed to this CSS of yours not working:

    .images.nickx_product_images_with_video.loading {
    max-height: 455px !important;
    overflow: hidden !important;

    But, you can also try removing this CSS for your first site to test if it’s really the one fixing the issue.

  • All I have is wp rocket and lazy load (by wprocket)
    The same settings on both sites.

    Would it help if I gave you some temp login details?

  • “But, you can also try removing this CSS for your first site to test if it’s really the one fixing the issue.”

    ok will do

Viewing 16 posts - 1 through 16 (of 32 total)
  • You must be logged in to reply to this topic.