Embedded media showing blank

[GioAceto]

We have several types of media such as images, YouTube videos embeds, Vimeo, and SoundCloud embeds on our web pages. These are all being lazy loaded so they show up as blank. We are able to get the images to show with a custom onreadyScript that performs a scrolling of the entire page, however, the media embeds are still showing blank in the screenshots.

When we set the engineOptions > headless to false in the backstop.json file, we can clearly see in the browser that our scroll script is working as expected and everything looks fine, however the screenshots don't reflect that.

We tried implementing delays, using ready selectors and ready events, and changing them from lazy load to eager load and none of those things worked.

Is this a known issue, and is there fix for this? Is it perhaps a security issue?

See image below. SoundCloud, YouTube, and Vimeo embeds are blank:

Using:
Node version 16.13.1
BackstopJS v6.3.3

[garris]

Maybe try a simple page with a single media tag -- all default loading, no added scrips.

Use a long delay to see if the media works in this simple context.

This is to rule out that the media can be captured in the first place.

[GioAceto]

We created a new test static html page in a new project with Node + Express. We tried testing the three iframe embeds from SoundCloud, YouTube, and Vimeo with a long delay. Only the SoundCloud embed would load and YouTube and Vimeo are still showing up blank in the screenshots. That's about as bare-bones as we can get for testing.

Our actual site uses Wordpress, and the SoundCloud embed doesn't load at all despite working on the test HTML page. We also tried removing our custom script and increasing the delay.

Do you have any other suggestions for us to try?

Thanks

[garris]

Hmm. I am stumped, I'm sorry I can't help here. Please post again if you figure it out. Cheers!

[jose-oliveira]

I had a similar issue with lazy loaded images and to me the solution was to scroll to them (scrollToSelector).