Embedded media showing blank

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

Start by reproducing the blank SoundCloud, YouTube, and Vimeo embeds with BackstopJS v6.3.3, Node 16.13.1, and the supplied lazy-loading page. Compare headless and headed captures while checking whether the existing scroll script, delays, selectors, or ready events affect the result; done when embedded media renders in screenshots or the limitation is documented.

Written by the indexing model from the issue text.